CSS Menü verschwindet....

tombeat · 01.03.2009

Hi,

Ich hab ein kleines Problem. Und zwar hab ich mir gesaugt, und dieses auf meine HP eingebunden...
Dank Saila funktioniert das auch Spitze.

Jetzt stehe ich aber vor dem nächsten Problem das mit dem Imageflow in verbindung steht! Und zwar hab ich ein Menü mittels CSS realisiert abgewandelt von diesem hier:

Mein Problem ist folgendes:
Wenn ich das Menü offen habe, und nach unten zu einem Menüpunkt fahren will, verschwindet das Menü sobald ich in den Bereich des Div's vom Imageflow bin.

Gibt es eine Möglichkeit dies zu unterbinden?

Hier hab ich erstmal nen Link zur Seite:

Wenn man jetzt oben auf Fotos fährt, verschwindet das Menü wenn man versucht eines der unteren Menüpunkte zu erwischen.

Hier noch der html Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Thomas Schober" />
<meta name="publisher" content="Silvia Schwarzbauer" />
<meta name="copyright" content="Jack the Stripper" />
<meta name="description" content="Eine kleine Private Homepage über das Pferd Corason und seine Reiterin Silvia Schwarzbauer. Ergebnisse und Fotos von Turnieren und alles rund um Corason." />
<meta name="keywords" content="Pferd, Corason, Silvia, Thomas, Turniere, Springreiten, Reiten, RVV, Epona, Sport, Hobby, Spaß, JacktheStripper, " />
<meta name="page-topic" content="Sport" />
<meta name="page-type" content="Private Homepage" />
<meta name="audience" content="Alle" />
<meta http-equiv="content-language" content="de" />
<meta name="robots" content="index, follow" />
<meta name="DC.Creator" content="Thomas Schober" />
<meta name="DC.Publisher" content="Silvia Schwarzbauer" />
<meta name="DC.Rights" content="Jack the Stripper" />
<meta name="DC.Description" content="Eine kleine Private Homepage über das Pferd Corason und seine Reiterin Silvia Schwarzbauer. Ergebnisse und Fotos von Turnieren und alles rund um Corason." />
<meta name="DC.Language" content="de" />


<title>Corason</title>

	<script type="text/javascript" src="imageflow/imageflow.packed.js"></script>
	<script type="text/javascript" src="highslide/highslide.packed.js"></script>
	<script type="text/javascript">
		hs.graphicsDir = 'highslide/graphics/';
		hs.align = 'center';
		hs.transitions = ['expand', 'crossfade'];
		hs.outlineType = 'glossy-dark';
		hs.fadeInOut = true;
		//hs.dimmingOpacity = 0.75;
	
		// Add the controlbar
		if (hs.addSlideshow) hs.addSlideshow({
			//slideshowGroup: 'group1',
			interval: 5000,
			repeat: false,
			useControls: true,
			fixedControls: 'fit',
			overlayOptions: {
				opacity: .6,
				position: 'bottom center',
				hideOnMouseOut: true
			}
		});
	</script>
	
	<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
	<link rel="shortcut icon" type="image/x-icon" href="favicon.gif" />

<!--[if IE 6]>
	<style type="text/css">@import url(ie6.css);</style>
<![endif]-->


</head>

<body>
	<div id="root">
		
		<div id="header">
		
			<div id="url" align="right">
				<span><a href="index.php">www.corason.at</a></span>
			</div>
			
			<div style="height:178px">&nbsp;</div>
			
			<div class="menu">
				
				<ul>
					<li><a class="begin" href="index.php">Home</a></li>
					
					<li><a href="index.php?section=pferd">Das Pferd</a></li>
					
					<li><a href="index.php?section=reiterin">Die Reiterin</a></li>
					
					<li><a class="hide" href="">Turniere</a>
					<!--[if lte IE 6]>
					<a href="index.php?section=turniere">Turniere</a>
					<![endif]-->
					
						<ul>
						<li><a class="end2" href="">Landesmeisterschaft&nbsp;2008</a>

							<ul>
								<li><a href="index.php?section=lm08_fotos">Fotos</a></li>
								<li><a href="index.php?section=lm08_ergebnisse">Ergebnisse</a></li>
							</ul>

						</li>
						</ul>
					

					</li>
					
					<li><a class="hide" href="">Fotos</a>
					<!--[if lte IE 6]>
					<a href="index.php?section=fotos">Fotos</a>
					<![endif]-->
					
						<ul>
							<li><a style="width:230px;" href="index.php?section=clubfotos">Clubfotos</a></li>
							<li><a style="width:230px;" href="index.php?section=fasching09">Faschingsreiten 2009</a></li>
							<li><a style="width:230px;" href="index.php?section=reitertreffen_08">Reitertreffen&nbsp;2008</a></li>
							<li><a style="width:230px;" href="index.php?section=lm08_fotos">Landesmeisterschaft&nbsp;2008</a></li>
							<li><a style="width:230px;" href="index.php?section=pferdeshow">Pferdeshow&nbsp;beim&nbsp;Lippizanerfranzl</a></li>
							<li><a style="width:230px;" href="index.php?section=einstand">Doppel-Einstandsfeier</a></li>
							<li><a class="end2" style="width:230px;" href="index.php?section=tillmitsch_05_08_fotos">CSN-B Tillmitsch 2008</a></li>
						</ul>
						

					</li>
					
					<li><a href="index.php?section=guestbook">G&auml;stebuch</a></li>
					
					<li><a href="index.php?section=sponsoren">Sponsoren</a></li>
					
					<li><a href="index.php?section=partnerseiten">Partnerseiten</a></li>
					
					<li><a class="end" href="index.php?section=news">News</a></li>
				</ul>
		</div>
		</div>
		
		<div id="content">
			<br />
<span class="Stil1">Faschingsreiten 2009</span>
<br />
	<span class="Stil3">Fotos vom alljährlichen Faschingsreiten 2009</span>

<div id="highslide" class="imageflow">	
		<img src="Fotos/Fasching09/Thumbs/fasching09_01.jpg" longdesc="Fotos/Fasching09/fasching09_01.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_02.jpg" longdesc="Fotos/Fasching09/fasching09_02.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_03.jpg" longdesc="Fotos/Fasching09/fasching09_03.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_04.jpg" longdesc="Fotos/Fasching09/fasching09_04.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_05.jpg" longdesc="Fotos/Fasching09/fasching09_05.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_06.jpg" longdesc="Fotos/Fasching09/fasching09_06.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_06.jpg" longdesc="Fotos/Fasching09/fasching09_07.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_08.jpg" longdesc="Fotos/Fasching09/fasching09_08.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_09.jpg" longdesc="Fotos/Fasching09/fasching09_09.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_10.jpg" longdesc="Fotos/Fasching09/fasching09_10.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_11.jpg" longdesc="Fotos/Fasching09/fasching09_11.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_12.jpg" longdesc="Fotos/Fasching09/fasching09_12.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_13.jpg" longdesc="Fotos/Fasching09/fasching09_13.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_14.jpg" longdesc="Fotos/Fasching09/fasching09_14.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_15.jpg" longdesc="Fotos/Fasching09/fasching09_15.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_16.jpg" longdesc="Fotos/Fasching09/fasching09_16.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_17.jpg" longdesc="Fotos/Fasching09/fasching09_17.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_18.jpg" longdesc="Fotos/Fasching09/fasching09_18.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_19.jpg" longdesc="Fotos/Fasching09/fasching09_19.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_20.jpg" longdesc="Fotos/Fasching09/fasching09_20.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_21.jpg" longdesc="Fotos/Fasching09/fasching09_21.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_22.jpg" longdesc="Fotos/Fasching09/fasching09_22.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_23.jpg" longdesc="Fotos/Fasching09/fasching09_23.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_24.jpg" longdesc="Fotos/Fasching09/fasching09_24.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_25.jpg" longdesc="Fotos/Fasching09/fasching09_25.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_26.jpg" longdesc="Fotos/Fasching09/fasching09_26.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_06.jpg" longdesc="Fotos/Fasching09/fasching09_27.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_28.jpg" longdesc="Fotos/Fasching09/fasching09_28.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_29.jpg" longdesc="Fotos/Fasching09/fasching09_29.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_30.jpg" longdesc="Fotos/Fasching09/fasching09_30.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_31.jpg" longdesc="Fotos/Fasching09/fasching09_31.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_32.jpg" longdesc="Fotos/Fasching09/fasching09_32.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_33.jpg" longdesc="Fotos/Fasching09/fasching09_33.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_34.jpg" longdesc="Fotos/Fasching09/fasching09_34.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_35.jpg" longdesc="Fotos/Fasching09/fasching09_35.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_36.jpg" longdesc="Fotos/Fasching09/fasching09_36.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_37.jpg" longdesc="Fotos/Fasching09/fasching09_37.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_38.jpg" longdesc="Fotos/Fasching09/fasching09_38.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_39.jpg" longdesc="Fotos/Fasching09/fasching09_39.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_40.jpg" longdesc="Fotos/Fasching09/fasching09_40.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_41.jpg" longdesc="Fotos/Fasching09/fasching09_41.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_42.jpg" longdesc="Fotos/Fasching09/fasching09_42.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_43.jpg" longdesc="Fotos/Fasching09/fasching09_43.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_44.jpg" longdesc="Fotos/Fasching09/fasching09_44.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_45.jpg" longdesc="Fotos/Fasching09/fasching09_45.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_46.jpg" longdesc="Fotos/Fasching09/fasching09_46.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_06.jpg" longdesc="Fotos/Fasching09/fasching09_47.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_48.jpg" longdesc="Fotos/Fasching09/fasching09_48.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_49.jpg" longdesc="Fotos/Fasching09/fasching09_49.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_50.jpg" longdesc="Fotos/Fasching09/fasching09_50.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_51.jpg" longdesc="Fotos/Fasching09/fasching09_51.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_52.jpg" longdesc="Fotos/Fasching09/fasching09_52.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_53.jpg" longdesc="Fotos/Fasching09/fasching09_53.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_54.jpg" longdesc="Fotos/Fasching09/fasching09_54.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_55.jpg" longdesc="Fotos/Fasching09/fasching09_55.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_56.jpg" longdesc="Fotos/Fasching09/fasching09_56.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_57.jpg" longdesc="Fotos/Fasching09/fasching09_57.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_58.jpg" longdesc="Fotos/Fasching09/fasching09_58.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_59.jpg" longdesc="Fotos/Fasching09/fasching09_59.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_60.jpg" longdesc="Fotos/Fasching09/fasching09_60.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_61.jpg" longdesc="Fotos/Fasching09/fasching09_61.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_62.jpg" longdesc="Fotos/Fasching09/fasching09_62.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_63.jpg" longdesc="Fotos/Fasching09/fasching09_63.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_64.jpg" longdesc="Fotos/Fasching09/fasching09_64.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_65.jpg" longdesc="Fotos/Fasching09/fasching09_65.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_66.jpg" longdesc="Fotos/Fasching09/fasching09_66.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_06.jpg" longdesc="Fotos/Fasching09/fasching09_67.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_68.jpg" longdesc="Fotos/Fasching09/fasching09_68.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_69.jpg" longdesc="Fotos/Fasching09/fasching09_69.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_70.jpg" longdesc="Fotos/Fasching09/fasching09_70.jpg" />
		<img src="Fotos/Fasching09/Thumbs/fasching09_71.jpg" longdesc="Fotos/Fasching09/fasching09_71.jpg" />
</div>

	<span class="Stil3">Auf's Bild klicken zum vergrößern</span>
					</div>
		
		<div id="footer">
				<div class="topnews"><a href="index.php?section=news"><img style="vertical-align:middle;" "src="Bilder/ehe.jpg" border="0" width="30" height="30" />&nbsp;Wir heiraten am 1. August diesen Jahres&nbsp;<img style="vertical-align:middle;" "src="Bilder/ehe.jpg" border="0" width="30" height="30" /></a></div>
		</div>
		
	</div>
	
	<div id="valide">
		<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a>
	    <a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="CSS ist valide!" height="31" width="88" border="0" /></a>
	</div>
	
<div id="kontakt">
	<a href="hauptseiten/kontakt.php">Kontakt</a> | <a href="index.php?section=impressum">Impressum</a></div>
</body>
</html>

und der Relevante Ausschnitt aus der CSS

Code:

/*Highslide*/
				
.highslide-container div {
	font-family: 			Verdana, Helvetica;
	font-size: 				10pt;
}
.highslide {
	cursor: 				url(highslide/graphics/zoomin.cur), pointer;
	outline: 				none;
	text-decoration: 		none;
}
.highslide img {
	margin-left:			6px;
	margin-right:			6px;
	margin-top:				9px;
	margin-bottom:			0px;
	border:					1px solid #006600;
}
.highslide:hover img {
	margin-left:			4px;
	margin-right:			4px;
	margin-top:				4px;
	border:					3px double #006600;
}
.highslide img.hoch {
	margin-left:			24px;
	margin-right:			24px;
	margin-top:				9px;
	margin-bottom:			0px;
	border:					1px solid #006600; 
}
.highslide:hover img.hoch {
	margin-left:			22px;
	margin-right:			22px;
	margin-top:				4px;
	border:					3px double #006600; 
	}
	
.highslide-active-anchor img, .highslide-active-anchor:hover img {
	border-color: 			black;
}
.highslide-image {
	border-width: 			2px;
	border-style: 			solid;
	border-color: 			black black #202020 black;
	background: 			gray;
}
.highslide-wrapper, .glossy-dark {
	background: 			#111;
}
.highslide-image-blur {
}
.highslide-caption {
	display: 				none;
	border-top: 			none;
	font-size: 				1em;
	padding: 				5px;
	color: 					white;
	background: 			#111;
}
.highslide-heading {
	display: 				none;
	color: 					white;
	font-size: 				1.2em;
	font-weight: 			bold;
	margin-bottom: 			0.4em;
}
.highslide-dimming {
	position: 				absolute;
	background: 			black;
}
.highslide-loading {
	display: 				block;
	color: 					white;
	font-size: 				9px;
	font-weight: 			bold;
	text-transform: 		uppercase;
	text-decoration: 		none;
	padding: 				3px;
	border-top: 			1px solid white;
	border-bottom: 			1px solid white;
	background-color: 		black;
	/*
	padding-left: 22px;
	background-image: url(highslide/graphics/loader.gif);
	background-repeat: no-repeat;
	background-position: 3px 1px;
	*/
}
a.highslide-credits,
a.highslide-credits i {
	padding: 		 		2px;
	color: 					silver;
	text-decoration: 		none;
	font-size: 				10px;
}
.highslide-move a {
	cursor: 				move;
}


/* Controls. See http://www.google.com/search?q=css+sprites */
.highslide-controls {
	width: 					195px;
	height: 				40px;
	background: 			url(highslide/graphics/controlbar-black-border.gif) 0 -90px no-repeat;
	margin-right: 			15px;
	margin-bottom: 			10px;
	margin-top: 			20px;
}
.highslide-controls ul {
	position: 				relative;
	left: 					15px;
	height: 				40px;
	list-style: 			none;
	margin: 				0;
	padding: 				0;
	background: 			url(highslide/graphics/controlbar-black-border.gif) right -90px no-repeat;
}
.highslide-controls li {
	float: 					left;
	padding: 	 			5px 0;
}
.highslide-controls a {
	background: 			url(highslide/graphics/controlbar-black-border.gif);
	display: 				block;
	float: 					left;
	height: 				30px;
	width: 					30px;
	outline: 				none;
}
.highslide-controls a.disabled {
	cursor: 				default;
}
.highslide-controls a span {
	/* hide the text for these graphic buttons */
	display: 				none;
}

/* The CSS sprites for the controlbar */
.highslide-controls .highslide-previous a {
	background-position: 	0 0;
}
.highslide-controls .highslide-previous a:hover {
	background-position: 	0 -30px;
}
.highslide-controls .highslide-previous a.disabled {
	background-position: 	0 -60px !important;
}
.highslide-controls .highslide-play a {
	background-position: 	-30px 0;
}
.highslide-controls .highslide-play a:hover {
	background-position: 	-30px -30px;
}
.highslide-controls .highslide-play a.disabled {
	background-position: 	-30px -60px !important;
}
.highslide-controls .highslide-pause a {
	background-position: 	-60px 0;
}
.highslide-controls .highslide-pause a:hover {
	background-position: 	-60px -30px;
}
.highslide-controls .highslide-next a {
	background-position: 	-90px 0;
}
.highslide-controls .highslide-next a:hover {
	background-position: 	-90px -30px;
}
.highslide-controls .highslide-next a.disabled {
	background-position: 	-90px -60px !important;
}
.highslide-controls .highslide-move a {
	background-position: 	-120px 0;
}
.highslide-controls .highslide-move a:hover {
	background-position: 	-120px -30px;
}
.highslide-controls .highslide-full-expand a {
	background-position: 	-150px 0;
}
.highslide-controls .highslide-full-expand a:hover {
	background-position: 	-150px -30px;
}
.highslide-controls .highslide-full-expand a.disabled {
	background-position: 	-150px -60px !important;
}
.highslide-controls .highslide-close a {
	background-position: 	-180px 0;
}
.highslide-controls .highslide-close a:hover {
	background-position: 	-180px -30px;
}
.highslide-container {
	z-index:10003 !important;
}
.highslide-credits {
	display:none !important; 
}


@charset 'utf-8';

/* ImageFlow Settings - CSS 2.1
==================================== */
@media screen, projection {
	.imageflow {
		visibility:hidden;
		position: relative; 
		text-align: left;
		width: 100%;	
	}
	.imageflow img {
		visibility:hidden;
		position: absolute; 
		top: 0px;
		margin-left:			6px;
		margin-right:			6px;
		margin-top:				6px;
		margin-bottom:			0px;
		border:					none;
	}
	.imageflow img:hover {
		margin-left:			3px;
		margin-right:			3px;
		margin-top:				3px;
		border:					3px double #006600;
	}
	.imageflow p{
		text-align:center;
		margin:0 auto;
	}
	.imageflow .loading {
		position: relative;
		left: 50%;
		margin-left: -106px;
		width: 200px;
		height: 15px;
		padding:5px;
		visibility: visible;
		border: 1px solid white;
	}
	.imageflow .loading_bar {
		height: 15px;
		width: 1%;
		background: #61A94E;
		visibility: visible;
	}
	.imageflow .caption {
		font-weight:bold;
		position:relative; 
		text-align:center;
		z-index:10000;
	}
	.imageflow .scrollbar {
		visibility:hidden;
		position:relative; 
		border-bottom:1px solid #61A94E ;
		z-index:10001;
	}
	.imageflow .slider {
		position:absolute;
		margin-top:-7px;
		margin-left:-7px;
		z-index:10002;
		background-image:url(Bilder/slider_dark.png);
		background-repeat:no-repeat;
		width:14px;
		height:14px;
	}
}

Gibts viell. ne Möglichkeit dem menü eine höhere "wichtigkeit" zu verpassen oder ähnliches?

MfG
Tom

rapzitis · 01.03.2009

AW: CSS Menü verschwindet....

hallo,

auf dem div#highslide liegen 2 weitere inline-styles, das "visibility:visible;" ist hier der übeltäter.

Wenn ich im Firefox mit Firebug diesen Style-Befhl deaktivier - funktioniert die navigation und imageflow einwanfrei. Wird allerdings in anderen Browsern auswirkungen haben. Zumindestens glaub ich das da nicht ohne grund mit inline-style gearbeitet wurde.

Gruß
Chris

sokie · 01.03.2009

AW: CSS Menü verschwindet....

tombeat schrieb:
Gibts viell. ne Möglichkeit dem menü eine höhere "wichtigkeit" zu verpassen oder ähnliches?

Wenn man das so nennenwill,ja.
Das Probelm in der Seite ist, dass das Menü (bzw hier die unteren Punkte) unter dem Container der Bildergalerie liegt.
ein Lösung wäre .menü absolut zu positionieren, und eine grösseren z-index zu geben, als den containern der slidshow.

in deiner CSS ist ja zu sehen, dass Du den Gedanken auch verfolgt hast, nur eben ohne den container absolut zu positionieren. dann greift z-index aber nicht.

um den div.menu zB absolute zu positionieren, und trotzdem relative zum wrapper("#root") bekommt #root die Eigenschaft position:relative.

zB:

HTML:

    <div id="root" style="position: relative;">
        
        <div id="header">
        
            <div id="url" align="right">
                <span><a href="index.php">www.corason.at</a></span>
            </div>
            
            <div style="height: 178px;">&nbsp;</div>
            
            <div class="menu" style="position: absolute; z-index: 10000004; top: 200px;">

die inlinestyles schreibst du natürlich besser in die css.

tombeat · 01.03.2009

AW: CSS Menü verschwindet....

Hey..... Cool...
Danke an für die mühen... Habs jetzt nicht in andren Browsern getestet, aber es funktioniert... Hab ich was gelernt!
Dennoch hab ich die Möglichkeit von sokie genommen, die PERFEKT funktioniert, egal in welchem Browser ich es getestet hab

Das "ich" das mit dem z-index verfolgt habe, muss ich leider gestehen ist falsch :rolleyes:

Das war alles im Script so beschrieben, und ich hab bisher noch nichtmal gewusst für was der z-index Befehl ist...

Den befehl werd ich mir bestimmt merken... der is cool^^

Danke nochmal an beide!

EDIT:
Einen kleinen Gedankenfehler hast aber drinnen sokie^^
Wenn ich beim highslide ein z-index von 10004 hab, und dem menü einen höheren gib, dann ist das menü immer ÜBER dem geöffneten Bild xD
Schaut auch etwas blöd aus^^

Gott sei dank, reicht es wenn der z-index vom Menü höher als der von der imageflow Klasse ist, aber kleiner als der vom highslide!

Danke nochmal... funktioniert spitze... Und vor allem danke das du es mir gleich mit den positions angegeben hast, ich komm mit den relative und absoluten positionierungen immer durcheinander^^ Da wars toll das du das für mich übernommen hattest xD

nwa · 29.06.2009

AW: CSS Menü verschwindet....

Hallo,

ich habe genau das selbe Problem, bei mir verschwindet das Menü wenn ich einen der unteren punkte versuche zu erreichen. Das passiert aber nur im Internet Explorer und über bildern und listen, über reinem text nicht.

Hier der Code ...

Code:

body {
    font: normal 100.0% Helvetica, Arial, sans-serif;
    color: #bc0100; background-color: #ffffff;
  }


div#gesamt {
    width:760px;
    height:750px;
    margin:50px auto;
    text-align:left;
    border:dashed 1px #bc0100;

    }
div#header {
    width:760px;
    height:150px;
    margin:0px auto;
    border-bottom:1px solid #bc0100;
    }
div#navigation {
    width:760px;
    height:40px;
    padding:0.8em
    margin 0px auto; 
    border-bottom: 1px dashed #bc0100;
}


* html div#navigation {  /* Korrektur fuer IE 5.x */
    width: 48.7em;
    w\idth: 47.1em;
}

div#navigation div {
     clear: left;
}

ul#Navigation {
    margin: 0; padding: 0;
        text-align: center;
}

ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
}

* html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
}

*:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
}

ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
}

* html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
}

*:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 

*/
    background-color:white; padding-bottom:0.4em;
}

ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern 

einblenden */
}

ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
}

ul#Navigation a, ul#Navigation span {
    display: block;
    width: 4.9em;  /* Breite den in li enthaltenen Elementen 

zuweisen */
    padding: 0.2em 1em;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid black;
    border-left-color: white;
    border-top-color: white;
    color: white;
    background-color: #bc0100;
}

* html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im 

standardkompatiblen Modus */
}

ul#Navigation a:hover, ul#Navigation span,{
    color: #bc0100;
    background-color: #ffffff;
  }


ul#list{
    list-style-type:square;
    
}

a#bilder{

    text-align:center;
}

a{
    color:#bc0100;
}

Wie kann ich erreichen, dass das menu einen höheren "Rang" als Listen bzw. bilder hat?