Problem mit einer Navigation
02.04.2009, 15:57
Hallo liebe Community,
hab' nun endlich gefunden was ich such. (die schwarze Navigation hier)
Allerdings habe ich da noch ein Problem. Und zwar finde ich einfach nicht die Zeile in der man die breite eines ausgeklappten weißen Fensters festlegt, denn manche meiner Einträge sind zu Lang und ragen unschön über den Rand hinaus.
Kann mir jemand bitte helfen und sagen welche Zeile(n) ich bearbeiten muss? Wäre sehr dankbar.
(Hab den Code einfach in Themes -> ... -> Header, eingetippt. Hat mich gewundert das gleich alles reibungslos funktionierte.)
hab' nun endlich gefunden was ich such. (die schwarze Navigation hier)
Allerdings habe ich da noch ein Problem. Und zwar finde ich einfach nicht die Zeile in der man die breite eines ausgeklappten weißen Fensters festlegt, denn manche meiner Einträge sind zu Lang und ragen unschön über den Rand hinaus.
Kann mir jemand bitte helfen und sagen welche Zeile(n) ich bearbeiten muss? Wäre sehr dankbar.
Code:
<style type="text/css">
/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_drop2 */
.preload2 {background: url(prodrop2/button4.gif);}
.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(prodrop2/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:40px;}
.menu2 li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(prodrop2/down.gif) no-repeat right top;}
.menu2 li a.top_link:hover {color:#fff; background: url(prodrop2/button4.gif) no-repeat;}
.menu2 li a.top_link:hover span {background:url(prodrop2/button4.gif) no-repeat right top;}
.menu2 li a.top_link:hover span.down {background:url(prodrop2/button4a.gif) no-repeat right top;}
.menu2 li:hover > a.top_link {color:#fff; background: url(prodrop2/button4.gif) no-repeat;}
.menu2 li:hover > a.top_link span {background:url(prodrop2/button4.gif) no-repeat right top;}
.menu2 li:hover > a.top_link span.down {background:url(prodrop2/button4a.gif) no-repeat right top;}
.menu2 table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
/* Default link styling */
/* Style the list OR link hover. Depends on which browser is used */
.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}
/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul,
.menu2 :hover ul ul,
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
.menu2 :hover ul.sub {left:2px; top:40px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; height:auto;}
.menu2 :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
.menu2 :hover ul.sub li a {display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
.menu2 :hover ul.sub li a.fly {background:#fff url(prodrop2/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub li a:hover {background:#4ab; color:#fff;}
.menu2 :hover ul.sub li a.fly:hover {background:#4ab url(prodrop2/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul li:hover > a.fly {background:#4ab url(prodrop2/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; z-index:200; height:auto;}
</style>
</head>
<body>
<span class="preload2"></span>
<ul class="menu2">
<li class="top"><a href="http://onlinetagebuch.kilu.de/Forum/portal.php" id="home" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="http://onlinetagebuch.kilu.de/Forum/forumdisplay.php?fid=1" id="products" class="top_link"><span class="down">Allgemein</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="http://onlinetagebuch.kilu.de/Forum/forumdisplay.php?fid=2" class="fly">Bist du neu<br> hier?<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://onlinetagebuch.kilu.de/Forum/forumdisplay.php?fid=3">FAQ (Häufig gestellte Fragen)</a></li>
<li><a href="../ie/">Minolta</a></li>
<li><a href="../opacity/">Pentax</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="mid"><a href="../boxes/" class="fly">Lenses<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/">Wide Angle</a></li>
<li><a href="../ie/">Standard</a></li>
<li><a href="../opacity/">Telephoto</a></li>
<li><a href="../menu/" class="fly">Zoom<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/">35mm to 125mm</a></li>
<li><a href="../opacity/">50mm to 250mm</a></li>
<li><a href="../menu/">125mm to 500mm</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../boxes/">Mirror</a></li>
<li><a href="../opacity/" class="fly">Non standard<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/">Bayonet mount</a></li>
<li><a href="../opacity/">Screw mount</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../mozilla/">Flash Guns</a></li>
<li><a href="../ie/">Tripods</a></li>
<li><a href="../opacity/">Filters</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="http://www.cssplay.co.uk" id="services" class="top_link"><span class="down">Services</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="../menu/">Printing</a></li>
<li><a href="../layouts/">Photo Framing</a></li>
<li><a href="../boxes/">Retouching</a></li>
<li><a href="../mozilla/">Archiving</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="http://www.cssplay.co.uk" id="contacts" class="top_link"><span class="down">Contacts</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="../layouts/">Support</a></li>
<li><a href="../boxes/" class="fly">Sales<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/">USA</a></li>
<li><a href="../ie/">Canadian</a></li>
<li><a href="../opacity/">South American</a></li>
<li><a href="../menu/" class="fly">European<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/" class="fly">British<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../ie/">London</a></li>
<li><a href="../menu/">Liverpool</a></li>
<li><a href="../boxes/">Glasgow</a></li>
<li><a href="../opacity/" class="fly">Bristol<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../ie/">Redland</a></li>
<li><a href="../opacity/">Hanham</a></li>
<li><a href="../menu/">Eastville</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../layouts/">Cardiff</a></li>
<li><a href="../mozilla/">Belfast</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../opacity/">French</a></li>
<li><a href="../menu/">German</a></li>
<li><a href="../boxes/">Spanish</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../boxes/">Australian</a></li>
<li><a href="../boxes/">Asian</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../mozilla/">Buying</a></li>
<li><a href="../ie/">Photographers</a></li>
<li><a href="../opacity/">Stockist</a></li>
<li><a href="../menu/">General</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="http://www.cssplay.co.uk" id="shop" class="top_link"><span class="down">Shop</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="../ie/">Online</a></li>
<li><a href="../opacity/">Catalogue</a></li>
<li><a href="../menu/">Mail Order</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top"><a href="http://www.cssplay.co.uk" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>(Hab den Code einfach in Themes -> ... -> Header, eingetippt. Hat mich gewundert das gleich alles reibungslos funktionierte.)