Probleem met verticaal uitvullen divs - Softwareontwikkeling

woensdag 23 april 2008 16:17

Acties:

Topicstarter

Ik heb wat problemen met het verticaal uitvullen van de divs in mijn lay-out. Ik zie vast iets simpels over het hoofd, maar ik kom er echt even niet meer uit. Mijn 'outer' div en mijn content divs (primarycontent, secondarycontent) vullen de verticale ruimte die beschikbaar is niet uit.

De relevante inhoud van mn stylesheet is:

Cascading Stylesheet:

*
{
    margin: 0px;
    padding: 0px;
}

html 
{
    overflow-y: scroll;
}

body
{
    font-family: "trebuchet ms", sans-serif;
    font-size: 10pt;
    color: #333;
    line-height: 1.4em;
    background: #1a3882;
    height: 100%;
}

/* Outer */

#outer
{
    position: relative;
    width: 88%;
    min-width: 700px;
    max-width: 1000px;
    min-height: 100%;
    margin: 1% auto;
    background: #f5f5f5;
}

#header
{
    float:left;
    background: transparent url('images/back_header.gif') repeat-x;
    height: 100px;
    width: 100%;
}

#menu
{
    float: left;
    width: 100%;
    background: #1a3882;
    height: 24px;
}

#submenu
{
    float:left;
    width: 100%;
    background: #9baecc;
    height: 24px;
    border-bottom: 1px solid #1a3882;
}

#PrimaryContent
{
    float: left;
    min-height: 100%;
    background: #FFF url('images/rand.gif') top right repeat-y;
    width: 54%;
    margin: 0%;
    padding: 3%;
    text-align: justify;
}

#SecondaryContent
{
    float: right;
    width: 33.6%;
    min-width: 230px;
/*  background: #FFF url('images/back_secondary.gif') repeat-y;   */
    margin: 1.5%;
    padding: 1.5%;
/*  border: 1px solid #1a3882; */
    font-size: 90%;
    line-height: 1.2em;
    text-align: justify;
}

#footer
{
    clear: both;
    padding: 0px;
    margin: 0px;
    background: #9baecc;
    width: 100%;
    text-align: center;
    border-top: 1px solid #1a3882;
    vertical-align: middle;
}

Relevante html-code:

HTML:

<body>
<div id="outer">

<!--      header     -->

    <div id="header">
        FOO
    </div>

    
<!--      menu     -->

    <div id="menu">
        FOO
    </div>
    
    <div id="submenu">
        FOO
    </div>
    

<!--      primary content (linker kolom)     -->

    <div id="PrimaryContent">
             FOO
    </div>

        
<!--      Secondary content (rechter kolom)      -->

    <div id="SecondaryContent">
        FOO
    </div>

    
<!--      Footer      -->
    
    <div id="footer">
        FOO
    </div>
    
</div>
</body>

Zowel in Firefox als IE vult mijn outer div niet de view-space en vullen mijn content divs niet de outer. Iemand een idee???

woensdag 23 april 2008 16:21

Acties:

BtM909

Watch out Guys...

Waarom wil je uitvullen?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 23 april 2008 16:23

Acties:

Da Weef

Topicstarter

Vanwege wat visuele effecten. Ik zal even proberen een test page op te zetten om te laten zien wat ik bedoel...

woensdag 23 april 2008 16:38

Acties:

Da Weef

Topicstarter

Hier kun je ongeveer zien wat er visueel fout gaat...

-link verwijderd-

De Maincontent moet gewoon lekker uitvullen, dat is het belangrijkste. Dat de outer niet helemaal uitvult is niet echt een big issue (misschien is het zelfs wel beter zo)...

[ Voor 56% gewijzigd door Da Weef op 23-04-2008 21:03 ]

woensdag 23 april 2008 18:14

Acties:

Cartman!

wrapper maken om je primary en secondary content en die wrapper een background image geven.

woensdag 23 april 2008 18:19

Acties:

BtM909

Watch out Guys...

Cartman! schreef op woensdag 23 april 2008 @ 18:14:
wrapper maken om je primary en secondary content en die wrapper een background image geven.

Of in de meeste gevallen de body gebruiken als primary wrapper

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 23 april 2008 18:30

Acties:

Cartman!

Kan inderdaad maar gaat in dit geval niet op.

woensdag 23 april 2008 19:22

Acties:

Makkelijk

Wat cartman zegt,

wrapper maken en daarin die 2 divs zetten.
achtergrondimage maken voor wrapper van 1px hoog die links wit is, dan het bordertje en vervolgens met background-repeat: repeat-y; over achtergrond laten herhalen.

Badieboediemxvahajwjjdkkskskskaa

woensdag 23 april 2008 19:45

Acties:

_eXistenZ_

Zoek maar eens op faux columns.

There is no replacement for displacement!

woensdag 23 april 2008 20:56

Acties:

Da Weef

Topicstarter

Dat bedoel ik dus met simpele oplossing... Lag een beetje out of my box

zo laat op de dag...

Morgen implementeren maar...

-Edit-

Overigens is het ook weer niet zóóóóó simpel. Mijn container (outer) heeft geen vaste breedte (schaalt tussen 700 en 1000px). Dus moet ik bij een wrapper wel nog een slimme manier vinden om de achtergrond te positioneren, maar daar kom ik waarschijnlijk wel uit.

[ Voor 48% gewijzigd door Da Weef op 23-04-2008 21:13 ]

woensdag 23 april 2008 22:57

Acties:

Da Weef

Topicstarter

Voor wie het interessant vind: het handig positioneren van de achtergrond voor flexibele (liquid) faux columns:

http://www.communitymx.co...icle.cfm?page=1&cid=AFC58

Is helemaal goed gekomen, dus wat mij betreft kan het topic nu (echt) op slot.

Pagina: 1

Reageer