HTML sidebar ir header atskirimas

Tinklapio struktūra pavaizduota paveikslėlyje, klausimas kaip įdėti sidebar, kad nereikėtų dalinti headerio į 3 dalis, gerai būtų kad header ir sidebar galima būtų patalpinti atskiruose failuose nes bus naudojamas wordpress.

 

Tinklapio struktūra pavaizduota paveikslėlyje, klausimas kaip įdėti sidebar, kad nereikėtų dalinti headerio į 3 dalis, gerai būtų kad header ir sidebar galima būtų patalpinti atskiruose failuose nes bus naudojamas wordpress.

Sveikas,

Sprendimas - pasidomėk position: relative, absolute.

<div style='height:100px'>headeris</div>
<div style='position:absolute; width:100px height:kazkiek px'>sidebar</div>

Tai jei naudosi wordPress, tai tau nieko dalinti nereikia. Tiesiog išsirenki temą pritaikyta WordPress ir viskas.

Pvz.:

http://wp-themes.com/wp-content/themes/pixiv-custom/screenshot.png

Čia tavo Header eina per visą plotį (arba pasirinktą plotį), tada po juo eina atskiras konteineris, kurio kairėje pusėje yra Sidebas ir šalia jo Main.

<div style='height:100px'>headeris</div>
<div style='position:absolute; width:100px height:kazkiek px'>sidebar</div>

Bet jeigu sidebar'ą pakelsiu į viršu su

top: -50px

tai nebus labai teisingai taip ?

Bet jeigu sidebar'ą pakelsiu į viršu su

top: -50px

tai nebus labai teisingai taip ?

Top - stumi nuo viršaus bloką.

Bottom - nuo apačios.

Šiuo atveju tau reikalingas bottom, nors galimas ir tavo variantas.

Top - stumi nuo viršaus bloką.

Bottom - nuo apačios.

 

Šiuo atveju tau reikalingas bottom, nors galimas ir tavo variantas.

Ok va pažiūrėk http://jsfiddle.net/PrbU9/3/ tarkim gerai ir su tuo

margin-top: -120px

bet kai dedu main (žalias) tai jis ant viršaus sidebaro užlenda reikia daryti

margin-left: kažkiek

, na žodžiu prasideda nesamonės.