ugrás a tartalomhoz

3 hasáb + float + clear:both probléma

Chaar-Lee · 2009. Jún. 15. (H), 13.02
Az oldalamon 3 hasábot használok az alábbi megoldással:
- a frame_body szélessége lehet változó
- a frame_body_left és frame_body_right mindig 200px és floatolva vannak
- a frame_body_center nem floatolt, de a margók beállításával középen helyezkedik el, szélessége lehet változó

A problémám az lenne, hogy vannak olyan esetek, amikor a középső részbe (frame_body_center) egy olyan div kerül, aminek be van állítva, hogy clear:both, de erre hatással lesz a frame_body_left (mondjuk elég sok tartalom van benne), egy hatalmas rés keletkezik a középső tartalomban. Hogyan lehetne ezt kiküszöbölni?
- az a megoldás nem jó, hogy a középső div is float left, mert akkor nem tudom a szélességét automatikusan változtatni.
  1. #frame_body {  
  2.     widthauto;  
  3.     displayblock;  
  4. }  
  5.   
  6. #frame_body_left {  
  7.     width200px;  
  8.     floatleft;  
  9. }  
  10.   
  11. #frame_body_center {  
  12.     margin2px 210px 2px 210px;  
  13.     displayblock;   
  14. }  
  15.   
  16. #frame_body_right {  
  17.     width200px;  
  18.     floatright;  
  19. }  
  20.   
  21. .closer {  
  22.     clearboth;  
  23. }  
  1. <div id="frame_body">  
  2.     <div id="frame_body_left"></div>  
  3.     <div id="frame_body_right"></div>  
  4.     <div id="frame_body_center"></div>  
  5.     <div class="closer"></div>  
  6. </div>  
 
1

CSS Layout

vbence · 2009. Jún. 15. (H), 13.30
Az gyakorlat az, hogy a tartalmat is floatoljuk. Ilyenkor az oldal tartalma nem fog kölcsönhatásba kerülni a többi floatolt sávval. Neked most a normál flowban van a tartalom, ez idézi elő az anomáliát.

Keresőbarátság szempontjából fontos lehet, hogy a forrásban ne a semmitmondó menü-hasábok legyenek a fájl elején, hanem amennyire csak tudod előre hozd a valódi tartalmat, tehát az első a frame_body_center kéne legyen.
2

abszolút pozícionálás

gex · 2009. Jún. 15. (H), 14.46
a bal és jobb hasábot abszolút pozícionálással rakd a bal felső meg a jobb felső sarokba. a középsőnek meg adj 200 pixeles margót a két szélén.
előnyök:
- nem zavar a clear
- a tartalmi rész lehet legelöl a forrásban ahogy bence is mondta
- nyúlhat a tartalom a böngésző szélességével

viszont kérdés hogy biztosan ennyire nyúlós elrendezést szeretnél-e. 1900x1200-as felbontásban hülyét kapnék egy 1500 pixel széles szöveg olvasásától.
3

fix szelesseg

Chaar-Lee · 2009. Jún. 22. (H), 12.08
altalaban fix szelesseget hasznalok, de neha kellhet mas is, es olyan altalanos oldal felepitest szeretnek ami ezt tudja.
amit javasoltal, annak van egy olyan problemaja, hogy ha az absolute-ra allitott divek magassaga nagyobb mint a center div-e, akkor bizony ra fog logni a tulnyulo div a footerre.

most azt a megoldast valasztottam atmenetileg, hogy mind a 3 floatolva van es a vegen van egy div amiben a style clear:both