[CSS] content breder dan 100% width - Softwareontwikkeling

donderdag 27 maart 2008 14:59

Acties:

Verwijderd

Topicstarter

Goede middag,

Ik loop vast op iets kleins, ofjah, in mijn optiek iets groots maar ik verwacht dat ik wat over het hoofd zie. Wanneer je onderstaand script opslaat als html en het opent zie je netjes wat ik als layout bedoel, wat ik wil dat meescaled scaled daadwerkelijk mee maar er is een ding. klik hier voor voorbeeld

Als je het window van IE of FF nou eens kleiner maakt als 900px breed en dan met de scrollbalk van links naar rechts beweegt zie je wat ik bedoel. het lijkt alsof de div inderdaad de breedte aanneemt van het window. maar raargenoeg niet verder meescrolt met de content van de pagina. klik hier voor voorbeeld

Is er iets mogelijk dat deze divs doorlopen met de content mee? Moet ik met absolute waardes gaan werken? ( wat voor mij niet het gewenste resultaat levert ).

HTML:

<!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=utf-8" />
<title>testos teron</title>
<style>
body {
    margin: 0;
    padding: 0;
    background-color: #ECECEC;
    height: 100%;
    width: 100%;
    }

    #container {
    position: absolute; 
    top: 20%;
    left: 0;
    right: 0;
    text-align: left;
    margin: 0;
    height: auto;
}

    #wrap {
    background-color: #e4e6ee;
    border-top: 1px black solid;
    border-bottom: 1px black solid;
}
    
#content    {
    width: 900px;
    height: 450px;
    border: 1px red solid;
    margin: 0 auto;
    padding: 0;
}
</style>
</head>

<body>
<div id="container">
<div id="wrap">
<div id="content">

</div><!--End of #content -->
</div><!--end of #wrap-->
</div><!--end of #container-->
</body>
</html>

p.s. ik heb gezocht op google als op GOT, kon hier weinig tot niets in detail op vinden.

[ Voor 5% gewijzigd door Verwijderd op 27-03-2008 16:06 . Reden: screenshots bijgevoegd code aangepast ]

donderdag 27 maart 2008 15:29

Acties:

Sp3ci3s8472

@ 12 graden...

Geef de divs even elk hun eigen kleurtje en leg dan nog even uit wat je precies wilt. Dit is een beetje onduidelijk

Beter nog doe je even 2 screenshotjes zodat mensen die geen zin hebben om je code op te slaan je wellicht toch nog kunnen helpen

[ Voor 36% gewijzigd door Sp3ci3s8472 op 27-03-2008 15:30 ]

donderdag 27 maart 2008 15:47

Acties:

Verwijderd

Topicstarter

Done ;-)

ofja, ik kan het moeilijk duidelijker omschrijven. screenshots zijn toegevoegd en heb een rode border om de daadwerkelijke content div gezet zodat duidelijk is welke div dit is.

pagina is in html HIER te vinden

[ Voor 94% gewijzigd door Verwijderd op 27-03-2008 16:15 ]

donderdag 27 maart 2008 15:55

Acties:

TeeDee

CQB 241

Ik denk dat dit ook wel op te lossen is met faux columns

Heart..pumps blood.Has nothing to do with emotion! Bored

donderdag 27 maart 2008 15:58

Acties:

Sp3ci3s8472

@ 12 graden...

Aha, het lijkt wel een render fout van Gecko... Ik weet hier ook niet zo snel een oplossing voor

donderdag 27 maart 2008 15:59

Acties:

Pendaco

Vogon Poetry FTW!

Pas allereerst even de margins van je #content div aan zodat de pagina in IE6 ook doet was ie moet doen;

code:

#content    {
    width: 900px;
    height: 450px;
    border: 1px red solid;
    margin: 0 auto;
    padding: 0;
}

donderdag 27 maart 2008 16:04

Acties:

Verwijderd

Topicstarter

@ TeeDee:

OK, is een mogelijkheid maar dan zou ik die bg dus ook fixed met een percentage vast zetten, het proberen waard, weizigingen in hoogte van de div zou ik in zon geval ook direct moeten opvangen door een ander plaatje op de bg. Wat lastig is. Maar bedankt voor de tip, misschien dat iemand nog een CSS based oplossing/workaround weet.

@ Pendaco:

done, tnx for the tip, was nog niet met browser compatability bezig ;-) maar zeker tnx.

[ Voor 13% gewijzigd door Verwijderd op 27-03-2008 16:07 ]

donderdag 27 maart 2008 16:26

Acties:

Pendaco

Vogon Poetry FTW!

Heb dat absolute geneuzel er even uitgehaald en je #wrap ID een min-width van 900px (#content width) meegegeven. Die #container is naar mijn idee ook enigzins overbodig but nevermind

Ik heb m trouwens alleen getest in FF2 en IE6, heb hier even niks anders.

HTML:

<!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=utf-8" />
<title>testos teron</title>
<style>
body {
    margin: 0px;
    padding: 0px;
    background-color: #ECECEC;
    }

#container {
    margin-top: 170px;
}

#wrap {
    min-width: 900px;
    background-color: #e4e6ee;
    border-top: 1px black solid;
    border-bottom: 1px black solid;
}
    
#content    {
    width: 900px;
    height: 450px;
    border: 1px red solid;
    margin: 0px auto;
    padding: 0px;
}
</style>
</head>

<body>
<div id="container">
<div id="wrap">
<div id="content">

</div><!--end of #content-->
</div><!--end of #wrap-->
</div><!--end of #container-->
</body>
</html>

donderdag 27 maart 2008 16:37

Acties:

Verwijderd

Topicstarter

@ Pendaco:

$_/-\o_$ jup lijkt 100% te werken, tevens ben ik met je eens dat nu de container weinig nut heeft. Maar daar is een rede voor, er zijn namelijk nog wat divs die ik heb weg gelaten om duidelijk dit voorbeeld te kunnen geven.

Tevens met de absolute waarden werkt het nu. Je less is more strategie heeft gewerkt ;-)

Pendaco tnx once more

Wat mij betreft mag hier een slotje op.

donderdag 27 maart 2008 16:44

Acties:

Pendaco

Vogon Poetry FTW!

np

Jah ik had ook wel het idee dat je die wrapper en container opzet nog ging uitbreiden. Helemaal netjes is deze 'oplossing' natuurlijk niet, en ook vreemd dat IE hier geen problemen mee lijkt te hebben

Sp3ci3s8472 schreef op donderdag 27 maart 2008 @ 15:58:
Aha, het lijkt wel een render fout van Gecko... Ik weet hier ook niet zo snel een oplossing voor

Lijkt er idd wel op, de background van de wrapper stopt precies aan de rechterkant van het browserscherm (waar ie begint met scrollen).

vrijdag 28 maart 2008 08:19

Acties:

Verwijderd

Topicstarter

Nee helemaal netjes is het inderdaad niet, maar toch lijkt het me beter als de vertrouwde tables mannier.

Scheelt een bult aan code en heeft het zelfde optische effect.