Validering

[Haraldson]

http://validator.w3.org/check?uri=http%3A%...ny%2Findex.html

 

Har surra rundt med guidene til Arve87, og lagd rollovers etter måte #2 her.

 

Jeg gjorde masse fram og tilbake, men hver gang jeg fikk inn mer enn en to-tre bilder i menyen ble alt forskyvd og sida så stygg ut. Da dette skjedde satte jeg forskjellig class på alle knappene.

 

Så fikk jeg det til å funke. Da ga jeg knappene id="1", id="2" osv, og definerte annerledes og plassbesparende i CSS.

 

Dette funker fint EDIT: I FireFox iallefall (skal ikke ha de stygge skrå-scanlines'ene lenge ), men under validering er det som den første linken sier ikke tillatt med id på a-tags

 

Noen som vet hvordan jeg bedre kan få til dette, med likt resultat?

 

CSS

/* Rollovermenu */

.rollover {
height:22px;
width:140px;
background-position:bottom;
display:block;
}

.rollover:hover {
background-position:top;
}

.hidden {
visibility: hidden;
}

#1 {
background-image:url(images/rollovermenu/hjem.gif);
}

#2 {
background-image:url(images/rollovermenu/ommeg.gif);
}

#3 {
background-image:url(images/rollovermenu/webhistorie.gif);
}

#4 {
background-image:url(images/rollovermenu/bildegallerier.gif);
}

#5 {
background-image:url(images/rollovermenu/shoutbox.gif);
}

#6 {
background-image:url(images/rollovermenu/linker.gif);
}

 

HTML

<a href="index.html" id="1" class="rollover"><span class="hidden">Hjem</span></a>
<a href="ommeg.html" id="2" class="rollover"><span class="hidden">Om meg</span></a>
<a href="webhistorie.html" id="3" class="rollover"><span class="hidden">Webhistorie</span></a>
<a href="bilder.html" id="4" class="rollover"><span class="hidden">Bildegallerier</span></a>
<a href="shoutbox.html" id="5" class="rollover"><span class="hidden">Shoutbox</span></a>
<a href="linker.html" id="6" class="rollover"><span class="hidden">Linker</span></a>

Endret 24. april 2004 av NMI on XTC

[Loomy]

Du kan vel bruke class istedenfor

 

.1 { background-image... }

 

<a class="1" href="...

[Haraldson]

Men class er jo allerede rollover, og den trenger jeg for å få rollovereffekten..!

 

Edit: Skjønner hva du mente, men det var når jeg brukte class at sida ble "ødelagt". Og dessuten, da må jeg ha

.1 {
height:22px;
width:140px;
background-position:bottom;
display:block;
}

.2 {
height:22px;
width:140px;
background-position:bottom;
display:block;
}

 

+ background-image i alle

 

osv nedover, og det tar en del bytes...

Endret 24. april 2004 av NMI on XTC

[magikern]

<ul class="rollover">
<li id="1"><a href="index.html"><span>Hjem</span></a></li>
<li id="2"><a href="ommeg.html"><span>Om meg</span></a></li>
<li id="3"><a href="webhistorie.html"><span>Webhistorie</span></a></li>
<li id="4"><a href="bilder.html"><span>Bildegallerier</span></a></li>
<li id="5"><a href="shoutbox.html"><span>Shoutbox</span></a></li>
<li id="6"><a href="linker.html"><span>Linker</span></a></li>
</ul>

ul.rollover li a{
height:22px;
width:140px;
background-position:bottom;
display:block;
}

 

da skjønner du vel kanskje hvor jeg mener du skal slenge på resten av css har desverre ikke tid nå til å skrive det...

[Haraldson]

Men vil da tekstlinkene bli skjulte, eller er det der du mener jeg skal legge på CSS?

[Haraldson]

Oppdaga nå at menyen ikke funker i IE, og da er det ikke særlig stor grunn for å spare på den... Jaja... Finner vel en metode en gang...

[haugsand]

En id eller et klassenavn kan ikke starte med et nummer.

[Haraldson]

En id eller et klassenavn kan ikke starte med et nummer.

Er det hele feilen???

[Zethyr]

En id eller et klassenavn kan ikke starte med et nummer.

Er det hele feilen???

For validation, ja...

[Haraldson]

men da funker det vel sikkert fortsatt ikke i IE, eller? (Orker ikke sjekke det nå, nå har jeg forandra fram og tilbake i hele dag...)