Notifikationer

Markér alle som læst Log ud

mik28 Seniormester

09. juli 2005 - 18:54 Der er 9 kommentarer og
1 løsning

Problem med brede

Hej Eksperter,

Jeg har et problem med at for breden på et link til at være rigtig. Det handler om at baggrundsfarven skal skifte når man peger på linket

<a href="">Forside</a>

CSS:

a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
color: #ffffff;
background-color: #000000;
text-decoration: none;
cursor: pointer;
width:125px;
}

Synes godt om

olebole Juniormester

09. juli 2005 - 18:55 #1

<ole>

Du kan ikke sætte bredde på ikke-positioneret inline-element. Prøv display:block ;o)

/mvh
</bole>

Synes godt om

nielle Nybegynder

09. juli 2005 - 18:56 #2

Hvorfor vil du have width på? Baggrundsfarven plejer automatisk at følge linkets vredde.

Synes godt om

olebole Juniormester

09. juli 2005 - 18:56 #3

- men så kan de ikke være placeret ved siden af hinanden, så resten koden er afgørende for løsningen :)

Synes godt om

olebole Juniormester

09. juli 2005 - 18:57 #4

nielle >> og da linket skal være 125px bredt ... ;o)

Synes godt om

mik28 Seniormester

09. juli 2005 - 19:11 #5

Det hjalp med display:block

Synes godt om

olebole Juniormester

09. juli 2005 - 21:15 #6

nielle >> forklaringen er sandsynligvis, at der er tale om en menu-ting med en række 'link-kasser' ovenpå hinanden - og som er 125px bred.
Der kan det være meget smart at gøre links til block-elementer, så de bliver klikbare i hele menuens bredde og skifter farve i hele bredden. Man skal bare altid huske at sætte en højde eller bredde på linket for at få display:block til at virke på denne måde ;o)

Synes godt om

nielle Nybegynder

09. juli 2005 - 21:46 #7

Den forklaring køber jeg, men det ville da være rart at få det bekræftet af mik28. :^)

Synes godt om

mik28 Seniormester

10. juli 2005 - 08:25 #8

Grunden til at jeg vil have width på er at jeg ønsker at alle links er lige brede på trods af teksten

Synes godt om

olebole Juniormester

10. juli 2005 - 17:19 #9

mik28 >> Tak for points :)

nielle >> Du kan f.eks. prøve at lege lidt med dette doku:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
background-color: buttonface;
}
#menu {
width: 140px;
margin: 20px;
border: 1px solid;
border-color: threedshadow threedhighlight threedhighlight threedshadow;
}
#menu a {
font: 11px tahoma, sans-serif;
width: 118px;
padding: 1px 10px 2px 10px;
display: block;
color: buttontext;
background-color: buttonface;
border: 1px solid;
border-color: threedhighlight threedshadow threedshadow threedhighlight;
text-decoration: none;
cursor: default;
}
#menu a:hover {
color: highlighttext;
background-color: highlight;
text-decoration: none;
}
#menu a:active {
color: buttontext;
background-color: threedlightshadow;
border-color: threedshadow threedhighlight threedhighlight threedshadow;
padding: 2px 9px 1px 11px;
text-decoration: none;
}

#listBox {
width: 140px;
margin: 20px;
border: 1px solid;
border-color: threedshadow threedhighlight threedhighlight threedshadow;
}
#listBox a {
font: 11px tahoma, sans-serif;
width: 120px;
padding: 1px 10px 2px 10px;
display: block;
color: windowtext;
background-color: window;
text-decoration: none;
cursor: default;
}
#listBox a:hover {
color: highlighttext;
background-color: highlight;
text-decoration: none;
}
#listBox a:active {
color: highlighttext;
background-color: highlight;
text-decoration: none;
}
</style>
</head>
<body>

<div id="menu">
<a href="#">MenuLink 1</a>
<a href="#">MenuLink 2</a>
<a href="#">MenuLink 3</a>
<a href="#">MenuLink 4</a>
<a href="#">MenuLink 5</a>
</div>

<div id="listBox">
<a href="#">ListLink 1</a>
<a href="#">ListLink 2</a>
<a href="#">ListLink 3</a>
<a href="#">ListLink 4</a>
<a href="#">ListLink 5</a>
<a href="#">ListLink 6</a>
</div>

</body>
</html>

Synes godt om

nielle Nybegynder

10. juli 2005 - 17:23 #10

Nice :^)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS