site gecentreerd

Status
Niet open voor verdere reacties.
willem008

willem008

Gebruiker
Lid geworden
28 sep 2007
Berichten
792
goede dag

Ik ben nu al de hele avond aan het stoeien om een site gecentreerd te krijgen er zit ergens een fout maar ik vindt hem niet.

lijkt mij dat het in de style van de hoofdcontainer zit maar heb alles al gedaan maar hij blijft uit de midden.

ben er net achtergekomen dat het alleen bij internet expl is opera en ff goed

hoe krijg ik hem ook in ie in het midden

html
<html>
<head>
<title></title>

<head>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>


<div id="hoofdcontainer">
<div id="header">

<img id="logo" src="image/banner.jpg" width="958" height="200" alt="welkom op deze website"/>
</div>

<div id="menu"></div>

<div id="content">

<div id="homeknop"><A HREF="start.html"><IMG SRC="image/home.png" WIDTH="123" HEIGHT="24" BORDER="0" ALT="Home"></A></div>

<div id="project"><A HREF="pag2.html"><IMG SRC="image/project.png" WIDTH="123" HEIGHT="24" BORDER="0" ALT="project"></A></div>


<div id="contact"><A HREF="pag3.html"><IMG SRC="image/contact.png" WIDTH="123" HEIGHT="24" BORDER="0" ALT="project"></A></div>


<div class="inhoud2"><div id="inhoud">
<div id="proef">
<b><B>WELCOM</B></b><br><br><B></B><br>
<B></B><br>

<B>Welcome</B><br><br>
<br><br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br><br>
<B><B></B></B>
<br><BR>
</div>
</div>

</div>







</body>
</html>


css

@charset "utf-8";

body{
background-color:#cc0000;
}

#hoofdcontainer{
margin:0 auto;
max-width: 1000px;
background-color: #000;
height: 1010px;
width: 958px;
}




#header {
height: 200px;
width: 958px;
text-align:center;
color: #fff;
background-repeat: no-repeat;
background-color: #000;
position: relative
}


#homeknop{
width: 125px;
height:25px;
position:absolute;
background-color:#ccc;
margin: 0px 0 0 200px
}


#project{
width: 125px;
height:25px;
position:absolute;
background-color:#ccc;
margin: 0px 0 0 350px
}

#contact{
width: 125px;
height:25px;
position:absolute;
background-color:#ccc;
margin: 0px 0 0 500px
}



#menu {
background-color: #dcdcdc;
height: 800px;
float:left;
width:135px;
border: solid thin #000;
font-family: Arial, Helvetica, sans-serif;
line-height: 30px;
font-size: 17px;
}







ul.navbar {

background:#99cc99;

padding: 0;

height: 450px;

width: 130px;

list-style-type: none;

margin-left: 3px;

margin-top:70px

}

li:hover {background-color: #000; color:#000; text-decoration:none;

}

a:link {color:#fff; text-decoration:none;

}

a:visited {color:#fff; text-decoration:none;

}

a:hover {color:#fff; text-decoration:none;

}

a:active {color:#fff; text-decoration:none;

}

#content {
float:left;
position:relative;
height: 800px;
width: 812px;
background-color: #dcdcdc;
color:#99ccff;
font-family: Arial, Helvetica, sans-serif;
}

#info{
width: 753px;
height:700px;
position:absolute;
background-color:#000;
border: solid thin #000;
color:#000;
font-size: 14px;
padding: 40px 0 0 40px;
margin: 40px 0 0 0px;
z-index:2;
}



#inhoud {
Width: 666px;
Height: 100%;
padding: 0px;
padding-left: 0px;
margin: 0px; background-image: url(image/inhoud.jpg);
background-repeat: no-repeat; background-position: top;
}

#proef{
margin-left:40px;
margin-right:40px;
padding-top: 20px; font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #3f3f3f;
text-decoration: none;
}

.inhoud2 {
Width: 666px;
Height: 100%;
background-image: url(image/inhoud2.jpg);
background-repeat: repeat-y;
}
 
Laatst bewerkt:
probeer eens een simpele <center> voor de eerste div en een </center> achter de laatste /div
 
<center> moet je zeker niet doen!

margin: 0 auto; is goed
 
Laatst bewerkt:
Heb ik wel geprobeerd maar dat is het niet als ik center voor de div van de hoofdcontainer zet en achter de sluit div van en hoofdcontainer wordt hij wel gecentreerd, maar bijv te tekst in de div's er tussen wordt ook gecentreerd.

er moet ergens ander een fout zitten
 
Het ligt ook aan de browser die je gebruikt. Door een text-align: center; op de body te zetten ondersteunde je ook IE-browsers. Samen met margin: 0 auto 0; op de 'hoofdcontainer' zou het moeten werken. Met een text-align: left; op de 'hoofdcontainer' centreer je alles weer links.
 
nee ik ben er eindelijk achter ,eigelijk een beetje stom maar dat sluip er wel eens in.


Het probleem zat het in dat in geen doc type opgegeven had ,zonder doc type geeft IE expl hem niet gecentreerd weer, opera en fire fox wel.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan