rozlozenie stranky pomocou div

kurtica · Napísal **kurtica**: 02.01.2010 11:44

Ahojte, este len zacinam s tvorbou stranok a uz mam aj prvy problem, na ktory sa mi riesenie nepodarilo najst. Tak vas prosim o pomoc.

Ide o to, ze na stranke maju byt v strede 3 stlpce...vlavo menu, v strede obsah a vpravo nejake odkazy. Vysku toho menu ani obsahu neviem, cize sa ma prisposobovat. Ak pouzijem float:left, tak su sice vsetky tri divy vedla seba, ale div, ktory ich vsetky obsahuje a zaroven tvori aj pozadie, sa neprisposobi obsahu tych troch (obsah preteka). Ak pouzijem relativne poziciovanie, tak zasa neviem urcit vysku toho prveho a druheho a teda nemozem minusovo poziciovat tie dalsie dva. Absolutne poziciovanie tiez sposobi ze obsah preteka. Ako teda dosiahnut tie tri vedla seba, ak nechcem pouzit tabulku? S tabulkou to ide celkom pekne....

no a layout je asi takyto:

<div id="vrch">
menu
</div>

<div id="header">
header s nazvom stranky
</div>

<div id="strednacast">

<div id="vlavo">
lavy stlpec
</div>

<div id="obsah">
obsah
</div>

<div id="vpravo">
pravy stlpec
</div>

</div>

<div id="footer">
footer
</div>
</body>

shaggy · Napísal **shaggy**: 02.01.2010 11:57

Ten div, ktorý ich obaľuje sa im neprispôsobí, práve kvôli float-ovaniu. Stačí ti tesne pred ukončovaciu značku obaľovacieho divu dať nejaký tag, ktorý bude mať v štýloch clear: left, prípadne clear: both.

Ja používam niečo takéto (niektorí používajú tag hr, ale tam som mal problém s rozdielnym zobrazením v rôznych prehliadačoch):

do css:

Kód:

.cleaner {
   clear:both;
   height:1px;
   line-height: 1px;
   font-size: 1px;
   margin: 0;
   padding:0;
   visibility: hidden;
}

a tvoj kód bude vyzerať nasledovne:

Kód:

<div id="strednacast">

<div id="vlavo">
lavy stlpec
</div>

<div id="obsah">
obsah
</div>

<div id="vpravo">
pravy stlpec
</div>

<div class="cleaner"></div>

</div> 

+ nabudúce dávaj ukážky do code.

DARSON · Napísal **DARSON**: 02.01.2010 12:01

Ja by som to riesil nejak takto:

Nech sirka tych dvoch menu je napr. 200px... a sirka obsahu 700px...
Ten div stredna cast by som odstranil a do css daj toto:

Kód:

#obsah {
   padding-right: 200px;
   padding-left: 200px;
   width: 700px;
}

#lavy stlpec {
   width: 200px;
   float: left;
}

#pravy stlpec {
   width: 200px;
   float: right;
}

...a kebyze chces aby sa sirka obsahu prisposobovala rozliseniu, tak pouzi percenta (napr. 70%). No a posledna vec, ak chces aby bola cela stranka vycentrovana na stred, vytvor si tabulku s jednym stlpcom a jednym riadkom, tam vloz cely kod tych divov a tabulku zarovnaj na stred. (Je to naspolahlivejsie riesenie, pre kazdy prehliadac).

Kod:

Kód:

<table border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
.............
....
.............
    </td>
  </tr>
</table>

No a co si spominal to pozadie tak ho nastav ako pozadie tej tabulky...
To je moj nazor

GoodWill · Napísal **GoodWill**: 02.01.2010 12:03

utfg http://www.pixy.cz/blogg/clanky/css-3col-layout/

DARSON: ak by si cital poriadne, vsimol by si si ze on NECHCEL pouzit tabulku

don jebot · Napísal **don jebot**: 02.01.2010 12:05

Darson tabulky su na tabulkove data, neplet ho pouzivani zastaralich technik.
Tak ako napisal shaggy, pouzit cleaner a je po probleme ..

kurtica · Napísal autor témy **kurtica**: 02.01.2010 12:08

dakujem krasne, to s tym clean:both sme skusali, ale zjavne nespravne, teraz to uz funguje, dakujem krasne

misko16 · Napísal **misko16**: 21.12.2010 18:31

mam podobny problem. rozlozenie stranky potrebujem v podstate take iste ako --> http://www.pixy.cz/blogg/clanky/css-3col-layout/ . neviem, kde je problem, ale aj ked zdrojovy kod do pismena skopirujem a pustim si to u seba, nepredlzuju sa mi tie 3 stredne stlpce (lave, prave menu a obsah) v zavislosti na dlzke najdlhsieho stlpca - vzdy su dlhe podla ich obsahu. kde moze byt chyba ?

Ďuri · Napísal **Ďuri**: 21.12.2010 18:34

Ukaz.

misko16 · Napísal **misko16**: 21.12.2010 20:03

uz je vsetko OK, nevsimol som si poriadne, ako je to riesene .. myslel som si, ze vsetky tie 3 <DIV>y sa predlzuju navzajom v zavislosti od velkosti obsahu v najdlhsom. lenze oni vsetky 3 su v jednom vacsom <DIV>e, ktory sa vlastne zvacsuje a kopiruje pozadie do toho laveho a praveho menu a tym vyvolava dojem, ze sa zvacsuju priamo tie <DIV>y. ked som sa potom snazil menit pozadie, robilo mi to bordel --> http://img543.imageshack.us/img543/1875/56002447.jpg

rozlozenie stranky pomocou div

Podobné témy