Autor Zpráva
KOM
Profil *
Ahoj. Mam vytvořeno zhruba toto - html:

<html>
<body>

<div id="main">
<div id="hlavicka-null">
<div id="hlavicka">
blabla
</div>
</div>
<hr />
<div id="obsah-null">
<div id="obsah">
blablabla
</div>
</div>
<hr />
<div id="menu-null">
<div id="menu">
nejake menu
</div>
</div>
<hr />
<div id="vpravo-null">
<div id="vpravo">
blablabla
</div>
</div>
<hr />
<div id="paticka-null">
<div id="paticka">
blabla
</div>
</div>
</div>

</body>
</html>

a css:

body {
text-align: center
}

hr {
display: none
}

#main {
width: 960px;
margin: 0 auto;
background: #14285F;
text-align: left
}

#hlavicka-null {
width: 100%;
padding: 0;
border: 0
}

#hlavicka {
border-bottom: 2px solid #CC3300;
background: #02021E;
height: 149px;
font: 28px georgia
}

#obsah-null {
width: 794px;
float: right;
padding: 0;
border: 0
}

#obsah {
font: 12px arial;
color: #99CCFF;
line-height: 1.5; /* Mezera mezi rádky */
background: #14285F;
padding: 10px 50px 20px 50px;
border: 1px solid red;
border-top-width: 0px;
border-bottom-width: 0px
}

#menu-null {
width: 166px;
height: auto;
float: left;
padding: 0;
border: 0
}

#menu {
background: #14285F;
padding-top: 20px
}

#vpravo-null {
width: 100px;
float: right;
padding: 0;
border: 0;
}

#vpravo {
padding: 10px;
background: red
}

#paticka-null {
clear: both;
width: 100%;
padding: 0;
border: 0
}

#paticka {
background: #14285F;
padding: 10px;
border-top: 1px solid #CC3300
}


Muze mi nejaka dobra duse poradit, jak ten cerveny sloupec dostat napravo a udelat z toho klasicky 3sloupcovy layout? Nejak se mi nedari....
Měsíček
Profil
Proč tak složitě zbytečně to stěžuješ udělej si normálně tak 5 divů a k čemu je ti položka null to moc nechápu až to správíš tak ti to řeknu takhle bych se v tom motal 10 minut .-)
KOM
Profil *
5 divu tam je, jen jsou jeste obaleny dalsima divama, nasel jsem to v jedne diskusi, doporucovali to takto. Nevim kde delam chybu, ze mi ten pravy sloupec nejde napozicovat doprava.

Umim udelat to, ze zrusim prostrednimu sloupci obtekani (float) a dam mu margin zleva i zprava tak siroky, aby se ony 2 sloupce vesly do vznikle "mezery". Bohuzel mi ovsem zustane prostredni sloupec prilipnuty k hlavicce (to chci), ale pravy i levy sloupec jsou az pod tim prostrednim sloupcem, nejsou vedle nej.

Poradi nekdo?
Měsíček
Profil
Zkus se podívat na google a tam si přeskoč na interval je tam několik ukázek třísloupcových layoutů a ty si překopíruj a dosaď tam svoje nastavení a podívej se kde je chyba.A zkus si udělat ještě jeden soubor a přehoď hodnoty v CSS to znamená vše co je v #---- null tak dej do #---- a null vymaž mělo by to pomoci když tam budeš dávat záložní divy tak se zbytečně v tom planceš a uděláš aji nepozorné chyby zkus to podle mě je záložní div hloupost .-)
Trejpa
Profil
KOM
Zkus něco funkčního a ověřeného - na webu je toho plno - stačí hledat:
http://www.positioniseverything.net/threecolbglong.html
http://www.positioniseverything.net/thr.col.stretch.html
seznam možností: http://css-discuss.incutio.com/?page=ThreeColumnLayouts

K tvému řešení: Vykresluje se to přesně tak, jak jsi zadal. U plovoucích prvků záleží také na jejich fyzickém pořadí v html kódu. Plovoucí prvek se totiž musí vykreslovat až ZA všemi neplovoucími, plavání přímo neovlivňuje vertikální pozici. Pokud jsi pomocí #obsah-null { float: right; } přirazil obsah doprava, tak nastavení #vpravo-null { float: right; } už tuto hodnotu nepřebije (nebude více vpravo) a začne se vykreslovat za tímto prvkem, v tomto případě počká na #menu-full a přirazí se pravým okrajem k nejbližšímu prvku - protože ještě vlevo od #obsah-null je místo, přirazí se k němu a paradoxně se pravý sloupec dostane pod levý. Pokud si přeješ mít html kód uspořádán jinak, než je postupné vykreslování na stránce, budeš muset použít position (pokud vše definuješ v pixelech, tak je to tady dobrá volba).

Mimochodem: 166 + 794 + 100 není 960, ale 1060 (ale problém to nevyřeší).

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: