[CSS] Site slicen
www.demaffia.nl/site.JPG
Toelichting:
1) header
2) komt plaatje in
3) menu
4) tekst content
5) afbeelding in de hoek
Hoop dat jullie mij verder kunnen helpen. Gelieve geen adviezen over hoe ik mijn layout beter kan doen, ik heb het zo in mijn hoofd en wil het graag op deze manier uitvoeren :)
Alvast bedankt,
Martijn
Achtergrond
Div1 -> header
Div2 -> plaatje links (links floaten)
Div3 -> container
Div4 -> 'zwevend divje' links
Div5 -> 'zwevend divje' rechts
Niet zo moeilijk toch?
Edit:
div2 is nr 5 in mn schets?
Gewijzigd op 01/01/1970 01:00:00 door Martijn
Div2 is idd nr. 5, maar je kunt dat ook gewoon met de img-tag doen. 'k Snap daar even niet van wat je ermee wilt bereiken, maar oké.
En hoe kan je dit dan het beste positioneren? Absolute of relative? De site moet er nog wel goed uit blijve zien ook al wordt IE / FF verkleind...
En in welke div komen div4 en 5? In de container of .. ?
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div id="nummer5"></div>
<div id="container">
<div id="nummer 1"></div>
<div id="nummer 4">
<div id="nummer 3"></div>
<div id="nummer 2"></div>
</div>
</div>
<div id="container">
<div id="nummer 1"></div>
<div id="nummer 4">
<div id="nummer 3"></div>
<div id="nummer 2"></div>
</div>
</div>
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
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
#nummer5 {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
#container {
position: relative;
margin: 0 auto;
width: 600px;
}
#nummer4 {
position: relative;
}
#nummer3 {
position: absolute;
left: -50px;
top: 50px;
width: 100px;
height: 100px;
}
#nummer2 {
position: absolute;
right: -50px;
top: 50px;
width: 100px;
height: 100px;
}
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
#container {
position: relative;
margin: 0 auto;
width: 600px;
}
#nummer4 {
position: relative;
}
#nummer3 {
position: absolute;
left: -50px;
top: 50px;
width: 100px;
height: 100px;
}
#nummer2 {
position: absolute;
right: -50px;
top: 50px;
width: 100px;
height: 100px;
}
En dan aanpassen naar je eigen afmetingen en dergelijke.
Die nummer 2 en 3 geef je beide een position absolute in een div (nummer 4) met een position relative. Zo positioneer je deze 2 aan de hand van nummer 4.
Nummer 5 staat compleet buiten de rest.
Maar negatieve margins in IE6 werkt bij mij niet. Ik zal wel wat fout doen. DIt krijg ik te zien in IE6:
www.demaffia.nl/IE6.JPG
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
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
<html>
<head>
<title> TEST </title>
<style rel="stylesheet" style="text/css">
*{
margin:0px;
padding: 0px;
}
body
{
background-color: blue;
}
#container
{
width: 1200px;
margin: 0px auto;
}
#left
{
background-image: url('http://www.5minds.nl/graph/ballen.png');
background-position: top left;
background-repeat: no-repeat;
height: 100%;
width: 180px;
float: left;
}
#site
{
float: left;
width: 800px;
background-color: red;
height: 100%;
}
#header
{
background-color: yellow;
height: 80px;
width: 800px;
}
#menu
{
float: left;
margin-top: 130px;
margin-left: -70px;
width: 150px;
height: 300px;
background-color: #999;
border: 1px solid black;
}
#foto
{
float: right;
margin-top: 80px;
margin-right: -100px;
width: 200px;
height: 180px;
background-color: #999;
}
</style>
<body>
<div id="container">
<div id="left"></div>
<div id="site">
<div id="header">
</div>
<div id="content">
<div id="menu"></div>
<div id="foto"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat pretium massa. Etiam dui sem, fringilla in, porta sed, fermentum et, nibh. Suspendisse eros. Sed iaculis elementum leo. Nam placerat felis. Sed vestibulum, nulla sit amet porta cursus, orci libero malesuada ante, eget aliquet ipsum est in elit. Aliquam magna sem, hendrerit at, viverra ut, convallis consequat, purus. Pellentesque porta condimentum libero. Nunc vulputate nisl. Nam justo. Vivamus egestas dignissim magna. Duis sodales, pede vel porttitor tempus, ante sem molestie nisl, et suscipit urna diam quis lorem. Quisque lacus tortor, vestibulum at, vestibulum a, fermentum et, mauris. Nam sagittis.</p>
<br/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat pretium massa. Etiam dui sem, fringilla in, porta sed, fermentum et, nibh. Suspendisse eros. Sed iaculis elementum leo. Nam placerat felis. Sed vestibulum, nulla sit amet porta cursus, orci libero malesuada ante, eget aliquet ipsum est in elit. Aliquam magna sem, hendrerit at, viverra ut, convallis consequat, purus. Pellentesque porta condimentum libero. Nunc vulputate nisl. Nam justo. Vivamus egestas dignissim magna. Duis sodales, pede vel porttitor tempus, ante sem molestie nisl, et suscipit urna diam quis lorem. Quisque lacus tortor, vestibulum at, vestibulum a, fermentum et, mauris. Nam sagittis.</p>
<br/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat pretium massa. Etiam dui sem, fringilla in, porta sed, fermentum et, nibh. Suspendisse eros. Sed iaculis elementum leo. Nam placerat felis. Sed vestibulum, nulla sit amet porta cursus, orci libero malesuada ante, eget aliquet ipsum est in elit. Aliquam magna sem, hendrerit at, viverra ut, convallis consequat, purus. Pellentesque porta condimentum libero. Nunc vulputate nisl. Nam justo. Vivamus egestas dignissim magna. Duis sodales, pede vel porttitor tempus, ante sem molestie nisl, et suscipit urna diam quis lorem. Quisque lacus tortor, vestibulum at, vestibulum a, fermentum et, mauris. Nam sagittis.</p>
<br/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat pretium massa. Etiam dui sem, fringilla in, porta sed, fermentum et, nibh. Suspendisse eros. Sed iaculis elementum leo. Nam placerat felis. Sed vestibulum, nulla sit amet porta cursus, orci libero malesuada ante, eget aliquet ipsum est in elit. Aliquam magna sem, hendrerit at, viverra ut, convallis consequat, purus. Pellentesque porta condimentum libero. Nunc vulputate nisl. Nam justo. Vivamus egestas dignissim magna. Duis sodales, pede vel porttitor tempus, ante sem molestie nisl, et suscipit urna diam quis lorem. Quisque lacus tortor, vestibulum at, vestibulum a, fermentum et, mauris. Nam sagittis.</p>
<br/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat pretium massa. Etiam dui sem, fringilla in, porta sed, fermentum et, nibh. Suspendisse eros. Sed iaculis elementum leo. Nam placerat felis. Sed vestibulum, nulla sit amet porta cursus, orci libero malesuada ante, eget aliquet ipsum est in elit. Aliquam magna sem, hendrerit at, viverra ut, convallis consequat, purus. Pellentesque porta condimentum libero. Nunc vulputate nisl. Nam justo. Vivamus egestas dignissim magna. Duis sodales, pede vel porttitor tempus, ante sem molestie nisl, et suscipit urna diam quis lorem. Quisque lacus tortor, vestibulum at, vestibulum a, fermentum et, mauris. Nam sagittis.</p>
<br/>
</div>
</div>
</div>
</body>
</html>
<head>
<title> TEST </title>
<style rel="stylesheet" style="text/css">
*{
margin:0px;
padding: 0px;
}
body
{
background-color: blue;
}
#container
{
width: 1200px;
margin: 0px auto;
}
#left
{
background-image: url('http://www.5minds.nl/graph/ballen.png');
background-position: top left;
background-repeat: no-repeat;
height: 100%;
width: 180px;
float: left;
}
#site
{
float: left;
width: 800px;
background-color: red;
height: 100%;
}
#header
{
background-color: yellow;
height: 80px;
width: 800px;
}
#menu
{
float: left;
margin-top: 130px;
margin-left: -70px;
width: 150px;
height: 300px;
background-color: #999;
border: 1px solid black;
}
#foto
{
float: right;
margin-top: 80px;
margin-right: -100px;
width: 200px;
height: 180px;
background-color: #999;
}
</style>
<body>
<div id="container">
<div id="left"></div>
<div id="site">
<div id="header">
</div>
<div id="content">
<div id="menu"></div>
<div id="foto"></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat pretium massa. Etiam dui sem, fringilla in, porta sed, fermentum et, nibh. Suspendisse eros. Sed iaculis elementum leo. Nam placerat felis. Sed vestibulum, nulla sit amet porta cursus, orci libero malesuada ante, eget aliquet ipsum est in elit. Aliquam magna sem, hendrerit at, viverra ut, convallis consequat, purus. Pellentesque porta condimentum libero. Nunc vulputate nisl. Nam justo. Vivamus egestas dignissim magna. Duis sodales, pede vel porttitor tempus, ante sem molestie nisl, et suscipit urna diam quis lorem. Quisque lacus tortor, vestibulum at, vestibulum a, fermentum et, mauris. Nam sagittis.</p>
<br/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat pretium massa. Etiam dui sem, fringilla in, porta sed, fermentum et, nibh. Suspendisse eros. Sed iaculis elementum leo. Nam placerat felis. Sed vestibulum, nulla sit amet porta cursus, orci libero malesuada ante, eget aliquet ipsum est in elit. Aliquam magna sem, hendrerit at, viverra ut, convallis consequat, purus. Pellentesque porta condimentum libero. Nunc vulputate nisl. Nam justo. Vivamus egestas dignissim magna. Duis sodales, pede vel porttitor tempus, ante sem molestie nisl, et suscipit urna diam quis lorem. Quisque lacus tortor, vestibulum at, vestibulum a, fermentum et, mauris. Nam sagittis.</p>
<br/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat pretium massa. Etiam dui sem, fringilla in, porta sed, fermentum et, nibh. Suspendisse eros. Sed iaculis elementum leo. Nam placerat felis. Sed vestibulum, nulla sit amet porta cursus, orci libero malesuada ante, eget aliquet ipsum est in elit. Aliquam magna sem, hendrerit at, viverra ut, convallis consequat, purus. Pellentesque porta condimentum libero. Nunc vulputate nisl. Nam justo. Vivamus egestas dignissim magna. Duis sodales, pede vel porttitor tempus, ante sem molestie nisl, et suscipit urna diam quis lorem. Quisque lacus tortor, vestibulum at, vestibulum a, fermentum et, mauris. Nam sagittis.</p>
<br/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat pretium massa. Etiam dui sem, fringilla in, porta sed, fermentum et, nibh. Suspendisse eros. Sed iaculis elementum leo. Nam placerat felis. Sed vestibulum, nulla sit amet porta cursus, orci libero malesuada ante, eget aliquet ipsum est in elit. Aliquam magna sem, hendrerit at, viverra ut, convallis consequat, purus. Pellentesque porta condimentum libero. Nunc vulputate nisl. Nam justo. Vivamus egestas dignissim magna. Duis sodales, pede vel porttitor tempus, ante sem molestie nisl, et suscipit urna diam quis lorem. Quisque lacus tortor, vestibulum at, vestibulum a, fermentum et, mauris. Nam sagittis.</p>
<br/>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam volutpat pretium massa. Etiam dui sem, fringilla in, porta sed, fermentum et, nibh. Suspendisse eros. Sed iaculis elementum leo. Nam placerat felis. Sed vestibulum, nulla sit amet porta cursus, orci libero malesuada ante, eget aliquet ipsum est in elit. Aliquam magna sem, hendrerit at, viverra ut, convallis consequat, purus. Pellentesque porta condimentum libero. Nunc vulputate nisl. Nam justo. Vivamus egestas dignissim magna. Duis sodales, pede vel porttitor tempus, ante sem molestie nisl, et suscipit urna diam quis lorem. Quisque lacus tortor, vestibulum at, vestibulum a, fermentum et, mauris. Nam sagittis.</p>
<br/>
</div>
</div>
</div>
</body>
</html>
Wat doe ik fout? In IE7 en FF geeftie t gewenste resultaat...
www.demaffia.nl/IE6-2.JPG
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
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
<html>
<head>
<title> TEST </title>
<style rel="stylesheet" style="text/css">
body{
background-color: blue;
}
#nummer5 {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background-color: yellow;
}
#container {
position: relative;
margin: 0 auto;
width: 600px;
background-color: red;
}
#nummer4 {
position: relative;
height: 100%;
width: 800px;
background-color: black;
}
#nummer3 {
position: absolute;
left: -50px;
top: 50px;
width: 100px;
height: 100px;
background-color: red;
}
#nummer2 {
position: absolute;
right: -50px;
top: 50px;
width: 100px;
height: 100px;
background-color: red;
}
#nummer1{
background-color: yellow;
height: 80px;
width: 800px;
}
</style>
<body>
<div id="nummer5"></div>
<div id="container">
<div id="nummer1"></div>
<div id="nummer4">
<div id="nummer3"></div>
<div id="nummer2"></div>
</div>
</div>
</body>
</html>
<head>
<title> TEST </title>
<style rel="stylesheet" style="text/css">
body{
background-color: blue;
}
#nummer5 {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background-color: yellow;
}
#container {
position: relative;
margin: 0 auto;
width: 600px;
background-color: red;
}
#nummer4 {
position: relative;
height: 100%;
width: 800px;
background-color: black;
}
#nummer3 {
position: absolute;
left: -50px;
top: 50px;
width: 100px;
height: 100px;
background-color: red;
}
#nummer2 {
position: absolute;
right: -50px;
top: 50px;
width: 100px;
height: 100px;
background-color: red;
}
#nummer1{
background-color: yellow;
height: 80px;
width: 800px;
}
</style>
<body>
<div id="nummer5"></div>
<div id="container">
<div id="nummer1"></div>
<div id="nummer4">
<div id="nummer3"></div>
<div id="nummer2"></div>
</div>
</div>
</body>
</html>
In IE7 krijg ik ook di resultaat. In FF doet hij het wel goed.
Code (php)
1
2
3
2
3
body {
margin: 0;
}
margin: 0;
}
En je moet een doctype in je html bestand hebben. Ik zou het volgende toevoegen:
Code (php)
1
2
2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
in plaats van: <html>
ps je geeft nummer 1 en 4 een breedte van 800px mee terwijl de container, waar ze in zitten' een breedte heeft van 600px. Dit klopt niet.
Je mag de breedtes bij 1 en 4 wel helemaal weghalen. Deze divs passen zich automatisch aan aan de breedte van de container waar ze in zitten. In dit geval dus 600px.
Gewijzigd op 01/01/1970 01:00:00 door Niek Weevers
Ik was met mijn eigen code erg dichtbij. Ik moest voor IE nog een extra regeltjes plaatsen bij vlak 2 en 3 (#foto en #menu). Hetgeen ik moest toevoegen:
Code (php)
1
position: relative;
Dit kwam ik ergens tegen op internet. Maar kan iemand mij vertellen waarom dit regeltje het verschil maakt? Wat dit regeltje precies doet?
@Niek: thnx voor alle moeite :)
Kan niet duidelijker :)
Dank u handleidinghtml.nl
Gewijzigd op 01/01/1970 01:00:00 door Wouter K
Maar je moet wel de doctype toevoegen. Dit is tevens verplicht als je je site correct wilt laten valideren.