Divs schalen niet correct.

[Dekaasboer]

Beste tweakers,

Ik ben momenteel een website aan het bouwen, maar ik loop ergens een beetje op vast.

Ik heb voor mijn website deze methode gebruikt om de pagina zowel horizontaal alswel verticaal te centreren. Ik heb dit script al vaker gebruikt en het werkt tot nog toe prima.

Nu moet ik een website bouwen die iets breder is als normaal (1003 pixels) en daarnaast mag ik alleen divs gebruiken om content op zijn plek te zetten aangezien het allemaal in een cms komt.

Nu heb ik het probleem dat de div van het textvak ( #alfa_start_tekstvak1 ) beinvloed wordt door de breedte van de container div.

Om het tekstvak op de juiste breedte te krijgen moet ik de container div een breedte geven van 1003 pixels (is nu 17 em) of geen breedte opgeven. Maar dan krijg ik een enorme scrollbalk naar rechts van 2x de breedte van de website. Zodra ik boven de 400px kom krijg ik al balken . (1280x1024 reso) op kleinere beeldschermen gebeurd het nog eerder.

Het gekke is dat alle andere divs op de pagina gewoon netjes op hun plek staan en zich niks aantrekken van de breedte van de container div

Als iemand mij kan uitleggen wat ik verkeerd doe zou ik zeer dankbaar zijn.

Het style sheet.

code:

body 
{
background-image: url(afbeeldingen/background1.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:center;
padding:0;
text-align:center;margin:0 auto;
text-align:center; /* horizontale IE fix */
}

html, body {height:100%;}


    #distance { 
        width:1px;
        height:50%;
        margin-bottom:-375px; /* de helft vande container hoogte */
        float:left;
        }

    #container {
        margin:0 auto;
        position:relative; /* zet container voor distance */
        text-align:left;
        height:750px;
        width:1003px;
        clear:left;
        }
        
    #container div {
        font-size:100%;
        float:right;
        width:17em;
        margin-left:0px;
        }




#alfa_start_header 
{
position: absolute; 
width: 1003px; 
height: 116px; 
z-index: 1; 
left: 0px; 
top: 0px;
}

#alfa_start_opdrachtgevers 
{
position: absolute; 
width: 220px; 
height: 358px; 
z-index: 1; 
left: 145px; 
top: 150px;
}

#alfa_start_bezorgers 
{
position: absolute; 
width: 220px; 
height: 358px; 
z-index: 1; 
left: 389px; 
top: 150px;
}

#alfa_start_ontvangers 
{
position: absolute; 
width: 220px; 
height: 358px; 
z-index: 1; 
left: 630px; 
top: 150px;
}

#alfa_start_tekstvak1
{
position: absolute; 
width:698px; 
height: 121px; 
z-index: 3; 
left: 145px; 
top: 540px;
background-image: url(afbeeldingen/Alfa_Start_Tekstvak1.gif);
background-repeat:no-repeat;
}

#alfa_start_footer
{
position: absolute;
width: 100%; 
height: 10px; 
z-index: 1; 
left: 725px; 
top: 700px;
}

#alfa_opdrachtgevers_zoek
{
position: absolute;
width: 219;
height: 28;
z-index: 2;
left: 780px;
top: 10px;
}

#alfa_opdrachtgevers_tekstvak1
{
position: absolute;
width: 786px;
height: 257px;
z-index: 5;
left: 205px;
top: 125px;
background-image: url(afbeeldingen/alfa_opdrachtgevers_tekstvak1.gif); 
background-repeat:no-repeat;
}


#alfa_menu
{
position: absolute; 
width: 160px; 
height: 222px; 
z-index: 4; 
left: -20px; 
top: 125px;
}

ul.alfamenu
{
padding: 0x;
font-family:verdana;
color:#ffffff ; font-family: lucida sans unicode;  text-decoration:none; font-size:12px;
list-style-type: none; 
text-align: center;
}


li.alfamenu
{
background-image: url(afbeeldingen/alfa_menu_state1.gif);
background-repeat: no-repeat; 
list-style-type: none; 
height: 30px; 
width: 160px;
}

li.alfamenu:hover
{
background-image: url(afbeeldingen/alfa_menu_state2.gif);
background-repeat: no-repeat; 
list-style-type: none; 
height: 30px; 
width: 160px;
}

a.alfamenu:link
{font-size:12px; color:#ffffff; font-family: verdana;  text-decoration:none;} 
a.alfamenu:visited
{font-size:12px; color:#ffffff; font-family: verdana;  text-decoration:none;} 
a.alfamenu:active
{font-size:12px; color:#ffffff; font-family: verdana;  text-decoration:none}
a.alfamenu:hover
{font-size:12px; color:#ccccff; font-family: verdana;  text-decoration:none}



        
        
a:link
{color:#003366 ; font-family: lucida sans unicode; text-decoration:none;} 
a:visited
{color:#003366 ; font-family: lucida sans unicode;  text-decoration:none;} 
a:active
{color:#003366 ; font-family: lucida sans unicode;  text-decoration:none}
a:hover
{color:#003366 ; font-family: lucida sans unicode;  text-decoration:underline}

.alfa_intro_tekst
{font-size:10px; color:#333399; font-family: verdana;  text-decoration:none; text-align: left;}

.alfa_footer
{
font-size:12px; color:#333399; font-family: verdana;  text-decoration:none;
}

a.alfa_footerlink:link
{font-size:12px; color:#333399; font-family: verdana;  text-decoration:none;} 
a.alfa_footerlink:visited
{font-size:12px; color:#333399; font-family: verdana;  text-decoration:none;} 
a.alfa_footerlink:active
{font-size:12px; color:#333399; font-family: verdana;  text-decoration:none}
a.alfa_footerlink:hover
{font-size:12px; color:#333399; font-family: verdana;  text-decoration:underline}


a.menu2:link
{font-size:12px; color:#ffffff; font-family: verdana;  text-decoration:none;} 
a.menu2:visited
{font-size:12px; color:#ffffff; font-family: verdana;  text-decoration:none;} 
a.menu2:active
{font-size:12px; color:#ffffff; font-family: verdana;  text-decoration:none}
a.menu2:hover
{font-size:12px; color:#000000; font-family: verdana;  text-decoration:none; background-color: #ffffff; padding: 5px 0px}

a.menu2A:link
{font-size:12px; color:#ffffff; font-family: verdana;  text-decoration:none;background-color: #ffffff; padding: 5px 0px} 
a.menu2A:visited
{font-size:12px; color:#000000; font-family: verdana;  text-decoration:none; background-color: #ffffff; padding: 5px 0px} 
a.menu2A:active
{font-size:12px; color:#ffffff; font-family: verdana;  text-decoration:none; background-color: #ffffff; padding: 5px 0px}
a.menu2A:hover
{font-size:12px; color:#000000; font-family: verdana;  text-decoration:none; background-color: #ffffff; padding: 5px 0px}


Table {border-spacing: 0px}

.middentitel
{padding: 4px; border-spacing: 0px; background:#003366;}

.midden
{padding: 10px; border-spacing: 5px; }

.imgborder
{border: 1px solid;
border-color:#006633;}

.imgborder2:hover
{border: 1px solid;
border-color:#000000;}
.imgborder2
{border: 1px solid;
border-color:#ffffff;}

table.formulier
{font-size:11px; color:#000000; font-family: verdana;  text-decoration:none}

.normtekst {text-align: justify; color:#003366; font-family: lucida sans unicode; }

De probleem pagina:

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" xml:lang="ned" lang="ned">
<head>
<link type="text/css" rel="stylesheet" href="stylesheets/style.css" />

<title>alfa Distributie</title>
<link rel="shortcut icon" href="img/favicon.ico" />
</head>

<body >

<!-- tabel menu -->
<div id="distance"></div>
    <div id="container">
<div id="alfa_start_header"><img src="afbeeldingen/alfa_header.gif" alt="alfa Header" title="alfa header" usemap="#headerlink" border="0">
<map name="headerlink">
<area shape="rect" coords="80,0,525,117" href="index.html" alt="Home" /></map></div>
<div id="alfa_start_opdrachtgevers"><a href="opdrachtgevers.html"><img src="afbeeldingen/alfa_start_opdrachtgevers.gif" alt="Voor de opdrachtgevers" title="Voor de opdrachtgevers" border="0"/></a></div>
<div id="alfa_start_bezorgers"><a href="bezorgers.html"><img src="afbeeldingen/alfa_start_bezorgers.gif" alt="Voor bezorgers" title="Voor bezorgers" border="0" /></a></div>
<div id="alfa_start_ontvangers"><a href="ontvangers.html"><img src="afbeeldingen/alfa_start_ontvangers.gif" alt="Voor ontvangers" title="Voor ontvangers" border="0" /></a></div>
<div id="alfa_start_tekstvak1"><p class="alfa_intro_tekst">
Alfa Verspreidingen Midden Zuid-Holland is een regionale huis-aan-huis verspreider van ongeadresseerd reclamedrukwerk. Wij zijn lid van Alfa Groep Nederland, een landelijk dekkend netwerk van 30 regionale verspreiders. In deze unieke combinatie kunnen wij met onze kennis van de lokale, regionale en landelijke markt verspreidingsopdrachten uiterst effectief en efficiënt uitvoeren.

Maak een keuze uit één van de bovenstaande opties: bent u opdrachtgever, bezorger of ontvanger?
</p>
</div>
<div id="alfa_start_footer"><span class="alfa_footer">Alfa&nbsp;verspreidingen&nbsp;Mzh&nbsp;2008©&nbsp;|&nbsp;</span><a href="disclaimer.html" class="alfa_footerlink">Disclaimer</a></div>
</div>
</body>

</html>

Sorry voor het scrollen En ik zal de pagina even in een test omgeving zetten.

[Rekcor]

Bij mij ziet hij er goed uit in IE6 en FF3...

[Dekaasboer]

Alleen dat witte teksvak onder dat moet 700 pixels breed zijn. Hij is nu slechts iets van 300

Op deze pagina (andere site) werkt het allemaal prima

http://www.brasserieachterom.nl/

[Currahee]

Zover ik kan zien centreer je de container div horizontaal door aan de body text-align:center;margin:0 auto; text-align:center; /* horizontale IE fix */ mee te geven. Ik weet niet of het je probleem gaat oplossen maar als je die code nu eens verwijderd uit de body, want volgens mij is dat nutteloze css waardoor browsers in de war kunnen raken. De container wordt immers al gecentreerd door de margin 0 auto; die wordt meegegeven.

Edit: kun je niet beter overal de display absolute afhalen en binnen de container div een verticale vierdeling maken (header, de drie images, het tekstvak en de footer). Vervolgens kun je in die vierdeling de divs door middel van margins makkelijker positioneren. Ik kan niet precies bepalen waar het probleem ligt maar denk dat het toch te maken heeft met het absoluut positioneren.

[ Voor 31% gewijzigd door Currahee op 23-06-2008 12:34 ]

[Dekaasboer]

Ik heb idd even die onnodige css dingen verwijdert, daarnaast heb ik even een pagina aangemaakt waar je kunt zien hoe het er uit hoort te zien. Hier zie je alleen dat de pagina ontzettend breed is met niks er in

Het probleem met niet absoluut werken is dat dit bestemd is voor een cms. De divs zelf worden aanpasbare vakken die met een WYIZIWIG editor aangepast kunnen worden.

[ Voor 24% gewijzigd door Dekaasboer op 23-06-2008 12:37 ]

[Currahee]

Dekaasboer schreef op maandag 23 juni 2008 @ 12:33:
Ik heb idd even die onnodige css dingen verwijdert, daarnaast heb ik even een pagina aangemaakt waar je kunt zien hoe het er uit hoort te zien. Hier zie je alleen dat de pagina ontzettend breed is met niks er in

Rond alle divs al een keer in verschillende kleuren een border meegegeven? Dan kun je bepalen welke div zo breed wordt dat hij de pagina laat scrollen.

[Dekaasboer]

Het is de div container. Ik gebruik trouwens de firefox web developer plugin. Daamee kan je makkelijk elementen highlighten.

[Currahee]

Het probleem ligt dus volgens dat plaatje bij de #alfa_start_footer. Als ik die terugzet tot 275px in plaats van 100% is bij mij in Firefox 3 het probleem opgelost met de scroll (tenminste bij deze link)

[Dekaasboer]

Currahee schreef op maandag 23 juni 2008 @ 12:53:
Het probleem ligt dus volgens dat plaatje bij de #alfa_start_footer. Als ik die terugzet tot 275px in plaats van 100% is bij mij in Firefox 3 het probleem opgelost met de scroll (tenminste bij deze link)

Jij bent vanaf nu mijn held hier heb ik potverdorie al 2 dagen overheen gekeken