• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme mit Navigationsleiste

F

freakXHTML

Mitglied
Hallo zusammen,
ich möchte eine Navigationsleiste gestalten, doch leider verruscht die ganze Zeile, wenn ich über einen Link mit dem Cursor gehe. Dabei wird nämlich der Link fett dargestellt. Ich habe schon mit einer festen Breite gearbeitet, aber das bringt nichts. Was mache ich falsch???

HTML: 
 <dl id="navigation">
   <dd><a href="#"></a></dd>                     
   <dd><a href="#"></a></dd>             
   <dd><a href="#"></a></dd>                  
   <dd><a href="#"></a></dd>          
   <dd><a href="#"></a></dd>   
   <dd><a href="#"></a></dd>             
   <dd><a href="#"></a></dd>                       
   <dd><a href="#"></a></dd>                     
   <dd><a href="#"></a></dd>                     
  </dl>

CSS:
Code: 
#navigation dl{
 margin: 0;
 padding: 0;
}
#navigation dd{
 display: inline;
}
#navigation a{
   margin-right: 3px;
 padding-left: 4px;
 
}
....
a:hover {
 color: #036; font-weight:bold;
}

Vielen dank für eure Hilfe
lg, freakXHTML
 
Das kommt von display: inline in Verbindung mit font-weight: bold beim hover.

display: inline; macht die Elemente nur so groß, wie sie sein müssen, wenn du dann die Schrift fett darstellst, braucht sie mehr Platz, also verbreitert sich das Element und die Nachstehenden verschieben sich. Nimm statt display: inline; float: left, dann kannst du ihnen auch eine Breite geben und sie sollten sich nicht mehr verschieben.

Ein Menü ist aber eigentlich keine Definitionsliste, sondern eher eine unsortierte Liste (<ul>).
 
Zumal zu einer dl immer jeweils ein Paar aus dd und dt gehört, die dt hier aber komplett fehlen.
 
Haaaalt :-P,
ich habe doch noch eine Frage. Ich benutze nun eine <ul> Liste. Das Problem ist nun, dass diese Liste nicht beim div Anfagng anfängt. Das bedeutet, dass sie von Natur aus nach rechts eingeschoben ist.

Ich möchte acht Menüpunkte gestalten und habe somit die Pixelanzahl der Websitenbreite durch 8 geteilt. Da die Website genau 1000px lang sein soll, hat jeder Menüeintrag genau 125px.

Da die Liste aber nach rechts eingeschoben ist, finden nicht alle Listenelemte ihren Platz. Wie kann ich das ändern. Ich habe das problmen mit negativen margin Werten lösen können, aber das ist wahrscheinlich nicht gerade serious....

HTML: 
  <ul id="navigation">
   <li><a href="#"></a>1</li>                    
   <li><a href="#"></a>2</li>               
   <li><a href="#"></a>3</li>                   
   <li><a href="#"></a>4</li>          
   <li><a href="#"></a>5</il>  
   <li><a href="#"></a>6</li>            
   <li><a href="#"></a>7</li>                  
   <li><a href=""#></a>8</li>                    
 </ul>

CSS
Code: 
#navigation ul {
  margin:0;
  padding: 0;
  list-style-type:none;
}
#navigation li {
  float:left;
  min-width:125px;
  text-align:center;
  background:url(navi.jpg) no-repeat left top;
  list-style-type:none;
}

Vielen Dank für eure Hilfe

lg, freakXTHML
 
Die Listenelemente einer Liste werden von jedem Browser anders eingeschoben. Einer nur mit margin, einer nur mit padding, einer mit beidem. Wenn Du der Liste margin/padding:0 gibst, dann sollte das eigentlich klappen. Du musst immer bedenken: Wenn Du irgendwo Abstände hast, aber keine willst, dann musst Du sie eben auf 0 setzen. Bei allen beteiligten Elementen.

Aber Du hast in Deinem CSS-Code auch einen Fehler. "#navigation ul" gibt es in Deinem Code nicht und darf es auch nciht geben. Es gibt nur "ul#navigation". Vermutlich hat Dein CSS deshalb keinen Effekt.
 
Hallo,
tatäschlich....wenn ich deinen verbersserten CSS Code anwende, dann funtkioniert es. Mmmh, aber ich verstehe nicht, warum dies ein Fehler ist! Ich habe das eigentlich bis jetzt immer so gemacht!!

Vielen Dank
lg, freakXTHML
 
Mit #navigation sprichst du das Element mit der id="navigation" an.
Mit #navigation ul eine ul innerhalb von #navigation:
Code: 
#navigation {
color: red;
}

#navigation ul {
color: blue;
}
Code: 
 [COLOR="Red"]<ul id="navigation">
  <li>item1</li>
  <li>[/COLOR]
[COLOR="Blue"]    <ul>
     <li>item1.1</li>
    </ul>[/COLOR]
 [COLOR="#ff0000"]</li>
 <li>item2</li>
 </ul> [/COLOR]
ul#navigation bedeutet eine ul mit der id="navigation".

1 steht hier außerhalb von a:
HTML: 
<li><a href="#"></a>1</li>
 
Hallo,
das wusste ich nicht...wieder etwas dazu gelertn. Mmmh....ich habe mit der Navileiste immer noch ein Problem (das mich übrigend tierisch aufregt ;))

Ich arbeite mit phase 5 und alles wird schön sauber im beiliegendem Browser abgebildet. Wenn ich nun aber meine Website öffne, dann befindet sich die Navileiste nicht mehr unter dem Logo sondern über diesem!

Woran kann das liegen?

HTML: 
<div id="banner">
  <ul id="navigation">
    <li><a href="#"></a>1</li>                    
    <li><a href="#"></a>2</li>               
    <li><a href="#"></a>3</li>                   
    <li><a href="#"></a>4</li>          
    <li><a href="#"></a>5</il>  
    <li><a href="#"></a>6</li>            
    <li><a href="#"></a>7</li>                  
    <li><a href=""#></a>8</li>                    
  </ul> 
 </div>

CSS
Code: 
#banner {
 width: 1000px;
 background: url(Banner.jpg) no-repeat;
 min-height:200px;
 
} 
ul#navigation  {
  margin:0;
  margin-top:6px;
  padding: 0;
  list-style-type:none;
  font-size:16pt;
  margin-top:203px;    //Hier ziehe die Navileiste manuell runter!
}
#navigation li {
  float:left;
  min-width:125px;
  min-height:25px;
  text-align:center;
  background:url(Gude.jpg) no-repeat left top;
  list-style-type:none;
}

Vielen Dank für eure Hilfe
lg, freakXTHML

PS: Der validator meckert bei der Liste rum! Leider kann ich auch hier nicht den Fehler finden.
 
Hallo,
vielen Dank für die Antwort. Dennoch verstehe ich noch nicht ganz die Lösung. Ich habe den Abstand mit margin erzeugt. Ich habe also das ganze Element um 203px nach unten verschoben.

Die richtige Lösung ist aber mit padding zu arbeiten. Ich verstehe nicht warum. Das bedeutet doch, dass ich einfach den Abstand von Inhalt zur Elementgrenze vergrößere. Warum macht das beim ie so einen krassen unterschied. In diesem Fall sollte das nach meinem Verständis keine großen UNterschied machne.

Wo liegt mein Denkfehler.

Wegen dem Validator. Ich habe wiedermal falsch den Quelltext kopiert. An dem falsch positionierten Rautezeichen liegt es nicht. Ein Fehler ist "end tag for element "il" which is not open", aber ich verstehe nicht warum.

Wegen des divs: Ich fasse zwar nicht verschiedene Elemente zusammen, doch möchte ich über die NAvileiste ein Logo setzen. Dies bewerkstellige ich mit der id "banner". Ist dies nicht korrekt? Wie sollte ich es sonst machen?

Vielen Dank für eure Hilfe
lg, freakXHTML
 
#navigation ul spricht eine ul innerhalb von #navigation an, richtig.

Aber ich sagte:
Efchen schrieb:
"#navigation ul" gibt es in Deinem Code nicht und darf es auch nciht geben. Es gibt nur "ul#navigation". Vermutlich hat Dein CSS deshalb keinen Effekt.
Zum Vergrößern anklicken....
Hier (http://www.html.de/css/26647-probleme-mit-navigationsleiste.html#post203948) sieht man, dass er eine ul#navigation hat. Wenn er die hat, darf es kein "#navigation ul" geben, weil IDs eindeutig sind. So meinte ich das. Es darf nur ein "#navigation ul" geben, wenn er zuvor die ID "navigation" beim Tag <ul> entfernt.

Ein "#navigation ul" und ein "ul#navigation" kann in einem Code nicht gleichzeitig vorkommen, weil das zwei Elemente mit der selben ID impliziert, was ja verboten ist.

Generell ist natürlich beides möglich und richtig, aber eben nicht gleichzeitig.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben