nicht angemeldet
Hallo liebe Gemeinde, :)
war hier schon lange stiller Mitleser und die Seite gefällt mir richtig gut. Nun habe ich ein eigenes Problem. Ich soll für meinen Physiotherapeuten eine Webseite "programmieren".
Jetzt taucht das erste Problem auf: Die horizontale Navigation befindet sich nicht direkt unterm header wie gewünscht. Nächstes Problem ist, dass der Mouseover bzw.a:hover Effekt nicht funktioniert.
ich hoffe ihr könnt mir weiterhelfen.~~~html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<center>
<div id="container">
<div id="header">
</div>
<div id="firstline">
</div>
<ul id="navi">
<li><a href="#1" class="navilinks"><span class="unsichtbar">links</span></a></li>
<li><a href="#2" class="therapien" title="Therapien"><span class="unsichtbar">therapienweg</span></a></li>
<li><a href="#3" class="preise" title="Preise"><span class="unsichtbar">preiseweg</span></a></li>
<li><a href="#4" class="guestbook" title="Guestbook"><span class="unsichtbar">guestbookweg</span></a></li>
<li><a href="#5" class="lebenslauf" title="Lebenslauf"><span class="unsichtbar">lebenslaufweg</span></a></li>
<li><a href="#6" class="impressum" title="Impressum"><span class="unsichtbar">impressumweg</span></a></li>
<li><a href="#7" class="navirechts"><span class="unsichtbar">rechts</span></a></li>
</ul>
</div>
</center>
</body>
</html>
~~~css
@charset "utf-8";
/* CSS Document */
body {
background-color:#000000;
/* background-image:url(bg.jpg);*/
/* background-repeat:repeat; */
}
#container {
padding:0 auto;
margin:0 auto;
width:716px;
height:800px;
border:1px solid red;
background-color:#FFFFFF;
}
#header {
background-image:url(header.jpg);
background-repeat:no-repeat;
width: 710px;
height: 140px;
}
#firstline {
width:714px;
height:3px;
background-image:url(firstline.jpg);
background-repeat:no-repeat;
float:left;
}
.unsichtbar { display: none; }
#navi {
float:left
width: 714px;
padding: 0 1px;
background: url(navibg) no-repeat;
list-style: none;
}
#navi li {
width: 102px;
float: left;
font-size: 1.0em;
position: relative;
}
#navi li:hover ul, #navi li.over ul {
display: block;
}
li a.navilinks:hover { background: url(navirechts.jpg) no-repeat;border: none; width: 102px; height: 20px; }
#navi li a.navilinks:link, li a.navilinks:visited, li a.navilinks:focus, li a.navilinks:active { width: 102px; height: 20px; display: block; border: none; background: url(navilinks.jpg) no-repeat;}
li a.therapien:hover { background: url(t.jpg) no-repeat;border: none; width: 102px; height: 20px; }
#navi li a.therapien:link, li a.navilinks:visited, li a.navilinks:focus, li a.navilinks:active { width: 101px; height: 20px; display: block; border: none; background: url(therapien.jpg) no-repeat;}
li a.preise:hover { background: url(p.jpg) no-repeat;border: none; width: 102px; height: 20px; }
#navi li a.preise:link, li a.navilinks:visited, li a.navilinks:focus, li a.navilinks:active { width: 101px; height: 20px; display: block; border: none; background: url(preise.jpg) no-repeat;}
li a.guestbook:hover { background: url(g.jpg) no-repeat;border: none; width: 102px; height: 20px; }
#navi li a.guestbook:link, li a.navilinks:visited, li a.navilinks:focus, li a.navilinks:active { width: 101px; height: 20px; display: block; border: none; background: url(guestbook.jpg) no-repeat;}
li a.lebenslauf:hover { background-image: url(l.jpg) no-repeat;border: none; width: 102px; height: 20px;}
#navi li a.lebenslauf:link, li a.navilinks:visited, li a.navilinks:focus, li a.navilinks:active { width: 101px; height: 20px; display: block;border: none; background: url(lebenslauf.jpg) no-repeat;}
li a.impressum:hover { background: url(i.jpg) no-repeat;border: none;width: 102px; height: 20px; }
#navi li a.impressum:link, li a.navilinks:visited, li a.navilinks:focus, li a.navilinks:active { width: 101px; height: 20px; display: block; border: none; background: url(impressum.jpg) no-repeat;}
li a.navirechts:hover { background: url(hovernavirechts.jpg) no-repeat;border: none; width: 102px; height: 20px;}
#navi li a.navirechts:link, li a.navilinks:visited, li a.navilinks:focus, li a.navilinks:active { width: 102px; height: 20px; display: block;border: none; background: url(navirechts.jpg) no-repeat;}
link zur so wie es aussehen sollte(photoshop grafik):link1
so wie es bei mir aussieht:link2
