[css] gezeur met floats - Softwareontwikkeling

woensdag 14 september 2005 15:44

Acties:

Verwijderd

Topicstarter

Ik wil iets heel simpels maar ik krijg het niet voor elkaar.
Ik wil een pagina met daarin gecentreerd (horizontaal) de inhoud van de pagina.
Dat lukt ...

Nu moet er links bovenin de inhoud dus een logo komen en rechts naast het logo een balk.
Die balk krijg ik echter met geen mogelijkheid ernaast.

Als ik floats gebruik dan plaatst de browser dus de balk BUITEN de pagina ...
Iemand enig idee?

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" />
<title><?=$_SERVER['HTTP_HOST'];?></title>
<style media="all" type="text/css">
/* CSS Document */
body,html{
    padding: 0px;
    margin: 0px;
    width: 100%;
}
body{
    background-color: #BFBFC1;
}
body,p,pre,textarea,input,select,div{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #373837;
}
.geenOpmaak{
    border: 0px none;
    margin: 0px;
    padding: 0px;
}

/* Basis structuur */
#divContainer{
    position: static;
    text-align: center;
}
#mainContainer{
    position: relative;
    width: 953px;
    margin-left: auto;
    margin-right: auto;
    border:1px solid #636363;
    background-color: #ffffff;
    text-align: left;
}
#logoContainer{
    width: 200px;
    height: 126px;
}
#menuContainer{
    width: 753px;
    height: 100px;
    background-color:#3399CC;
}
</style>
</head>

<body>
<div id="divContainer">
    <div id="mainContainer">
        <div id="logoContainer"><a href="/website/index.php">[img]"/website/img/logo.gif"[/img]</a></div>
        <div id="menuContainer">haaai</div>
    </div>  
</div>
</body>
</html>

woensdag 14 september 2005 15:47

Acties:

Verwijderd

"display:inline" bij die 2 laatste div's?

woensdag 14 september 2005 15:51

Acties:

Verwijderd

Topicstarter

Nee werkt ook niet.

Het logo zet ie wel netjes op zn plek.
Maar zodra je bij de logo- of menucontainer een float:left zet, gooi ie m BUITEN de mainContainer.
Terwijl ze juist ten opzicht van de mainContainer gepositioneerd moeten worden.

woensdag 14 september 2005 15:52

Acties:

disjfa

be

Bedoel je gewoon een

HTML:

1	<br style="clear:both" />

na de menucontainer div

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 14 september 2005 15:53

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op woensdag 14 september 2005 @ 15:51:
Nee werkt ook niet.

Het logo zet ie wel netjes op zn plek.
Maar zodra je bij de logo- of menucontainer een float:left zet, gooi ie m BUITEN de mainContainer.
Terwijl ze juist ten opzicht van de mainContainer gepositioneerd moeten worden.

Niet helemaal; je haalt ze wel uit de flow, maar ze vallen nog wel binnen je mainContainer. Geef je mainContainer een vorm van overflow (auto of hidden), of zet na je menuContainer een element met het clear attribuut.

Intentionally left blank

woensdag 14 september 2005 15:55

Acties: