✔ Problem mit Listenmenü-Formatierung

[tuFrogs]

Hallo Leute. Ich habe auf einer Website ein Menü mithilfe von CSS erstellt:

Menü

<ul id="navi">
	<li><a href="?page=news">&nbsp;&nbsp;&nbsp;News</a></li>
	<li><a href="?page=newsletter">&nbsp;&nbsp;&nbsp;Newsletter</a></li>
	<li><a href="?page=partner">&nbsp;&nbsp;&nbsp;Partner</a></li>
	<li><a href="?page=kontakt">&nbsp;&nbsp;&nbsp;Kontakt</a></li>
	<li><a href="?page=informationen">&nbsp;&nbsp;&nbsp;Informationen</a></li>
</ul>

CSS:

ul#navi
{
	font-size:					11px;
	float:						left;
	width:						17.4em;
	margin:						0;
	padding:					2px;
	border:						0;
}

ul#navi li
{
	list-style:					none;
	margin:						0;
	padding:					0.5em;
}

ul#navi a
{
	display:					block;
	padding:					0.2em;
	font-weight:				bold;
}

ul#navi a:link, a:visited
{
	color:						#fff;
	background:					#222;
	border:						1px solid #500053;
	text-decoration:			none;
}

ul#navi a:hover, a:active
{
	color:						#fff;
	background:					#000;
	border:						1px solid #9d02a3;
	text-decoration:			none;
}

Sieht auch ganz schick aus und es funktioniert so wie ich es will.

Das Problem aber ist, dass diese Formatierung auch auf Bereiche der Website übernommen werden wo sie nix zu suchen hat und ich kapier einfach nicht warum. Ich habe über der Website ein DIV indem ein anderes Menü ist. Es besteht aus Grafiken und die Grafiken mit Link haben (nicht alle!! ) dieselbe Formatierung..

Menü oben:

<img src=".leiste_links.png" height="30" width="30">
<a href="<? echo($url_root); ?>" target="_self"><img src="leiste_1.png" height="30" width="120"></a>
<a href="<? echo($url_root. '?site=2'); ?>" target="_blank"><img src="leiste_2.png" height="30" width="120"></a>
<img src="leiste_rechts.png" height="30" width="30">

(Damit zwischen den Grafiken kein leerer Raum entsteht habe ich alles hintereinander weg geschrieben. Jetzt hier zur Übersichtlichkeit alle 4 Grafiken untereinander..)

Kann mir bitte wer Sagen warum das so ist? Vorallem sinds im Firefox 4 der 5 Buttons, im Internetexplorer7 allerdings nur 1 Button die betroffen sind.. -.-

/EDIT

Habe gerade rausgefunden dass das Problem nur bei den Buttons auftaucht, die bereits besucht worden sind..

 

[Carrear]

Also 2 Dinge:

1. "Schick" wird "Chique" geschrieben

2. Zu deinem Problem. Wie können diese CSS Merkmale auc hauf andere UL Tags übertragen werden? Du darfst dann eben bei den anderen UL Tags, wo diese Eigenschaften nicht erwünscht sind nicht id="navi" anhängen, denn die ist ja nur für deine navi gedacht.

Schau mal nach ob du das evtl. bei den Tags wo es nicht erwünscht ist aus Versehen eingetragen hast.

 

[tuFrogs]

1. *omg*

2. Nur das Menü wurde über UL-Tags realisiert. Das Menü oben steckt in einem DIV und besteht nur aus Links die auf Grafiken gelegt wurden. <a href="#"><img src="grafik.***"></a> Mehr nicht..

 

[Carrear]

Ich denke du solltest mal die ganze Seite posten, denn ich schätze mal da ist irgendeine Verschachtelung falsch gelaufen oder so. Das dürfte so nämlich nicht passieren.

 

[tuFrogs]

<div id="menu_leiste">
<img src="./gfx/leiste_links.png" height="30" width="30"><a href="<? echo($url_root); ?>" target="_self"><img src="./gfx/leiste_1.png" height="30" width="120"></a><a href="<? echo($url_root. '?site=2'); ?>" target="_blank"><img src="./gfx/leiste_2.png" height="30" width="120"></a><a href="<? echo($url_root. '?site=3'); ?>" target="_blank"><img src="./gfx/leiste_3.png" height="30" width="120"></a><a href="<? echo($url_root. '?site=4'); ?>" target="_blank"><img src="./gfx/leiste_4.png" height="30" width="120"></a><a href="<? echo($url_root. '?site=5'); ?>" target="_blank"><img src="./gfx/leiste_5.png" height="30" width="120"></a><img src="./gfx/leiste_rechts.png" height="30" width="30">
</div>

	switch($page)
	{
	    case news:
			$content =  "./news.php";
	    break;
	    
		case newsletter:
			$content =  "./newsl.php";
	    break;
	    
		case partner:
			$content =  "./partn.php";
	    break;
	    
		case kontakt:
			$content =  "./konta.php";
	    break;
		
	    case informationen:
			$content =  "./infor.php";
	    break;
		
	    default:
			$content =  "./news.php";
	    break;
	}
?>

<div id="seite">
	<div id="oben"></div>
	
		<div id="mitte" class="clearfix">
			
			<div id="leer">&nbsp;</div>
			
				<div id="menu">
				
		<?
			include('./menu.php');
		?>
				
				</div>
			
			<div id="leer">&nbsp;</div>
				
				<div id="inhalt">
				
		<?
			include($content);
		?>
				
				</div>
			
		</div>

	<div id="unten"></div>
</div>

CSS 1

/* DIVs */
div#menu_leiste
{
	margin:						0px;
	width:						660px;
	height:						30px;
	text-align:					left;
}

img
{
	border:						0px;
}

CSS 2

body
{
	background:					#000 url(gfx/bkgr.png) repeat-x;
	scrollbar-arrow-color:		#333;
	scrollbar-face-color:		#000;
	scrollbar-highlight-color:	#333;
	scrollbar-3dlight-color:	#000;
	scrollbar-shadow-color:		#333;
	scrollbar-darkshadow-color:	#000;
	scrollbar-track-color:		#000; 
	scrollbar-base-color:		#000;
	
	color:						#fff;
	font:						11px Verdana, Arial, Helvetica;
}

img
{
	border:						0;
}

/* DIVs */
div#seite
{
	margin:						0 auto;
	width:						900px;
	text-align:					left;
}

div#oben
{
	background:					url(gfx/bkgr_oben.png) no-repeat;
	margin:						0 auto;
	width:						900px;
	height:						118px;
}

div#unten
{
	background:					url(gfx/bkgr_unten.png) no-repeat;
	margin:						0 auto;
	width:						900px;
	height:						85px;
}

div#mitte
{
	background:					url(gfx/bkgr_mitte.png) repeat-y;
	margin:						0 auto;
	width:						900px;
}

div#menu
{
/*	background:					#66dd66;	*/
	margin:						0 auto;
	width:						200px;
	float:						left;
}

div#leer
{
/*	background:					#ff9600;	*/
	margin:						0 auto;
	width:						30px;
	float:						left;
}

div#inhalt
{
/*	background:					#dddddd;	*/
	margin:						0 auto;
	width:						610px;
	text-align:					left;
	float:						left;
}

.clearfix:after
{
	content:					".";
	display:					block;
	height:						0;
	clear:						both;
	visibility:					hidden;
}

.clearfix
{
	display:					inline-block;
}

* html .clearfix
{
	height:						1%;
}

.clearfix
{
	display:					block;
}

/* Links */

a, a:link, a:visited
{
	color:							#9d02a3;
	font:							11px Verdana, Arial, Helvetica;
	text-decoration:				none;
}

a:hover, a:active
{
	color:							#ffffff;
	font:							11px Verdana, Arial, Helvetica;
	text-decoration:				underline;
}

/* Menü */
ul#navi
{
	font-size:					11px;
	float:						left;
	width:						17.4em;
	margin:						0;
	padding:					2px;
	border:						0;
}

ul#navi li
{
	list-style:					none;
	margin:						0;
	padding:					0.5em;
}

ul#navi a
{
	display:					block;
	padding:					0.2em;
	font-weight:				bold;
}

ul#navi a:link, a:active, a:visited
{
	color:						#fff;
	background:					#222;
	border:						1px solid #500053;
	text-decoration:			none;
}

ul#navi a:hover
{
	color:						#fff;
	background:					#000;
	border:						1px solid #9d02a3;
	text-decoration:			none;
}

Mal abgesehen vom Inhalt um den es ja nicht geht und den HTML-Tags sollte das alles sein..

 

[Maik]

Hi,

du hast vergessen, bei den Pseudoklassen :visited und :active den ID-Selektor ul#navi voranzustellen, weshalb sie im Dokument auch für die übrigen Links gelten:

ul#navi a:link, ul#navi a:visited
{
	color:						#fff;
	background:					#222;
	border:						1px solid #500053;
	text-decoration:			none;
}

ul#navi a:hover, ul#navi a:active
{
	color:						#fff;
	background:					#000;
	border:						1px solid #9d02a3;
	text-decoration:			none;
}

bzw.

ul#navi a:link, ul#navi a:visited, ul#navi a:active
{
	color:						#fff;
	background:					#222;
	border:						1px solid #500053;
	text-decoration:			none;
}

Und da diese Regeln im Stylesheet nach den "allgemeinen" Link-Formatierungen notiert sind, überschreiben sie auch diese.

(Damit zwischen den Grafiken kein leerer Raum entsteht habe ich alles hintereinander weg geschrieben. Jetzt hier zur Übersichtlichkeit alle 4 Grafiken untereinander..)

Zeichne die Grafiken mit float:left aus, damit die Zeilenumbrüche im HTML-Code nicht als "Whitespaces" interpretiert werden:

div#menu_leiste a img {
float:left;
}

Zum Schluss noch ein Hinweis in "eigener Sache": Ich war mal so frei, den Thementitel etwas aussagekräftiger zu gestalten, denn mit dem Topic "Problem" kann man in der Themenübersicht nicht viel anfangen.

"Schick" wird "Chique" geschrieben

Seit wann denn das? :suspekt:

Duden-Homepage | Suchergebnis für "schick"

 

[tuFrogs]

Ich danke dir Maik, werde es gleich mal umsetzen..

Ich habe es umgesetzt und wieder ein Problem. In der Menü-Leiste oben werden jetzt die 2 Randgrafiken nebeneinander (kleine Lücke dazwischen) angezeigt und die Grafiken in der mitte (mit Link versehen) werde eine Zeile darunter ausgegeben!?

Ah okay, ich habs.. Da in der Menüleiste Grafiken mit und ohne Link ausgegeben werden muss das nicht:

div#menu_leiste a img {
float:left;
}

Sondern:

div#menu_leiste img {
float:left;
}

heißen.. Damit es sich wohl auf jede Grafik bezieht.

Danke euch für eure Hilfe!!

// EDIT

Nein oder? Wieso nur können die Browser nicht halbwegs kompatibel sein? Im IE7 funktionert das nicht mit dem oberen Menu-Div, der Zeigt dennoch Lücken zwischen den Grafiken an.

 

[Maik]

Kannst du mal den Link zur Seite nennen, damit man sich das "live" anschauen kann, und die eingebundenen Grafiken zur Verfügung hat?

 

[tuFrogs]

Link hab ich dir per PM geschickt.

 

[Maik]

Übergib das Dokument mal im "Standardsmode", indem du beispielsweise folgenden Doctype deklarierst:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
...

dann klappt es auch im IE mit dem oberen Menü.