Avatar billede snailwalker Nybegynder
17. maj 2005 - 20:07 Der er 8 kommentarer og
1 løsning

Få en box til kun at være background for noget tekst

Jeg har skrevet følgende kode til en menu der ændrer baggrundsfarve når man kører musen henover.

    <tr valign="top">
        <td style="background:url(menubar.jpg); height:22px;" class="hovedmenu">
       


<div style="position:relative; float:left; cursor:pointer; padding: 3px 10px 0px 10px;" onmouseover="this.style.backgroundColor='#15284B';" onClick="location.href='default.asp?page=1';" onmouseout="this.style.backgroundColor='transparent';"><a href="default.asp?page=1" target="_self" class="topmenuLinks">Velkommen</a></div>

<div style="position:relative; cursor:pointer; float:left; padding: 3px 10px 0px 5px;" onmouseover="this.style.backgroundColor='#15284B';" onClick="location.href='default.asp?page=2';" onmouseout="this.style.backgroundColor='transparent';"><a href="default.asp?page=2" target="_self" class="topmenuLinks">Profil</a></div>

</tr>

Mit problem er bare at jeg kun ønsker at den boks der ændrer farve lige netop dækker teksten og ikke fylder mere end teksten.

Er der nogen hurtig løsning til problemet?
Avatar billede olebole Juniormester
17. maj 2005 - 21:13 #1
<ole>

Med en væsentlig slankning af koden:

<style type="text/css">
a.topmenuLinks, a.topmenuLinks:visited {
    margin: 10px;
    background-color: transparent;
}
a.topmenuLinks:hover {
    background-color: #15284B;
}
.hovedmenu {
    padding-top: 3px;
}
</style>

<tr valign="top">
        <td style="background:url(menubar.jpg); height:22px;" class="hovedmenu">
        <a href="default.asp?page=1" target="_self" class="topmenuLinks">Velkommen</a>
        <a href="default.asp?page=2" target="_self" class="topmenuLinks">Profil</a>
        </td>
</tr>

/mvh
</bole>
Avatar billede snailwalker Nybegynder
17. maj 2005 - 22:07 #2
Tak nu løste jeg det problem, men nu virker min styles fil ikke helt optimalt længere

<STYLE type="text/css">

a.topmenuLinks, a.topmenuLinks:visited {
font-family:verdana,sans-serif; font-size:7.5pt; color:#ffffff;
    margin: 10px;
    background-color: transparent;
    text-decoration:none;
font-weight:bold;
}
a.topmenuLinks:hover {
    background-color: #15284B;
    text-decoration:none;
    font-family:verdana,sans-serif; font-size:7.5pt; color:#ffffff; font-weight:bold;
}
.hovedmenu {
    padding-top: 0px;
}

.bund {font-family:verdana,sans-serif; font-size:7.5pt; color:#000000;}
.overskrift {font-family:verdana, sans-serif; font-size:10pt; color:#15284B; font-weight:bold;}


.indhold {font-family:verdana, sans-serif; font-size:8.5pt; color:#000000;}

</STYLE>

Den style der står øverst virker ligepludselig ikke :S
Avatar billede snailwalker Nybegynder
17. maj 2005 - 22:10 #3
Jeg får denne her fejlmeddelse når jeg validater med W3:

Line: 9
Parse error - Unrecognized : <STYLE type="text/css"> a.topmenuLinks:hover { background-color: #15284B; text-decoration:none; font-family:verdana,sans-serif; font-size:7.5pt; color:#ffffff; font-weight:bold; }
Avatar billede olebole Juniormester
17. maj 2005 - 22:45 #4
Det ligner zq da en validator-bug. Prøv lige med et link i stedet
Avatar billede olebole Juniormester
17. maj 2005 - 22:50 #5
Arrghhh ... du må ikke have style-tags i en .css-fil. Du må heller ikke paste style-tags ind i textarea'et på:
  http://jigsaw.w3.org/css-validator/

- kun ren CSS  ;o)
Avatar billede olebole Juniormester
17. maj 2005 - 22:58 #6
- og så tillader jeg mig at lægge et svar, som du så kan vælge at gøre brug af - eller lade være  :)
Avatar billede olebole Juniormester
17. maj 2005 - 23:04 #7
Det, jeg mente, var, at din CSS-fil kun må indeholde:

a.topmenuLinks, a.topmenuLinks:visited {
font-family:verdana,sans-serif; font-size:7.5pt; color:#ffffff;
    margin: 10px;
    background-color: transparent;
    text-decoration:none;
font-weight:bold;
}
a.topmenuLinks:hover {
    background-color: #15284B;
    text-decoration:none;
    font-family:verdana,sans-serif; font-size:7.5pt; color:#ffffff; font-weight:bold;
}
.hovedmenu {
    padding-top: 0px;
}
.bund {font-family:verdana,sans-serif; font-size:7.5pt; color:#000000;}
.overskrift {font-family:verdana, sans-serif; font-size:10pt; color:#15284B; font-weight:bold;}
.indhold {font-family:verdana, sans-serif; font-size:8.5pt; color:#000000;}

- og at du linker til den i head-sektionen af din HTML-fil med:
  <link rel="stylesheet" type="text/css" href="/sti/til/dinCss.css">

Bruger du ikke en .css-fil, men skriver CSS'en direkte i HTML-filen, må du kun paste ovenstående kode ind i validatorens textarea - men du skal naturligvis stadig have dine style-tags rundt om CSS'en i HTML-filen.
Avatar billede snailwalker Nybegynder
18. maj 2005 - 14:34 #8
Okay tusind tak for hjælpen, undskyld jeg var lidt lang tid om at svare :-)

Her er dine points så :P
Avatar billede olebole Juniormester
18. maj 2005 - 19:47 #9
Jaja, lidt 'snailwalking' er helt okay ... tak for points  ;o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester