Tekst på knapper uden <div>

Skrot det andet og prøv med noget lignende:

#knap1 {
background:url(Rusten_knap_120.gif);
display:block;
width:120px;
height:49px;
padding:XXXX;
margin:XXXX;
}
#knap1:hower {
background:url(Rusten_knap_120_tryk.gif);
}

<a href="ommig.html" id="knap1">mere om migr</a>

Trikket er at bruge display:block; på dine links i din stylesheet, det gør at du kan bruge både height, width, margin mm. Som standart er links nemlig inline elementer, og så kan man ikke bruge disse værdiger på dem.

Virkelig en sjov måde du har valgt at skrive koden op på.

Hvorfor ialverden vil du også have dit div inde i dit A ?. Du kan sagten style din a også.
Du kan også lave dit div om til at span, men stadig meget sjov måde..

Håber duk unne bruge det.

og så kan du forresten sagtens lave din hover i din CSS.

Tak tak jeg drukner

Nu vil jeg se på de forskellige forslag.

Hvis <div> er udenfor <a> skifter teksten ikke farve. (knappen bliver trykket ned og der kommer lys i teksten, når musen er over)Se siden på internettet.

Jeg har hover i css sådan her : a:hover bla bla... , men jeg kan sikkert bruge det på mange flere måder end jeg har gennemskuet indtil nu.

Jeg kan sikkert lære noget af dem alle sammen.


Indtil videre ser det her(ny version med samme resultat) ud til at virke, men der er sikkert også sjov kode , for jeg har aldrig været på kursus, jeg går bare i gang.

<tr>
                    <td align="middle" width="120" height="49"
                    style="background-image:url( 
                    Bag_Gustent_staal.jpg);">
                      <a class="knap" href="ufo.htm" onmouseover=
                      "document.knap2.src=tryk.src" onmouseout=
                      "document.knap2.src=rust.src">
                      <img style="position: relative;top:0;margin-top:-20;"
                      src="Rusten_knap_120.gif" width="120"
                      height="49" name="knap2" border="0">
                      <font style="position: relative;top:-42;margin-bottum:0;">UFO</font></a>
                    </td>
                  </tr>

Koden bliver kvast når jeg copy/paste-er, så jeg kan først se det når mailen er sendt.

Ellers er det formateret så jeg selv kan finde rundt.

Siden, hvor de 2 øverste knapper virker på den nye måde, er her:"http://home20.inet.tele.dk/alodk/index2_CC.html"

Jo, jeg glemte lige at sige at problemet med <span> og andre inline tags, er at man ikke kan flytte margin for top og bottum, så teksten kommer over knappen og ikke under( med z-index).

Jeg har prøvet en masse muligheder og har snart ikke noget hår på hovedet. Det eneste jeg ikke kan finde ud af, er at give op!

Martin ville gerne hjælpe og det var sikkert i en god mening, men det bragte mig ikke videre.

Simon leverede en næsten copy/paste-brugbar løsning, som oven i købet var fremtidssikret. Lige det jeg ville ønske at jeg selv kunne finde ud af Og så lærte jeg lidt mere css. Det må jeg hellere forske noget mere i

Så 10 til Martin og 40 til Simon

"Display:block" virker kun i explorer, så jeg måtte bruge en dag mere på at finde en løsning der ikke var browser-racistisk ( er det nødvendigt at sige at jeg bruger Firefox?).
Siden index2.htm er opdateret til den nye version, så se der hvordan det lykkedes at få det jeg ville have.

edit: Ok "Display:block" virker, når man har den rigtige <-- doctype> og så vdere, men efterhånden falder det hele på plads


Mvh.