✔ Einige Probleme mit meinem Menu

Status
Nicht offen für weitere Antworten.
Denniz

Denniz

Erfahrenes Mitglied
Hallo Leute,

ich habe mir eine horizontales Menu zusammengebaut mit einem BG Rollover effekt.
Zu sehen ist es hier: http://schrottplatz.pytalhost.com/test/horizontal_menu_simple.html

Geht ja auch soweit, nun zu meinen Fragen:
1. Wie bekomme ich das gesamte Menu genau mittig auf den BG ausgerichtet?
2. Ich habe eine kleines Designelement ( vertikale striche zwischen den links)
welches ich dort einbringen will. Habe es als 1px breite Grafik abgespeichert.
Was mus ich machen damit ich es genau mittig zwischen den einzelnen links bekomme?
3. Wenn ich auf ein link klicke soll der aktive Menupunkt mit dem hellroten BG beim Seitenaufruf hervorgehoben sein. Ist es mit CSS machbar oder braucht man dafür JS?
4. Gibt's eine möglichkeit das man die pseudo klassen in meiner CSS vereinfachen kann
weil dort immer das gleiche steht.

So soll das Menu am Ende aussehen: http://schrottplatz.pytalhost.com/test/_images/navi.gif
Sry, habs die gif jetzt auf die schnelle gemacht aber die Navi soll mittig zentriert sein sowie die Abstände zwischen den links sollen natürlich gleich sein.

Meine CSS:
PHP: 
#navi{
background:url(_images/bgnavi_line.gif) no-repeat;
border:1px solid black;
width:574px;
height:17px;
}
#navi ul{
margin:0px;
padding:0px;
text-align:center;
}
#navi li{
list-style:none;
display:inline;
font-family:"Times New Roman";
font-size:14px;
}
#navi li a{
display:block;
float:left;
text-decoration:none;
}

a#link1:link, a#link1:visited{
color:#FFFFFF;
padding-left:20px;
padding-right:20px;
}
a#link1:hover{
color:#FFFFFF;
background:url(_images/bgnavi.gif) repeat-x;
height:17px;
}
a#link2:link, a#link2:visited{
color:#FFFFFF;
padding-left:20px;
padding-right:20px;
}
a#link2:hover{
color:#FFFFFF;;
background:url(_images/bgnavi.gif) repeat-x;
height:17px;
}
a#link3:link, a#link3:visited{
color:#FFFFFF;
padding-left:20px;
padding-right:20px;
}
a#link3:hover{
color:#FFFFFF;
background:url(_images/bgnavi.gif) repeat-x;
height:17px;
}
a#link4:link, a#link4:visited{
color:#FFFFFF;
padding-left:20px;
padding-right:20px;
}
a#link4:hover{
color:#FFFFFF;
background:url(_images/bgnavi.gif) repeat-x;
height:17px;
}
a#link5:link, a#link5:visited{
color:#FFFFFF;
padding-left:20px;
padding-right:20px;
}
a#link5:hover{
color:#FFFFFF;
background:url(_images/bgnavi.gif) repeat-x;
height:17px;
}
HTML:
PHP: 
<div id="navi">
  <ul>
    <li><a id="link1" href="#" title="link1"><span>Home</span></a></li>
    <li><a id="link2" href="#" title="link2"><span>Music</span></a></li>
    <li><a id="link3" href="#" title="link3"><span>Gallery</span></a></li>
    <li><a id="link4" href="#" title="link4"><span>Media</span></a></li>
    <li><a id="link5" href="#" title="link5"><span>Guestbook</span></a></li>
  </ul>
</div>

Hoffe ihr könnt mir bei meinen Probs weiterhelfen.
 
Um das Listenmenü im DIV #navi horizontal zentrieren zu können, muß das DIV die text-align:center-Eigenschaft erhalten, sowie auf die float- und display-Eigenschaft für die Links verzichtet werden.

Der Nachteil: Durch den Wegfall der beiden Eigenschaften werden nun in den Browsern die Zeilenumbrüche (= White Spaces) im HTML-Code zwischen den Listenpunkten mit einer Lücke zwischen ihnen quittiert, weshalb ich sie in einer Zeile notiert habe.

Die anderen drei Probleme / Fragen sind ebenfalls gefixt:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
body {
font-family:"Times New Roman";
font-size:14px;
}

/* Lösung für 1.) */
#navi{
background:url(_images/bgnavi_line.gif) no-repeat;
border:1px solid black;
width:574px;
height:17px;
text-align:center;
}

#navi ul {
margin:0px;
padding:0px;
}

#navi li {
list-style:none;
display:inline;
}

/* Lösung für 2.) */
#navi li.border {
background: url(_images/border.gif) no-repeat 0 0;
}

/* Lösung für 4.) */
#navi li a:link, #navi li a:visited {
text-decoration:none;
color:#FFFFFF;
padding: 0 20px;
margin: 0 1px;
}

/* Lösung für 3.) */
#navi li a:hover, #navi li a#active:link, #navi li a#active:visited {
background:url(_images/bgnavi.gif) repeat-x;
height:17px;
}
</style>
</head>
<body>
<div id="navi">
  <ul><li><a id="active" href="#" title="link1"><span>Home</a></span></li><li class="border"><a id="link2" href="#" title="link2"><span>Music</a></span></li><li class="border"><a id="link3" href="#" title="link3"><span>Gallery</a></span></li><li class="border"><a id="link4" href="#" title="link4"><span>Media</a></span></li><li class="border"><a id="link5" href="#" title="link5"><span>Guestbook</a></span></li></ul>
</div>
</body>
</html>
 
Ich zitiere mich an dieser Stelle mal selber ;)

Um das Listenmenü im DIV #navi horizontal zentrieren zu können, muß [...] auf die float- und display-Eigenschaft für die Links verzichtet werden.

Der Nachteil: Durch den Wegfall der beiden Eigenschaften werden nun in den Browsern die Zeilenumbrüche (= White Spaces) im HTML-Code zwischen den Listenpunkten mit einer Lücke zwischen ihnen quittiert, weshalb ich sie in einer Zeile notiert habe.
Zum Vergrößern anklicken....

Du hast die Listenpunkte noch mit Zeilenumbrüchen im HTML-Code notiert, weshalb die Browser diese sog. "White Spaces" mit einer Lücke zum nachfolgenden Element quittieren, und so ein Abstand zur Border-Grafik entsteht.

Entferne also die Zeilenumbrüche zwischen den Listenpunkten und die Lücke schliesst sich - vergleiche hierzu einfach noch mal meinen Quellcode ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück