✔ CSS Dropline - Problem

[LiMessi]

Hallo,
ich habe in den letzten Tagen für meine Page eine erweiterte Navigation in Droplineformat geschrieben..
Leider habe ich jetzt das ein oder andere Problem, wo ich nicht weiter komme...

Hier mal die geschriebenen Scripte:

CSS-Code

#navibox
{
 width:850px;
 height:auto;
 background-color:#cccccc;
 border-style: none solid none solid;
 border-color: #ccc;
 border-width: 0px 5px 0px 5px;
 margin:0 auto;
}

/*------ Navigationsleiste ------ */


.navi
{
 padding-left: 0px;
 margin-left: 0px;
 background-color: #ccc;
 color: white;
 height: auto;
 background-color: #ccc;
 width: 100%;
 position: relative; 
 font-family: arial, verdana, sans-serif; 
 font-size: 11px;
 z-index: 500;
}

.navi .select 
{
 margin: 0; 
 padding: 0 0 0 40px; 
 list-style: none; 
 text-align: center;
 white-space: nowrap;
}

.navi li 
{
 display:inline;
}

.navi .select a 
{
 display: block; 
 padding: 5px 15px;
 background-color: #ccc;
 color: black;
 line-height: normal;
 text-decoration: none;
 float: left;
 border-left: 1px solid #fff;
 white-space: nowrap;
}



.navi .select a:hover, 
.navi .select li:hover a 
{
 background-color: #000;
 line-height: normal;
 cursor: pointer; 
 color: #fff;
}


.navi .sub 
{
 display: none;
}

/* IE6 only */
.navi table 
{
 border-collapse: collapse; 
 margin: -1px; 
 font-size: 1em; 
 width: 0; 
 height: 0;
}

.navi .sub 
{
 margin: 0; 
 padding: 0 0 0 40px;
 list-style: none;
}

.navi .sub li {background-color: #fff;}

.navi .select :hover .sub 
{
 height: 18px;
 display: block; 
 position: absolute;
 float: left;
 top: 24px; 
 left: 0; 
 text-align: center;
}

.navi .select :hover .sub li a 
{
 display: block;
 height: 18px; 
 line-height: 16px;
 float: left;
 background-color: #fff;
 padding: 0 16px; 
 margin: 0; 
 white-space: nowrap; 
 border: 1px solid #000; 
 border-color: #888 #777 #666 #ddd; 
 color: #000;
 font-size: 10px;
}

.navi .select :hover .sub li a:hover 
{
 color: #000; 
 background: #ccc; 
 border-color: #fff #333 #000 #fff; 
 line-height: 15px;
}

PHP-Code

<div id="navibox">
        <div class="navi">
<ul class="select"><li><a href="#nogo"><b>Home</b></a></li></ul>
<ul class="select"><li><a href="#nogo"><b>Whats up</b></a></li>
<li><a href="#nogo"><b>All about Oli</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub">
		<li><a href="#nogo">Meine Daten</a></li>
		<li><a href="#nogo">Facts about Oli</a></li>
		<li><a href="#nogo">Facts about Fussball</a></li>
		<li><a href="#nogo">Facts about Business</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo"><b>Galerie</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul class="sub">
		<li><a href="#nogo">Privat</a></li>
		<li><a href="#nogo">Fussball</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="select"><li><a href="#nogo"><b>Impressum</b></a></li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
        </div>
    </div>

www.oliver-leifken.de
Das ist meine Website, die Navigation soll eigentlich komplett durchgehen(siehe beigefügtes Bild) und nicht wie momentan auf der Page zu sehen ist, nur ein kleines Stück.

Hoffe ihr könnt mir weiterhelfen...

Schönen Start in die Arbeitswoche.

Gruß Oli

 

[Maik]

Hi,

nimm mal folgende Regeln im Stylesheet auf:

.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 */

und ruf die Klasse clearfix zusätzlich im DIV navi auf:

<div class="navi clearfix"> ... </div>

Zur Erläuterung: Die Floatumgebung muss zum Abschluss "gecleart" werden, damit die umschliessende Box den Inhalt in vollem Umfang umschliesst.

 

[LiMessi]

Danke, habs geändert und es klappt wunderbar...

Weiteres Problem und zwar wenn ich von dem Menüpunkt Galerie auf die Untermenüpunkte gehen möchte, klappt dieses nur schwer..Mit welchem Befehl, kann ich diese Punkte unter den Menüpunkt Galerie setzten? Dann wären alle Probleme beseitigt...

Gruß Oli

 

[Maik]

Deinem HTML-Code entnehme ich, dass du das Dropline-Menü vermutlich nach einer Vorlage von Stu Nicholls erstellt hast.

Hier findest du sechs Beispiele, um die Funktionalität des Menüs zu optimieren:

• http://www.cssplay.co.uk/menus/dd_valid_2.html
• http://www.cssplay.co.uk/menus/drop_line.html
• http://www.cssplay.co.uk/menus/doors_drop_line.html
• http://www.cssplay.co.uk/menus/doors_drop_line_two.html
• http://www.cssplay.co.uk/menus/doors_drop_line_three.html
• http://www.cssplay.co.uk/menus/simple_dropline

 

[LiMessi]

Ich nochmal...
leider finde ich diese Option nicht, wie ich die Untermenüs unter das Hauptmenü bekomme. Und im Internet Explorer 6 werden die Untermenüs als Block am Anfang Angezeigt..Ich habe die Datei überwiegend alleine geschrieben...habe nur mal zur Info auf die anderen Seiten geschaut..

Hoffe ihr könnt mir weiterhelfen...komme nämlich nicht weiter...Script steht oben!

Gruß

 

[Maik]

Davon war auch nicht die Rede, dass du dort eine Option findest, um die Submenüs unterhalb der Hauptmenüpunkte auszurichten.

Vielmehr findest du dort sechs Beispiele, wie das Submenü nicht wieder umgehend geschlossen wird, wenn es nur zwei Links enthält, wie bei dir der Menüpunkt "Galerie".

Außerdem gibt es mit diesen Vorlagen keine Darstellungsprobleme im IE6.