Auf Thema antworten 2026

Beitrag

<blockquote data-quote="marixx101" data-source="post: 1806730" data-attributes="member: 505392">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 <a href="http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-practical-css-shapes/" target="_blank">dieses Tutorial</a> 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]&lt;div id=&quot;menu&quot;&gt;&lt;ul&gt;&nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;http://www.psd-tutorials.de/forum/images/Menu_01.gif&quot; /&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;ul&gt;&nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt; &lt;img src=&quot;http://www.psd-tutorials.de/forum/images/Menu_02.gif&quot; /&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;ul&gt;&nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;http://www.psd-tutorials.de/forum/images/Menu_03.gif&quot; /&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;ul&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Räumlichkeiten&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Geschichte&lt;/a&gt;&lt;/li&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Team&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div style=&quot;clear: both;&quot;&gt; &lt;/div&gt; [/HTML]Hier noch ein Auszug aus meiner CSS Datei:[CODE]#menu {&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; margin-left: -20px;&nbsp; &nbsp; margin-right: -20px;&nbsp; &nbsp; float: left;}#menu img {&nbsp; &nbsp; width: 111px;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;}[/CODE]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 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile&nbsp; &nbsp; :)" loading="lazy" data-shortname=":)" /></blockquote>

[QUOTE="marixx101, post: 1806730, member: 505392"] 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 [URL="http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-practical-css-shapes/"]dieses Tutorial[/URL] 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> [/HTML]Hier noch ein Auszug aus meiner CSS Datei: [CODE]#menu { padding: 0; margin-left: -20px; margin-right: -20px; float: left; } #menu img { width: 111px; margin: 0; padding: 0; }[/CODE]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 :) [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?