Archief - CSS : Div troubles

Kn0t · 25 jun 2004

Hey,

ik ben voor het eerst afgestapt van table layouts en ben nu bezig met css/div positionering maar kben er serieus mee aan het sukkelen :unsure:

'k zit met 2 problemen:

1. footer: wanneer de content niet het ganse scherm inneemt zou die div moeten rekken tot het einde van de pagina en zou de footer helemaal beneden moeten staan. 'kheb al height:100% geprobeerd voor die content div, maar dan rekt die niet verder uit wanneer er wel voldoende content is.

2. die twee divs bovenaan zouden allebei even hoog moeten zijn (maar wel dynamisch, dus ik kan ze geen vaste hoogte geven). Hier heb ik voorlopig een oplossing voor gevonden met javascript, maar die werkt enkel in internet explorer.

de site: http://www.knot.be/knotdotbe/index.php

de css: http://www.knot.be/knotdotbe/style.css

greetz knot

/edit: en wanneer ik in IE iets van tekst probeer te selecteren, selecteert em alles tot einde vd pagina --> :crazy:

Lashknife · 25 jun 2004

Code:

<style type="text/css">
<!--
div.header {
	position: absolute;
	top: 100px;
	width: 300px;
	border: solid 1px blue;
}
//-->
</style>
</head>

<body>
<div id="headerleft" class="header" style="left: 100px">text<br />text<br />text<br />text<br />text<br />text</div>
<div id="headerright" class="header" style="left: 500px">text<br />text<br />text</div>
<script type="text/javascript">
<!--
/* dit stuk script zet je helemaal onderaan net boven body, zodat heel je page geload is voor dit script begint... merk je toch issues, dan steek je het in een functie en roep je het op via <body onload="zetDeHoogtesJuist()"> */
var leftwidth = document.getElementById("headerleft").offsetHeight;
var rightwidth = document.getElementById("headerright").offsetHeight;
if (leftwidth > rightwidth) {
	document.getElementById("headerright").style.height = leftwidth + "px";
} else if (rightwidth > leftwidth) {
	document.getElementById("headerleft").style.height = rightwidth + "px";
}
//-->
</script>
</body>

int kort: offsetTop, offsetLeft, offsetWidth & offsetHeight zijn handige properties

IE + mozilla werken (voor mij genoeg)

Kn0t · 25 jun 2004

Ah, bedankt.. 'k had een gelijkaardig javascript maar ik was die + 'px' vergeten

Het werkt in IE Firefox en Opera :woohoo:

Nu nog die footer :unsure:

edit: 'k heb die footer nu ook met javascript in orde gekregen, maar kvraag me wel af of der geen betere oplossingen voor zijn? :unsure:

Archief - CSS : Div troubles

Kn0t

Legacy Member

Lashknife

Legacy Member

Kn0t

Legacy Member