ugrás a tartalomhoz

Két oszlopos elrendezés

karaj · 2006. Feb. 2. (Cs), 16.48
Sziasztok!

Sokáig próbálkoztam az alábbi elrendezést megvalósítani, mindeddig sikertelenül. Elolvastam néhány liquid rendezési tippet, de egyik sem segített megtalálni a megoldást. Először leírnám a feltételeket, amit el szeretnék érni:

- csak CSS, táblázat nélkül
- két oszlop kell, egy main és egy sidebox
- a main oszlop legyen bal oldalon, és változó szélességű
- a sidebox legyen jobb oldalon, és fix szélességű
- a HTML fájlban a main tartalom legyen elől, és a sidebox tartalma utána

A fenti elrendezést csak úgy sikerült eddig megcsinálni, ha a sidebox tartalma van elől, és a main tartalom hátul (ez pedig bezavar mobilos megjelenésnél, mert sokat kell görgetni a fő tartalomig). Ebben az esetben a sidebox volt float:right, de ha a sidebox a main után következik, akkor lecsúszik a main box alá (igaz ott végül valóban jobbra húzódik). Ha nem a sidebox a float, akkor pedig nem tudom megcsinálni a változó és fix szélességet.

Egy egyszerű példa a fenti feltételekkel sokat segítene. Nem vagyok CSS guru, úgyhogy ha triviális a megoldás, akkor elnézést kérek :)
 
1

Egyszerű

janoszen · 2006. Feb. 2. (Cs), 17.09
Üdv!

Megpróbálok gyorsan összedobni egy kódot:
  1. ...  
  2. <body>  
  3.  <div id="container">  
  4.   <div id="header">  
  5.    <h1>Minta Béla oldala</h1>  
  6.   </div>  
  7.   
  8.   <div id="main">  
  9.    Ide a tartalom.  
  10.   </div>  
  11.   <div id="sidebox">  
  12.   </div>  
  13.  </div>  
  14. </body>  
  15. ...  
  1. #sidebox  
  2. {  
  3.  position:absolute;  
  4.  top:60px;  
  5.  right:0px;  
  6.   
  7.  width:180px;  
  8. }  
  9.   
  10. #main  
  11. {  
  12.  margin-right:180px;  
  13. }  
Azt hiszem, így jónak kellene lennie. Próbáld ki.
2

Működik

karaj · 2006. Feb. 2. (Cs), 17.17
Köszönöm, ez teljesen jónak tűnik, ebből már el tudok indulni.
4

Vigyázz

janoszen · 2006. Feb. 2. (Cs), 21.36
Vigyázz, mert ha ez alá akarsz láblécet elhelyezni, akkor ez már nem lesz jó, mert a jobb oldali dolog a lábléc fölé fog lógni.
5

Észrevettem :(

karaj · 2006. Feb. 3. (P), 09.08
Tudtok erre valami megoldást?

A két oszlop egymáshoz viszonyított felső poziciója is eltér a különböző böngészőkben.

A konkrét példa pedig: http://magyaropera.blogspot.com
Ha csak egy cikk van kiválasztva, akkor a jobb oldali sávok lelógnak.
6

negativ margin

Jano · 2006. Feb. 3. (P), 12.07
Fogod a content es sidebar divet es float:left-et adsz nekik alapbol. Ezutan csinalni kell helyet a sidebarnak: a content-nek margin-right:-200px; Ekkor a sidebar mar egyvonalban van a tartalommal. Utolso lepeskent a tartalmat ki kell tolni alola:padding-right:200px;

Google-ben: friday challenge css
3

Ajánlom figyelmedbe

mefi · 2006. Feb. 2. (Cs), 19.28
Ha érdekel elolvashatod ezt is: http://mefi.be/index.php?i=207

üdv:
mefi
http://mefi.be
7

Megoldás

karaj · 2006. Feb. 3. (P), 17.28
Jano segítsége alapján sikerült megoldani a problémát minden szempontból. A megoldás alapja így néz ki:
  1. #container {  
  2.     width100%;  
  3.     floatleft;  
  4.     margin-right-210px;  
  5. }  
  6. #content {  
  7.     margin-right210px;  
  8. }  
  9. #sidebar {  
  10.     width200px;  
  11.     floatright;  
  12. }  
  13. #footer {  
  14.     clearboth;   
  15. }  
  1. <body>  
  2. <div id="container">  
  3.     <div id="content">  
  4.     </div>  
  5. </div>  
  6. <div id="sidebar">  
  7. </div>  
  8. <div id="footer">  
  9. </div>  
  10. </body>  
Köszönöm a segítséget!