ugrás a tartalomhoz

3 oszlop százalékos megadással

jeti · 2006. Május. 26. (P), 12.16
Sziasztok!

A következő lenne a problémám. Van 3 képen, és ezeket szeretném balra, középre és jobbra igazítani. Táblázatban megy a dolog, de CSS-ben szeretném megoldani, a lehető legegyszerűbben. Kerestem több helyen is ilyen megoldást, de eddig még nem találtam meg a megfelelőt.

Táblázattal:
Működik.

<TABLE width="100%">
<TR>
	<TD width="33%" align="left"><IMG SRC="kepek/kep1.jpg" WIDTH="176" HEIGHT="140" BORDER="0" ALT="" ID="jobb"></TD>
	<TD width="34%" align="center"><IMG SRC="kepek/logo.gif" WIDTH="176" HEIGHT="140" BORDER="0" ALT="Logó" ID="kozep"></TD>
	<TD width="33%" align="right"><IMG SRC="kepek/kep2.jpg" WIDTH="176" HEIGHT="140" BORDER="0" ALT="" ID="bal"></TD>
</TR>
</TABLE>
ID-del
Nem működik.
Hiba: a képeket méretezi és egymás alatt jelennek meg.

#bal {vertical-align: left;
position: relative;
        width:33%;
}
#kozep {vertical-align: center;
position: relative;
        width:34%;
}
#jobb {vertical-align: right;
position: relative;
        width:33%;
}


<IMG SRC="kepek/kep1.jpg" WIDTH="176" HEIGHT="140" BORDER="0" ALT="" ID="jobb">
<IMG SRC="kepek/logo.gif" WIDTH="176" HEIGHT="140" BORDER="0" ALT="Logó" ID="kozep">
<IMG SRC="kepek/kep2.jpg" WIDTH="176" HEIGHT="140" BORDER="0" ALT="" ID="bal">
DIV-vel
Nem működik.
Hiba: egymás alatt jelennek meg a képek.

.bal {vertical-align: left;
position: relative;
        width:33%;
}
.kozep {vertical-align: center;
position: relative;
        width:34%;
}
.jobb {vertical-align: right;
position: relative;
        width:33%;
}


<DIV class="jobb"><IMG SRC="kepek/kep1.jpg" WIDTH="176" HEIGHT="140" BORDER="0" ALT="" ID="jobb"></DIV>
<DIV class="kozep"><A HREF="index.php?<?php print($SID); ?>"><IMG SRC="kepek/logo.gif" WIDTH="176" HEIGHT="140" BORDER="0" ALT="Logó" ID="kozep"></A></DIV>
<DIV class="bal"><IMG SRC="kepek/kep2.jpg" WIDTH="176" HEIGHT="140" BORDER="0" ALT="" ID="bal"></DIV>
Minden esetben egy <DIV class=”fejlec”> </DIV> elemen belül helyezkednek el.
Hogy lehetne ezt megoldani úgy, hogy mindenhol működjön?

Ugyanilyen problémám van egy lábléccel is. előző (jobb) tartalom (közép) következő (bal)
‹ List elem formázása CSS-ben a kép melyik képpontjára kattintottam? - JS lekérdezés ›
 ■
1

Olvass doksit

Jano · 2006. Május. 26. (P), 12.21
Érdemes lenne talán valami doksit olvasni arról, hogy melyik tulajdonság mire való és hogyan működik! A vertical-align pl függöleges igazításra használandó.

Tipp: float körül keresgélj.
2

float, inline

Anonymous · 2006. Május. 26. (P), 12.32
a balsónak - float:left;
a jobbsónak - float:right;
a közpsőnek - display:inline;

az a vertical-align pedig télleg felejtős :)
3

Mindegyiknek float:left

Jano · 2006. Május. 26. (P), 12.52
Legegyszerüb: float: left mindegyikre.
4

Nem megy!

jeti · 2006. Május. 27. (Szo), 10.35
Sajnos az egyik megoldás sem működik. Valószínűleg az én hibám miatt. Melyik HTML kódról beszéltek? Az id-es képekről, vagy a div-es képekről? Mind a kettőt kipróbáltam, rengeteg variációba, de még így sem megy.
Azt szeretném megjeleníteni, ami a táblázatos kód esetében jön be. (Próbáljátok ki, hátha úgy érthetőbb a problémám.) Szóval a 3 képet az ablak ball, középső és jobb oldalára szeretném igazítani.
Az id-es módszerrel megoldható? 

#bal {float: left;}
#kozep {display: center;}
#jobb {float: right;}
Ennél a megoldásnál a középső nincs középen, hanem balra. A jobb kép "lemászott" a következő sorba, Operával ez nem látható. Szétcsúszik az egész.

A div-es próbálgatásom egyik variációja:

.bal {float: left;
position: relative;
        width:33%;
}
.kozep {float: left;
position: relative;
        width:34%;
}
.jobb {float: left;
position: relative;
        width:33%;
}
Ez már kezd hasonlítani rá, de még mindig van egy nagy (oszlop) csík a jobb végénél.
Részben fedi az alatta lévő tartalmat, ez is probléma, na jó ie alatt nem. :-)
Hogy hozzam ki a menüt a lefedésből?
Az UL.menu{clear:none;}-val nem működik.
5

értékek hahó

erenon · 2006. Május. 27. (Szo), 10.57
display: inline;
clear: both;

És szvsz jobb, ha mindenki float: left;
6

Itt a tuti!

Anonymous · 2006. Május. 27. (Szo), 13.03
Egy pár napja rakta ezt fel valaki a fórumra. Ebből mindent megtudsz:
http://www.fu2k.org/alex/css/onetruelayout/example/interactive