[HTML/DIV/CSS] Probleem positioneren

[Jorik90]

Hallo,

Ik heb een vrij irritant probleem met DIV's en CSS. Ik heb een website gemaakt die is opgebouwt uit een aantal DIV's. Het gaat goed zolang alles direct op je scherm past, en je het scherm niet kleiner maakt. Zodra er een scrollbar nodig is, gaat het fout. De achtergrond loopt dan niet verder door, en de copyright gaat ergens midden in de tekst staan. In Firefox is het grootste probleem opgelost als ik de #content-left -right -middle weghaal, maar dan is mijn hele structuur verdwenen. In IE 7 blijft het probleem dan nog gewoon.
Een screenshot die het probleem aangeeft als er een srolbar komt (genomen in Firefox):

Tot waar de witte achtergrond loopt zat het einde van het zichtbare venster, het grijze stuk zat verder naar onder, waarvoor je dus de scrollbar nodig bent.

De website is te vinden op http://demo.vermoeidheid.nu .

Het stuk van de stylesheet waarvan ik denk dat het fout gaat (de #footer vertrouw ik ook niet helemaal, vandaar die er ook even bij):

code:

#content-left {
    float: left;
    position: absolute;
    width: 144px;
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
}
#content-middle {
    width: 462px;
    float: left;
    position: absolute;
    margin: 2px 2px 2px 152px;
    padding: 2px 2px 2px 2px;
}
#content-right {
    position: absolute;
    width: 147px;
    font-size: 9px;
    margin: 2px 2px 2px 623px;
    padding: 2px 2px 2px 0px;
}
#footer {
    width: 770px;
    height: 25px;
    margin: -25px auto 0 auto;
    text-align: center;
    color: #000000;
    font-size: 9px;
}

De volledige stylesheet is te vinden op: http://demo.vermoeidheid.nu/files/style.css

Ik hoop dat jullie het probleem kunnen vinden. Ik heb al verschillende voorbeelden op het internet geprobeerd, maar iedere keer blijft er iets dwarszitten.

Alvast bedankt!

[Verwijderd]

Position:absolute werkt niet samen met floats.

Zet eens een <div id="clear"></div> boven je footer in je HTML en gebruik overal in je CSS position:relative in combinatie met float. Dan kun je je marges gelijk weghalen en padding gebruiken.

code:

#clear{
    height:25px;
    width:1%;
    margin:0;
    padding:0;
    clear:both;
}

Position:relative zorgt er altijd voor dat elementen niet door elkaar gaan lopen.

je nieuwe css code:

code:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
* html .main {
    height: 100%;
}
body {
    background: #a7a7a7 url('../images/layout/bg_shadow.jpg');
    background-repeat: repeat-y;
    background-position: center;
}
body {
    font-family: Verdana, Tahoma, Arial, Sans-Serif;
    font-size: 12px;
    color: #000000;
}
#center {
position:relative;
    text-align: center;
    height: 100%;
}
#main {
position:relative;
    width: 770px;
    margin: 0 auto 0 auto;
    min-height: 100%;   
    text-align: left;
    background: #ffffff url('../images/layout/bg.jpg');
    background-repeat: repeat-y;
    color: #000000;
}
#header {
position:relative;
    background: #ffffff url('../images/layout/header.jpg') no-repeat;
    height: 185px;
    color: #000000;
}
#menu {
    position:relative;
float:left;
    margin-top: 155px;
    margin-left: 10px;
    color: #ffffff;
}
a:link,a:visited,a:active {
    color: #165F9F;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
a.menu:link,a.menu:visited,a.menu:active {
    color: #ffffff;
    text-decoration: none;
}
a.menu:hover {
    text-decoration: underline;
}
#content-left {
    float: left;
    position:relative;
    width: 144px;
    padding: 4px;
}
#content-middle {
    width: 462px;
    float: left;
    position:relative;
    padding: 4px;
}
#content-right {
    position:relative;
    float:left;
    width: 147px;
    font-size: 9px;
    padding: 0px;
}
#footer {
    position:relative;
    float:left;
    width: 100%;
    height: 25px;
    margin: -25px auto 0 auto;
    text-align: center;
    color: #000000;
    font-size: 9px;
}

h1 {
    font-size: 16px;
    color: #165F9F;
    margin-top: 0;
}
h2 {
    font-size: 14px;
    color: #165F9F;
    margin-top: 0;
}

Het achtergrond probleem heb ik nog niet opgelost maar ja. En je moet even de breedtes aanpassen.

[ Voor 172% gewijzigd door Verwijderd op 20-03-2007 15:04 ]

[Jorik90]

Werkt in Firefox bijna, zonder achtergrond. Alleen in IE6 en IE7 blijft het een zootje. Zelf had ik wat anders gevonden:

code:

#content-left {
    float: left;
    width: 144px;
    margin: 2px 2px 2px 2px;
    padding: 2px 2px 2px 2px;
}
#content-middle {
    width: 462px;
    margin: 2px 2px 2px 152px;
    padding: 2px 2px 2px 2px;
}
#content-right {
    float: right;
    width: 147px;
    font-size: 9px;
    margin: 2px 2px 2px 623px;
    padding: 4px 2px 2px 0px;
}

Maar ook dit is niet optimaal. Maar: het werkt volledig in IE6. Of toch niet helemaal, ik krijg het 'Ads door Google' niet naast de rest van de content, het gaat onder de rest zitten. Ik krijg het er ook met geen mogelijkheid weg! Versie zit nu op http://demo.vermoeidheid.nu..

Toch bedankt Shroomy

[ Voor 3% gewijzigd door Jorik90 op 20-03-2007 16:35 ]

[Jenk-Han]

Ik zou zeker de footer in de wrapper/container(door jou 'main' genoemd) opnemen!

Verder ziet het er netjes uit, behalve dat het menu en content-left in <ul> en <li> zou moeten. Is een stuk makkelijker met opmaken.

[Jorik90]

Probleem als ik de footer in de main opneem, is dat deze niet meer onderaan wil gaan staan, maar direct onder de tekst komt te staan. En koppig als ik ben, wil ik deze helemaal onderaan hebben staan.
De ul/li zal ik nog even uitzoeken, maar ik heb eerst te maken met het probleem dat mijn 'google ads' vak niet naast het content vak wil zijn, maar er onder gaat zitten.