Toon posts:

[CSS] divje helemaal onderin zetten

Pagina: 1
Acties:

vrijdag 4 maart 2005 14:34

Acties:

Verwijderd

Topicstarter
hmm ik weet niet of dit kan. Maar stel heb de volgende code

code:
1
2
3
4
5
6
7
8
9
10
11

<div id='header'>
    Header
</div>

<div id='content'>
    content
</div>

<div id='footer'>
    footer
</div>


met css

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

#header{
    clear:both;
    float:left;
}

#content{
    clear:both;
    float:left;
}

#footer{
    clear:both;
    float:left;
}



Als dit gerunt zou worden dan zou je dus de divje netjes onder elkaar krijgen. Nu wil ik graag dat de footer helemaal naar beneden van je scherm wordt gezet. Dus dat de div altijd naar onder wordt gealigned en dat ik dan zeg maar een padding-bottem zet zodat ti niet echt van het scherm afdwaalt.

Kan dit eigenlijk wel?

vrijdag 4 maart 2005 14:47

Acties:

Verwijderd

Met fatsoenlijke kennis van CSS kan je Fixed Footer wel begrijpen.

vrijdag 4 maart 2005 14:49

Acties:
  • Res-q
  • Registratie: December 2002
  • Laatst online: 30-04 15:18

Res-q

Redder in nood?

Cascading Stylesheet:
1
2
3
4

#footer {
position: absolute;
bottom: 0px;
}

Was dat nou zo moeilijk :?

[rml]Res-q in "[ CSS] Table-based layout naar CSS"[/rml] is ook een leuke ;)

[ Voor 32% gewijzigd door Res-q op 04-03-2005 14:50 ]

en zo is het voorspeld!

vrijdag 4 maart 2005 14:53

Acties:

Verwijderd

Dat is wel leuk, mits je zeker weet dat de tekst van de pagina nooit de bottom zal bereiken. Dan valt de footer over de tekst heen. Voor een fixed footer die cross-browser werkt, is het wel iets lastiger ja. ;)

vrijdag 4 maart 2005 15:08

Acties:
  • Res-q
  • Registratie: December 2002
  • Laatst online: 30-04 15:18

Res-q

Redder in nood?

Mja, als ik dan toch bezig ben met het plaatsen van scriptjes :P. Deze werkt perfect, en lost ook het probleem van de content die achter de footer valt op.


HTML:
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        
        <title>
            test
        </title>
        
        <style type="text/css">
            html, body  {
                    height: 100%;
                    padding: 0px;
                    margin: 0px;
                    overflow: hidden;
                    text-align: left;
                    }
            
            #container  {
                    width: 100%;
                    height: 100%;
                    padding-top: 120px;
                    padding-bottom: 30px;
                    text-align: center;
                    -moz-box-sizing: padding-box;
                    }
            
            #top        {
                    position: absolute;
                    top: 0px;
                    height: 120px;
                    width: 100%;
                    background-color: lightblue;
                    }
                    
            #middle     {
                    position: relative;
                    text-align: left;
                    height: 100%;
                    background-color: yellow;
                    overflow: auto;
                    margin-bottom: 30px;
                    }
                    
            #bottom     {
                    position: absolute;
                    height: 30px;
                    width: 100%;
                    bottom: 0px;
                    left: 0px;
                    background-color: orange;
                    }
            </style>
    </head>
    
    <body>
        <div id="container">
            <div id="top">
                header
            </div>
            
            <div id="middle">
                middle<br /><br />
                      a lot of content here a lot of content here a lot of content here
                      a lot of content here a lot of content here a lot of content here
                      a lot of content here a lot of content here a lot of content here
                      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
                      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
                      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
                      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
                      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
                      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
                      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
                      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
                      <br /><br />scrolling<br /><br />scrolling<br /><br />scrolling
            </div>
                
            <div id="bottom">
                footer
            </div>
        </div>
    </body>
</html>

[ Voor 54% gewijzigd door Res-q op 04-03-2005 15:23 ]

en zo is het voorspeld!

vrijdag 4 maart 2005 15:24

Acties:

Verwijderd

Topicstarter
hmm ok ...

Heb de 1e oplossing gebruikt en het werkt wel .... maar het rare is nu

http://acc.hebbizz.nl/reos/

in IE centreert ti de naw enzo wel en FF niet ??? Op zich niet erg, want moet toch voor IE zijn, maar toch vaag.

vrijdag 4 maart 2005 15:32

Acties:
  • Res-q
  • Registratie: December 2002
  • Laatst online: 30-04 15:18

Res-q

Redder in nood?

Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11

#footer
{
    color:#3F7FBE;
    font-size:10px;
    position: absolute; 
    bottom: 0px;
    left: 50%;
    width: 450px;
    margin-left: -225px;
    padding-bottom:10px;    
}

:)

en zo is het voorspeld!

vrijdag 4 maart 2005 15:55

Acties:

Verwijderd

Topicstarter
hey stoer ... thnx ...

maar nu heb ik weer iets ...

http://acc.hebbizz.nl/reos/index1.htm

heb voor de gein meer content erin gezet en nu komt de content onder de footer ????

vrijdag 4 maart 2005 16:02

Acties:
  • Res-q
  • Registratie: December 2002
  • Laatst online: 30-04 15:18

Res-q

Redder in nood?

In IE gooit ie m idd achter de footer, in Firefox werkt het wel goed :). Je zult nu waarschijnlijk naar het model moeten grijpen in mijn tweede post, de footer blijft altijd onderaan staan en de content past zich, incl. scrollbalk aan aan de inhoud die je er in zet :).

Succes :)

en zo is het voorspeld!

vrijdag 4 maart 2005 16:03

Acties:
  • IschaGast
  • Registratie: Juli 2001
  • Laatst online: 25-11-2025

IschaGast

Je wilt zeker zoiets als dit: http://annevankesteren.nl/

vrijdag 4 maart 2005 16:05

Acties:
  • Res-q
  • Registratie: December 2002
  • Laatst online: 30-04 15:18

Res-q

Redder in nood?

^^ Die is gemaakt op basis van het fixed-footer principe uit de post van Quist, en dan valt dus de content achter de footer :). Met het model dat ik hierboven postte heb je dat probleem niet :)

en zo is het voorspeld!

vrijdag 4 maart 2005 16:05

Acties:

Verwijderd

Topicstarter
Res-q schreef op vrijdag 04 maart 2005 @ 16:02:
In IE gooit ie m idd achter de footer, in Firefox werkt het wel goed :). Je zult nu waarschijnlijk naar het model moeten grijpen in mijn tweede post, de footer blijft altijd onderaan staan en de content past zich, incl. scrollbalk aan aan de inhoud die je er in zet :).

Succes :)
hmm ja ... die 2e had ik uitgeprobeerd en op zich werkt het wel ... maaaar .... dit wordt straks een emailtemplate voor in Outlook, en dan werkt die overflow niet meer (in iedergeval bij mij niet).

thnx

vrijdag 4 maart 2005 16:06

Acties:
  • Res-q
  • Registratie: December 2002
  • Laatst online: 30-04 15:18

Res-q

Redder in nood?

En als je dan gewoon de regel overflow: auto; er tussenuit haalt, lijkt me dat het dan prima moet werken :)

edit:
Een margin-bottom van pakweg 150 pixels in je #content zetten, werkt dat ook niet? Als je dat in het idee zet wat jij gebruikt, werkt dat?

[ Voor 43% gewijzigd door Res-q op 04-03-2005 16:10 ]

en zo is het voorspeld!

zaterdag 5 maart 2005 01:08

Acties:

Verwijderd

begrijp wel dat als jij html mail naar mensen gaat sturen dat niet alle email readers even goed zijn in het renderen. Ik meen dat er een maand of 2, 3 geleden een topic was over html emails, waarin werd gelinkt naar een pdfje van wegener direct mail. Daarin stond dat wil je zorgen dat iedereen die html mail kan ontvangen (sommige webmail clients kunnen het nl. niet), dat je ongeveer html 2.0 moet gebruiken. In die specs zit nog geen css support ;(

Dus dat moet je dan oplossen met tables... |:(

Edit: typo's

[ Voor 3% gewijzigd door Verwijderd op 05-03-2005 01:09 ]

Pagina: 1
Reageer