Toon posts:

[CSS] Uitlijning probleem

Pagina: 1
Acties:

maandag 22 maart 2004 11:55

Acties:
  • Jorick
  • Registratie: November 2001
  • Laatst online: 20:29

Jorick

Topicstarter
IK heb me al een ongeluk gezocht maar kan er maar niet uit komen.
De situatie:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="framework">
    <div id="header">
        <div id="logo">[img]"../final/images/logo.jpg"[/img]</div>
        <div id="menu">wat tekst</div>
        <div id="clubhuis">[img]"../final/images/head_image.jpg"[/img]</div>
    </div>
    <div id="bar_space">
        <div class="sub_head" id="sub_head"></div>
        <div id="breadcrum">home\nieuws\Nieuwe Review </div>
    </div>
    <div id="content">
        <div id="left">Hoi</div>
        <div id="main">text</div>
    </div>
    <div id="footer">Blabla</div>
</div>


Cascading Stylesheet:
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

    body, html{
        height:100%;
        width:100%;
        margin:0px;
        padding:0px;
    }
    
    #framework{
        height:100%;
        width:100%;
    }

        #header{
            width:760px;
        }   
            #logo {
                position:relative;
                float:left;
                height:172px;
                width:216px;
            }
            #menu {
                float:left;
                clear:right;
                position:relative;
                width:539px;
                height:25px;
                margin:0px;
                padding-left:5px;
                background-image:url(../final/images/bg3_gradient.jpg);
                background-repeat:repeat-x;
                text-align:left;
                }
            #clubhuis{
                float:left;
                position:relative;
                height:147px;
                width:544px;
            }   
        
        #bar_space{
            float:left;
            clear:both;
            width:760px;
            height:24px;
        }
            #sub_head{
                float:left;
                width:216px;
                height:24px;
                background-image:url(../final/images/bg_gradient.jpg);
            }
            #breadcrum{
                
                font-family: Verdana, Arial, Helvetica, sans-serif;
                text-transform: uppercase;
                color:#FFFFFF;
                font-weight:bold;
                font-size:10px;
                
                width:544px;
                height:24px;
                float:right;
                
                background-image:url(../final/images/bg2_gradient.jpg);
                background-color:#0E3E60;
                background-repeat:repeat-x;

            }
    
        #content{
            display:block;
            float:left;
            clear:both;
            width:760px;
            background-color:#CCCCCC;
        }
            #left{
                width:216px;
                float:left;
                clear:left;
                background-color:#FFFFFF;
            }
            
            #main{
                width:524px;
                float:right;
                clear:right;
                background-color:#FFFFFF;
                padding:10px;
            }
        
        #footer{
            position:relative;          
            clear:both;
            height:50px;
            width:760px;
            background-color:#000033;
        }

So far so good. Maar wat ik nu will is dat de div #footer aan de bottom van de #framework div word uitgelijnd. Ik heb al verschillende dingen geprobeerd maar het wil maar niet lukken. Wat "lijkt" te werken is als ik dit doe:
Cascading Stylesheet:
1
2
3
4
5
6

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

Dan wordt de div inderdaad bij de bottom uitgelijnd. Het probleem is, zodra de pagina langer word dan de browser hoog is (dus dat er gescrolled moet worden), loopt #footer of #main heen. Dat wil ik uiteraard niet :(

Ik heb dus al vanalles geprobeerd maar krijg het maar niet werkend om #footer binnen #framework verticaal op de bottem uitgelijnd te krijgen. Als ik #footer div buiten #framework plak, dus er achter, moet ik steeds wat scrollen en dat is niet mooi.
Het lukt me dus niet om #footer als enige binnen #framework uit te lijnen aan de bottom en de rest gewoon dus gewoon top.

maandag 22 maart 2004 12:02

Acties:
  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 22:53

T-MOB

zie dit topic

Regeren is vooruitschuiven

maandag 22 maart 2004 12:21

Acties:
  • Jorick
  • Registratie: November 2001
  • Laatst online: 20:29

Jorick

Topicstarter
T-MOB schreef op 22 maart 2004 @ 12:02:
zie dit topic
Ik heb even gekeken en wat ik zag was ik al bang voor: de absolute positie van #footer icm overflow van #main. Misschien dat ik het er bij had moeten zetten maar ik wil geen overflow gebruiken op #main, ik wil juist dat als de pagina groter is dat de pagina doorloopt en daar onder altijd de #footer komt. Maar als er nie gescrolled hoeft te worden dat #footer toch onder aan uitgelijnd is. Of heb ik dan toch niet goed gekeken :?

[ Voor 5% gewijzigd door Jorick op 22-03-2004 12:22 ]

maandag 22 maart 2004 13:02

Acties:

Verwijderd

http://steve.pugh.net/test/test57.html ??

(twee vraagtekens omdat dit antwoord exact hetzelfde is als m'n vorige)

maandag 22 maart 2004 13:32

Acties:
  • Jorick
  • Registratie: November 2001
  • Laatst online: 20:29

Jorick

Topicstarter
Verwijderd schreef op 22 maart 2004 @ 13:02:
http://steve.pugh.net/test/test57.html ??

(twee vraagtekens omdat dit antwoord exact hetzelfde is als m'n vorige)
Ja ik heb dat werkend in IE maar in mozilla werkt het nog steeds niet.
Ik heb nu het volgende:

Cascading Stylesheet:
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

<!--
    html, body, #framework { min-height: 100%; width: 100%; height: 100%;}
    html>body, html>body #holder { height: auto;}
    body { margin: 0; padding:0; }
    
    #framework{
        position:absolute;
        top:0;
        left:0;
    }

        #header{
            position:relative;
            width:760px;
        }   
            #logo {
                position:relative;
                float:left;
                height:172px;
                width:216px;
            }
            #menu {
                float:left;
                clear:right;
                position:relative;
                width:539px;
                height:25px;
                margin:0px;
                padding-left:5px;
                background-image:url(../final/images/bg3_gradient.jpg);
                background-repeat:repeat-x;
                text-align:left;
                }
            #clubhuis{
                float:left;
                position:relative;
                height:147px;
                width:544px;
            }   
        
        #bar_space{
            position:relative;
            float:left;
            clear:both;
            width:760px;
            height:24px;
        }
            #sub_head{
                float:left;
                width:216px;
                height:24px;
                background-image:url(../final/images/bg_gradient.jpg);
            }
            #breadcrum{
                
                font-family: Verdana, Arial, Helvetica, sans-serif;
                text-transform: uppercase;
                color:#FFFFFF;
                font-weight:bold;
                font-size:10px;
                
                width:544px;
                height:24px;
                float:right;
                
                background-image:url(../final/images/bg2_gradient.jpg);
                background-color:#0E3E60;
                background-repeat:repeat-x;

            }
    
        #content{
            position:relative;
            padding-bottom: 60px;
            float:left;
            clear:both;
            width:760px;
            
        }
            #left{
                width:216px;
                float:left;
                clear:left;
                background-color:#FFFFFF;
            }
            
            #main{
                
                height:auto;
                width:524px;
                float:right;
                clear:right;
                background-color:#FFFFFF;
                padding:10px;
            }
        
        #footer{
            position:absolute;
            bottom:0;
            left:0;
            clear:both;
            height:50px;
            width:760px;
            background-color:#000033;
        }
-->

Naar mijn idee is het zo goed en in IE werkt het ook, maar in mozilla dus niet. Die link werkt in mozilla wel goed dus dat is een beetje raar :?

maandag 22 maart 2004 14:44

Acties:
  • T-MOB
  • Registratie: Maart 2001
  • Laatst online: 22:53

T-MOB

Om het te laten werken moet je je iets strikter aan test57 houden...

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

    <div id="header">
        <div id="logo">[img]"../final/images/logo.jpg"[/img]</div>
        <div id="menu">wat tekst</div>
        <div id="clubhuis">[img]"../final/images/head_image.jpg"[/img]</div>
    </div>

    <div id="base">
        <div id="bar_space">
            <div class="sub_head" id="sub_head"></div>
            <div id="breadcrum">home\nieuws\Nieuwe Review</div>
        </div>
        <div id="content">
            <div id="left">Hoi</div>
            <div id="main">text</div>
        </div>
    </div>

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


naja... hier een werkend geval

[ Voor 36% gewijzigd door T-MOB op 22-03-2004 15:21 ]

Regeren is vooruitschuiven

Pagina: 1
Reageer