3 kolommen met centrale fixed width

Status
Niet open voor verdere reacties.
D

djemmers

Gebruiker
Lid geworden
7 jul 2006
Berichten
129
Hallo,

Ik probeer een header met 3 kolommen te maken .
1 2 en 3
2 heeft een vaste breedte (neem 300) en staat exact gecentreerd in het midden.
en 1 en 2 moeten dan elk de helft krijgen van de overige breedte (100%-300px)

heb het met table en met div geprobeerd maar het lukt me niet, bij de table staat 2 niet in het midden. en bij div's kan ik enkel 1 en 3 vaste breedte geven en 2 variabel

Kan iemand me helpen?
 
Zoiets?
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
		body {margin: 0; padding: 0;}
		div#links {position: absolute; right: 50%; left: 0; height: 200px; margin-right: 150px; background: red;}
		div#rechts {position: absolute; right: 0; left: 50%; height: 200px; margin-left: 150px; background: blue;}
		div#midden {position: absolute; left: 50%; margin-left: -150px; width: 300px; height: 200px; background: green;}
	</style>
	<!--[if IE 6]>
		<style type="text/css">
			div#rechts {margin: 0 -150px 0 auto; padding-left: 150px;}
			div#links {padding-right: 150px;}
		</style>
	<![endif]-->
</head>
<body>
	<div id="links">een twee drie vier vijf zes zeven acht negen tien een twee drie vier vijf zes zeven acht negen tien een twee drie vier vijf zes zeven acht negen tien een twee drie vier vijf zes zeven acht negen tien een twee drie vier vijf zes zeven acht negen tien een twee drie vier vijf zes zeven acht negen tien een twee drie vier vijf zes zeven acht negen tien een twee drie vier vijf zes zeven acht negen tien</div>
	<div id="rechts">een twee drie vier vijf zes zeven acht negen tien een twee drie vier vijf zes zeven acht negen tien een twee drie vier vijf zes zeven acht negen tien een twee drie vier vijf zes zeven acht negen tien een twee drie vier vijf zes zeven acht negen tien een twee drie vier vijf zes zeven acht negen tien een twee drie vier vijf zes zeven acht negen tien een twee drie vier vijf zes zeven acht negen tien</div>
	<div id="midden"></div>
</body>
</html>
Ik heb 't niet heel uitgebreid getest, maar dit lijkt te werken in IE 6, 7 en 8, Firefox, Google Chrome, Safari en Opera.
Vraag me niet hoe 't kan dat dit werkt in IE 6, want daar gebeuren weer dingen waar Alice in Wonderland niets bij is. Waarschijnlijk weer 'n dol feest van losgeslagen anarchistische bugs die elkaar neutraliseren of zo.
 
volgende stap is ervoor zorgen dat er een min-width is
maar dat werkt niet helemaal correct, waarschijnlijk door die % in mijn div's
wat ik nu heb:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        body {margin: 0; padding-top: 5px;}
		div#container {min-width:800px;}

        div#links {position: absolute; right: 50%; left: 0; height: 150px; margin-right: 200px;padding-right:5px;padding-left:5px;overflow:hidden;}
        div#rechts {position: absolute; right: 0; left: 50%; height: 150px; margin-left: 200px;padding-right:5px;padding-left:5px;overflow:hidden;}
        div#midden {position: absolute; left: 50%; margin-left: -200px; width: 400px; height: 150px; background: green;}
		div#menu{position:relative;top:150px;height:30px;background:black;}
		div#content{position:relative;top:150px;background:yellow;}
    
	</style>
    <!--[if IE 6]>
        <style type="text/css">
            div#rechts {margin: 0 -200px 0 auto; padding-left: 200px;}
            div#links {padding-right: 200px;}
        </style>
    <![endif]-->
</head>
<body>
<div id="container">
    <div id="links">parent child - <a href="">parent</a> - <a href="">parent</a> - <a href="">parent</a> - <a href="">parent</a> - <a href="">parent</a> - <a href="">parent</a> - <a href="">parent</a> - <a href="">parent</a> - <a href="">parent</a> - <a href="">parent</a> - <a href="">parent</a> - <a href="">parent</a> - <a href="">parent</a> - <a href="">parent</a> - <a href="">parent</a> - <a href="">parent</a></div>
    <div id="rechts">sub categories - <a href="">child</a> - <a href="">child</a> - <a href="">child</a> - <a href="">child</a> - <a href="">child</a> - <a href="">child</a> - <a href="">child</a> - <a href="">child</a> - <a href="">child</a> - <a href="">child</a> - <a href="">child</a> - <a href="">child</a> - <a href="">child</a> - <a href="">child</a> - <a href="">child</a> - <a href="">child</a></div>
    <div id="midden"></div>
	<div id="menu"></div>
	<div id="content">boe</div>
</div>
</body>
</html>

als het window kleiner dan 800 wordt komt er een scrolbalk achteraan maar de div's worden alsmaar kleiner ipv dezelfde grootte te blijven (200 400 200 bij 800 breed)

Enige suggesties?
 
Ik wil eerst even kwijt dat ik diep onder de indruk ben van je content :D
De absoluut gepositioneerde divs staan gepositioneerd ten opzichte van de eerste ouder die zelf 'n fixed, absolute of relative position heeft. Die is hier niet, en dan staan ze gepositioneerd ten opzichte van de body/venster van de browser.
Ze trekken zich dus niets aan van de min-width bij div#container, maar blijven uitgaan van de breedte van het venster.
Als je aan div#container in de css toevoegt {position: relative;} worden ze gepositioneerd ten opzichte van div#container, want dat is nu de eerste ouder met 'n position. Vanaf nu luisteren de divs braaf naar de breedte van hun ouder div#container, want anders dan echte kinderen zijn deze kinderen voortdurend weerzinwekkend gehoorzaam en braaf.
 
Laatst bewerkt:
bedankt, heb inderdaad lang gezwoegd over mijn content ;-)

werkt nu zoals ik wou.

Bedankt
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan