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?
Annonceindlæg tema
Offentlig digitalisering
Fra effektivisering til digital suverænitet. Hvordan skaber det offentlige en digital fremtid med AI, sikkerhed og kontrol i centrum?
<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>
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
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; }
Det ligner zq da en validator-bug. Prøv lige med et link i stedet
- 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 :)
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.
Okay tusind tak for hjælpen, undskyld jeg var lidt lang tid om at svare :-) Her er dine points så :P
Jaja, lidt 'snailwalking' er helt okay ... tak for points ;o)
Vi tilbyder markedets bedste kurser inden for webudvikling