pagina met div's

Door Maurice B op 23-10-2006 19:22

1.880 views

ik ben bezig met mijn layout van mijn site maar de pagina wordt in IE en FF fout weergegeven.
is er iemand die weet hoe ik dit kan oplossen?

css:


body
{
	background-color: #F3F3F3;
    font-family: verdana, sans-serif;
    font-size: 11px;
	margin-top: 0px;
	margin-bottom: 5px;
}
a:link, a:visited{
	color: #FFFFFF;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}

#page{
	background-color: #F7F7F9;
	border: 1px solid #002851;
	margin: 0px auto;
	width: 700px;
}
#header{
	background-image: url(header.gif);
	height: 110px;
	width: 700px;
}
#headermenu{
	color: #FFFFFF;
	float: right;
	margin-top: 1px;
	width: 400px;
}
#content{
	margin-top: 0px;
	width: 100%;
}
#menu{
	border-top: 1px solid #59A929;
	border-right: 1px solid #59A929;
	border-bottom: 1px solid #59A929;
	float: left;
	margin-top: 20px;
	width: 150px;
}
#menutop{
	background-color: #3c7796;
	border-bottom: 1px solid #59A929;
	color: #FFFFFF;
	font-weight: bold;	
}
#tekst{
	border: 1px solid black;
	margin-bottom: 10px;
	margin-left: 175px;
	margin-right: 25px;
	margin-top: 20px;
	width: 500px;
}

en de html:


<!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" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="page">
		<div id="header">
			<div id="headermenu">
				<a href="#">globallink</a> | <a href="#">globallink</a> | <a href="#">globallink</a> | <a href="#">globallink</a> | <a href="#">globallink</a>			</div>
		</div>
		<div id="content">
			<div id="menu">
				<div id="menutop">&nbsp;menu</div>
				&nbsp;- menu<br />
				&nbsp;- menu<br />
				&nbsp;- menu<br />
				&nbsp;- menu<br />
				&nbsp;- menu<br />
			</div>
			<div id="tekst">
				hoi<br />aa<br />aa			</div>
		</div>
	</div>
</body>
</html>

Kalle P

24-10-2006 18:35

Misschien eens wat doen met wat hier gepost is? Float...

Maurice B

24-10-2006 18:38

heb ik geprobeerd, maar dan staat ook alles fout

Bo az

24-10-2006 18:41

Ik weet niet zeker of dit hier ook een oplossing is.

Maar waarschijnlijk moet je de 'content' div een padding-left geven met de breedte (of iets meer dan) die van je menu.

En moet je het menu een margin-right geven die die min de breedte van het menu is. Zodat het menu als het ware niet 'bestaat'.

Kalle P

24-10-2006 18:57

Dat eerste is al gedaan Boaz, dat 2e is niet nodig.
In ie wordt het wel naast elkaar weergegeven, in ff zou je nog een negatieve margin-top kunnen meegeven aan het menu.

Zo:

margin-top: -10px !important;

Bo az

24-10-2006 19:05

Als ik bij #tekst de width weghaal, werkt het wel, misschien een foutje gemaakt bij het berekenen van de width ?

Anyway, volgens mij hoef je helemaal geen width op te geven...

Tip: geef de backgound van de elementen waar je mee knoeit even een opvallende kleur dan werkt het makkelijk tijdens het testen ...

Edit:
@Kalle, je hebt gelijk het haalt hier niets uit. Ik ben toevallig met een projectje bezig waar het wel nodig is, dus vandaar dat ik het als suggestie gaf.

Maurice B

24-10-2006 20:29

bedankt :) maar nog ff een vraagje, hoe zorg je ervoor dat als iemand IE gebruikt hij bijv. height gebruikt en bij FF min-height?

Kalle P

24-10-2006 20:34

min-height wordt niet gelezen door IE, dus dan pakt ie de height. Dus opzich is het niet nodig, al lijkt het me wel logisch dat je min-height na height neer zet anders leest ff height over en vergeet ie min-height. Je kan het zo doen.

min-height: 400px;
//height: 400px; /* // wordt allee gelezen door IE `*/

Bo az

24-10-2006 20:34

min-height werkt toch niet in IE ?

Dan doe je dit in je html:

<!--[if IE]>
    <style type="text/css" media="screen">
        #iets{
            height: 500px;
        }
    </style>
<![endif]-->

en in je gewone CSS zet je min-height: 500px;

Dit werkt alleen als IE min-height niet ondersteund...

Edit:
Kalle was me voor met een misschien nog wel nettere oplossing...

Reageren

Inloggen om te reageren