PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

DIV niet meescrollend

Door Durk Pelsma op 08-04-2009 13:34
2.595 views
Hallo $naam,

http://dpelsma.nl/test/1.php

daar ben ik bezig met een layout te maken. Maar ik ben op een probleem gestuit.
waar: "Page Goes Here: staat, die is meescrollend.

Maar waar ik het verhaaltje heb staan over het menu, werkt niet. Die is niet meescrollend.

Ik heb vanalles geprobeerd.

Misschien kunnen jullie aan de hand van de bron, mij helpen waar de fout uit komt.
Het is allemaal nog HTML, en CSS.

Want ik heb geen idee, waar de fout uit komt.

Groeten Durk,
A
Alexander de Jong
08-04-2009 13:44
Dit heeft met je footer te maken.

Een standaard (x)html opbouw van een website is:


<body>
    <div id="wrap"> <!-- wrap kan ook container zijn. -->
        <div id="header">
            Al de element die in de header moet staan komt hier.
            Zoals:
                logo,
                menu,
                inlog box,
                etc.
        </div>
        
        <div id="content">
            Content.
        </div>
        
        <div id="footer">
        
        </div>
    </div>
</body>


De css ziet er zo uit:


* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    background-color: #000; /* zwart */
}

#wrap {
    width: 900px;
    margin: 0 auto; /* het midden van het scherm. */
    height: 100%;
    hieght: auto!important;
    min-height: 100%;
}

#header {
    height: 150px;
}

#content {
    color: #FFF;
}

#footer {
    hieght: 50px;
    padding-top: 50px;
}


Dit is een vrij basic opbouw. Voor ingewikkelde website raad ik je google aan.

[google]http://www.google.nl/search?q=sticky+footer&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:nl:official&client=firefox-a[/google]
Durk Pelsma
08-04-2009 13:56
Dus dan zou ik eigenlijk nog meer div's moeten maken.

of niet?
Durk Pelsma
08-04-2009 14:35
Rene ik zal eventjes een beter uitleg geven van mijn fout.

Ik heb 7 div's

- Container (online nog als box)
- header
- Big-menu
- content
- small-menu
- page
- footer

In 'Container' moet alles komen, dus daar alle div's.


In 'Content' staan
- small-menu
- page

Het zou er zo uitmoeten komen te zien:

|-----------------------------------------|
| Header                                          |
|-----------------------------------------|
| Big-menu                                      |
|-----------------------------------------|
| small  |            page                      |
| menu |                                         |
|          |                                         |
|          |                                         |
|          |                                         |
|----------------------------------------|
| Footer                                          |
|----------------------------------------|

zo in grote lijnen wil ik het hebben. Het ziet er nu zo uit:

|-----------------------------------------|
| Header                                          |
|-----------------------------------------|
| Big-menu                                      |
|-----------------------------------------|
| small  |            page                      |
| menu |                                         |
|          |                                         |
|          |                                         |
|          |                                         |
|--------|-------------------------------|
|            |               Footer               |
|---------|                                       |
|----------------------------------------|

Div- Page, maakt de 'content' wel groter, dus het lijkt als die er wel in zit.
Div - small-menu gaat uit de div, 'content' en dan gaat small-menu over de footer heen.

Ik hoop dat ik het zo duidelijker heb uitgelegd
K
Kay Kay
08-04-2009 15:09
Omdat smallmenu een float heeft, moet je de footer clearen.
Geef de footer dus clear: left; mee
position: static mag weg

//edit
Ik zie net wat jij met de div page hebt gedaan. Het beste geef je die een float: right mee en een breedte. De footer geef je dan clear: both; mee
Durk Pelsma
08-04-2009 15:16
Dragy, Yeah dat was hem, nu is de achtergrond niet helemaal goed, maar dat kan ik wel weer fixen

Iedereen Bedankt!
L
Leon Kunst
08-04-2009 15:24
Wat trouwens een onmisbare tool is voor dit soort CSS accefietjes:

FireBug plugin voor FireFox...

Retehandig...
Ariën
08-04-2009 16:23
EditCSS is ook erg handig vind ik, hiermee kan je realtime CSS-aanpassen vanuit een browser-view-hoge sidebar _O_
K
Kay Kay
08-04-2009 16:47
Ik vind FireBug persoonlijk helemaal niks.
De web developer toolbar is veel handiger :)
N
Niek Weevers
08-04-2009 19:34
Firebug is ideaal voor een developer.
Ik gebruik de developer toolbar ook veel, ook heel handig. Zijn 2 verschillende tools die niet zijn te vergelijken.

@aar, met firebug kun je ook realtime je css aanpassen en je html.

Reageren

Inloggen om te reageren