Subnavigation wird immer weggeblendet

D

DiDiJo

Erfahrenes Mitglied
hey leute ...


ich hab gerade unsere Firmenhomepage neu gemacht (nun mit schönem ordentlichem DIV-Layout) .. die Seite läuft auch shcon ganz gut auch wenn noch nicht soviel Inhalt drin ist.

Allerdings habe ich Probleme mit der NAvigation. Ich kriege es einfach nicht hin, dassdie Subnavigation stehen (display:block) bleibt, sobald man mit der maus rüberfährt. Im Firefox ist alles Super .. nur im IE 6 / 7 klappt es nicht ... ich hab auch schon überlegt das Problem mit Javascript zu lösen .. aber das hat auch nicht geklppt ... normalerweise baue ich eine Navigationsstruktur immer so auf und diesesmal gehts irgendwie gar nicht ... vlt. findet ja wer den Wurm

http://w00ae250.dd8328.kasserver.com/index.php

Hier die HTML-Struktur:
PHP: 
<div id="topmenu_firmenprofil" class="topmenu">
<a class="active" href="#">
<img border="0" onmouseout="this.src='pics/werbeagentur-firmenprofil.jpg'" onmouseover="this.src='pics/werbeagentur-firmenprofil-h.jpg'" alt="Firmenprofil" src="pics/werbeagentur-firmenprofil.jpg"/>
</a>
<div class="subnavi_holder">
<div class="subnavi">
<div class="subnavi_top"/>
<div class="sublink">
</div>
<div class="sublink">
</div>
<div class="sublink">
</div>
<div class="subnavi_footer"/>
</div>
</div>
</div>

p.s. in sublink sind die einzelenen navipunkte

und hier die CSS Anweisungen für die Navigation:
CSS: 
.topmenu, .topmenu_last{
	float:left;
	position:relative;
	text-align:center;
	width:97px;
	/*background-image:url(../pics/button.jpg);
	background-repeat:no-repeat;*/
	padding-top:0px;
	font-size:11px;	
	font-style:italic;
	font-weight:bold;
}

.topmenu a,.topmenu_last a{color:#353535;}
.topmenu a:hover,.topmenu_last a:hover{color:#fe7d1b;}

.topmenu_last {background-image:url(../pics/button_kontakt.jpg);}


.topmenu:hover .subnavi_holder,
.topmenu_last:hover .subnavi_holder{
	display:block;
}

.subnavi_holder:hover{display:block;}

.subnavi_holder{
	position:absolute;	
	width:177px;
	top:123px;
	left:0;
	display:none;
	#display:none;
	z-index:50;
}

.subnavi_blank {height:10px;}
 
Hi,

das wundert mich aber, dass es bei dir im FF super funktioniert, denn bei mir verhalten sich mit dem gezeigten Quellcode alle Browser (FF, IE, Opera, Safari, usw.) gleich.

Übrigens wird solch eine Navigation üblicherweise mit einem verschachtelten Listenelement ausgezeichnet, und in deiner aufgetischten DIV-Suppe fehlen noch zwei schliessende </div>-Tags.

mfg Maik
 
Maik hat gesagt.:
Hi,

das wundert mich aber, dass es bei dir im FF super funktioniert, denn bei mir verhalten sich mit dem gezeigten Quellcode alle Browser (FF, IE, Opera, Safari, usw.) gleich.

Übrigens wird solch eine Navigation üblicherweise mit einem verschachtelten Listenelement ausgezeichnet, und in deiner aufgetischten DIV-Suppe fehlen noch zwei schliessende </div>-Tags.

mfg Maik
Zum Vergrößern anklicken....

und wie verhalten sich die links in der SUBNAVI ... kann man alle anwählen oder wird direkt die subnavi wieder ausgeblendet ... ? ....

und meine "Div-Suppe" ... ist in ordnung ... das bei dir 2 elemente fehlen liegt daran das du nicht die komplette navi hast ... da du dir aber wahrscheinlich meinen link angeschaut hast, ist dir das schon aufgefallen und du wolltest nur ein wenig über den code herziehen .... :rolleyes::rolleyes::rolleyes:
 
@DIV-Suppe: Hast du schon mal was von einem semantischen Markup gehört? Ansonsten wünsche ich weiterhin einen guten Appetit.

Ich hab es auch nicht nötig, über deinen Quellcode herzuziehen, sondern mache dich nur auf die Mißstände aufmerksam.

Deinen Link hab ich bis eben nicht verfolgt, sondern mir deine Code-Schnipsel gezogen, und darin fehlen besagte </div>-Tags.

Lösungsvorschlag:

Code: 
#header {
        height:123px;
        background-image:url(../pics/header_kachel.jpg);
        background-repeat:repeat-x;
        position:relative;
        z-index:1000;

}
Code: 
.subnavi_holder{
        position:absolute;
        width:177px;
        top:123px;
        left:0;
        display:none;
        /*#display:none;*/
        z-index:50;
}


mfg Maik
 
@ semantischen Markup: keine Ahnung ... wie dem aber auch sei ... ich weiß das man ein Submenu auch mit ul / li s machen kann ... im grundegenommen war mir das aber egal, da ich mit einem solchen (diesen) Menü schon lange gut gefahren bin ...

... aber wayne ... das war ja nicht das Problem ...


und dein Lösungsansatz hatte ich auch schonmal ... leider bringt das nix ... das menü "klappt" zwar auf .. sobald man mit der maus rüberfährt verschwindet es aber wieder (im IE)
 
Auf jeden Fall dürfte hier ein Problem mit der Schichtpositionierung vorliegen, denn immer dort, wo ein nachfolgender Inhalt unterhalb der Navigation folgt, klappt das Submenü zu.

Sag mal, klemmt eigentlich die "Punkt"-Taste auf deiner Tastatur?

mfg Maik
 
Was hier offensichtlich nicht weiterhilft. Daher auch mein Vorschlag, die Schichtpositionierung im übergeordneten Element festzulegen.

mfg Maik
 
Hi,

ich würde es mal in der Listenvariante ohne die DIVs, und dafür mit dem üblicherweise verschachtelten Listenmenü versuchen:

HTML: 
<ul>
    <li><a href="#">Topitem 1</a>
        <ul>
            <li><a href="#">Subitem 1</a></li>
        </ul>
    </li><!-- Ende Topitem 1 -->
    <li><a href="#">Topitem 2</a>
        <ul>
            <li><a href="#">Subitem 2</a></li>
        </ul>
    </li><!-- Ende Topitem 2 -->
</ul>


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück