Toon posts:

[CSS] Height

Pagina: 1
Acties:

woensdag 23 november 2005 18:59

Acties:
  • Maffen
  • Registratie: Maart 2004
  • Laatst online: 23-04 15:44

Maffen

Topicstarter
Ik probeer een site te maken zonder tables, dus met div's...
Maar het lukt mij nog niet echt.
Nu, mijn grootste probleem is, de site toont heel het scherm mooi, tot je moet scrollen als de tekst langer is dan dat je beeld hoog is, mss slecht uitgelegt, maar een foto zegt meer dan 1000 woorden, dus hier het vb.
http://maf.hopto.org/~bart/maf/

Zoals je ziet stopt mijn site opeens, maar loopt de rest door...
Ook zit ik nog met het probleem dat mijn #tekst id z'n width niet wilt nemen, maar dit moet ik nog onderzoeken. Ok crisp, dank u, was eigenlijk een domme fout :/ :)
Weet iemand waar mijn probleem zit met die height?

Mijn html:
code:
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

<?php
include('config.inc.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>.: Maf-Lan 1 :..: 4-5-6 Januari:..: <?=$title?> :.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css">
</head>

<body>

<div class="container">
<div id="header"></div><div id="menu"><center>
    <a href="index.php">[img]"images/nieuws.png"[/img]</a><a href="index.php?page=info">[img]"images/info.png"[/img]</a><a href="index.php?page=foto">[img]"images/foto.png"[/img]</a><a href="http://maf.hopto.org/twforum/" target="_blank">[img]"images/forum.png"[/img]</a>
</center></div><div id="mo"></div><div id="msl"></div><div id="msr"></div>
<div id="back"></div>
<div id="sl"></div>
<div id="sr"></div>
<div id="footer"></div><div id="tekst">
  <p>boe</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>test</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>test</p>
  <?php include($include); ?></div>
</div>
</body>
</html>


Mijn css-code:
code:
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

/* CSS Document */
div {
    margin: 0px;
    padding: 0px;
}
div.container {
    position: relative;
    margin: 0 auto;
    margin-right: auto;
    height: 100%;
    width: 706px;
}
#header {
    width: 640px;
    height: 174px;
    position: absolute;
    left: 33px;
    top: 0px;
    background-image: url(images/header.png);
    z-index: 2;
}
#menu {
    width: 640px;
    height: 27px;
    position: absolute;
    left: 33px;
    top: 174px;
    z-index: 2;
    background-image:url(images/mbg.png);
}
#mo {
    width: 640px;
    height: 7px;
    position: absolute;
    left: 33px;
    top: 201px;
    z-index: 3;
    background-image:url(images/mo.png);
    font-size: 1px;
}
#msl {
    width: 33px;
    height: 56px;
    position: absolute;
    left: 0px;
    top: 160px;
    z-index: 3;
    background-image:url(images/msl.png);
}
#msr {
    width: 33px;
    height: 56px;
    position: absolute;
    left: 673px;
    top: 160px;
    z-index: 3;
    background-image:url(images/msr.png);
}
#back {
    width: 640px;
    height: 100%;
    position: absolute;
    left:33px;
    top: 0;
    background-image: url(images/back.png);
    z-index: 1;
}
#sl {
    width: 33px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-image: url(images/sl.png);
    z-index: 2;
}
#sr {
    width: 33px;
    height: 100%;
    position: absolute;
    left: 673px;
    top: 0;
    background-image: url(images/sr.png);
    z-index: 2;
}
#footer {
    width: 640px;
    height: 17px;
    position: absolute;
    left: 33px;
    bottom: 0px;
    background-image: url(images/footer.png);
    z-index: 2;
}
#tekst {
    width: 600 px;
    position: absolute;
    background-color: #47513c;
    border: 5px;
    border-width: 5px;
    border-color: #6d8101;
    left: 38px;
    top: 210px;
    z-index: 3;
    text-align:left;
    font: Verdana;
    font-size: 14px;
    color: #427093;
}
body, html {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background-image: url(images/bg.png);
    text-align: center;
}

[ Voor 18% gewijzigd door Maffen op 23-11-2005 19:11 ]

woensdag 23 november 2005 19:07

Acties:
  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:00

crisp

Devver

Pixelated

je maakt je container ook net zo hoog als de viewport; de rest is overflow.

vwb je #tekst: haal die spatie eens weg tussen 600 en px;

* crisp fluit ook nog even "waar komen jullie toch vandaan?"
oftewel: divs zijn geen vervanging voor tables; gebruik liever HTML elementen die passen bij je content: headers, lists, paragrafen etcetera.

[ Voor 10% gewijzigd door crisp op 23-11-2005 19:09 ]

Intentionally left blank

Reageer