Toon posts:

[CSS/HTML] Probleem met footer layer

Pagina: 1
Acties:

dinsdag 4 oktober 2005 21:34

Acties:

Verwijderd

Topicstarter
Sinds kort ben ik mijn layouts met layers/div's aan het maken, maar ik stoot op een probleem: mijn footer wil namelijk niet onder de overige layers gaan staan.
Hier kun je een voorbeeld zien.

Dit is mijn code:
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Orpheus</title>
<link rel="stylesheet" href="Orpheus.css">
</head>

<body>
<div>
    [img]"images/Orpheus_02.jpg"[/img]
    [img]"images/Orpheus_04.jpg"[/img]

<div id="top">
    [img]"images/Orpheus_06.jpg"[/img][img]"images/Orpheus_07.jpg">
</div>

<div[/img]
    <p>sdfdfssdffsdsdf</p>
    <p>dfdqskjfdsmkfldms</p>
    <p>dsfdsfsd&ugrave;jm    </p>
</div>

<div id="footer">fdsqfdsfsdsdf</div>
</div>
</body>
</html>

en de css:
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

        body, html
        {
            margin:0;
            padding:0;
            height:100%;
            background-image:url(images/Orpheus_01.jpg);
            background-repeat:repeat-x;
            font-size: 10px;
            font-family:Verdana, Arial, Helvetica, sans-serif;
            color:#000;
            background-color:#fff;
        }
        
        a:link { color:#036; }
        a:visited { color:#066; }
        
        a:hover, a:active
        {
            color:#fff;
            background-color:#036;
        }
        
        img
        {
            border:0px;
        }
        
        img#header
        {
            position:absolute;
            top:0px;
            left:31px;
        }
        
        img#submenu
        {
            position:absolute;
            top:0px;
            left:623px;
        }
        
        div#top
        {
            position:absolute;
            left:31px;
            top:82px;
            background-color:#F8FBFD;
        }       
        
        div#center
        {
            position:absolute;
            left:31px;
            top:269px;
            background-image:url(images/Orpheus_09.jpg);
            background-repeat:repeat-y;
            padding:5px 5px 5px 205px;
        }
        div#footer
        {
            position:relative;
            bottom:0px;
            height:29px;
            background-image:url(images/Orpheus_10.jpg);
        }

[ Voor 24% gewijzigd door Verwijderd op 04-10-2005 21:37 ]

dinsdag 4 oktober 2005 22:22

Acties:
  • Pendaco
  • Registratie: Augustus 2003
  • Laatst online: 20:36

Pendaco

Vogon Poetry FTW!

hoe moet die footer eronder komen; met de content meeschuiven direct eronder of gewoon vast onderaan de pagina onafhankelijk van de rest?

voor dat laatste zou je een fixed footer kunnen gebruiken.
code:
1
2
3
4
5
6
7
8

div#footer 
        { 
            position:absolute;
            bottom:0;
            left:0;
            width:100%;
            background-image:url(images/Orpheus_10.jpg); 
            }


en om 'relative' die footer omlaag te krijgen moet je bij de bottom een negatieve waarde gebruiken, of vervang 'bottom' voor 'top'

Wees er wel van bewust dat de footer niet met je content kan meeschuiven aangezien relatieve en absolute elementen zich niks van elkaar of de rest aantrekken qua positionering.

Je zou dan beter met floats kunnen werken

dinsdag 4 oktober 2005 22:55

Acties:
  • equationunequal
  • Registratie: Oktober 2001
  • Laatst online: 10-04 22:00

equationunequal

Wat voor gedrag wil je dat de footer precies vertoont :? Wil je hem aan de onderkant van je window hebben (indien website < 100% lang) en hem laten meerekken met de content (zoals mijn website) of wil je hem aan de onderkant van je content hebben en hem mee laten rekken met de content?

Momenteel staan al je div's in een nogal nutteloze container. Deze container rekt niet mee omdat je div's absoluut zijn gepositioneerd en daarom over de container heen vallen. Om dit op te lossen kan je floats gebruiken of de footer aan een ander element (bv. je center) koppelen...

spuit 11, voortaan refreshen voordat ik reply op een post die al wat langer open staat in mn venster :P

[ Voor 18% gewijzigd door equationunequal op 04-10-2005 22:58 ]

[ equationunequal.nl - portret & model fotografie ] [ newskin.nl - socials ]

Reageer