Horizontales Navigationsmenue

Status
Nicht offen für weitere Antworten.
S

shahon

Grünschnabel
Hallo erst mal,
ich habe ein Problem und zwar kann man im IE6 keine Bilder in divs darstellen, wenn ihr nicht wisst wie ich es meine, seht euch doch bitte einfach mal die folgende Seite im FF an und danach im IE6, dann koennt ihr erkennen, dass im FF der Hintergrund der Navigationsleiste angezeigt wird (Bild) und im IE6 nur ein schwarzer Hintergrund zu sehen ist.

http://motorradstammtisch-rosbach.de/

Wie schon angesprochen habe ich es momentan in einem div geloest:

HTML: 
<div id="menu_horiz">
            <li><a id="activ" target="_self" href="#">Main</a></li>
            <li><a target="_self" href="#">Termine</a></li>
            <li><a target="_self" href="#">Treffpunkte</a></li>

            <li><a target="_self" href="#">Teilnehmer</a></li>
            <li><a target="_self" href="#">Touren</a></li>
            <li><a target="_self" href="#">Album</a></li>
            <li><a target="_self" href="#">Kontakte</a></li>
</div>

Der dazugehoerende CSS Abschnitt:
Code: 
* html div#menu_horiz {
   height: 1%;
}

div#menu_horiz {
   background-color: #000000;  /* background color for the entire menu row */
   width: 100%;
   margin: 0;
}

div#menu_horiz li {
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
}

div#menu_horiz a {
   	padding: .7em 1em .7em 1em; /* padding inside the list item box */
   	margin: 0; /* margin outside each list item box */
   	text-decoration: none; /* no underline for links */
   	display: block; /* IE has problems with this, fixed above */
   	font-family: "Courier New", Courier, monospace;
	font-size: 13.56px;
	font-style: normal;
}

div#menu_horiz li a:hover {
   	color: #FFFFFF;
	background-image: url(Bilder/head_nav_bg_hov1.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	vertical-align: middle;
	text-decoration: none;
	font-family: "Courier New", Courier, monospace;
	font-size: 13.56px;
	font-style: normal;
}
#activ {
   	color: #000000;
	background-image: url(Bilder/head_nav_bg_hov.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	vertical-align: middle;
	text-decoration: none;
	font-family: "Courier New", Courier, monospace;
	font-size: 13.56px;
	font-style: normal;
}

Ich habe aber auch schon Seiten gesehen, da wurde das ganze ohne Divs geloest, wodurch die Navigation auch im IE6 ordnungsgemaess funktionierte. Es ist mir klar, dass der IE7 damit keine Probleme mehr hat, jedoch haben einige Benutzer dieses Motorradstammtisches immer noch den IE6 und wollen sich auh nicht umstellen.

Wenn ich mich recht erinnere kann man das Ganze auch mittels <ul> in Verbindung mit <li> loesen, jedoch sind meine bisherigen Versuche alle gescheitert und ich bin schon fast am Verzweifeln.

Wenn mir jemand helfen koennte, waehre ich wirklich sehr dankbar.

Rgds
shahon
 
Hi,

als erstes fehlt dem "Listenmenü" das ul-Element, denn das li-Element ist kein Nachfolgeelement des div-Elements.

Dass Firefox den definierten schwarzen Hintergrund für das DIV #menu_horiz nicht anzeigt, liegt lediglich daran, dass die Floatumgebung nicht "gecleart" wird (siehe hierzu http://positioniseverything.net/easyclearing.html ), der IE hingegen zeigt die schwarze Hintergrundfarbe dennoch an, auch wenn das Floaten nicht aufgehoben wird.

Fazit: background-color:#000000 dürfte hier überflüssig sein, da der tatsächliche Hintergrund der Navigation in der umschliessenden Tabellenzelle als Hintergrundbild eingebunden ist.
 
Der Firefox soll ja auch nicht den schwarzen Hintergrund anzeigen... der Firefox zeigt alles richtig an, nur im IE6 ist es falsch, denn im IE wird anstatt des Hintergrundbildes alles schwarz angezeigt.

Edit: Ah, jetzt habe ichs verstanden, der IE6 laesst die farbliche Definition (schwarz) Vorang gewaehren gegenueber des Hintergrundbildes, beim FF ist es jedoch genau umgekehrt.

Danke

Rgds
shahon
 
Zuletzt bearbeitet:
Ist mir schon klar, dass Firefox den schwarzen Hintergrund nicht anzeigen soll.

Ich hab nur erläutert, wie es sich derzeit in den beiden Browsern verhält, was also der Grund für die unterschiedliche Darstellung ist, und die entsprechende Lösung genannt, damit der IE die schwarze Hintergrundfarbe nicht mehr darstellt:

Maik hat gesagt.:
Fazit: background-color:#000000 dürfte hier überflüssig sein, da der tatsächliche Hintergrund der Navigation in der umschliessenden Tabellenzelle als Hintergrundbild eingebunden ist.
Zum Vergrößern anklicken....
 
shahon hat gesagt.:
Edit: Ah, jetzt habe ichs verstanden, der IE6 laesst die farbliche Definition (schwarz) Vorang gewaehren gegenueber des Hintergrundbildes, beim FF ist es jedoch genau umgekehrt.
Zum Vergrößern anklicken....
Das hast du falsch verstanden.

Wenn anstelle der Hintergrundfarbe bzw. zusätzlich ein umlaufender Rahmen für das DIV #menu_horiz definiert wird (border:1px solid red), umschliesst der IE die Box vollständig mit dem Rahmen, Firefox und die übrigen modernen Browser zeigen aber nur den oberen und unteren Rahmen an, der seitliche Rahmen fehlt, und der floatende Inhalt "überlappt" das Element am unteren Elementrand.

Dies geschieht dann, wenn das Floaten der li-Elemente mittels der clear-Eigenschaft nicht aufgehoben wird.

Lies dir hierzu bitte den von mir genannten Artikel http://positioniseverything.net/easyclearing.html durch, und überprüfe diesen Quellcode im Firefox:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_shahon</title>

<style type="text/css">
<!--
div#menu_background {
background:url(http://motorradstammtisch-rosbach.de/Bilder/head_nav_bg.gif) repeat-x;
}

div#menu_horiz {
   background-color: #000000;  /* background color for the entire menu row */
   border:1px solid red;
   width: 100%;
   margin: 0;
}

div#menu_horiz ul {
list-style:none;
margin:0;
padding:0;
}

div#menu_horiz li {
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */
   margin: 0 ;
}

div#menu_horiz a {
           padding: .7em 1em .7em 1em; /* padding inside the list item box */
           margin: 0; /* margin outside each list item box */
           text-decoration: none; /* no underline for links */
           display: block; /* IE has problems with this, fixed above */
           font-family: "Courier New", Courier, monospace;
        font-size: 13.56px;
        font-style: normal;
}

div#menu_horiz li a:hover {
           color: #FFFFFF;
        background-image: url(http://motorradstammtisch-rosbach.de/Bilder/head_nav_bg_hov1.gif);
        background-repeat: repeat-x;
        background-position: bottom;
        vertical-align: middle;
        text-decoration: none;
        font-family: "Courier New", Courier, monospace;
        font-size: 13.56px;
        font-style: normal;
}
#activ {
           color: #000000;
        background-image: url(http://motorradstammtisch-rosbach.de/Bilder/head_nav_bg_hov.gif);
        background-repeat: repeat-x;
        background-position: bottom;
        vertical-align: middle;
        text-decoration: none;
        font-family: "Courier New", Courier, monospace;
        font-size: 13.56px;
        font-style: normal;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
-->
</style>

</head>
<body>

<div id="menu_background">
     <div id="menu_horiz" class="clearfix">
          <ul>
              <li><a id="activ" target="_self" href="#">Main</a></li>
              <li><a target="_self" href="#">Termine</a></li>
              <li><a target="_self" href="#">Treffpunkte</a></li>
              <li><a target="_self" href="#">Teilnehmer</a></li>
              <li><a target="_self" href="#">Touren</a></li>
              <li><a target="_self" href="#">Album</a></li>
              <li><a target="_self" href="#">Kontakte</a></li>
          </ul>
     </div>
</div>

</body>
</html>
Zur Gegenprobe einfach anschliessend im DIV #menu_horiz den Klassenaufruf class="clearfix" entfernen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück