|
|||
li herausheben
Guten Morgen,
ich habe eine Navi-Liste in einem ul konstrukt. Alle li`s haben einen a href. Das oberste li und unterste beinhaltet anstatt ainem a href jeweils ein img. Jetzt möchte ich das oberste und unterste li aus dem Fluss herausheben und negativ ein wenig nach oben bzw nach unten ziehen. nur gelingt mir das nicht. Habe es mit z-index etc probiert. Leider alles ohne Erfolg. Habe die img auch auch in ein span gepackt und oberhalb bzw unterhalb der ul geparkt. Leider ing das auch nicht. Häte jemand hiefür eine idee? html Code:
<div id="navi"> <ul id="cssMenu"> <li class="nav_top"></li> <li><a href="#"><strong>Startseite</strong></a></li> <li><a href="#"><strong>Landwirtschaft</strong></a></li> <li><a href="#">- Angebote aus Landwirtschaft</a></li> <li><a href="#"><strong>Forst</strong></a></li> <li><a href="#">- Was bietet der Wald</a></li> <li><a href="#"><strong>Gartenbau</strong></a></li> <li><a href="#"><span>- Stauden</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="underclass" style="width:178px;"> <li><a href="#">Staudenliste</a></li> <li><a href="#">Gräser</a></li> <li><a href="#">Farne</a></li> <li><a href="#">Kräuter/Tee/Gewürze</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li><a href="#">- Dachstauden</a></li> <li><a href="#"><span>- Sumpf- und Wasserpflanzen</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="underclass" style="width:166px;"> <li><a href="#"><strong>Wasserpflanzenliste</strong></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li><a href="#"><span><strong>Seerosen</strong></span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="underclass" style="width:126px;"> <li><a href="#">Seerosenliste</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li><a href="#"><strong>Repositionspflanzen</strong></a></li> <li><a href="#"><strong>Nachwachsende Rohstoffe</strong></a></li> <li><a href="#"><strong>Zubehör</strong></a></li> <li><a href="#"><strong>Veranstaltungen</strong></a></li> <li><a href="#"><strong>Praktika / Job</strong></a></li> <li><a href="#"><strong>Kauf / Verkauf / Pacht</strong></a></li> <li><a href="#"><strong>Kontakt</strong></a></li> <li><a href="#"><strong>Anfahrt</strong></a></li> <li><a href="#"><strong>Gästebuch</strong></a></li> <li><a href="#"><strong>Partnerlinks</strong></a></li> <li><a href="#"><strong>Impressum</strong></a></li> <li class="nav_bot"></li> </ul> </div> HTML-Code:
#navi { float:left; margin-top:80px; text-align:left; width:206px; height:540px; } .nav_top { background-image:url(img/nav_top.gif); background-repeat:no-repeat; margin:-10px 0 0 0px; width:200px; z-index:2; height:50px; } .nav_bot { background-image:url(img/nav_bot.gif); background-repeat:no-repeat; margin:-10px 0 0 0px; width:200px; z-index:2; height:50px; } ul#cssMenu ul{display:none} ul#cssMenu li:hover>*{display:block} ul#cssMenu li:hover{position:relative;} ul#cssMenu ul{ position: absolute;left:98%;top:-1px;} ul#cssMenu ul ul{ position: absolute;left:98%;top:-2px;} ul#cssMenu,ul#cssMenu ul{ margin:0px;list-style:none;padding:1px 1px 0;background-color:#FFFFFF;border-width:1px;border-style:solid;border-color:#999999;} ul#cssMenu table {border-collapse:collapse} ul#cssMenu { display:block;font-size:0;zoom:1;width:200px;float: left;} ul#cssMenu ul{ //width:193px;padding:1px 1px 0;} ul#cssMenu li{ display:block;zoom:1;margin:0 0 1px;font-size:0;} ul#cssMenu a:active, ul#cssMenu a:focus {outline-style:none} ul#cssMenu a{ display:block;vertical-align:middle;zoom:1;background-color:#FFFFFF;border-width:0px;border-style:none;border-color:#FFFFFF;text-align:left;text-decoration:none;padding:3px;_padding-left:0;font:normal 13px Trebuchet MS, Tahoma, Arial;color: #054d03;text-decoration:none;cursor:auto;} ul#cssMenu ul li {float:none;} ul#cssMenu ul a{ text-align:left;white-space:nowrap;} ul#cssMenu li:hover>a{ background-color:#076007;border-color:#FFFFFF;border-style:none;font:normal 13px Trebuchet MS, Tahoma, Arial;color: #FFFFFF;text-decoration:none;} ul#cssMenu li a:hover{ _position:relative;background-color:#076007;border-color:#FFFFFF;border-style:none;font:normal 13px Trebuchet MS, Tahoma, Arial;color: #FFFFFF;text-decoration:none;} ul#cssMenu img{ border: none;vertical-align: middle;margin-right:6px;width:24px;height:24px;} ul#cssMenu ul img{ width:10px;height:15px;} ul#cssMenu img.over{display:none} ul#cssMenu li:hover > a img.def {display:none} ul#cssMenu li:hover > a img.over {display:inline} ul#cssMenu a:hover img.over,ul#cssMenu a:hover ul img.def,ul#cssMenu a:hover a:hover img.over{display:inline} ul#cssMenu a:hover img.def,ul#cssMenu a:hover ul img.over,ul#cssMenu a:hover a:hover img.def{display:none} ul#cssMenu a:hover ul{display:block} ul#cssMenu span{ display:block;overflow:visible;background-image:url(pfeil.png);background-position:right center;background-repeat: no-repeat;padding-right:16px;} ul#cssMenu li:hover>a>span{background-image:url(pfeil_hover.png);} ul#cssMenu a:hover span{_background-image:url(pfeil_hover.png)} .underclass {cursor:auto;} |
Sponsored Links |
|
||||
Oder um es anders zu sagen, so können wir dein Problem nicht nachvollziehen, nicht testen und dir keine sinnvollen Lösungsvorschläge bieten.
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen! Foren-FAQ |
|
|||
Hoffe es reich auch. Online stellen ist erst mal schlecht. hoffe es geht auch so.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de"> <head> <link rel="shortcut icon" href="img/icon.ico" type="image/x-icon" /> <title>xxxxx</title> <meta name="Keywords" content="xxxx" /> <meta name="Description" content="xxxxx" /> <meta name="page-type" content="Links, Verzeichnis" /> <meta name="classification" content="Gartenbau, Gärtnerei, Forstbetrieb" /> <meta name="author" content="xxx" /> <meta name="copyright" content="xxx" /> <meta name="publisher" content="xxx" /> <meta name="robots" content="index,follow" /> <meta name="robots" content="all" /> <meta name="revisit-after" content="10 days" /> <meta name="language" content="deutsch,de,at,ch,german" /> <meta name="resource-type" content="document" /> <meta name="distribution" content="global" /> <meta name="audience" content="all" /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="robots" content="index,follow" /> <meta http-equiv="language" content="deutsch,de,at,ch,german" /> <meta http-equiv="pragma" content="xxxx" /> <style type="text/css"> * { margin:0; padding:0; } html, body { height:100%; background:#FFFFFF url("img/clouds.jpg") repeat-x 0px 0px; font-family:Arial; text-align:center; } #wrapper { position:relativ; min-height:100%; background:url("img/bot.jpg") repeat-x left bottom; } #wrapper:after { content:"."; display:block; clear:both; font-size:0; overflow:hidden; height:.1px; visibility:hidden; } #cont_wrap { margin:0 auto; width:1050px; } #top_content { background-image:url(top.png); background-repeat:no-repeat; margin: 30px 0 0 220px; width:553px; height:85px; } #bot_content { background-image:url(bot.png); background-repeat:no-repeat; margin:0px 0 0 220px; padding-bottom:70px; width:553px; height:85px; } #content { background-image:url(menubg.png); text-align:left; width:550px; margin:0px 0 0 220px; } #cont_wrap h2 { font-size:21px; color:green; padding-left:5px; } #cont_wrap p { padding:5px; } #head { width:1000px; height:208px; } .head { border:0; } #navi { float:left; margin-top:80px; text-align:left; width:206px; height:540px; } .nav_top { background-image:url(img/nav_top.gif); background-repeat:no-repeat; margin:-10px 0 0 0px; width:200px; z-index:2; height:50px; } .nav_bot { background-image:url(img/nav_bot.gif); background-repeat:no-repeat; margin:-10px 0 0 0px; width:200px; z-index:2; height:50px; } ul#cssMenu ul{display:none} ul#cssMenu li:hover>*{display:block} ul#cssMenu li:hover{position:relative;} ul#cssMenu ul{ position: absolute;left:98%;top:-1px;} ul#cssMenu ul ul{ position: absolute;left:98%;top:-2px;} ul#cssMenu,ul#cssMenu ul{ margin:0px;list-style:none;padding:1px 1px 0;background-color:#FFFFFF;border-width:1px;border-style:solid;border-color:#999999;} ul#cssMenu table {border-collapse:collapse} ul#cssMenu { display:block;font-size:0;zoom:1;width:200px;float: left;} ul#cssMenu ul{ //width:193px;padding:1px 1px 0;} ul#cssMenu li{ display:block;zoom:1;margin:0 0 1px;font-size:0;} ul#cssMenu a:active, ul#cssMenu a:focus {outline-style:none} ul#cssMenu a{ display:block;vertical-align:middle;zoom:1;background-color:#FFFFFF;border-width:0px;border-style:none;border-color:#FFFFFF;text-align:left;text-decoration:none;padding:3px;_padding-left:0;font:normal 13px Trebuchet MS, Tahoma, Arial;color: #054d03;text-decoration:none;cursor:auto;} ul#cssMenu ul li {float:none;} ul#cssMenu ul a{ text-align:left;white-space:nowrap;} ul#cssMenu li:hover>a{ background-color:#076007;border-color:#FFFFFF;border-style:none;font:normal 13px Trebuchet MS, Tahoma, Arial;color: #FFFFFF;text-decoration:none;} ul#cssMenu li a:hover{ _position:relative;background-color:#076007;border-color:#FFFFFF;border-style:none;font:normal 13px Trebuchet MS, Tahoma, Arial;color: #FFFFFF;text-decoration:none;} ul#cssMenu img{ border: none;vertical-align: middle;margin-right:6px;width:24px;height:24px;} ul#cssMenu ul img{ width:10px;height:15px;} ul#cssMenu img.over{display:none} ul#cssMenu li:hover > a img.def {display:none} ul#cssMenu li:hover > a img.over {display:inline} ul#cssMenu a:hover img.over,ul#cssMenu a:hover ul img.def,ul#cssMenu a:hover a:hover img.over{display:inline} ul#cssMenu a:hover img.def,ul#cssMenu a:hover ul img.over,ul#cssMenu a:hover a:hover img.def{display:none} ul#cssMenu a:hover ul{display:block} ul#cssMenu span{ display:block;overflow:visible;background-image:url(pfeil.png);background-position:right center;background-repeat: no-repeat;padding-right:16px;} ul#cssMenu li:hover>a>span{background-image:url(pfeil_hover.png);} ul#cssMenu a:hover span{_background-image:url(pfeil_hover.png)} .underclass {cursor:auto;} #features { float:right; text-align:left; margin-right:50px; width:210px; height:500px; } #features_box { float:right; width:220px; } </style> <script type="text/javascript" src="js/slide.js"></script> <!--[if IE 6.0]> <style type="text/css" media="Screen"> @import url("css/content_ie6.css"); </style><![endif]--> </head> <body> <div id="wrapper"> <div id="cont_wrap"> <div id="head"> <a href="#"> <img src="img/head1.jpg" class="head" width="1000" height="208" alt="xxxxx" title="xxxxx"/> </a> </div> <div id="navi"> <ul id="cssMenu"> <li class="nav_top"></li> <li><a href="#"><strong>Startseite</strong></a></li> <li><a href="#"><strong>Landwirtschaft</strong></a></li> <li><a href="#">- Angebote aus Landwirtschaft</a></li> <li><a href="#"><strong>Forst</strong></a></li> <li><a href="#">- Was bietet der Wald</a></li> <li><a href="#"><strong>Gartenbau</strong></a></li> <li><a href="#"><span>- Stauden</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="underclass" style="width:178px;"> <li><a href="#">Staudenliste</a></li> <li><a href="#">Gräser</a></li> <li><a href="#">Farne</a></li> <li><a href="#">Kräuter/Tee/Gewürze</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li><a href="#">- Dachstauden</a></li> <li><a href="#"><span>- Sumpf- und Wasserpflanzen</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="underclass" style="width:166px;"> <li><a href="#"><strong>Wasserpflanzenliste</strong></a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li><a href="#"><span><strong>Seerosen</strong></span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="underclass" style="width:126px;"> <li><a href="#">Seerosenliste</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li><a href="#"><strong>Repositionspflanzen</strong></a></li> <li><a href="#"><strong>Nachwachsende Rohstoffe</strong></a></li> <li><a href="#"><strong>Zubehör</strong></a></li> <li><a href="#"><strong>Veranstaltungen</strong></a></li> <li><a href="#"><strong>Praktika / Job</strong></a></li> <li><a href="#"><strong>Kauf / Verkauf / Pacht</strong></a></li> <li><a href="#"><strong>Kontakt</strong></a></li> <li><a href="#"><strong>Anfahrt</strong></a></li> <li><a href="#"><strong>Gästebuch</strong></a></li> <li><a href="#"><strong>Partnerlinks</strong></a></li> <li><a href="#"><strong>Impressum</strong></a></li> <li class="nav_bot"></li> </ul> </div> <div id="features"> <div id="features_box"> <a href="http://wetter.webmart.de/670537" target="_blank" style="text-decoration:none"></a><br /> <script src="http://wetter.webmart.de/e/670537"></script> </div> </div> <div id="top_content"></div> <div id="content"> <h2>Willkommen im Gartenbaubetrieb "xxxx"</h2> <p> Viel Text <br />Viel Text <br />Viel Text <br />Viel Text <br />Viel Text <br />Viel Text <br /> Viel Text <br />Viel Text <br />Viel Text <br />Viel Text <br />Viel Text <br />Viel Text <br />Viel Text <br />Viel Text <br />Viel Text <br /> </p> </div> <div id="bot_content"></div> </div> </div> </body> </html> LG >Nils Geändert von Muamicus (11.12.2010 um 14:51 Uhr) |
|
|||
Ja.
Das hat damit aber nix zu tun. Ich möchte quasi das oberste li was nur ein img enthält anstatt einem a href negativ nach oben schieben. Sozusagen aus dem ul → li Fluss herausnehmen. Nur ist egal was ich versuche alles für die Katz |
|
|||
Welchen Inhalt stellen diese Elemente dar? Wenn es Ziergrafiken sind, dann ist es ein grundfalscher Ansatz, sie separat in die Liste zu setzen. In die Menüliste gehören nur Menüpunkte.
Ohne zu sehen, was du eigentlich erreichen willst, kann dir aber niemand sagen, wie du es besser lösen kannst. Also poste einen Link.
__________________
Corina Rudel Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken |
Sponsored Links |
|
|||
OKOK
Hier der Link: da bitte Die beiden rot Umrahmten. Habe es auch probiert überhalb dem ul anzulegen. Nur ging das auch alles nicht. Also wollte ich es aus dem ul heruas probieren. |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|