ugrás a tartalomhoz

CSS-el elemek vízszintes kiegyenlítése

vbence · 2006. Aug. 5. (Szo), 18.53
Egy sorba, a helyet szépen elosztva szeretnék CSS-el linkeket elhelyezni, egyfajta vízszintes menüként. A linkek száma változik (3-4-5).

Táblázattal ugyebár ennyi:
<table width="100%"><tr><td>első</td><td>második</td><td>harmadik</td></tr></table>
Természetesen nem ragaszkodom minden áron a CSS-hez, csak szebb lenne...
‹ Elcsúszik az oldal a túl hosszú szavaktól fájl, hozzá tartozó szöveg feltöltése ugyanarra a lapra <FORM> tag-be ›
 ■
1

ezen ne múljék :)

toxin · 2006. Aug. 5. (Szo), 20.23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>hello</title>
<style type="text/css">
    #menu{
        display: table; 
        width: 100%;
    }
    ul{
        border: 1px solid red;
        display: table-row;
    }
    
    li{
        border: 1px solid green;
        display: table-cell;
        text-align: center;
    }
</style>

</head>

<body>
<div id="menu"><ul><li>első</li><li>második</li><li>harmadik</li><li>negyedik</li></ul></div>
</body>
</html>
:) egyszer majd IE is tudja kezeleni, egyébként passz maradj táblánál, ill. én is kiváncsi vagyok meglehet-e oldani

üdv t
2

hehe

vbence · 2006. Aug. 5. (Szo), 20.47
Ügyes.. tábla ami nem tábla ;) Azért még várjuk az ötelteket..
3

inline?

warnew · 2006. Aug. 5. (Szo), 22.18
Simán display: inline; width: x; nem elég?
4

re

toxin · 2006. Aug. 5. (Szo), 22.36
A linkek száma változik (3-4-5).
5

ha tudod a számukat

warnew · 2006. Aug. 5. (Szo), 23.42
akkor %os width is mehet nekik, és csst adhatsz meg a kódban is. esetleg az eloregyartott cssben csinalsz linkek_3 linkek_4 linkek_5 classokat, es azt cserelgeted.
6

alap a balról jobbra nem?

Kenguru · 2006. Aug. 6. (V), 13.50
Nem bonyolítjátok túl az életet?

<center>
<a href=#link1>link1</a> -
<a href=#link2>link2</a> -
<a href=#link3>link3</a> -
<a href=#link4>link4</a>
</center>

amibe beteszed annak a szélessége a mérvadó. a link mindegy milyen hosszú mindig középen lesz. A <center> elem is megadható CSS-el ha akarod.
7

Nem csak középre

vbence · 2006. Aug. 6. (V), 23.14
A cél az, hogy a felső táblás példához hasonlóan elosztva jelenjenek meg a inkek a sorban. A centerrel a linkek középre kerülnek, de a közöttük levő terület nem lesz kiegyelítve, nem lesznek elosztva vízszintesen.