nicht angemeldet
horizontale navigation nicht direkt unterm header!
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
-
Salve
Ein negativer margin-Wert für die Navigation könnte helfen (denke ich)
-
hi thx schonmal
und wegen hover effekt ? idee warum es nicht geht ? :)-
hei,
take a look at my example wie das hover in menu gemacht ist
< http://gut.lv/pro/picturecomm/pictureCom_startpage2a.html>also, du musst dem a{display:block; padding:10px; height:10px; width:100px;} angeben, einfach spiele mit diesem eigenschaften, wenn du a:hover sehen moechtest.
LG Inita
-
vielen dank für eure guten tipps. nächste prob im firefox ist die navi richtig positioniert. nur nicht bei den verschiedenn ie exploxrern :(
da ist die navi zu weit links :(
bitte um hilfe-
Hi,
vielen dank für eure guten tipps. nächste prob [...]
Willst du dich jetzt mit unserer Hilfe von einem "prob" zum nächsten hangeln?
Vielleicht solltest du dir mal ein bisschen mehr Grundlagenwissen aneignen, bevor du für jemanden "eine Webseite programmierst", und dabei nur von einem Problem zum nächsten stolperst.
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
hi haste recht :(
naja grundlagen habe ich schon "einigermaßen" . nur die navi ist immer das problem-
mhhh trotzdem weiß ich nicht warum der mouseover nicht funzt, da habe ich keine Ahnung leider :( da wäre eine enstprechende Hilfestellung noch sehr nett
-
-
-
-
-
-