Keskustelut - Web-ohjelmointi - Linkkiin vaihtuva kuva CSS:llä ja asemointi ongelma


jhuvi 15:16 28.12.05 
Terve olen tehnyt vähän tällaista mouse over systeemiä CSS:llä. Homma melkein toimii ja tuotos on nähtävissä täällä: http://koti.mbnet.fi/testailu/menu.php . Ongelma on että haluaisin nuo kuvat vierekkäin eikä päällekkäin. En ole mikään taitaja CSS:n kanssa ja kaipaisinkin neuvoja...
Ezku 15:18 28.12.05 
editoitu: 16:07 28.12.05
jhuvi 16:00 28.12.05 
Kiitti, en tuolta vielä aivan graalinmaljaa kuitenkaan löytänyt. Kun vaihtaa display: block; -> display: inline;ksi, niin linkit kyllä järjestyvät riviin, mutta width ja height kaikuvat kuuroille korville, eli linkki on vain tekstin kokoinen...

Eli näyttää tältä: http://koti.mbnet.fi/testailu/menu2.php

[edit] Näköjään IE-näyttää nuo oikein, mutta sitä ei tueta. Firefox ja Opera täyttää taustan vain tekstin alalla...
raimo 16:28 28.12.05 
En sen enempää testaillut, mutta tyyppimääritys puuttuu, ja koska OIKEAT selaimet sen vaativat se on syytä lisätä. Hyvä että IE on ei-tuettu, läpyläpy! :)
Suomeksi:
type="text/css" puuttuu.
Eli siis:
<link href="menu.css" rel="stylesheet" type="text/css">
editoitu: 16:32 28.12.05
Juice_ 16:30 28.12.05 
Näin pelittää minulla:
#menu a {
   display: block;
        float:left;
   width:103px;
   height:24px;
   text-align:center;
   background: url("nappi.gif") 0 0 no-repeat;
   }
Eli lisää floatti ja pidä vaan se display blokkina.