Stejná výška sloupců CSS
Zdravím, jak jsme pročítal, tak stejnou výšku dvou sloupců pomocí CSS nelze.
Jak toto mám obejít. Všude se píše, že pomocí tabulek, ale nevím jak to implementovat.
CSS kód:
[CODE]
@charset "utf-8";
body, html {
font-family: verdana, arial, helvetica, sans-serif;
background-repeat: repeat;
background-attachment : fixed;
background-position : 0px 0px;
background-color: #5F5F5F;
margin: 0px;
padding: 0px 0;
text-align: center;
min-width: 1024px;
}
.zk {
width:900px;
height:auto;
}
.thrColHybHdr #container {
position: static;
top:0px;
background-repeat: repeat;
width: 900px;
height: auto;
margin: 10px auto;
border: 0px solid white;
padding: 0px;
text-align: left;
background-repeat: repeat-y;
background-attachment : fixed;
background-color:#FFFFFF;
}
.headerr {
background-image: url(pozadi/vrch.gif);
height: 160px;
}
.thrColHybHdr #header {
position:relative; top: 25px;
background-repeat: repeat;
width: 900px;
height: 140px;
margin: 0 auto;
border: 0px solid white;
padding: 0px;
text-align: left;
background-repeat: repeat-y;
background-attachment : fixed;
background-color:#FFFFFF;
}
.thrColHybHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.pruh{
height:0px;
background-color:#333333;
}
.pruh2{
background-image: url(pozadi/spodek.gif);
height:160px;
}
.pruhObsah{
background-image:url(pozadi/obsahvrch.gif);
height:5px;
}
.thrColHybHdr #sidebar1 {
float: left;
min-height:800px;
_height:800px;
width: 180px;
height:auto;
background-image: url(pozadi/menu.gif);
padding: 0px 0px;
}
.thrColHybHdr #sidebar1 p {
padding: 0px 10px;
color:white;
}
.thrColHybHdr #sidebar1 h3 {
padding: 0px 10px;
color:white;
}
.thrColHybHdr #mainContent {
margin: 0 1em 0 12em;
padding: 0 2em 0 2em;
min-height:600px;
_height:600px;
}
.thrColHybHdr #footer {
padding: 0 10px;
background:#DDDDDD;
}
.thrColHybHdr #footer p {
margin: 0;
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
[/CODE]
html kód:
[CODE]
****** **********="Content-Type" **********text/html; charset=utf-8" />
uvod
[/CODE]
Jak toto mám obejít. Všude se píše, že pomocí tabulek, ale nevím jak to implementovat.
CSS kód:
[CODE]
@charset "utf-8";
body, html {
font-family: verdana, arial, helvetica, sans-serif;
background-repeat: repeat;
background-attachment : fixed;
background-position : 0px 0px;
background-color: #5F5F5F;
margin: 0px;
padding: 0px 0;
text-align: center;
min-width: 1024px;
}
.zk {
width:900px;
height:auto;
}
.thrColHybHdr #container {
position: static;
top:0px;
background-repeat: repeat;
width: 900px;
height: auto;
margin: 10px auto;
border: 0px solid white;
padding: 0px;
text-align: left;
background-repeat: repeat-y;
background-attachment : fixed;
background-color:#FFFFFF;
}
.headerr {
background-image: url(pozadi/vrch.gif);
height: 160px;
}
.thrColHybHdr #header {
position:relative; top: 25px;
background-repeat: repeat;
width: 900px;
height: 140px;
margin: 0 auto;
border: 0px solid white;
padding: 0px;
text-align: left;
background-repeat: repeat-y;
background-attachment : fixed;
background-color:#FFFFFF;
}
.thrColHybHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.pruh{
height:0px;
background-color:#333333;
}
.pruh2{
background-image: url(pozadi/spodek.gif);
height:160px;
}
.pruhObsah{
background-image:url(pozadi/obsahvrch.gif);
height:5px;
}
.thrColHybHdr #sidebar1 {
float: left;
min-height:800px;
_height:800px;
width: 180px;
height:auto;
background-image: url(pozadi/menu.gif);
padding: 0px 0px;
}
.thrColHybHdr #sidebar1 p {
padding: 0px 10px;
color:white;
}
.thrColHybHdr #sidebar1 h3 {
padding: 0px 10px;
color:white;
}
.thrColHybHdr #mainContent {
margin: 0 1em 0 12em;
padding: 0 2em 0 2em;
min-height:600px;
_height:600px;
}
.thrColHybHdr #footer {
padding: 0 10px;
background:#DDDDDD;
}
.thrColHybHdr #footer p {
margin: 0;
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
[/CODE]
html kód:
[CODE]
****** **********="Content-Type" **********text/html; charset=utf-8" />
Header
Main ContentLorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. H2 level headingLorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.
|
[/CODE]
Toto ti nevyhovuje?
jestli ti jde jen o pozadí, udělej je pro oba sloupce součsně a dej nadřazenému, oba sloupce obalujícímu, prvku.
ale jestli nevíš, jak se dělá tabulka...
ale jestli nevíš, jak se dělá tabulka...
Tam to je na celé stránce, já bych to nebylo až ke konci té stránky...
A jak to udělat s tou tabulkou?
A jak to udělat s tou tabulkou?
[quote=koren3;382176]......já bych to nebylo až ke konci té stránky...[/quote]
:stupid tak tomu nerozumím :stupid
[quote=koren3;382176]A jak to udělat s tou tabulkou?[/quote]
No prostě tam vložíš dvě tabulky kterým napevno stanovíš jejich rozměr
:stupid tak tomu nerozumím :stupid
[quote=koren3;382176]A jak to udělat s tou tabulkou?[/quote]
No prostě tam vložíš dvě tabulky kterým napevno stanovíš jejich rozměr
Ajo, ale to přeci můžu udělat přímo v CSS stanovit pevně rozměr a bude to to samé... Ale já byc chtěl aby se to měnilo podle velikosti prostředního sloupce...
Tak to jsi na začátku nepsal. Takže budeš mí jednu stránku kde budeš měnit pouze text v prostředním sloupci. Nebo jak to chceš aby to bylo.
Popíš nám na tom obrázku, čo chceš urobiť vlastne a prečítaj si toto.
Tvoja stránka:
Tvoja stránka:
No já chci, aby byl levý sloupec stejně dlouhý jako pravý a hlavně aby měl svoje vlastní pozadí. Jak to mám teď já, tak pozadí levého sloupce zavisí na délce textu který je v tomto sloupce. A já potřebuji, aby se to řídilo podle pravého sloupce.
Myslíš telo stránky ? Main Content ? Trošku sa vyjadruj, pretože tam žiaden sloupec nevidím... Text vycentruj... a prečo chceš mať na pravo a na ľavo iné pozadie ? Obrázkové alebo len farba ?
Pořád nechápu, proč se snažíš vymyslet znova kolo, na netu máš odladěné řešení. Když ti nevyhovuje, tak si to uprav dle sebe.
The Perfect 3 Column Liquid Layout
Kompatibilita:
iPhone & iPod Touch - Safari
Mac - Safari, Firefox, Opera 9.25, Netscape 9.0.0.5 & 7.1
Windows - Firefox 1.5, 2 & 3, Safari, Opera 8.1 & 9, Google Chrome, Explorer 5.5, 6 & 7, Netscape 8
The Perfect 3 Column Liquid Layout
Kompatibilita:
iPhone & iPod Touch - Safari
Mac - Safari, Firefox, Opera 9.25, Netscape 9.0.0.5 & 7.1
Windows - Firefox 1.5, 2 & 3, Safari, Opera 8.1 & 9, Google Chrome, Explorer 5.5, 6 & 7, Netscape 8
Tak si to udělej pomocí tabulek Není přece nic jednoduššího. Každá tabulka bude mít svůj rozměr, pozadí, barvu a co já vím co všechno. A nic nemusíš vymýšlet.
[quote=athens;382286]Vždyť si to může nastylovat přes CSSto přece není problém :thumb[/quote]
No veď hovorím, ale preňho to problém je - cez DIVy by to snáď zvládol
No veď hovorím, ale preňho to problém je - cez DIVy by to snáď zvládol
JJ myslím Main Content. Obrázkové pozadí. A proč tak aby bylo menu nějak barevně odděleno od hlavní stránky...
toto jsme dělali ve škole(CSS). nevím jestli je to něco co si představuješ. Rozepiš se tedy pořádně (nazývej věci pravými jmény - ať to pochopíme) jak to chceš/představuješ.
Dvojsloupcový vycentrovaný layout se záhlavým i patičkou. Tonro layout bude odsazen od vrchu i od spodku stránky. Kde bude výška pravého sloupce má být stejně vysoká jako hlavního sloupce a bude mít jiné pozadí, které je obrázkové.
Jenom dva sloupce, hlavička s patičkou samostatně a výška levého sloupce se bude měnit s výškou prostředního.
Tady posílám jak by to mělo vypadat...
http://img41.imageshack.us/f/navrh.jpg/
http://img41.imageshack.us/f/navrh.jpg/
ÁÁÁha. Tak co tedy chceš. Aby ti někdo udělal předlohu :notsure Nechápu jednu věc. proč se bude levý sloupec přizpůsobovat tomu pravému. Nech ten levý aby byl napevno. Bude to vypadat i lépe.
Ne předlouho stačí aby upravil můj kód... A vypadalo líp? To bych neřekl tady posílám screen a to tam není obrázkové pozadí s kterým je to ještě horší...
http://img682.imageshack.us/i/divne.jpg/
http://img682.imageshack.us/i/divne.jpg/
