✔ Dropdown funktioniert nicht

[Maik]

wenn das Menü nicht genauso breit ist wie das Bild wird der Streifen dann ja nicht länger angezeigt.

Dann setzt du das Hintergrundbild eben im DIV #navigation ein und definierst für es ebenfalls eine Breite von 798px, wie auch für das DIV #header.

Und da du mich heute Nacht explizit danach gefragt hast, was denn verbesserungswürdig wäre, habe ich diesen Aspekt genannt und dir eine alternative und praktischere Umsetzung aufgezeigt, die weniger Probleme in den unterschiedlichen Browsertypen bereitet.

 

[Merbi]

So, habe das Menü jetzt mit transparentem PNG gemacht nur wird dieses trotz deines Codes im IE nicht angezeigt. Beim Dropddown lässt sicht nichts ändern selbst wenn ich aus -999em 0em mache ändert sicht nichts.

Man kann auch im FF nicht auf das Dropdown gehen das verschwindet dann sofort wieder.
Da ist ja die Breite der Links das kleinste übel.

LG Daniel

P.S. Uhr ist weg

 

[Maik]

Du hast mich mal wieder absolut missverstanden, denn du sollst den unteren Bereich aus der Header-Grafik vollständig herausschneiden, und nicht blos ein halbtransparentes PNG erzeugen, dass als Hintergrundbild für die Navigation dient, und diese weiterhin nach oben verschoben wird.

Denn dann kannst du es auch gleich bei dem bisherigen Konzept belassen.

 

[Merbi]

Ich versteh dich leider immer noch nicht. Ich möchte ja das das Menü über dem Header mit Transparenz ist und nicht dadrunter.

LG Daniel

 

[Maik]

Vielleicht helfen die beiden Grafiken, das Verständnisproblem aus der Welt zu schaffen.

Man beachte hierbei den unteren Abschnitt in der header.png, der nun komplett in der nav_bgImage integriert ist:


(header.png)

(nav_bgImage.png)

 

[Merbi]

Hmm bekomme das Bild nicht mehr geschnitten lassen wir das ganze einfach jedes mal wenn ich mich an einem Dropdown versuche versuche ich Wochen dran rum ohne nennenwertes Ergebnis und bekomme sonst nicht geschafft.

LG Daniel

 

[Merbi]

Hi,

habe jetzt ein völlig anderes Menü gemacht und es läuft auch Prima.
Nur habe ich ein kleines Problem mit der Transparenz dahinter im IE dabei habe ich befolgt was in DEM Thread gesagt wurde.

Das zweite kleine Problem ist im FF, dort rutscht der Inhalt nach Rechts.

LG Daniel

 

[Maik]

Hi,

versuch es mal ohne die Hintergrundbild-Deklaration für die Links, da mit dieser Regel das transparente PNG zusätzlich zur umschliessenden Box #navigation bzw. .trans_box, und somit doppelt eingebunden wird:

ul#nav a {
        display: block;
        width: 100%;
       background-image: url(images/space.png);
}

Das DIV #content wird mit clear:left unterhalb der floatenden Liste angeordnet.

 

[Merbi]

Das mit dem clear hat funktioniert aber bei der Transparenz ist nun gar keine mehr da.

LG Daniel

 

[Maik]

Mit diesen Ergänzungen und Änderungen im Stylesheet wird bei mir die PNG-Grafik in der Navi-Leiste angezeigt:

#navigation {
        margin-top: -20px;
        position:relative;
        z-index:1000;
}

ul#nav a {
        display: block;
        width: 100%;
        /*background-image: url(images/space.png);*/ /* auskommentiert = deaktiviert */
}

.trans_box {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='templates/images/space.png');
}

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

<div id="navigation" class="trans_box clearfix"> ... </div>

Einziger Knackpunkt: durch die erforderliche "clearfix"-Methode wird das Submenü im IE (6 + 7) nicht mehr eingeblendet.