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 :)

■

HTML, CSS, JavaScript, Ajax

csirip

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>
...


...
<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;
}


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

 width:180px;
}

#main
{
 margin-right:180px;
}

Azt hiszem, így jónak kellene lennie. Próbáld ki.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

É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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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;
}


#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>


<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!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés