achtergrond laten door lopen

Alexander Kraan

18/07/2010 15:54:04

Is het mogelijk om de achtergrond te laten doorlopen tot de footer bij left col en right col het logo div heb ik hand matig door getrokken zie voorbeeld http://www.ttvyerseke.nl/test/test11/index.html

wat moet ik in de css of html code veranderen?

css code

Code (php)

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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

/* CSS layout */
body {
    margin: 0;
    padding: 0;
}
#top_nav {
background-color: #99CCFF;
}

#masthead {
    min-width: 600px;
}

#logo {
    float: left;
    width: 16px;
    Background-color: #003399;
    background-repeat: repeat-y;
    overflow:hidden;

}

#header {
    margin-left:16px;
    background-color: #99CCFF;
    font-family: "Times New Roman", Times, serif;
    font-size: 36pt;
    color: #0000FF;

}

#container {
    clear: both;
    min-width: 600px;
}

#left_col {
    width: 30px;
    float: left;
    background-color: #003399;
    background-repeat: repeat-y;
    overflow:hidden;
}

#right_col {
    float: right;
    width: 200px;
    width: 200px;
    float: right;
    background-color: #0000FF;
    background-repeat: repeat;
    color: #FFFFFF;
    font-family: "Times New Roman", Times, serif;
    font-size: 10pt;

}

#page_content {
    margin-left: 30px;
    margin-right: 200px;
    background-color: #99CCFF;
    background-repeat: repeat;
    font-family: "Times New Roman", Times, serif;
    font-size: 12pt;
    color: #0000FF;
}

#footer {
    clear: both;
    background-color: #6699FF;
}

html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Untitled 1</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="masthead">
<div id="top_nav">
    </div>
    <div id="logo" style="width: 16px; height: 55px">
        <img height="16" src="../../ttvyerseke.png" width="16" /></div>
    <div id="header">
        TTVYerseke</div>
</div>
<div id="container">
    <div id="left_col">
        left<br />
        col</div>
    <div id="right_col">
        tekst</div>
    <div id="page_content">
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    </div>
</div>
<div id="footer">
    kk</div>

</body>

</html>

Modedit:

Gebruik code-tags voor het overzichtelijk weergeven van je code

Gewijzigd op 18/07/2010 17:09:47 door Joren de Wit

PHP hulp

23/05/2012 20:09:45

Gesponsorde koppelingen:

Victor Php

18/07/2010 16:09:21

Geef de body een kleur..
En zoveel <br /> is nutteloos.
Zoek liever op een goede footer tutorial.

marco van dijk

18/07/2010 16:52:14

epic fail

Modedit:

Dit soort reacties voegt niets toe. Als je niets nuttigs te melden hebt, post dan niets!

Gewijzigd op 18/07/2010 17:08:49 door Joren de Wit

P Lekensteyn

18/07/2010 20:56:57

Hee, kom je niet van Antagonist vandaan?
Ik had je toch verteld hoe je dat moest doen?

Verander bij de container position:relative.
Bij de balken links en rechts: position:absolute;top:0;bottom:0

Alexander Kraan

22/07/2010 22:56:52

ik heb nu deze code alleen het werkt nog niet

Code (php)

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

/* CSS layout */
body {
    margin: 0;
    padding: 0;
    background-color: #99CCFF;
}
#top_nav {
background-color: #99CCFF;
}

#masthead {
    min-width: 600px;
}

#logo {
    float: left;
    width: 16px;
    Background-color: #003399;
    background-repeat: repeat-y;
    overflow:hidden;

}

#header {
    margin-left:16px;
    background-color: #99CCFF;
    font-family: "Times New Roman", Times, serif;
    font-size: 36pt;
    color: #0000FF;

}

#container {
    clear: both;
    min-width: 600px;
    position: relative;
}
#left_col {
    width: 30px;
    float: left;
    background-color: #003399;
    background-repeat: repeat-y;
    overflow: hidden;
    top: 0px;
    position: absolute;
    bottom: 0px;
}
#right_col {
    width: 200px;
    float: right;
    background-color: #0000FF;
    background-repeat: repeat;
    color: #FFFFFF;
    font-family: "Times New Roman", Times, serif;
    font-size: 10pt;
    position: absolute;
    top: 0px;
    bottom: 0px;
}

#page_content {
    margin-left: 30px;
    margin-right: 200px;
    background-color: #99CCFF;
    background-repeat: repeat;
    font-family: "Times New Roman", Times, serif;
    font-size: 12pt;
    color: #0000FF;
}

#footer {
    clear: both;
    background-color: #6699FF;
}

Michael Beers

22/07/2010 23:46:20

Ik snap niet wat je bedoelt maar ik doe een poging voor je omdat ik denk dat ik weet wat je wilt...

JE HTML

Code (php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>TITLE</title>
    </head>
    <body>
        <div id="wrapper">

            HIER AL JE CONTENT PLAATSEN ENZ.
            HIER AL JE CONTENT PLAATSEN ENZ.
            HIER AL JE CONTENT PLAATSEN ENZ.
            HIER AL JE CONTENT PLAATSEN ENZ.
            HIER AL JE CONTENT PLAATSEN

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

        </div>
    </body>

</html>

JE CSS

Code (php)

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

/*
** RESETS
** Hierbij haal ik de padding,margins weg zorg ik dat de html/body container schermvullend is!
*/
html,body
{
    height:        100%;
    width:        100%;
}

body
{
    margin:        0;
    padding:    0;
}

/*
** Dit is de wrapper hier komt alle content in :)
** De margin zorgt er in dit geval voor dat de wrapper altijd gecentreerd staat in het beeld
** De min waarde in de margin haalt de footer weer naar boven :)
*/
#wrapper
{
    margin:        0 auto -116px; /*Waardes van de footer meenemen! heb je dus een top van 16px moet je deze ook aftrekken*/
    min-height:    100%;
    width:        100%;
    height:        auto !important; /* !important zorgt ervoor dat een element voorang krijgt! */
    background:    #FF0000;
}

/*
** Dit zorgt ervoor dat de content niet onder de footer gaat :)
** Deze moet gelijk zijn aan de footer hoogte
*/
#push
{
    position:    relative;
    min-height:    100px;
    height:        100px;
}

/*
** Dit is de footer deze blijft nu altijd aan de onderkant van je scherm plakken
*/
#footer
{
    position:    relative;
    clear:        both;
    bottom:        0px;
    top:        16px; /*Top waarde van de wrapper*/
    height:        100px; /*Hoogte van de footer conclusie van de wrapper: 100 + 16 = 116 dus de min waarde word 116*/
    width:        100%; /*Zorgt dat de footer over de hele lengte gaat*/
    background:    #00FF00;
}

Edit
Verder zou ik nooit een Times als font gebruiken :)
Reden waarom: Wiki link

Gewijzigd op 22/07/2010 23:52:47 door Michael Beers

Alexander Kraan

24/07/2010 18:07:50

het is de bedoeling dat het er zo komt uit te zien http://www.ttvyerseke.nl/test/test13/index.html en dat de linker en rechter div de achtergrond automatische door lopen met de content div tot de footer zie voorbeeld

Gewijzigd op 24/07/2010 18:14:46 door Alexander Kraan

PHPhulp is een Nederlandstalige PHP community sinds 2002. Je vindt hier PHP tutorials, PHP scripts, PHP boeken en nog veel meer. Alles is geheel gratis!