CSS Navigation in Firefox

thesa · 28. Feb. 2006

Hallo erstmal
Ich hab ein Problem mit meiner Navigation. Ich erstelle eine Homepage mit einer Navigation aus CSS.

Ansicht im Internet-Explorer
Ansicht im Firefox

Auf den 2 Bildern seht ihr meinen jetztigen Stand. Das Problem ist das die Navigation im Firefox kein Block ist und ich somit keine Hintergrundfarbe darstellen kann und es meinen Text von unten immer zu weit hochnimmt. (Das zweite sieht man auf dem Bild nicht)
Ich habe auf dem Bild vom Firefox alle Blöcke mit dem Webentwicklungserweiterung dargestellt. Die vorhandenen Blöcke bekommen einen farbigen Rand, wobei die Navigation leider leer ausgeht. Ich hab die ganze Navigation in einem div tag, welchem ich zustäzlich noch eine Klasse zugewiesen habe. Und da ich das ganze im css definiert habe, sollte das eigentlich einen Block sein.

Der Code sieht bissher so aus:
HTML:

Code:

    <div class="navdiv">
      <ul class="navlist">
        <li class="active"><span>Home</span></li>
        <li><a href="#">Angebot</a></li>
        <li><a href="navbar-kunst2.html">Betriebe</a></li>
        <li><a href="#">Über uns</a></li>
        <li><a href="#">Wollen Sie helfen?</a></li>
        <li><a href="#">Kontaktanfrage</a></li>
      </ul>
    </div>

CSS:

Code:

.navdiv {
	margin-right: 10%;
	background: red;
	padding: 0;
        height: 0px;
}

.navdiv .navlist a, .navlist span{	
	white-space:nowrap;										
	display:inline;
	display:block;
	color: #444444;											
	width: auto;
	text-decoration: none;										
	background: #73b06d;
	padding: 0.15em 0.7em;
	margin: 0;
	border-left: 1px solid #ffffff;								
	border-top: 1px solid #ffffff;
	border-right: 1px solid #096826;
	border-bottom: 1px solid #096826;
}

.navdiv .navlist ul{											
	list-style: none;
	padding: 0;
	margin: 0;
	border: none;
}

.navdiv .navlist li{											
	display: block;
	float: left;												
	width: auto;
	margin: 0;
	padding: 0;
}

.navdiv .navlist span{
	border-left: 1px solid #096826;
	border-top: 1px solid #096826;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	background-color: white;
	color: black;
}

.navlist a:hover, .navlist A:active { 
	background: #096826; 
	color: white;
}

Ich hoffe ihr versteht mein Problem und könnt mir helfen. Ich gebe echt bald auf mit dem Zeugs.
Ach jo und ich weiss der Code ist noch nicht sauber, das display:inline;display:block; wird sicher noch bereinigt, sollte aber für das Block zeug nicht entscheidend sein.

Thesa

blindalley · 28. Feb. 2006

Möglicherweise tut es:

background-color:#red;

bine · 28. Feb. 2006

Wenn du in deinem Navicontainer ne Höhe von 0px definierst, dann haste auch 0px Hintergrundfarbe, also gar keine.

thesa · 01. März 2006

Und wie kann ich diese Höhe genau so anpassen, dass sie genau so hoch ist wie die Navigation. Ich meine egal wie gross die Schriftgrösse ist, oder ob das Menü wegen zu knapper Bildschrimbreite zusammklappt. Das height: ??; soll immer so hoch wie die Navigation sein.

bine · 01. März 2006

Das kann ich Dir anhand deines Codes nicht so einfach erklären, weil ich das ganz anders aufbaue.

Deshalb hier mal der komplette Code:

Code:

<!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>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
*	{
margin:0;
padding:0;
}

#navicontainer	{
	position:absolute;
	width:90%;
	background:#FF5F00;
	float:left;
         border-left: 1px solid #ffffff;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #096826;
	border-bottom: 1px solid #096826;
         font-size:100%;
         color: #444444;
}

#navicontainer ul	{
	list-style-type: none;
}

#navicontainer ul li{
	float:left;
       	border-left: 1px solid #096826;
	border-top: 1px solid #096826;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

#navicontainer ul li a:link, #navicontainer ul li a:visited	{
         padding:0.15em 0.7em;
	display:block;
	text-decoration:none;
	color: #000;
         background: #73b06d;
}

#navicontainer ul li a:hover, #navicontainer ul li a:active {
	background:#096826;
	color: #fff;
}

.active	{
	background:#fff;
         padding:0.15em 0.7em;
}

</style>
</head>
<body>
<div id="navicontainer">
	                 <ul>
	                         <li class="active">Home</li>
	                          <li><a href="#">Angebot</a></li>
	                          <li><a href="navbar-kunst2.html">Betriebe</a></li>
	                          <li><a href="#">Über uns</a></li>
	                          <li><a href="#">Wollen Sie helfen?</a></li>
	                          <li><a href="#">Kontaktanfrage</a></li>
 </div>
</body>
</html>

http://www.2median.de/zeug/navbackground.html

slosd · 01. März 2006

Das Problem bei FF ist ja, dass es solche Größenangaben haargenau umsetzte. Auch wenn z.b. ein Div-Element ein anderes umschließt.
Du musst halt schaun wieviel pixel das Menü hoch ist. Einfach herum probieren.

Ehrlich gesagt gefällt mir das Menü ohne roten Hintergrund viel besser !

bine · 01. März 2006

@slost:

1. ist die genaue Umsetzung der Angaben die man macht kein Firefox Problem sondern der Firefox ist zum Glück ein Browser der das richtig umsetzt was man schreibt.

2. Versteh ich nicht. Wieso soll man rumfummeln und schaun wieviel Pixel das Menü groß ist, schließlich kann die Schriftgröße vom Betrachter verändert werden und dann muß es immer noch passen. In diesem Beispiel gibt es keine Festlegung auf eine Größe.

3. Mir gefällt das Menü auch ohne den roten Hintergrund besser, aber wie sagt man so schön... "Der Kunde ist König"

thesa · 01. März 2006

Hi
Um hier mal die wichtigste Frage zu klären, NEIN der Hintergrund bleibt sicher nicht rot, sondern wird das gleiche grün annehmen wie das Menü. Damit ich aber weiss welche Farbe was macht hab ich das übergangsweise rot gewählt. So viel zum Thema.

@bine danke viel mal für deine Arbeit, nur bin ich immernoch überfordert. Ich hab zu dem ganzen Menü auch noch ein Untermenü und ich versuchte nun deinen Code zu erweitern damit das ganze auch noch ein Untermenü gibt. Leider bin ich kläglich gescheitert. Und da mein code doch sehr verschieden ist von deinem kann ich auch meinen fast fertigen code nicht noch ausbessern, denn ich weiss nicht wie.

Wenn du also noch ne Idee hättest währ ich dir sehr sehr dankbar.

Hier nochmals mein bisherigen stand.

Code:

<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
*	{
margin:0;
padding:0;
}

.navcontainer {
	margin: 0;
	padding: 0;
	height: 3.8em;
}

.navcontainer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
}

.navcontainer li {
	display: block;
	margin: 0;
	padding: 0;
	float: left;
	width: auto;
}

.navlist, .navlist2 {
	padding: 0;
	margin: 0;
	clear: both;
}

.navcontainer a, .navcontainer span {	
	white-space: nowrap;
	display: inline;
	display: block;
	color: #444444;
	width: auto;
	text-decoration: none;
	background: #73b06d;
	margin: 0;
	padding: 0.15em 0.7em;
	border-left: 1px solid #ffffff;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #096826;
	border-bottom: 1px solid #096826;
}

.navlist2 a /*.navlist2 span*/ {
	white-space: nowrap;
	display: inline;
	display: block;
	color: #444444;
	width: auto;
	text-decoration: none;
	background: #a1a1a1;
	margin: 0;
	padding: 0.15em 0.7em;
	border-left: 1px solid #ffffff;
	border-top: 1px solid #ffffff;
	border-right: 1px solid #595959;
	border-bottom: 1px solid #595959;
}

.navcontainer a:hover, .navcontainer a:active {
	background: #096826;
	color: white;
}

.navcontainer a.active:link, .navcontainer a.active:visited {
	background: #096826;
	color: white;
	font-weight: bold;
}

.navlist span {
	border-left: 1px solid #096826;
	border-top: 1px solid #096826;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	background-color: white;
	color: black;
}

.navlist2 span {
	border-left: 1px solid #595959;
	border-top: 1px solid #595959;
	border-right: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
	background-color: white;
	color: black;
}

</style>
</head>
<body>
    <div class="navcontainer">
      <ul class="navlist">
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Angebot</a></li>
        <li><span>Betriebe</span></li>
        <li><a href="navbar-kunst2.html">Über uns</a></li>
        <li><a href="#">Wollen Sie helfen?</a></li>
        <li><a href="#">Kontaktanfrage</a></li>
      </ul>
      <ul class="navlist2">
        <li><a href="#">Café</a></li>
        <li><a href="#">Mechanik</a></li>
        <li><a href="#">Montage</a></li>
        <li><a href="#">Ausrüsterei</a></li>
        <li><span>Kunsthandwerk</span></li>
        <li><a href="#">Hauswirtschaft</a></li>
        <li><a href="#">Ausbildung</a></li>
      </ul>
    </div>
</body>
</html>

bine · 02. März 2006

Du kannst Dir auch mal ansehen was hier gestrickt wurde (siehe die letzten Beiden Beispiele auf der Seite) um die Navi zu erarbeiten.
Eine dynamische Unternavigation die ein und ausblendet wird allerdings nur unter zuhilfenahme von javascript möglich sein.

http://de.selfhtml.org/css/layouts/anzeige/nav_javascript.htm

CSS Navigation in Firefox

thesa

New member

blindalley

New member

bine

Lounge-Member

thesa

New member

bine

Lounge-Member

slosd

Guest

bine

Lounge-Member

thesa

New member

bine

Lounge-Member