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:
Hier noch ein Auszug aus meiner CSS Datei:
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
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:
HTML:
<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>
Code:
#menu {
padding: 0;
margin-left: -20px;
margin-right: -20px;
float: left;
}
#menu img {
width: 111px;
margin: 0;
padding: 0;
}