✔ Navihintergrund beim hovern

Status
Nicht offen für weitere Antworten.
Peter Klein

Peter Klein

Erfahrenes Mitglied
Hallo

habe ein kleines Problem.

Auf einer Seite soll der Hintergrund des menus beim hovern farblich verändert werden, allerdings nimmt er es nicht mit dem padding an.
Also es soll vom oberen Rand bis zum unteren Border die farbe geändert werden.Ausserdem immer in der Breite die volle Breite des Links ausnutzen beim hovern.

Hänge die CSS mit an.

Code: 
* {
	background-color: #0f0e0e;
	color: #53881a;
	margin: 0;
	padding: 0;}

#header {
	border-bottom: 1px solid #53881a;
}

#nav {
	text-align: right;}
	
ul {
	margin-top: 5px;
	margin-bottom: 5px;}

li {
	display: inline;
	padding-left: 20px;
}

a:link {
	color: #53881a;
	text-decoration: none;}
	
a:hover {
	color: #0f0e0e;
	background-color: #53881a;}

HTML:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title>www.klein-peter.eu</title>

<meta name="language" content="de" />

<meta name="author" content="root"/>

<meta name="copyright" content="(C) 2005 Peter Klein" />

<meta name="generator" content="Bluefish 1.0.7"/>

<meta name="keywords" content="" />

<meta name="description" content="" />

<meta name="audience" content="all, alle" />

<meta name="MSSmartTagsPreventParsing" content="true" />

<meta http-equiv="imagetoolbar" content="no" />

<meta name="robots" content="index,follow" />



<link rel="stylesheet" type="text/css" href="styles/main.css" />

<link rel="stylesheet" type="text/css" href="" media="screen, projection" />

<link rel="stylesheet" type="text/css" href="" media="print" />





</head>

												

<body>



<div id="header">
	<div id="nav">
		<ul class="menu">
			<li class="nav"><a href="#">Link 1</a></li>	
			<li class="nav"><a href="#">Link 2</a></li>	
			<li class="nav"><a href="#">Link 3</a></li>
			<li class="nav"><a href="#">Link 4</a></li>
			<li class="nav"><a href="#">Link 5</a></li>
			<li class="nav"><a href="#">Link 6</a></li>
		</ul>
	</div>
</div>

<div id="logo"></div>

<!-- <h2>Herzlich Willkommen</h2> -->







</body>

</html>
 
Zuletzt bearbeitet:
Hi,

von welcher padding-Eigenschaft sprichst du? Für die Pseudoklassen :link und :hover sind bislang keine definiert.

Code: 
a:link,a:visited {
        color: #53881a;
        text-decoration: none;
        padding:5px;}

a:hover {
        color: #0f0e0e;
        background-color: #53881a;
        padding: 5px;}
 
Das hatte ich schon versucht, auch in verschiedenen Variationen , nur irgendwie kom ich nicht ganz weiter.

Die bg-color soll bis ganz oben und in der vollen Breite der LInks geändert werden.

Habe den Links ja ein padding zugewiesen das sie nicht so nah aneinanderstehen, und genau so weit soll sich der hovereffekt erstrecken.
 
Seltsam, auch dieses Stylesheet funktioniert bei mir einwandfrei:

Code: 
li {
        display: inline;
}

a:link,a:visited {
        color: #53881a;
        text-decoration: none;
        padding:5px 5px 5px 20px;
       }

a:hover {
        color: #0f0e0e;
        background-color: #53881a;
        padding:5px 5px 5px 20px;
        }
 

Anhänge

  • test_PeterKlein.jpg
    test_PeterKlein.jpg
    39,2 KB · Aufrufe: 13
Ja muss jetzt nur noch mit den Werten spielen, weil bei mir zerreisst es sich etwas im Firefox und im Opera. IE kann ich derzeit nicht testen, da LInux System.

EDIT:

So habs jetzt soweit, nur noch die Seiten.
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück