Keskustelu: Nettisivujen teko: Inline-elementille kiinteä leveys?

Mitenköhän saisin div-elementille jolle annettu määritelmä display:inline, määriteltyä kiinteän width-arvon pikseleinä ?

Ainakin antamalla sille display: block ja sit antamalla sille leveyden. Miksi displayn tulisi olla inline?

Sen pitää olla inline siksi että pitää saada 5 kpl navikointipalkkeija viereikkäin samaan riviin. Niihin on myöskin liitettynä javascript-pätkä joka jostain syystä ei toimi jos käyttää position:relative määrityksiä eli sekin vaihtoehto on poissuljettu. Eli jos on muita hyviä ideoita niin olen kiitollinen :)

Pistä vaan display: block; ja sitten float: left;

Mitä teet JavaScriptillä?

<ul id="menu">
    <li><a href="">Yksi</a></li>
    <li><a href="">Kaksi</a></li>
    <li><a href="">Kolme</a></li>
</ul>

#menu {
     height : 20px;
     list-style : none;
     overflow : hidden;
}
#menu li {
     display : block;
     float : left;
}
#menu a {
     display : block;
     height : 16px;
     line-height : 16px;
     padding : 2px;
     width : 196px;
}

Hieman epämääräisesti kasattu testaamaton CSS, mutta tuohon tapaan voi lähteä värkkäilemään. Toiminee Firefoxilla, mutta IE:n suhteen en lähde sanomaan mitään; pitäisi testata kun ulkomuistista ei vielä mene se, miten tarkalleen sai useamman selaimen pelittämään täysin samalla tavoin.

Kiitti avusta, noin suurinpiirtein sain toimimaan, ainoastaan niin että tuon ul - ja li -rankenteen korvasin div ja span merkinnöillä koskapa tuo listarakenne sisensi elementtejä tavalla josta en pitänyt enkä osannut ottaa sitä automaattista sisennystä pois :)

Sisensi? Koitapa laittaa

padding: 0;
margin:  0;

Navigaatiopalkki on kuitenkin linkkilista, joten siksi <ul> <li> -yhdistelmä on rakenteellisesti oikein (= se kuvaa paremmin sisältöä).

Itselläni on lähes aina tämmöinen nollausrivi koodissa, joten siksi nuo marginaali- ja sisennyskoodit unohtuvat:

* { border : 0; margin : 0; padding : 0; }

Tietenkin itse joutuu sitten säätämään jok'ikisen elementin sisennykset itse, mutta ainakin sivusta tulee hieman persoonallisemman näköinen ja varsinaisen leiskan asettelun rakentamisaika vähenee huomattavasti, kun ei tarvitse miettiä mistä eri selaimien sisennyserot taas johtuvatkaan.

Mutta joo. Onnea sivujen väsäilyyn.