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 :)
‹ Tartalmat tegyem előre, vagy a menüt? Iframe-ben lévő dokumentum elérése Firefoxban ›
 ■
1

Egyszerű

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

Megpróbálok gyorsan összedobni egy kódot:

...
<body>
 <div id="container">
  <div id="header">
   <h1>Minta Béla oldala</h1>
  </div>

  <div id="main">
   Ide a tartalom.
  </div>
  <div id="sidebox">
  </div>
 </div>
</body>
...


#sidebox
{
 position:absolute;
 top:60px;
 right:0px;

 width:180px;
}

#main
{
 margin-right:180px;
}
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:

#container {
	width: 100%;
	float: left;
	margin-right: -210px;
}
#content {
	margin-right: 210px;
}
#sidebar {
	width: 200px;
	float: right;
}
#footer {
	clear: both; 
}


<body>
<div id="container">
	<div id="content">
	</div>
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</body>
Köszönöm a segítséget!