zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden li herausheben

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.12.2010, 09:48
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard 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>
css

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;}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.12.2010, 12:39
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

http://xhtmlforum.de/40080-f-r-frage...twortende.html

Manfred
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 11.12.2010, 13:23
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Wüsste nicht was an der Frage falsch zu verstehen ist.?!?
Mit Zitat antworten
  #4 (permalink)  
Alt 11.12.2010, 13:32
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Vollständiger Code oder noch besser ein Beispiel online stellen!

Manfred
Mit Zitat antworten
  #5 (permalink)  
Alt 11.12.2010, 13:56
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 11.12.2010, 14:47
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

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>
Vielen Dank.

LG >Nils

Geändert von Muamicus (11.12.2010 um 14:51 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 11.12.2010, 18:01
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Naja, ohne Grafiken kann man sich das schlecht vorstellen...

Zitat:
<li><a href="#"><span>- Stauden</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
Was soll das sein??
Zitat:
<!--[if IE 6.0]>
Gab es mehrere 6er Versionen??

Manfred
Mit Zitat antworten
  #8 (permalink)  
Alt 11.12.2010, 18:05
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 11.12.2010, 18:12
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 11.12.2010, 18:14
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus



Alle Zeitangaben in WEZ +2. Es ist jetzt 18:01 Uhr.