Hoi,

Ik heb op linkje een menu bovenaan de site. Nu is dit menu niet in elke browser zichtbaar. Hoe komt dit?

Screenshots: http://browsershots.org/http://www.contractenbeheer.nl/demo/

CSS:
#nav {
	background:url(../images/nav.png) repeat-x;
	width:800px;
	height:26px;
	padding-top:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;	
	
}
#nav_left {
	padding-left:10px;
	float:left;
	width:590px;
}
#nav_left a {
	color:#fff;
	font-size:12px;
	font-weight:bold;
}
#nav_right {
	width:200px;
	float:left;
}
	#nav ul {
		padding:0px;
		margin:0px;
		list-style-type: none;
		text-decoration:none;
	}
	#nav li {
		text-decoration:none;
		float:left;
		font-weight:bold;
		margin-left:5px;
		margin-right:5px;	
		font-size:12px;					
	}
	#nav li a {
		color:#fff;	
		text-decoration:none;		
		font-weight:bold;
	}
	
	#nav li a:hover {
		background:url(../images/hover.png) no-repeat;
		color:#3c76d6;
		position:relative;
	}
Gebruik nu dit, maar tevergeefs.. :(

#nav {
	background:url(../images/nav.png) repeat-x;
	width:800px;
	height:26px;
	padding-top:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;	
	display:block;
}
#nav_left {
	padding-left:10px;
	float:left;
	height:26px;	
	width:590px;
}
#nav_left a {
	color:#fff;
	font-size:12px;
	font-weight:bold;
}
#nav_right {
	height:26px;
	width:200px;
	float:right;
}
	#nav ul {
		padding:0px;
		margin:0px;
		list-style-type: none;
		text-decoration:none;
	}
	#nav li {
		text-decoration:none;
		float:left;
		font-weight:bold;
		margin-left:5px;
		margin-right:5px;	
		font-size:12px;					
	}
	#nav li a {
		color:#fff;	
		text-decoration:none;		
		font-weight:bold;
	}
	
	#nav li a:hover {
		background:url(../images/hover.png) no-repeat;
		color:#3c76d6;
		position:relative;
	}
Zoals ik al eerder heb gezegd, het ligt niet aan je menu, maar aan de container van je site.
Mmm.. Dus het ligt aan position absolute. Hoe kan ik op een andere manier verticaal centreren? Ik kan geen andere manier vinden. Voor horizontaal centreren kan ik altijd nog margin:0 auto gebruikern.
iemand die weet waar het probleem zit?

EN BELANGRIJKER: hoe kan ik dit oplossen?
Ik speel ook constant met CSS totdat ik het goed vind :)

#Container {
top: 100%

}

dan zie ik je menu wel weer.

denk dat je daar wat verkeerd hebt gedaan.
Plaats een container om je container en werk met min width en max width? Dat zorgt er voor dat je div niet uit beeld kan verdwijnen, denk ik zo.

Als dat niet werkt moet je even googlen, heb pas geleden nog een css oplossing gezien die werkte, heb momenteel geen tijd om het te zoeken voor je though..
Jey schreef op 02.09.2009 07:43
Ik speel ook constant met CSS totdat ik het goed vind :)

#Container {
top: 100%

}

dan zie ik je menu wel weer.

denk dat je daar wat verkeerd hebt gedaan.


Dit snap ik niet. Moet ik het zo?

#container {
position: absolute;
left: 50%;
top: 100%;
margin-left: -400px; /* half of width */
margin-top: -350px; /* half of height */
width:800px;
height:700px;
border:1px solid #ededed;
}
Ik heb me er even verder in verdiept.

Je hebt zo en zo 1 fout in je css zitten, je container heeft een border, maar die trek je niet van margin af. Haal dus die border weg en maak een 2de container div.

Verder heb ik de volgende link gevonden, waarschijnlijk zal dit je probleem wel verhelpen. Zo niet, dan weet ik het momenteel ook niet meer..

Reageren