div naar onderste positie (indien mogelijk)

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Tom aan t Goor

Tom aan t Goor

01/07/2013 12:42:10
Quote Anchor link
Hoi,

Ik wil dat mijn footer op de laagste plaats in mijn pagina staat.
Als de inhoud van de pagina erg klein is wil ik dat hij onderaan in het scherm staat, daarvoor had ik deze code:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
#footer{
    background-color: #F6F6F6;
    width: 100%px;
    height: 250px;
    background-image: url('images/footer.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    bottom: 0;
    position: absolute;
}



Dit werkt prima met een kleine inhoud van mijn pagina.
Maar laten we zeggen, ik heb zo veel tekst dat de inhoud niet meer op mijn scherm past, dan moet mijn footer naar beneden. (Dan moet hij dus onder de inhoud staan, en dus nog niet meteen te zien)
Dit wil ook nog wel lukken, maar het lukt me maar niet om deze twee te combineren.

Kan iemand me hiermee helpen?
(Ik hoop dat ik het duidelijk heb uitgelegd)
Gewijzigd op 01/07/2013 12:42:26 door Tom aan t Goor
 
PHP hulp

PHP hulp

23/04/2024 08:39:47
 
Harm ten Napel

Harm ten Napel

01/07/2013 13:00:04
Quote Anchor link
Je kan de position relative maken.
Dit ligt een beetje aan de situatie of dit jou probleem oplost.
Of je zou even het hele script moeten posten :)
Gewijzigd op 01/07/2013 13:00:17 door Harm ten Napel
 
Tom aan t Goor

Tom aan t Goor

01/07/2013 13:04:46
Quote Anchor link
De position relative maken werkt helaas niet.

Ik zal hier mijn code posten (waarvan ik denk dat het van belang is).

index.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div id="content">
    <div id="top">
    </div>
    
    <div id="middle">
        <div id="titel">
            <img src="images/icons/home.png" alt="Home">
            <span class="titel">Home</span>
            <br>
            <span class="subTitel">Stukje tekst!</span>
        </div>
        <div id="dots">
        </div>
        Hoi
        <?php
        if(isset($_GET['t'])){
            echo '<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi';
        }
        ?>
    </div>
    
    <div id="bottom">
    </div>
</div>

<div id="footer-bg">
    <div id="footer">
    </div>
</div>



style.css
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#footer-bg{
    height:250px;
    width:100%;
    bottom: 0;
    position: absolute;
    background: #F6F6F6 url('images/footer-bg-vul.png') repeat-x bottom;
}
#footer{
    background-color: #F6F6F6;
         width: 100%;
         height: 250px;
         background-image: url('images/footer.png');
         background-position: center bottom;
         background-repeat: no-repeat;
         bottom: 0;
         position: absolute;
}

#content{
    width: 1000px;
    min-height: 150px;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    font-family: "Myriad", sans-serif;
}

#content #middle{
    padding-left: 30px;
    width: 943px;
    background: url(images/content2/middle.png) repeat-y;
}
 
Harm ten Napel

Harm ten Napel

01/07/2013 13:07:23
Quote Anchor link
zoiets?
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<style>
#footer-bg{
    height:250px;
    width:100%;
    bottom: 0;
    position: relative;
    background: #F6F6F6 url('images/footer-bg-vul.png') repeat-x bottom;
}
#footer{
    background-color: #F6F6F6;
         width: 100%;
         height: 250px;
         background-image: url('images/footer.png');
         background-position: center bottom;
         background-repeat: no-repeat;
        
}

#content{
    width: 1000px;
    min-height: 150px;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
    font-family: "Myriad", sans-serif;
}

#content #middle{
    padding-left: 30px;
    width: 943px;
    background: url(images/content2/middle.png) repeat-y;
}
</style>

<div id="content">
    <div id="top">
    </div>
    
    <div id="middle">
        <div id="titel">
            <img src="images/icons/home.png" alt="Home">
            <span class="titel">Home</span>
            <br>
            <span class="subTitel">Stukje tekst!</span>
        </div>
        <div id="dots">
        </div>
        Hoi
        <?php
        if(isset($_GET['t'])){
            echo '<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi<br>Hoi';
        }
        ?>
    </div>
    
    <div id="bottom">
    </div>
</div>

<div id="footer-bg">
    <div id="footer">
    </div>
</div>
Gewijzigd op 01/07/2013 14:33:33 door Harm ten Napel
 
Tom aan t Goor

Tom aan t Goor

01/07/2013 13:13:06
Quote Anchor link
Dit werkt helaas niet.
Bij veel tekst staat hij helemaal onderaan.
En bij weinig tekst staat hij halverwege mijn scherm.
 
Harm ten Napel

Harm ten Napel

01/07/2013 13:15:30
Quote Anchor link
Als ik het goed begrijp wil dat je footer niet verschuift als er te veel tekst is?

Toevoeging op 01/07/2013 13:17:54:

ik heb het stukje code getest en bij mij blijft de footer onder aan staan :)
 
Tom aan t Goor

Tom aan t Goor

01/07/2013 13:19:58
Quote Anchor link
Stel mijn browser/beeldscherm is 1000px hoog.
Als de content van mijn pagina bijv. 500px is, wil ik dat de footer onderaan staat, en dat de content en de footer tegelijk te zien zijn.

Maar als de content van mijn pagina bijv. 1500px is, wil ik dat de footer onder de content staat en dat je dus eerst naar beneden moet scrollen voor je de footer kan zien.
 
Harm ten Napel

Harm ten Napel

01/07/2013 13:48:32
Quote Anchor link
je zou het zo kunnen doen
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
#footer-bg{
    height:250px;
    width:100%;
    bottom: 0;
    position: fixed;
    background: #F6F6F6 url('images/footer-bg-vul.png') repeat-x bottom;
}
#footer{
    background-color: #F6F6F6;
         width: 100%;
         height: 250px;
         background-image: url('images/footer.png');
         background-position: center bottom;
         background-repeat: no-repeat;
}

#content{
    position: relative;
    width: 1000px;
    min-height: 150px;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    font-family: "Myriad", sans-serif;
    margin: 0 0 250px; /* bottom = footer height */
}

#content #middle{
    padding-left: 30px;
    width: 943px;
    background: url(images/content2/middle.png) repeat-y;
}
Gewijzigd op 01/07/2013 14:33:03 door Harm ten Napel
 
Tom aan t Goor

Tom aan t Goor

01/07/2013 14:19:19
Quote Anchor link
Ook dat werkt helaas niet :(
 
Harm ten Napel

Harm ten Napel

01/07/2013 14:24:19
Quote Anchor link
volgens mij bedoel je zo iets :)

http://www.conijnwebdesign.nl/tutorials/fixed_footer,normal_scrollbar.html
Gewijzigd op 01/07/2013 14:32:21 door Harm ten Napel
 
Tom aan t Goor

Tom aan t Goor

01/07/2013 14:28:38
Quote Anchor link
Harm ten Napel op 01/07/2013 14:24:19:
volgens mij bedoel je zo iets :)

http://www.conijnwebdesign.nl/tutorials/fixed_footer,normal_scrollbar.html


Dat bedoel ik niet precies.
Ik heb uiteindelijk een voorbeeld kunnen vinden, en hiermee is het ook gelukt.

http://jsfiddle.net/ELUGc/1/

Opgelost.
 
Harm ten Napel

Harm ten Napel

01/07/2013 14:31:44
Quote Anchor link
Helaas kon ik dit niet helemaal uit je verhaal krijgen, maar blij dat je eruit gekomen bent ;)
Gewijzigd op 01/07/2013 14:32:03 door Harm ten Napel
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.