Navigationsbalken mit 3D Effekt

[marixx101]

Hallo,

ich versuche zur Zeit ein Template zu basteln und habe vor, der Navigationsleiste unter meinem Header einen 3D Effekt zu verleihen, sodass es aussieht, als ob die Leiste links und rechts geknickt wird und hinter dem Container weiter verläuft.

Ich habe mir dazu dieses Tutorial angesehen.

Meine Navi besteht allerdings aus GIFs, weil ich in erster Linie Holz als Hintergrund wollte und zudem noch einen nicht-Webfont. So. Die Navileiste geht links und rechts jeweils 20px über den Rand des Containers hinaus, weil ich ja diesen kleinen 3D-Effekt erzielen will und dort Platz für die kleinen Dreiecke an der linken und rechten unteren Ecke meines Navibalkens sein muss.

Ich habe mein Dropdown-Navi folgendermaßen aufgebaut:

<div id="menu">
<ul>
    <li><a href="#"><img src="http://www.psd-tutorials.de/forum/images/Menu_01.gif" /></a></li>
</ul>
<ul>
    <li><a href="#"> <img src="http://www.psd-tutorials.de/forum/images/Menu_02.gif" /></a></li>
</ul>
<ul>
    <li><a href="#"><img src="http://www.psd-tutorials.de/forum/images/Menu_03.gif" /></a>
        <ul>
            <li><a href="#">Räumlichkeiten</a></li>
            <li><a href="#">Geschichte</a></li>
            <li><a href="#">Team</a></li></ul></li>
</ul>
</div>
<div style="clear: both;"> </div>

Hier noch ein Auszug aus meiner CSS Datei:

#menu {
    padding: 0;
    margin-left: -20px;
    margin-right: -20px;
    float: left;
}
#menu img {
    width: 111px;
    margin: 0;
    padding: 0;
}

Wie bekomme ich jetzt diese kleinen Dreiecke an die unteren Ecken am Anfang und am Ende meines Navibalkens? Sie sollen schlicht dunkelbraun sein... Ich bekomme es leider nicht hin und bin für jede Hilfe und jeden Tipp dankbar

 

[cefuroX]

AW: Navigationsbalken mit 3D Effekt

Das du Gifs benutzt ist nich das Problem, lade dir für den Firefox mal ds AddOn "FireBug" runter, damit kannst du dir anschauen welche CSS Eigenschaften auf den Elementen liegen.

Du wirst festellen: Die haben dort in dem H1 - Tag (der position:relative ist und der das Graue Hintergrundbild besitzt) eine SPAN-Tag eingebaut.
Hier ein Beispiel:

<div class="page_wrap">
    <div id="menu">
        <ul>
            <li class="li_rel">
                <a href="#">Husel Pusel</a>
                <span class="arrows">&nbsp;</span>
            </li>
        </ul>
    </div>
</div>

"Husel Pusel Entspricht später deinem GIF

Und heir das CSS dazu , habs getestet und funktioniert

#menu {
    padding: 0;
    float: left;
    width: 25%;
}
#menu img {
    width: 400px;
    
    margin: 0;
    padding: 0;
}
ul {
    margin: 15px 0;
    padding: 0; 
    
}

ul li.li_rel {
    position: relative;
    background: #999;
    list-style-type: none;
    padding: 0 10px 0 0;
    margin: 0;    
    display: inline-block;
    margin-left:-20px;
}

.arrows {
    border-left: 20px solid transparent;
    border-top: 10px solid red;
    height: 0;
    left: 0;
    line-height: 0;
    position: absolute;
    top: 104%;
    width: 0;
}

.page_wrap {
    margin: 0 auto;
    background-color: grey;
    height: 700px;
    width: 800px;
}

Hoffe ich konnte dir helfen wenn noch was ist frage einfach

 

[marixx101]

AW: Navigationsbalken mit 3D Effekt

Jau, super!

Das mit dem SPAN habe ich auch versucht, bevor ich diesen Thread aufgemacht habe. Habe den leeren SPAN wohl falsch platziert oder was, jedenfalls kam bei mir nicht das gewünschte Ergebnis raus.

Mit deiner Lösung hat es aber geklappt! Habe jetzt das page_wrap DIV weggelassen und meine Liste so gelassen, wie sie war - echt toll!

Vielen Dank, die Frage wäre damit geklärt Daumen hoch.