Selbsternannter Held
Servus,
ich habe Probleme eine Navigationen nach meinen Vorstellungen anzupassen und weiß irgendwie nicht, wo der Fehler liegt und teilweise auch nicht ganz, womit der richtige Weg eingeschlagen wäre..
Nach ein wenig Pixelschieberei kam am Ende eine Navigation zu Stande, wie sie im zu sehen ist. Ich denke, dass das Konzept klar ist und keine sonderbaren Fragen hervorrufen sollte. Ein einfaches Drop-Down Menü.
Nach einigen Überlegungen merkte ich, dass ich gar nicht weiß, wie ich das mit den runden „Ecken“ hinbekommen soll, wenn auf den Punkt gehovert wird und wie ich es anstelle, dass erst kein Hintergrund vorhanden ist und dann mein „Balken“ erscheint. Natürlich gibt es für alles eine Lösung, ich suchte den Ort meines Vertrauens für derartige Recherchen auf: . Fündig wurde ich natürlich und machte aus. Diese habe ich dann, soweit ich es derweil hinbekommen habe, angepasst (Ergebnis ):
Nun sind aber alle Tabs, so nenne ich die „Balken“ oben mal, aber 100px breit, allerdings würde ich das gerne ändern. Ich würde gerne, dass der 1. Tab z.B. 81px breit ist und der 2 Tab mit den Produkten 84px (). Ich habe aber Probleme für jeden Punkt eine eigene Breite zu definieren. Wenn ich an der Breite etwas ändere, zerschießt es mir irgendwie alles.
Ein weiteres Problem, was sich mir auftut ist in zu erkennen. Ich würde gerne dem Navigationspunkt einen Abstand nach oben geben, ca. so dick wie der grüne Balken im Anhang. Wenn ich z.B. mit Padding arbeite, schiebt sich alles nur nach unten und die Navigation funktioniert gar nicht mehr, weil eine Lücke entsteht ().
Das letze Problem, welches ich bei der Anpassung habe ist, dass ich gerne für jeden Tab ein eigenes Hintergrundbild definieren würde. So soll der Tab mit „Brauerei“ z.B. Schwarz sein und der Tab mit den Produkten Grün (). Aber auch hier bekomme ich es nicht hin ein eigenständiges Bild beim hovern zuzuweisen.
Ich bedanke mich schon mal im voraus für die Hilfe.
Gruß,
Pierre
ich habe Probleme eine Navigationen nach meinen Vorstellungen anzupassen und weiß irgendwie nicht, wo der Fehler liegt und teilweise auch nicht ganz, womit der richtige Weg eingeschlagen wäre..
Nach ein wenig Pixelschieberei kam am Ende eine Navigation zu Stande, wie sie im zu sehen ist. Ich denke, dass das Konzept klar ist und keine sonderbaren Fragen hervorrufen sollte. Ein einfaches Drop-Down Menü.
Nach einigen Überlegungen merkte ich, dass ich gar nicht weiß, wie ich das mit den runden „Ecken“ hinbekommen soll, wenn auf den Punkt gehovert wird und wie ich es anstelle, dass erst kein Hintergrund vorhanden ist und dann mein „Balken“ erscheint. Natürlich gibt es für alles eine Lösung, ich suchte den Ort meines Vertrauens für derartige Recherchen auf: . Fündig wurde ich natürlich und machte aus. Diese habe ich dann, soweit ich es derweil hinbekommen habe, angepasst (Ergebnis ):
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Navigations Test</title>
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dl-dropdown.html
Copyright (c) 2005-2009 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
a, a:visited, a:hover, a:active, a:focus {direction:ltr; outline:0;}
#holder {position:absolute; width:740px;overflow:hidden;}
dl.menu {width:250px;float:left; margin:-32700px -150px 0 0;}
dl.menu a {display:block; height:46px; color:#fff; font-family: 'Trebuchet MS'; text-decoration:none;text-indent:0px;}
dl.menu a:visited {color:#fff;}
dl.menu dt {float:left; padding:0; margin:32700px 0 0 0;; position:relative; z-index:50;font-size:16px;}
dl.menu dt a {width:100px;text-align:center;}
dl.menu dt a:hover,
dl.menu dt a:focus,
dl.menu dt a:active
{margin-right:1px;background:url(tabs_1.png) no-repeat left top; text-decoration:none;}
dl.menu dd {float:left; padding:60px 0 0 0; margin:-46px 0 0 0; position:relative; z-index:10; background:url(tabs_1.png) no-repeat left top;font-size:14px;padding-top:}
dl.menu dd a {background:#000;width:150px;height:21px;padding-top:6px;text-indent:10px;}
dl.menu dd a:hover,
dl.menu dd a:focus,
dl.menu dd a:active
{margin-right:1px; background:#616161;}
.trenner {float:left;}
</style>
</head>
<body bgcolor="#990000">
<div id="holder">
<dl class="menu">
<dt>
<a href="#url">Brauerei</a>
</dt>
<dd>
<a href="#url">Historie</a>
<a href="#url">Neuigkeiten</a>
<a href="#url">Links</a>
<a href="#url">Kontakt</a>
<a href="#url">Standorte</a>
<img src="ende.png" height="12">
</dd>
</dl>
<img src="trenn_strich.png" class="trenner">
<dl class="menu">
<dt>
<a href="#url">Produkte</a>
</dt>
<dd>
<a href="#url">Pils</a>
<a href="#url">Ur-Pils</a>
<a href="#url">Bernstein</a>
<a href="#url">Bernstein-Bock</a>
<a href="#url">Maibock</a>
<a href="#url">Weizen</a>
<a href="#url">Trassengold</a>
<a href="#url">Radler</a>
<a href="#url">Obergärig</a>
<img src="ende.png" height="12">
</dd>
</dl>
<img src="trenn_strich.png" class="trenner">
<dl class="menu">
<dt>
<a href="#url">Newsletter</a>
</dt>
</dl>
<img src="trenn_strich.png" class="trenner">
<dl class="menu">
<dt>
<a href="#url">Besichtigung</a>
</dt>
<dd>
<a href="#url">Info</a>
<a href="#url">Anmeldung</a>
<img src="ende.png">
</dd>
</dl>
<img src="trenn_strich.png" class="trenner">
<dl class="menu">
<dt>
<a href="#url">Fanclub</a>
</dt>
</dl>
<img src="trenn_strich.png" class="trenner">
<dl class="menu">
<dt>
<a href="#url">Shop</a>
</dt>
<dd>
<a href="#url">Schwelmer</a>
<a href="#url">Levering</a>
<img src="ende.png">
</dd>
</dl>
<img src="trenn_strich.png" class="trenner">
<dl class="menu">
<dt>
<a href="#url">Direkt</a>
</dt>
</dl>
</div>
</body>
</html>Nun sind aber alle Tabs, so nenne ich die „Balken“ oben mal, aber 100px breit, allerdings würde ich das gerne ändern. Ich würde gerne, dass der 1. Tab z.B. 81px breit ist und der 2 Tab mit den Produkten 84px (). Ich habe aber Probleme für jeden Punkt eine eigene Breite zu definieren. Wenn ich an der Breite etwas ändere, zerschießt es mir irgendwie alles.
Ein weiteres Problem, was sich mir auftut ist in zu erkennen. Ich würde gerne dem Navigationspunkt einen Abstand nach oben geben, ca. so dick wie der grüne Balken im Anhang. Wenn ich z.B. mit Padding arbeite, schiebt sich alles nur nach unten und die Navigation funktioniert gar nicht mehr, weil eine Lücke entsteht ().
Das letze Problem, welches ich bei der Anpassung habe ist, dass ich gerne für jeden Tab ein eigenes Hintergrundbild definieren würde. So soll der Tab mit „Brauerei“ z.B. Schwarz sein und der Tab mit den Produkten Grün (). Aber auch hier bekomme ich es nicht hin ein eigenständiges Bild beim hovern zuzuweisen.
Ich bedanke mich schon mal im voraus für die Hilfe.
Gruß,
Pierre
