Notifikationer

Markér alle som læst Log ud

sgt-hp Nybegynder

14. marts 2005 - 23:10 Der er 11 kommentarer

Problemer linier over og under hover

Hej..

Tag lige og kik på min hjemmeside: www.sgt-hp.dk Prøv så at køre op og ned af menuen. Problemet er at jeg vil ha at linierne over og neden for linket skal gå helt ud til min menu-box's kant, når den er i "hover"-mode, men dog ikke forstørre menu-boxen.

Lige nu har jeg padding på, for at få boksen længe ud, end hvad teksten er.

Meningen er som sagt at den skal gå helt ud til menu-boksens kant, men dog ikke flytte på den.

Synes godt om

larsbachmanndk Nybegynder

14. marts 2005 - 23:19 #1

<html>
<head>
<title>css</title>
<style>
a.menu{
font-family: verdana, helvetica;
font-weight: regular;
font-size: 11px;
color: #000000;
text-decoration: none;
background: #FFFFFF;
display: block;
width:100%;
height: 15px;

}
a.menu:hover{
font-family: verdana, helvetica;
font-weight: regular;
font-size: 11px;
color: #000000;
text-decoration: none;
background: #FF9900;
display: block;
width:100%;
height: 15px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
</style>

</head>

<body>
<table width="150" border="0" cellspacing="0" cellpadding="2">
<tr>
<td><div align="center"><a href="#" class="menu">Link 1</a></div></td>
</tr>
<tr>
<td><div align="center"><a href="#" class="menu">Link 2</a></div></td>
</tr>
<tr>
<td><div align="center"><a href="#" class="menu">Link 3</a></div></td>
</tr>
<tr>
<td><div align="center"><a href="#" class="menu">Link 4</a></div></td>
</tr>
</table>
</body>
</html>

Synes godt om

larsbachmanndk Nybegynder

14. marts 2005 - 23:19 #2

Måske du kan bruge dette til noget.
Så skal du bare selv rette style til.

Synes godt om

sgt-hp Nybegynder

14. marts 2005 - 23:31 #3

Nu virker det, men hvorfor er det lige at der kommer et ekstra mellemrum i menuen nu. Kik: www.sgt-hp.dk .

Synes godt om

Slettet bruger

14. marts 2005 - 23:38 #4

Fordi du har 2 >br<

<a href="forside.htm" target="main">Forside</a>
<br><br>
<a href="comps.php" target="main">Comps</a>
<br>

Synes godt om

larsbachmanndk Nybegynder

14. marts 2005 - 23:40 #5

det er vist planen at der skal være 2 <br> efter forside.
Jeg går udfra at du undrer dig over hvorfor link'ene rykker en linje ned når man har musen over?

Synes godt om

roenving Novice

14. marts 2005 - 23:47 #6

>>larsbachmanndk 14/03-2005 23:19:19

-- der er adskillige grove fejl (og nogle misforståelser omkring, hvordan css virker !-)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>css</title>
<style type="text/css">
.menu{width:150px;border:0;border-collapse:collapse;}
.menu td{margin:2px;}
.menu a{
font-family: verdana, helvetica,sans-serif;
font-size: 11px;
text-decoration: none;
display: block;
height: 15px;
border-top:1px solid white;
border-bottom:1px solid white;
}
.menu a:hover{
background: #f90;
border-top:1px solid black;
border-bottom:1px solid black;
}
</style>

</head>

<body>
<table class="menu">
<tr>
<td><div align="center"><a href="#">Link 1</a></div></td>
</tr>
<tr>
<td><div align="center"><a href="#">Link 2</a></div></td>
</tr>
<tr>
<td><div align="center"><a href="#">Link 3</a></div></td>
</tr>
<tr>
<td><div align="center"><a href="#">Link 4</a></div></td>
</tr>
</table>
</body>
</html>

Synes godt om

roenving Novice

14. marts 2005 - 23:52 #7

-- og der var så mange fejl, at jeg rent overså de fuldstændigt overflødige diver, du havde plantet i tabelcellerne:

.menu td{margin:2px;text-align:center;}

-- og

<td><a href="#">Link 1</a></td>

Synes godt om

roenving Novice

14. marts 2005 - 23:54 #8

-- iøvrigt kunne man lave den samme konstruktion uden en tabel, men bare med en div, og så smide margin direkte på a-tags (forudsat, at de stadig var display:block; !-)

Synes godt om

roenving Novice

14. marts 2005 - 23:57 #9

F.eks. sådan:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>css</title>
<style type="text/css">
.menu{width:150px;border:0;border-collapse:collapse;text-align:center;}
.menu a{
font-family: verdana, helvetica,sans-serif;
font-size: 11px;
text-decoration: none;
display: block;
height: 15px;
border-top:1px solid white;
border-bottom:1px solid white;
padding:2px;
}
.menu a:hover{
background: #f90;
border-top:1px solid black;
border-bottom:1px solid black;
}
</style>

</head>

<body>

<div class="menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
</body>
</html>

Synes godt om

sgt-hp Nybegynder

15. marts 2005 - 17:34 #10

Men hvad er grunden til at linierne hopper et hak ned, musen er over dem? Det kan jeg ikke lige gemmenskue, hvor det går galt.

Synes godt om

sgt-hp Nybegynder

15. marts 2005 - 17:55 #11

Hvis jeg sætter width til 96 (tabellens bredde er 100), laver den ikke det gøgl med at rykke linier ned... Men det ser dog ikke optimalt ud.. nogen der kan hjælpe?

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