Pagina te laag
http://esmargraten.nl
Zoals je ziet is het textblok en het menu te laag in verhouding met het logo (Wat nog aangepast wordt)
hier is mijn relevante 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
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
/* Header */
#header {
width: 700px;
height: 220px;
margin: 0 auto;
background: url(images/img02.jpg) no-repeat right top;
}
/* Logo */
#logo {
float: left;
width: 220px;
height: 220px;
background: #AD1011 url(images/img03.jpg);
}
#logo h1, #logo h2 {
margin: 0;
text-transform: lowercase;
text-align: center;
font-weight: normal;
}
#logo h1 {
padding: 120px 0 0 0;
background: url(images/img04.jpg) no-repeat 50% 30px;
letter-spacing: -1px;
font-size: 36px;
}
#logo h2 {
font-size: 18px;
}
#logo a {
text-decoration: none;
color: #FFFFFF;
}
/* Page */
#page {
width: 700px;
margin: 0 auto;
}
/* Content */
#content {
float: right;
width: 430px;
padding: 20px;
background: #FFFFFF url(images/img07.gif) no-repeat left bottom;
}
/* Sidebar */
#sidebar {
float: left;
width: 220px;
padding-top: 10px;
}
#sidebar a {
color: #3699E4;
}
#sidebar ul {
margin-left: 0;
padding-left: 0;
list-style: none;
font-size: 92%;
}
#sidebar ul li {
padding: 5px 14px;
background: url(images/img13.gif) no-repeat 0px 12px;
border-top: 1px solid #0B0B0B;
}
#sidebar ul li.first {
border: none;
}
#sidebar ul li h2 {
margin: 0;
font-size: 100%;
}
#sidebar ul li h3 {
margin: 0;
font-size: 92%;
}
#sidebar ul li p {
margin: 0;
}
.boxed {
margin-bottom: 10px;
background: #000000 url(images/img10.gif) no-repeat left bottom;
}
.boxed .title {
height: 30px;
margin: 0;
padding: 10px 0 0 10px;
background: #5EB2ED url(images/img08.jpg) no-repeat;
font-size: 16px;
font-weight: bold;
color: #000000;
}
.boxed .content {
padding: 15px;
background: url(images/img09.gif) repeat-x;
#header {
width: 700px;
height: 220px;
margin: 0 auto;
background: url(images/img02.jpg) no-repeat right top;
}
/* Logo */
#logo {
float: left;
width: 220px;
height: 220px;
background: #AD1011 url(images/img03.jpg);
}
#logo h1, #logo h2 {
margin: 0;
text-transform: lowercase;
text-align: center;
font-weight: normal;
}
#logo h1 {
padding: 120px 0 0 0;
background: url(images/img04.jpg) no-repeat 50% 30px;
letter-spacing: -1px;
font-size: 36px;
}
#logo h2 {
font-size: 18px;
}
#logo a {
text-decoration: none;
color: #FFFFFF;
}
/* Page */
#page {
width: 700px;
margin: 0 auto;
}
/* Content */
#content {
float: right;
width: 430px;
padding: 20px;
background: #FFFFFF url(images/img07.gif) no-repeat left bottom;
}
/* Sidebar */
#sidebar {
float: left;
width: 220px;
padding-top: 10px;
}
#sidebar a {
color: #3699E4;
}
#sidebar ul {
margin-left: 0;
padding-left: 0;
list-style: none;
font-size: 92%;
}
#sidebar ul li {
padding: 5px 14px;
background: url(images/img13.gif) no-repeat 0px 12px;
border-top: 1px solid #0B0B0B;
}
#sidebar ul li.first {
border: none;
}
#sidebar ul li h2 {
margin: 0;
font-size: 100%;
}
#sidebar ul li h3 {
margin: 0;
font-size: 92%;
}
#sidebar ul li p {
margin: 0;
}
.boxed {
margin-bottom: 10px;
background: #000000 url(images/img10.gif) no-repeat left bottom;
}
.boxed .title {
height: 30px;
margin: 0;
padding: 10px 0 0 10px;
background: #5EB2ED url(images/img08.jpg) no-repeat;
font-size: 16px;
font-weight: bold;
color: #000000;
}
.boxed .content {
padding: 15px;
background: url(images/img09.gif) repeat-x;
Dit is dus niet de volledige code. als jullie meer nodig hebben hoor ik het wel
nog even het gedeelte dat ik in php gebruik
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="page">
<div id="content">
<div>
PAGINA
<div id=\"sidebar\">
<div id=\"news\" class=\"boxed\">
<h2 class=\"title\">{$row2['catagorie']}</h2>
<div class=\"content\">
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="page">
<div id="content">
<div>
PAGINA
<div id=\"sidebar\">
<div id=\"news\" class=\"boxed\">
<h2 class=\"title\">{$row2['catagorie']}</h2>
<div class=\"content\">
#header {
width: 700px;
height: 220px;
margin: 0 auto;
background: url(images/img02.jpg) no-repeat right top;
}
maar je afbeelding heeft maar een hoogte van 103px
dus als je height: 103px;
Zet komt de menu tegen de header
<!--
body {
margin-top: 0px;
}
-->
</style>
Dit heb je al geplaatst, heb je meschien niet een <br /> er staan ? Of je tabel of div geen goede verhouding ?