Kleines Problem beim CSS Mouse Over

zyclop

Erfahrenes Mitglied
Hallo zusammen

Folgendes Problem habe ich und hoffe dass ich hier nur einen Überlegungsfehler mache.

Ich habe ein Menu welches durch CSS einen Mouse Over Effekt erhält. Das klappt auch alles gut. Nun habe ich aber das Problem, dass wenn ich das nachbar Element Mouse Over stelle ich dann einen Abstand von ca. 3px habe. Ich habe jetzt mehrere Sachen versucht mit padding und margin an verschiedenen Stellen. Im Anhang ein Bildbeschreibung. Hier der Code:

HTML:
#menu { 
	color: #ccc;
	font-family: Arial, Verdana, Sans-Serif;
	font-weight: bold;
	font-size: 12px;
	padding: 3px 3px 3px 192px;
	margin-bottom: 20px;
	text-align: left;
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
  background:url(images/menu_oben.gif) repeat-x;
	}
#menu h2 {
	margin: 0px;
	padding: 3px 3px 3px 3px;
	}
		
#menu li {
	display: inline;
	list-style-type: none;
	}
#menu ul {
	margin: 0px;
	padding: 0px;
	}
	
#menu ul li a {
	color: #522c65;
	padding: 3px 3px 3px 3px;
	margin: 0px;
	text-decoration: none;
	padding-right: 8px;
        padding-left: 8px;
	}

#menu ul li a:hover {
	text-decoration: underline;
        background: url(images/menu_oben_aktiv.gif) repeat-x;
	padding-right: 8px;
        padding-left: 8px;
        color: #ffffff;
	}

#menu .current_page_item a{
	text-decoration: underline;
        background: url(images/menu_oben_aktiv.gif) repeat-x;
	padding-right: 8px;
        padding-left: 8px;
        color: #ffffff;
}

Hat jemand eine Idee woher dieser Abstand kommt? Allgemeine Verbesserungsvorschläge sind natürlich willkommen.

gruss zyclop
 

Anhänge

  • fehler.png
    fehler.png
    3,1 KB · Aufrufe: 87
Nun habe ich aber das Problem, dass wenn ich das nachbar Element Mouse Over stelle ich dann einen Abstand von ca. 3px habe.
Der Abstand zwischen den Menüpunkten existiert schon von Beginn an.

Da die Menüpunkte aber zunächst keinen Hintergrund besitzen, wird er erst deutlich sichtbar, wenn der überfahrene Menüpunkt das Hintergrundbild erhält (im Anhang befindet sich daneben wohl der aktuell geöffnete Menüpunkt, der ebenfalls dieses Hintergrundbild besitzt).

Verantwortlich ist deine display:inline-Regel für das <li>-Element.

Lösung: Stattdessen float:left angeben, unter Berücksichtigung, das Floaten der Elemente abschliessend mittels clear:left abzubrechen, damit der untere Rahmen des umschliessenden Elements (#menu) nicht zum oberen Rahmen verrutscht, und so von den Menüpunkten überlappt wird - Stichwort:
CSS Warum passt sich die Boxenhöhe nicht dem Inhalt an?

Die Klasse "clearfix" wird dann im <ul>-Element deines Listenmenüs aufgerufen.
 
Zuletzt bearbeitet:
Aha...hmm...ok

Verstehe es nicht ganz aber ich werde mich mal dahinter klemmen und mich zu 99% nochmals melden.

gruss und danke
zyclop
 
Also ich habe folgendes gemacht:

Folgendes:
HTML:
#menu li {
	display: inline;
	list-style-type: none;
	}
Ersetzt durch:
HTML:
#menu li {
        float:left;
	list-style-type: none;
	}

Nun werden die Buttons richtig dargestellt. Jedoch habe ich wie du bereits gesagt hast nun das Problem mit dem Verrutschen. Auch das konnte ich dank deiner Angabe und dem dritten mal durchlesen verstehen.

Darum habe ich folgendes:

HTML:
#menu ul {
	margin: 0px;
	padding: 0px;
	}

Durch folgendes ersetzt:
HTML:
#menu ul {
	margin: 0px;
	padding: 0px;
display:inline-block;

Danach hatte ich aber das Problem dass die Buttons noch zu klein waren. Dies muss ich aber von Hand anpassen. Die frage ist nur warum das vorher sauber funktioniert hat.

Na dann. Danke Spice

BTW: Irgendwie vermute ich, dass MAIK den namen geändert hat und nun unter neuen Namen wieder neu begonnen hat. Aber das ist nur eine Vermutung. :D
 
Was verstehst du daran nicht?

Inline-Elemente (z.B. <img>, <span>), sowie Elemente mit der display:inline-Eigenschaft erzeugen eine Lücke im Textfluß, da die Browser im HTML-Code die enthaltenen "Whitespaces" (Zeilenumbrüche, Tab-Einrückumgen) vor / hinter diesem Element interpretieren.

"Block-Level-Charakteristika" mittels display:block behebt diese Fehlinterpretation und entfernt den unerwünschten Abstand, da hier aber die Menüpunkte nebeneinander ausgerichtet sein sollen, mit display:block sie aber untereinander erscheinen würden, kommt stattdessen eine float-Regel zum Einsatz, die, wie erwähnt und verlinkt, zum Schluß mittels der clear-Eigenschaft aufgehoben werden muß, damit im Dokument wieder der normale Textfluß vorherrscht.
 
Komisch, dass erste mal dass der IE die Seite korrekt interpretiert und der Chrome was anderes macht. Chrome zeigt die Buttons zu klein an Siehe Bild. Warum Interpretiert hier der Chrome die Seite anders?
 

Anhänge

  • fehler.png
    fehler.png
    2,5 KB · Aufrufe: 68
Warum Interpretiert hier der Chrome die Seite anders?
Ganz einfach deshalb:

CSS:
#menu ul {
	margin: 0px;
	padding: 0px;
display:inline-block; /* ohne deine hinzugefügte Regel interpretiert Chrome nichts anders */
}

Wenn das deine Umsetzung des empfohlenen Threads ist, hast du irgendwas darin falsch oder nicht verstanden, denn so wird es dort überhaupt nicht vorgestellt, sondern vielmehr so:

HTML:
<ul class="clearfix">
    <li><a href="#">testlink 1</a></li>
    <li><a href="#">testlink 2</a></li>
</ul>
CSS:
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
 
Zuletzt bearbeitet:
Ja aber ich kann dem UL diesen wert nicht zuweisen (Ich weiss zumindest nicht wie), da dies automatisch erstellt wird. (Via Wordpress)

Ok. Dann häng mich nochmals dahinter und erarbeite das ganze nochmals.

grz
 
Wordpress ist nicht meine Welt. Von daher weiß ich auch nichts ob der Möglichkeiten, im Backend etwas einzustellen, damit das HTML-Attribut class="" mit dem Klassenname in den Tag gesetzt wird.

Aber was hindert dich, die Klasse im Elternelement des Menüs aufzurufen?

Deinem CSS-Schnipsel zufolge vermutlich ein <div> mit der ID "menu".

HTML:
<div id="menu" class="clearfix">
 
Zuletzt bearbeitet:
Ja genau. So hab ich gerade gemacht. Die Navigation oben lässt sich meistens in der header.php bearbeiten.

HTML:
<div id="menu" class="clearfix">
	<ul>
		<!--<li class="page_item" ><a href="<?php echo get_settings('home'); ?>">Home</a></li>-->
		<?php wp_list_pages('title_li=&depth=1&exclude=32,40'); ?>
	</ul>
	</div>

Und das in die Css eintragen:

Code:
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
 
.clearfix {display:inline-block;}
 
/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

Danke spicelab!(!)(!)(!)(!)(!)
 
Zurück