Skrive ovenpå knapper.

<ole>

Prøv lige at forklare, hvad det er du gerne vil, lidt tydeligere  :)

/mvh
</bole>

det afhænger vel meget af hvordan knappen skal se ud! Hvis det er en meget simpel knap hvor teksten og evt. baggrundsfarven/tekstblokken bare skal skifte farve, kan det laves ret nemt vha. CSS.
Hvis det er en mere detaljeret knap, er du nok nødt til at lave hver knap for sig!
Håber jeg har forstået dig rigtigt!

Du har vist forstået!
Jeg har købt et hæfte med den ret ambitiøse titel "hjemmeside på en weekend", hæftet er kun på 80 sider, og kommer i sagens natur ikke rundt om alle emner. I eksemplet i hæftet er hver knap en lille .jpg fil med tekst på. Det er jo fint når der kun er 6 knapper, men nu hvor jeg sidder og roder lidt rundt med det, kommer der jo flere knapper til. Hvis man oven i købet vil have at de skal ændre sig ved onmouseover o lign. kommer man jo op på et ganske betydeligt antal knapper.
Derfor var min ide at man havde to knapper og så skrev ovenpå dem.
Men efter at have kigget lidt rundt omkring kan jeg se at dette ikke er tilfældet.
Men hvordan gør man så??? Du har jo nok ret i det med CSS, men jeg mangler en eller anden form for guide. Enten link på nettet eller navnet på en publikation c",)
Håber I forstår hvad jeg mener nu :D
Jeg har kigget på forskellige templates, og de kan jo give en gode ideer, men jeg er tøvende ved bare at bruge en foruddefineret template. Jeg vil hellere bygge det op fra bunden.

/Kasper

<ole>

Du kunne jo bruge et baggrundsbillede og så skrive noget tekst i et link i tabelcellen:

<style type="text/css">
.btn {
    width: 85px;
    height: 20px;
    font: 11px verdana, arial, sans-serif;
    font-weight: bold;
}
.btn a {
    color: #cc0000;
    text-decoration: none;
    display: block;
    height: 100%;
    padding-top: 4px;
    text-align: center;
}
.btn a:visited {
    color: #cc0000;
    text-decoration: none;
}
.btn a:hover {
    color: #ff0000;
    text-decoration: none;
}
</style>

<script type="text/JavaScript">
function swap(elm, im) {
    elm.style.backgroundImage = "url("+im+")";
}
</script>

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td class="btn" onmouseover="swap(this, 'enGif.gif')"
        onmouseout="swap(this, 'enOverGif.gif')"><a href="http://www.google.dk">Til Google</a></td>
    <td class="btn" onmouseover="swap(this, 'enGif.gif')"
        onmouseout="swap(this, 'enOverGif.gif')"><a href="http://www.jubii.dk">Til Jubii</a></td>
</tr>
</table>

/mvh
</bole>

Bahhh ... det er zq et lille vidue at skulle overskue koden i  :)
Sådan skulle det se ud:

<style type="text/css">
.btn {
    width: 85px;
    height: 20px;
    font: 11px verdana, arial, sans-serif;
    font-weight: bold;
    background-image: url(enGif.gif);
}
.btn a {
    color: #cc0000;
    text-decoration: none;
    display: block;
    height: 100%;
    padding-top: 4px;
    text-align: center;
}
.btn a:visited {
    color: #cc0000;
    text-decoration: none;
}
.btn a:hover {
    color: #ff0000;
    text-decoration: none;
}
</style>

<script type="text/JavaScript">
function swap(elm, im) {
    elm.style.backgroundImage = "url("+im+")";
}
</script>

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td class="btn" onmouseover="swap(this, 'enOverGif.gif')"
        onmouseout="swap(this, 'enGif.gif')"><a href="http://www.google.dk">Til Google</a></td>
    <td class="btn" onmouseover="swap(this, 'enOverGif.gif')"
        onmouseout="swap(this, 'enGif.gif')"><a href="http://www.jubii.dk">Til Jubii</a></td>
</tr>
</table>

Det lugter af noget jeg kan bruge c",)
Men hvordan gøres det når man bare vil have en menu, f.eks i toppen, hvor "baggrundskassen" skifter farve når du flytter musen henover, og teksten i boksen er tekst. Altså ikke en .jpg knap (kryptisk jeg ved det, men håber du forstår :D) Jeg tror jeg skal meget dybere ned i CSS inden jeg går videre med mit html.eventyr ;)

Men olebole...du svarede jo sådan set på mit spørgsmål, så smid et svar c",)

Du kan vel slette script og mouse-event-handlers - og så ændre lidt i CSS-koden:

.btn a {
    color: #cc0000;
    text-decoration: none;
    display: block;
    height: 100%;
    padding-top: 4px;
    text-align: center;
    background-color: #00cccc;
}
.btn a:visited {
    color: #cc0000;
    text-decoration: none;
    background-color: #00cccc;
}
.btn a:hover {
    color: #ff0000;
    text-decoration: none;
    background-color: #ffff00;
}

Jeg takker mange gange for hjælpen c",)
Jeg tror sgu det vil lykkes for mig :D