ugrás a tartalomhoz

3 oszlopos oldal táblázat nélkül!

Anonymous · 2006. Május. 12. (P), 13.43
Az a kérdésem, hogyan lehet táblázat nélkül egy 3 hasábos, és középre igazított oldalt készíteni. Lásd pl. weblabor.hu főoldala. Csináltam egy az oldal közepére igazított div-et, és azon belül 3 (bal, jobb, középső)div-et. De ezeket, hogy tudom a nagy div-en belül balra, középre, jobbra igazítani. Vagy rosszul kezdtem el az egészet?
János
‹ azonositas v hozzáférés? Űrlap küldés kép submit gombbal ›
 ■
1

van egy pár

Anonymous · 2006. Május. 12. (P), 14.35
itt egy gyűjtemény, sokat lehet tanulni belőlük.

gex
2

float

Jano · 2006. Május. 12. (P), 15.19
Sokszor előforduló probléma, olvass vissza. De röviden: ha fix szélesek az oszlopok akkor legegyszerűbb megadni nekik a szélességet és float:left; Az "ugyanolyan" magasak legyenek problémára már tényleg néz vissza fórumban.
3

ellenőrzés

Anonymous · 2006. Május. 16. (K), 09.54
Sziasztok!

Sok anyagot átnéztem, kísérleteztem is eleget, de nem jöttem rá a megoldásra
Az a baj, hogy ami jó IE alatt az nem jó firefoxban. Operát meg sem merem próbálni. Az alábbi kódot ha valaki megnézné megköszönném. IE-vel jó, FF ill. Mozillával nem jó. Kilóg a két oszlop a befoglaló div-ből. Középre igazított oldalt szeretnék csinálni 2-3 oszloppal.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>CSS Centering: Auto-width Margins</title>
<style type="text/css">

body {
margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}

#Content {
width:700px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:left; /* Counteract to IE5/Win Hack */
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
div {border: 1px dotted red; margin: -1px;}
</style>
</head>

<body>

<div id="Content">
<div style="width:150px; padding:3px; float:left; display: inline;">bal oldal</div>
<div style="width:500px; padding:3px; float:right; display: inline; border-left:1px solid red;">
jobb oldal Hi. This is the qmail-send program at freemail.hu.
I'm afraid I wasn't able to deliver your message to the following addresses.
This is a permanent error; I've given up. Sorry it didn't work out. </div>
</div>


</body>
</html>
4

float

Anonymous · 2006. Május. 16. (K), 10.27
elég - sőt, nagyon - sokszor jött már elő ez a téma itt weblaboron. a két belső div float-tal van pozícionálva, viszont a szabvány szerint a float-olt elemek nem befolyásolják a szülő elem magasságát.

egy megoldás:
a stílusdefiníciók közé a Content azonosítójú elemhez írj egy overflow: auto-t, a két belső div pedig ne balra illetve jobbra legyen float-olva, hanem mindkettő egy irányba, balra:

#Content {
...
overflow: auto;
}


<div style="width:150px; padding:3px; float:left; display: inline;">...</div>
<div style="width:500px; padding:3px; float:left; display: inline; border-left:1px solid red;">...</div>
aztán még kicsit játssz a margókkal és kész is vagy.

gex
5

Persze...

janoszen · 2006. Május. 16. (K), 10.28
Persze, hogy kilóg, mert a float:nak a specifikáció szerint ki kell lógnia. Csak az IE a bugos. Megoldás:

html>body #Content
{
 overflow:auto;
}
Nem szép, mert a selector az hack, de működik, ha minden igaz.
6

footert neki

toxin · 2006. Május. 16. (K), 11.01
általában úgyis kell footer szvsz, float-ot meg 1irányba, 
<div id="Content">
<div style="width:150px; padding:3px; float:left;margin-right:37px; ">bal oldal</div>
<div style="width:500px; padding:3px; float:left; border-left:1px solid red;">
jobb oldal Hi. This is the qmail-send program at freemail.hu.
I'm afraid I wasn't able to deliver your message to the following addresses.
This is a permanent error; I've given up. Sorry it didn't work out. </div>
<div style="clear:both;">&nbsp;</div>
</div>
oszt sanyi :)

egyforma oszlopmagasságnak meg gugliba : 'faux columns'
8

FF oszlopokkal

Anonymous · 2006. Május. 26. (P), 11.23
FF-n a float-tal illesztett div-ek nem számítanak a hosszba.

Vagy:

1. adsz a Content-nek egy magasságot (honnan tudnád, milyen hosszú lesz?)
2. vagy biztosítod, hogy a Content tartalma hosszabb legyen mindig a tartalmazott div-ek tartalmánál
3. vagy adsz a Content-nek egy overflow:hidden-t
7

van ilyen cikk is

a.d.a.m · 2006. Május. 16. (K), 17.00
Itt találsz egy cikket a témában.