Hi,
ich weollte einen Hovereffekt erstellen welcher logischerweiße nur auftreten soll wenn ich den Cursor über (siehe Bild) "Startseite", "Artikel", ... bewege.
[Blockierte Grafik: http://www.imagebanana.com/img/fjobfao/thumb/Unbenannt.png]
Die Navigation ist eine Grafik auch die Trennstriche gehören dazu nun hab ich die Grafik zerteilt so das ich nur den Navibereich von "Startseite", "Artikel" ... habe da sich ja nur der Bereich immer ändern soll.
Nur wenn ich das jetzt als "Hover" Befehl einfüge für die einzelnen Links wird nur der Bereich mit der Grafik belegt der die Schrift belegt aber er soll ja die ganze Höhe und Breite des Navigationsbereich des Links verändern und nicht nur der Schriftbereich (Siehe Bild unten).
[Blockierte Grafik: http://www.imagebanana.com/img/e29c406n/thumb/Unbenannt123.png]
<!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>
<title>VDragons World</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="wrapper">
<div id="kopf">
<img src="Bilder/Header.png" border="" height="151" width="1000" alt="VDragons World" />
</div>
<div id="trennbalken">
</div>
<div id="steuerung">
<ul>
<li class="n1"><a href="index.html">Startseite</a></li>
<li class="n2"><a href="news.html">News</a></li>
<li class="n3"><a href="artikel.html">Artikel</a></li>
<li class="n4"><a href="downloads.html">Downloads</a></li>
<li class="n5"><a href="videos.html">Videos</a></li>
<li class="n6"><a href="bilder.html">Bilder</a></li>
<li class="n7"><a href="forum.html">Forum</a></li>
</ul>
</div>
<div id="spaltelinks">
Spalterlinks <br />
dsafasd
</div>
<div id="spalterechts">
Spaltelrechts
</div>
<div id="inhalt">
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
Inhalt<br />
</div>
<div id="fuss">
Fuss
</div>
</div>
</body>
</html>
Alles anzeigen
* {
margin: 0;
padding: 0;
}
body {
background-image: url(Bilder/space12.png);
background-repeat: no-repeat;
background-attachment: fixed;
}
li {
display: inline;
}
.n1 :hover {
background-image: url(Bilder/Hover1.png);
}
#steuerung .n1 {
padding-right: 40px;
margin-left: 35px;
}
#steuerung .n2 {
padding-left: 35px;
}
#steuerung .n3 {
padding-left: 90px;
}
#steuerung .n4 {
padding-left: 70px;
}
#steuerung .n5 {
padding-left: 70px;
}
#steuerung .n6 {
padding-left: 85px;
}
#steuerung .n7 {
padding-left: 90px;
}
#steuerung a {
line-height: 48px;
text-decoration: none;
color: white;
font-size: 18px;
font-family: Arial, sans-serif;
}
#wrapper {
background-image: url(Bilder/BG.png);
width: 1000px;
margin: 0 auto;
text-align: left;
}
#kopf {
height: 151px;
}
#trennbalken {
background-image: url(Bilder/TBalken.png);
width: 1000px;
height: 7px;
}
#steuerung {
background-image: url(Bilder/Navio.png);
width: 1000px;
height: 48px;
margin-top: -3px;
}
#spaltelinks {
width: 165px;
float: left;
}
#spalterechts {
width: 165px;
float: right;
}
#inhalt {
margin-left: 180px;
margin-right: 180px;
}
#fuss {
background-image: url(Bilder/Fuss.png);
width: 1000px;
height: 22px;
clear: both;
}
Alles anzeigen
So sieht es aus wenn ich denn "Hover" Befehl auf die Steuerung anwende.
[Blockierte Grafik: http://www.imagebanana.com/img/uhnxfi3z/thumb/Unbenannt1234.png]
So soll das aussehen, nur einzeln für die Links
(Bsp. Cursor über "Startseite")
[Blockierte Grafik: http://www.imagebanana.com/img/mns4sxx6/thumb/5.png]
Hoffentlich ist es verständlich