✔ Navi-Leiste richtet sich nicht richtig aus

[FunkFlex]

Hi,
ich hab mal wieder ein Problem. Und zwar will ich ne nette Navileiste machen, aber irgendwie ordnet die sich in der fertigen Seite nicht untereinander, sonder Nebeneinander an.
Kann mir da vlt. jemand helfen?
Hier der Css Code:

#wrapper {
	margin: 0 auto;
	width: 960px;
}
	
#leftcol {
	float:left;
	width:192px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
	
#mecklogo {
	height: 192px;
	width: 192px;
	background-color:#0F3;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	}
#naviblock {
	height:auto;
	min-height: 400px;
	width: 192px;
	background-color:#999;
	margin: 0 0 0 0 ;
	padding: 0 0 0 0;
	}
ul#navigation li {
background-color: #fdfa0b;
float: left;
}

ul#navigation li a {
list-style:none;
color: black;
float: left;

}

ul#navigation li a:hover {
background-color: #6d6d5d;
color: #fff;
}

ul#navigation-1 li a.active {
background: #459d44;
color: #fff;
text-decoration: underline;
}
	


#rightcol {
	width:768px;
	float:left;
	margin: 0 0 0 0;
	padding: 0 0 0 ;
}
#header {
	height: 192px;
	width: 768px;
	background-color:#39C;
    margin: 0 0 0 0;
	padding:0 0 0 0;	
}

#metainformation {
height: 100px;
width: 752,68px;
background-color:#C3C;
margin: 7,68px;
padding: 7,68px;
}

danke schonmal!
Gruß FunkFlex

 

[Maik]

Hi,

sprichst du von den einzelnen Menüpunkten?

Ursache sind die float:left-Regeln für das <li>- und <a>-Element, die das rechtsseitige Umfließen des Elements durch sein benachbartes Element veranlassen, und folglich zu entfernen sind.

Sollten das hier Dezimalwerte darstellen, so werden diese nicht mit einem Komma, sondern mit einem Punkt notiert:

#metainformation {
...
width: 752,68px;
...
margin: 7,68px;
padding: 7,68px;
}

Und nutze bitte zukünftig die Highlight-Tags für deine Code-Präsentationen - vielen Dank!

mfg Maik

 

[FunkFlex]

Metainformation is ne eigente div box die nix mit der navileiste zu tun hat!
Sorry hab wohl bisschen zu viel Code kopiert :-D
Es geht wirklich nur um die Navigationspunkte die in der Navibox bzw dann Navigation enthalten sind.

 

[Maik]

Metainformation is ne eigente div box die nix mit der navileiste zu tun hat!
[...]
Es geht wirklich nur um die Navigationspunkte die in der Navibox bzw dann Navigation enthalten sind.

Abgesehen davon, dass ich den Seitenaufbau aus deinem vergangenen Thema kenne, wäre mir das auch so u.a. anhand der beiden unterschiedlichen Breitenangaben (linke / rechte Spalte) klar gewesen, und war neben der Nennung der Fehlerquelle deines angesprochenen Problems eine zusätzliche Info bzgl. deiner Fehler im CSS - sozusagen "Frei Haus" ;-)

Oder wolltest du hier später ein gesondertes Thema eröffnen, weil dieses Element nichts mit der Navigation zu tun hat, und die Browser die drei genannten Regeln wegen deiner produzierten Syntax-Fehler nicht wie gewünscht interpretieren?

Das hätte sich dann damit erübrigt.

Wie dem auch sei, ein Wort des Dankes für beide Hinweise auf die enthaltenden Fehler in deinem Stylesheet, ob nun erwünscht, oder nicht, wäre da definitiv angebrachter gewesen, anstelle dieser Antwort mit deiner unbegründeten Zurechtweisung

mfg Maik

 

[FunkFlex]

Ich bedanke mich doch immer
Nein spaß vielen Dank, ihr helf mir hier echt.
Sollte echt keine Zurechtweisung sein, hab nur gedacht, du hast mich falsch verstanden, tut mir leid.
Weil jetz is schon das nächste Problem aufgetreten.
Ich hab den verschiedenen Navigationspunkten ein Hintergrundbild zugewiesen nur jetz verschieben diese sich in der Navigationsbox nach rechts. Obwohl dies vorher, also vor dem Einfügen der Hintergrundbilder nicht der Fall war.
Des weitern bildet sich ein Spalt zwischen der darüberliegenden box und der Navigationsbox, ich weiss net ob ich zu dumm bin, aber den Fehler finde ich nicht.
Wärt ihr mal wieder so nett?

@charset "utf-8";
/* CSS Document */

#wrapper {
	margin: 0 auto;
	width: 960px;
}
	
#leftcol {
	float:left;
	width:192px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
	
#mecklogo {
	height: 192px;
	width: 192px;
	background-color:#0F3;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	}
#naviblock {
	height:auto;
	min-height: 400px;
	width: 192px;
	background-color:#F03;
	list-style:none;
	float:left;
	}
ul#navigation li {
list-style-type:none;
text-decoration:none;


}

ul#navigation li a {
	background-image:url(button.jpg);
	display:block;
	width:192px;
	height: 48px;
    color: black;
    text-align:center;

}

ul#navigation li a:hover {
background-image: url(button-hover.jpg);
display:block;
color: #fff;
text-decoration:underline;
list-style:none;
}

ul#navigation-1 li a.active {
background: #459d44;
color: #fff;
text-decoration: underline;
}
	


#rightcol {
	width:768px;
	float:left;
	margin: 0 0 0 0;
	padding: 0 0 0 ;
}
#header {
	height: 192px;
	width: 768px;
	background-color:#39C;
    margin: 0 0 0 0;
	padding:0 0 0 0;	
}

#metainformation {
height: 100px;
width: 752.68px;
background-color:#C3C;
margin: 0;
padding: 0;
}

Vielen Dank für Eure Hilfe
Gruß
FunkFlex

 

[Maik]

Versuch's mal mit dem Zurücksetzen der voreingestellten linken Polsterungseigenschaften des <ul>-Elements, um die Menüpunkte nach links außen zu rücken:

ul#navigation {
margin-left:0;
padding-left:0;
}

Bezüglich der Ursachenforschung wegen des Spaltes wirst du uns mit dem Link zu deiner Seite oder alternativ deinem aktuellen HTML-Code weiterhelfen müssen.

mfg Maik

 

[FunkFlex]

Also leider funktioniert das mit dem Zurücksetzen nicht.
Und hier meint Html Code.
Also beim Css hat sich bis auf margin und padding bei ul#navigation nix geändert

<body>
<div id="wrapper">
  <div id="leftcol">

   <div id="mecklogo">

   </div> <!-- endlogo---> 
    
   <div id="naviblock">
   	<ul id="navigation">
   	 <li><a href="#">Home</a></li>
  	 <li><a href="#">Unser Leitbild</a></li>
   	 <li><a href="#">Gästebuch</a></li>
   	 <li><a href="#">Kontakt</a></li>
	<li><a href="#">Impressum</a></li>
</ul>
   
   
   </div> <!-- endnavi -->
  </div> <!-- endleftcol-->
 
 <div id="rightcol">  
   <div id="header">
  
   </div> <!-- endheader*/ -->
	
   <div id="metainformation">	

   </div> <!-- endmetainfo */ -->
 </div> <!-- endrightcol -->
  
 </div> <!--endwrapper*/ -->
</body>
</html>

Danke!
Gruß FunkFlex

 

[Maik]

Also leider funktioniert das mit dem Zurücksetzen nicht.

Doch doch, das funktioniert schon

Und so richtig erst in Verbindung mit text-align:left:

ul#navigation li a {
        background-image:url(button.jpg);
        display:block;
        width:192px;
        height: 48px;
    color: black;
    text-align:left; /* anstelle von center */

}

Einen Spalt kann ich mit deinem Code nicht entdecken.

mfg Maik

 

[FunkFlex]

So der Spalt is jetz zwar weg, nur verschoben hat sich leider nix, bzw nichts zum besseren
Ich krig gleich die Krise wenn ich den Fehler net find
Weil ich hab ja an und für sich nix an der Position der Elemente verändert.
Man Man.... Ich glaub ich brauchn Bier

 

[Maik]

Hast du meine beiden Vorschläge in dein CSS übernommen?

Dann heißt die Devise: Browsercache leeren, Seite neu aufrufen.

Mehr nach links geht da nun wirklich nicht



Und den (roten) Spalt, der zwischen dem ersten Menüpunkt und dem Logo klafft, verputzen wir mit dieser Regeländerung:

ul#navigation {
margin:0;
padding:0;
}

mfg Maik