✔ Problem mit Hover Zustand bei zwei Menüpunkten nebeneinander

[Jan-Frederik Stieler]

Hi,
ich möchte eine Reihe von Zahlen als Menüpunkte haben. Zuerst dachte ich ich könnte das ja mit einer Ol machen da mir hier ja die Zahlen automatisch hinzugefüht werden. Das Problem hier ist nur das ich ja :hover eigentlich nur auf a-Elemente legen darf.
Und der iE das dann auch wieder nicht richtig versteht. Gut muß ich halt mit leben.
Nun habe ich das Ganze eben mit einer Ul gemacht und die Zahlen von hand hinzugefügt und mit einem a-Tag versehen. Das funktioniert soweit auch, aber die Zahlen verlieren immer ihren Hover wenn ich mit der maus in den Freiraum zwischen den Zahlen komme welche mit über margin erzeugt wurden. Wie kann ich das umgehen?

Viele Grüße

 

[Maik]

Hi,

was hälst du von padding anstelle margin ?

Eine Breitenangabe bei zentriertem Inhalt wäre hier gleichermaßen denkbar.

mfg Maik

 

[Jan-Frederik Stieler]

Hi,
danke erstmal.
Aber ich hab grad gemerkt das ich dir müll erzählt hab. Ich habe garkein margin mehr drinnen, das hatte ich schon rausgenommen gehabt. Weil sich die Liste auch ohne margin mit einem Freiraum zwischen den Zahlen dargestellt hat. Das eigentliche Problem besteht aber trotzdem.

Ich häng mal den CSS Code an.

ul#ziffermenu
{
	position: absolute;
	bottom: 0;
	cursor: pointer;
}

ul#ziffermenu li
{
	display: inline;
}

ul#ziffermenu li a img
{
	z-index: 3;
	display: none;
}

ul#ziffermenu li a:hover img
{
	position: absolute;
	top: -512px;
	left: 435px;
	display: block;
}

 

[queicherius]

Weil sich die Liste auch ohne margin mit einem Freiraum zwischen den Zahlen dargestellt hat.

Hast du denn der Liste seinen Margin weggenommen?

ul li
{
        margin: 0;
}

Hier sind "Reset-Stylesheets" ganz nützlich

 

[Jan-Frederik Stieler]

Hi,
ich hab den Universalselektor * gesetzt. der Vererbt das ja.
Eigentlich dürfte da kein jetzt gar kein Freiraum zwischen den Ziffern sein.
Ich bin das Ganze grad auch nochmal mit dem Firebug durch gegangen.

/* ################  Menu  ################  */


ul.menu li, ul.menu-frontpage li, ul.menu-home li, ul.menu-uebersichtmenu li
{
	list-style-type: none;
}

ul.menu-frontpage li
{
	float: right;
}

ul.menu li, ul.menu-frontpage li
{
	display: inline;
}

ul.menu li a
{
	margin-right: 2px;
	font-family: univers,helvetica,arial, sans-serif; 
	font-weight: bold;
	color:#000; 
	font-size: 12pt; 
	text-transform: uppercase;
	text-decoration: none;
}

ul.menu li a:hover, ul.menu li.parent .active a
{
	color: #ff00fb;	
}



/* ################  Startseitenmenuepunkt  ################  */


ul.menu-frontpage li
{
	height: 48px;
	width: 133px;
	background-image: url(**************);
	background-repeat: no-repeat;
}

ul.menu-home
{
	height: 35px;
	width: 16px;
}

ul.menu-home li
{

	background-image: url(**************);
	background-repeat: no-repeat;
}

ul.menu-home li:hover
{
	background-image: url(**************);
	background-repeat: no-repeat;
}



/* ################  uebersichtsmenue  ################  */


ul.menu-uebersichtmenu
{
	position: absolute;
	margin-right: 2px;
	font-family: univers,helvetica,arial, sans-serif; 
	font-weight: bold;
	color:#000; 
	font-size: 12pt; 
	text-transform: uppercase;
	text-decoration: none;
	bottom: 0;
}

ul.menu-uebersichtmenu li a img
{
	display: none;
}

ul.menu-uebersichtmenu li a:hover img
{
	position: absolute;
	top: -300px;
	left: 400px;
	display: block;
}



/* ################  gallerymenu  ################  */


ul#ziffermenu
{
	position: absolute;
	bottom: 0;
	cursor: pointer;
}

ul#ziffermenu li
{
	display: inline;
}

ul#ziffermenu li a img
{
	z-index: 3;
	display: none;
}

ul#ziffermenu li a:hover img
{
	position: absolute;
	top: -512px;
	left: 435px;
	display: block;
}

/* ################  Layput  ################  */


body
{
	font-family: univers,helvetica,arial, sans-serif;
	font-weight: normal; 
	color:#000; 
	font-size: 9pt; 
	background-color: #9cbdcc;
}

#wrapper
{
    	background-color: #fff;
}

a:link, a:visited, a:active
{
	color: #000; 
	text-decoration: none;
}

a:hover, li:hover
{
	color: #ff00fb;
	text-decoration: none;
}

a img
{
	border: 0 none;
}

h1
{
	font-weight: bold;
	font-size: 9pt; 
	display: inline;
}

p
{
	margin-bottom: 10pt;
}

.contentpane
{  
	font-size: 12pt;
	font-weight: bold; 
}

/* ################  Position  ################  */


*
{
	margin: 0;
	padding: 0;
	text-align: left;
}

html, body
{
	height: 100%;	
}

body
{
	text-align:center; /* horizontal centering for IE Win quirks */
}

iframe
{
	display: block;
}

#distance
{ 
		width: 1px;
		height: 50%;
		margin-bottom: -289px; /* haelfte von wrappers hoehe */
		float: left;
}

#wrapper
{
		margin: 0 auto;
		position: relative; /* positioniert container vor distance */
		text-align: left;
		height: 578px;
		width: 968px;
		clear: left;
}

#topmenu
{
	position: absolute;
	top: 39px;
	left: 65px;
    z-index: 99;
}

#homelink
{
	position: absolute;
	float: right;
	top: 30px;
	right: 30px;
	height: 25px;
	width: 11px;
	z-index: 99;
}

.clearright
{
	clear: right;
	display: block;
}


#content, .contentdescription, iframe
{
	position: relative;
	width: 840px;
	height: 420px;
	top: 105px;
	left: 65px;
}

#frontpagecontent
{
	position: absolute;
	top: -1px;
	left: -1px;
	width: 968px;
	height: 578px;
	background-image: url(**************);
}

#contenttxt
{
	float: left;
	margin-right: 50px;
	height: 420px;
	width: 300px;
}


#contentbigpic, #contentpic
{
	width: 900px;
}

#contentbigpic, #basepic
{
	position: absolute;
	top: -105px;
	left: 435px;
}

 

[Maik]

Ich habe garkein margin mehr drinnen, das hatte ich schon rausgenommen gehabt. Weil sich die Liste auch ohne margin mit einem Freiraum zwischen den Zahlen dargestellt hat.

ich hab den Universalselektor * gesetzt. der Vererbt das ja.
Eigentlich dürfte da kein jetzt gar kein Freiraum zwischen den Ziffern sein.

Für den Abstand zwischen den Listeneinträgen ist ihre display:inline-Regel verantwortlich, wodurch die Zeilenumbrüche, Tab-Einrückungen im HTML-Code ("Whitespaces") vom Browser interpretiert werden.

Lösung:

ul#ziffermenu
{
    position: absolute;
    bottom: 0;
    cursor: pointer;
    list-style:none; /* Listenzeichen deaktivieren */
}

ul#ziffermenu li
{
    float:left; /* anstelle von display:inline */
    padding:0 5px; /* damit's nicht ganz so eng zugeht ^^ */
}

mfg Maik

 

[Jan-Frederik Stieler]

HI,
immer sinds die kleinen Feinheiten .
Ist ja aber eigentlich auch sinnvoll das zwischen Objekten die auf Inline gestezt werden ein Freiraum mit eingerechnet wird.
Gut wieder was gelernt.

So ich hab das jetzt mal grad umgeschrieben. Nur das Problem weswegen ich den Beitrag erstellt habe besteht immer noch, trotz padding.

Viele Grüße
Jan

 

[Maik]

So ich hab das jetzt mal grad umgeschrieben. Nur das Problem weswegen ich den Beitrag erstellt habe besteht immer noch, trotz padding.

Hast du auch display:inline durch float:left ersetzt?

Diese Regel schließt zwischen den Listeneinträgen die Freiräume, in denen die :hover-Pseudoklasse ihre Gültigkeit verliert.

Daher hab ich auch zusätzlich einen "dezenten" Innenabstand angegeben, damit die Ziffern nicht so eng aufeinander folgen.

Ansonsten mal den Browsercache leeren, und die Seite neu aufrufen.

mfg Maik

 

[Jan-Frederik Stieler]

HI,
ja habe ich. Auch das leeren des Caches brachte keine Änderung.
Wenn ich mit der Maus in den Leerraum zwischen zwei Ziffern gehe sehe ich immer das Bild dahinetr durchblinken.

 

[Maik]

Sagst du mir bitte, wo hier zwischen den Links noch ein Freiraum vorhanden ist?



Das erweiterte CSS für dieses Demo:

ul#ziffermenu li
{
    float:left;
    padding:0 5px;
    background:#eee;
    border-right:1px solid #000;
}

mfg Maik