vaste positie div box
Op zich werkt dit goed alleen als ik er een venster van maak binnen windows en deze verklein tot minder dan de breedte van 996 px (content) , schuift de box toch net nog een beetje naar rechts en dit vind ik jammer. wat kan ik hier aan doen, ben nog niet zo ervaren met css, dus alle tips zijn welkom.
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
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
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<style>
DIV {overflow: hidden;}
body {
padding: 0;
margin: 0;
width: 100%;
height:820;
display: table;
background-color: #ffffff;
background-image: url(achtergrond.jpg);
background-repeat: no-repeat;
background-position: center -9px;
}
#content {
width: 996px;
height:800px;
margin: 0 auto 0;
overflow: hidden;
}
#box1 {
position:relative;
left: 560px;
height: 196px;
width: 280px;
text-align: right;
top: 188px;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-color: #F00;
border-right-color: #F00;
border-bottom-color: #F00;
border-left-color: #F00;
}
</style>
</head>
<body>
<div id="content">
<div id="box1">
<ul id="menu2">
<br /><a href="#">test1<span class="text"><br /> bericht1</span>
</a><br />
<a href="#">test2<span class="text"><br /> bericht2</span>
</a><br />
<a href="#">test3<span class="text"><br /> bericht3</span>
</a><br />
</ul></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<style>
DIV {overflow: hidden;}
body {
padding: 0;
margin: 0;
width: 100%;
height:820;
display: table;
background-color: #ffffff;
background-image: url(achtergrond.jpg);
background-repeat: no-repeat;
background-position: center -9px;
}
#content {
width: 996px;
height:800px;
margin: 0 auto 0;
overflow: hidden;
}
#box1 {
position:relative;
left: 560px;
height: 196px;
width: 280px;
text-align: right;
top: 188px;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-color: #F00;
border-right-color: #F00;
border-bottom-color: #F00;
border-left-color: #F00;
}
</style>
</head>
<body>
<div id="content">
<div id="box1">
<ul id="menu2">
<br /><a href="#">test1<span class="text"><br /> bericht1</span>
</a><br />
<a href="#">test2<span class="text"><br /> bericht2</span>
</a><br />
<a href="#">test3<span class="text"><br /> bericht3</span>
</a><br />
</ul></div>
</div>
</body>
</html>
Gewijzigd op 19/12/2010 19:25:11 door Michel D
Gnotrgnotr gnotrgnotr op 19/12/2010 19:38:14:
een foto?
- kan je de rest misschien in photoshop gaan doen? dan hoef je niet zo snel tegen deze problemen op te komen
- #content id is niet afgesloten
Dit is nu mijn 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
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
<!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">
<head>
<title>Naamloos document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div {
overflow: hidden;
}
body {
padding: 0;
margin: 0;
width: 100%;
height:820;
display: table;
background-color: #ffffff;
background-image: url('images/achtergrond.jpg');
background-repeat: no-repeat;
background-position: center -9px;
}
#content {
width: 996px;
height:800px;
margin: 0 auto 0;
overflow: hidden;
}
#box1 {
position:relative;
left: 560px;
height: 196px;
width: 280px;
text-align: right;
top: 188px;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-color: #F00;
border-right-color: #F00;
border-bottom-color: #F00;
border-left-color: #F00;
}
</style>
</head>
<body>
<div id="content">
<div id="box1">
<ul id="menu2">
<br /><a href="#">test1<span class="text"><br /> bericht1</span>
</a><br />
<a href="#">test2<span class="text"><br /> bericht2</span>
</a><br />
<a href="#">test3<span class="text"><br /> bericht3</span>
</a><br />
</ul></div>
</div>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Naamloos document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div {
overflow: hidden;
}
body {
padding: 0;
margin: 0;
width: 100%;
height:820;
display: table;
background-color: #ffffff;
background-image: url('images/achtergrond.jpg');
background-repeat: no-repeat;
background-position: center -9px;
}
#content {
width: 996px;
height:800px;
margin: 0 auto 0;
overflow: hidden;
}
#box1 {
position:relative;
left: 560px;
height: 196px;
width: 280px;
text-align: right;
top: 188px;
border-top-style: dotted;
border-right-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-top-color: #F00;
border-right-color: #F00;
border-bottom-color: #F00;
border-left-color: #F00;
}
</style>
</head>
<body>
<div id="content">
<div id="box1">
<ul id="menu2">
<br /><a href="#">test1<span class="text"><br /> bericht1</span>
</a><br />
<a href="#">test2<span class="text"><br /> bericht2</span>
</a><br />
<a href="#">test3<span class="text"><br /> bericht3</span>
</a><br />
</ul></div>
</div>
</div>
</body>
</html>
Gewijzigd op 20/12/2010 10:24:25 door Maarten PHP
Gnotrgnotr gnotrgnotr op 20/12/2010 10:19:34:
- #content id is niet afgesloten
Die was wel afgesloten. Je hebt nu een afsluitings div teveel geplaatst. Daarnaast zie ik het nut niet in om een lijst te maken (ul) en daar vervolgens geen list items (li) in te zetten.
Gewijzigd op 20/12/2010 10:32:05 door Ozzie PHP