Simpel kort vraagje, border moet kleiner/groter worden n.a.v inhoud
ik ben voor school met een project bezig,
en 1 stom klein dingetje werkt nog niet,
ik heb namelijk een reeks buttons op mijn site,
en een tekst..
ik heb er een border omheen gezet, maar die past zich aan met de tekst
dus als de text 1 zinnetje is
word de border heel klein,
en staat de menubalk niet in de border maar steekt er een stuk onderuit...
ik weet niet waar ik het probleem moet oplossen,
in mijn CSS, of in mijn HTML bestand
MIJN 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
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
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
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>Project</title>
</head>
<body>
<div align="center" id="container">
<div align="center" class="header">
<img src="images/banner.jpg" width="850" height="200">
</div>
<div align="center" class="headmenu">this can be a menu</div>
<div class="content">
<br><br>
*Tekst*
</div>
<div class="leftnav">
<table border='0' cellspacing='0' cellpadding='0'>
<tr><td><a href="index.php"><img src="images/blauw/pressedhome.jpg"/></a></td></tr>
<tr><td><a href="evenementen.php"><img src="images/blauw/button2.jpg" onmouseover="this.src='images/blauw/mouseover2.jpg'" onmouseout="this.src='images/blauw/button2.jpg'"/></a></td></tr>
<tr><td><a href="verenigingen.php"><img src="images/blauw/button3.jpg" onmouseover="this.src='images/blauw/mouseover3.jpg'" onmouseout="this.src='images/blauw/button3.jpg'"/></a></td></tr>
<tr><td><a href="studenten.php"><img src="images/blauw/button4.jpg" onmouseover="this.src='images/blauw/mouseover4.jpg'" onmouseout="this.src='images/blauw/button4.jpg'"/></a></td></tr>
<tr><td><a href="beheer.php"><img src="images/blauw/button5.jpg" onmouseover="this.src='images/blauw/mouseover5.jpg'" onmouseout="this.src='images/blauw/button5.jpg'"/></a></td></tr>
</table>
</div>
<div class="footer"> "tekst" 2010</div>
</div>
</body>
</html>
MIJN CSS:
body{
background-image:url('images/groen/bggroen.jpg');
background-position: center;
background-attachment:fixed;
color: white;
}
#container{
position: static;
width: 853px;
border: 4 double #FFFFFF;
margin-top:50px;
margin-left:180;
}
.header{
width: 850px;
height: auto;
border: 2 solid #FFFFFF;
}
.headmenu{
width: 852px;
height:50;
Border: 1 solid #FFFFFF;
background: black;
}
.leftnav {
position: absolute;
left: 191px;
top: 310px;
width: 170px;
height: 250px;
border: 1 solid #FFFFFF;
background: black;
}
.content{
position:static;
margin-left:180px;
color: black;
}
.footer {
clear: both;
}
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>Project</title>
</head>
<body>
<div align="center" id="container">
<div align="center" class="header">
<img src="images/banner.jpg" width="850" height="200">
</div>
<div align="center" class="headmenu">this can be a menu</div>
<div class="content">
<br><br>
*Tekst*
</div>
<div class="leftnav">
<table border='0' cellspacing='0' cellpadding='0'>
<tr><td><a href="index.php"><img src="images/blauw/pressedhome.jpg"/></a></td></tr>
<tr><td><a href="evenementen.php"><img src="images/blauw/button2.jpg" onmouseover="this.src='images/blauw/mouseover2.jpg'" onmouseout="this.src='images/blauw/button2.jpg'"/></a></td></tr>
<tr><td><a href="verenigingen.php"><img src="images/blauw/button3.jpg" onmouseover="this.src='images/blauw/mouseover3.jpg'" onmouseout="this.src='images/blauw/button3.jpg'"/></a></td></tr>
<tr><td><a href="studenten.php"><img src="images/blauw/button4.jpg" onmouseover="this.src='images/blauw/mouseover4.jpg'" onmouseout="this.src='images/blauw/button4.jpg'"/></a></td></tr>
<tr><td><a href="beheer.php"><img src="images/blauw/button5.jpg" onmouseover="this.src='images/blauw/mouseover5.jpg'" onmouseout="this.src='images/blauw/button5.jpg'"/></a></td></tr>
</table>
</div>
<div class="footer"> "tekst" 2010</div>
</div>
</body>
</html>
MIJN CSS:
body{
background-image:url('images/groen/bggroen.jpg');
background-position: center;
background-attachment:fixed;
color: white;
}
#container{
position: static;
width: 853px;
border: 4 double #FFFFFF;
margin-top:50px;
margin-left:180;
}
.header{
width: 850px;
height: auto;
border: 2 solid #FFFFFF;
}
.headmenu{
width: 852px;
height:50;
Border: 1 solid #FFFFFF;
background: black;
}
.leftnav {
position: absolute;
left: 191px;
top: 310px;
width: 170px;
height: 250px;
border: 1 solid #FFFFFF;
background: black;
}
.content{
position:static;
margin-left:180px;
color: black;
}
.footer {
clear: both;
}
Toevoeging op 08/10/2010 11:51:45:
de border die mee moet gaan staat in de #container
en het menu waar het omgaat is .leftnav
Gelieve in het vervolg bij code, code tags te gebruiken.[/modedit]
Gewijzigd op 08/10/2010 11:53:26 door Bas IJzelendoorn
Kijk dus naar:
- float
- overflow
- clear
- min-height
Voor de meeste lay-outs heb je geen position nodig
Gr, milo
- clear
- min-height
zijn nieuw voor me,
dit is mijn 4de lesweek php, en CSS is niet zo erg veel behandeld
daarom probeer ik het met positions want die dingen die jij zei snap ik nog niet echt ...
Toevoeging op 08/10/2010 12:13:14:
het is me al gelukt :) bedankt voor de hulp!