Header blijft staan, maar overlapt een ander stuk
Ik zit met een probleem, ik heb een header en die moet steeds zichtbaar blijven.
Dus die moet blijven staan, ook als je naar beneden scrolt. Na lang zoeken is me dat al gelukt ;)
Probleem is nu, dat mijn header een stuk overlapt, waardoor je een deel niet kunt zien, mijn vraag is nu, hoe los ik dat op?
index.php
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
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
<div id="header">
<table border="0" cellspacing="1">
<tr>
<td>
<?logo();?>
</td>
<td>
<div id="menu">
<ul>
<center>
<li class="active">
<a href="#content-index">Home</a>
</li>
<li>
<a href="#content-gastenboek">Gastenboek</a>
</li>
<li>
<a href="#content-geschiedenis">Geschiedenis</a>
</li>
<li>
<a href="#content-contact">Contact</a>
</li>
</center>
</ul>
</div>
</td>
<td width="175px">
<div id="language">
<ul>
<li>
<img src="img/nederlan.gif" height="15" width="20"> <a href="">Nederlands</a>
</li>
<li>
<img src="img/frans.gif" height="15" width="20"> <a href="">Frans</a>
</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
<table border="0" cellspacing="1">
<tr>
<td>
<?logo();?>
</td>
<td>
<div id="menu">
<ul>
<center>
<li class="active">
<a href="#content-index">Home</a>
</li>
<li>
<a href="#content-gastenboek">Gastenboek</a>
</li>
<li>
<a href="#content-geschiedenis">Geschiedenis</a>
</li>
<li>
<a href="#content-contact">Contact</a>
</li>
</center>
</ul>
</div>
</td>
<td width="175px">
<div id="language">
<ul>
<li>
<img src="img/nederlan.gif" height="15" width="20"> <a href="">Nederlands</a>
</li>
<li>
<img src="img/frans.gif" height="15" width="20"> <a href="">Frans</a>
</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
style.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
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
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
html, body {
font-family: 'Aladin', Arial, Helvetica, sans-serif;
padding: 0px;
margin: 0px;
background-color: #8a8a8a;
}
/*start-header*/
#header{
display: block;
height: 150px;
width: 100%;
background-color: #848484;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
table{
padding: 75px auto;
}
#logo{
float: left;
margin: 10px;
padding-top:20px;
}
#menu{
/*width:940px;*/
width:100%;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:-10px;
text-align:center;
float: right;
}
#menu ul{
margin-left:7px;
}
#menu ul li{
display:inline;
padding-left: 7px;
padding-right: 7px;
}
#menu ul li a{
color:#FFFFFF;
text-decoration:none;
font-size:25px;
font-weight:bold;
}
#menu ul li a:hover{
color:#000000;
text-decoration:none;
font-size:27px;
font-weight:bold;
}
#menu li.active a{
color: #000000;
text-decoration: none;
font-size:27px;
}
#language{
margin: 5px;
}
#language ul li{
display:inline;
padding-left: 5px;
padding-right: 5px;
}
#language ul li a{
color:#FFFFFF;
text-decoration:none;
font-size:18px;
font-weight:bold;
}
#language ul li a:hover{
color:#000000;
text-decoration:none;
font-size:19px;
font-weight:bold;
}
/*Einde-header*/
font-family: 'Aladin', Arial, Helvetica, sans-serif;
padding: 0px;
margin: 0px;
background-color: #8a8a8a;
}
/*start-header*/
#header{
display: block;
height: 150px;
width: 100%;
background-color: #848484;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
table{
padding: 75px auto;
}
#logo{
float: left;
margin: 10px;
padding-top:20px;
}
#menu{
/*width:940px;*/
width:100%;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:-10px;
text-align:center;
float: right;
}
#menu ul{
margin-left:7px;
}
#menu ul li{
display:inline;
padding-left: 7px;
padding-right: 7px;
}
#menu ul li a{
color:#FFFFFF;
text-decoration:none;
font-size:25px;
font-weight:bold;
}
#menu ul li a:hover{
color:#000000;
text-decoration:none;
font-size:27px;
font-weight:bold;
}
#menu li.active a{
color: #000000;
text-decoration: none;
font-size:27px;
}
#language{
margin: 5px;
}
#language ul li{
display:inline;
padding-left: 5px;
padding-right: 5px;
}
#language ul li a{
color:#FFFFFF;
text-decoration:none;
font-size:18px;
font-weight:bold;
}
#language ul li a:hover{
color:#000000;
text-decoration:none;
font-size:19px;
font-weight:bold;
}
/*Einde-header*/
Hoop dat er iemand mij kan helpen?
Gewijzigd op 14/04/2014 21:43:09 door Webmaster Robbe
Waarom heb je midden in je pagina stukken php staan (query, mail)?
Waarom gebruik je geen mysqli (of PDO)? mysql is deprecated.
Waarom regel 78/80 aanmaken? Je kunt de velden toch direct opnemen in je output?
Regel 143/145 zijn ook wat zinloos. Beveiliging doe je in je query (mysqli_real_escape_string).
Waarom controleer je maar op 1 invulveld? Controleer in 1x alle (verplichte) velden en toon in 1x wat er niet goed is. Laat gelijk het formulier zien met de reeds ingevulde gegevens.
Waarom nieuwe variabelen aanmaken bij het versturen van de mail (regel 272/276)?
Waarom ga je er van uit dat hetgeen ingevoerd is ook betrouwbaar is. Vertrouw nooit de input van een gebruiker. Nooit. Altijd controleren (en als het even kan niet alleen of er iets is ingevuld) en als je de gegevens gebruikt, zorg dan voor beveiliging.
Haal je mailadres even uit je post. ;-)
Volgens mij mist er bij de manier waarop je mail gebruikt ook nog wel wat (headers). Kijk om het jezelf makkelijk(er) te maken naar phpmailer of swiftmailer.
Waarom een formulier / layout van een pagina in een tabel-vorm en het gebruik van inline-opmaak? Dat is niet meer van deze tijd. Zoek eens op HTML5, css.
Kortom: voor ik zou gaan zoeken naar een oplossing van je header, zou ik eerst zorgen dat de rest van de code klopt. Mogelijk dat die header dan ook is/wordt opgelost.
Heb je enige kennis? Of heb je iets moois bedacht en probeer je nu maar gelijk in het diepe te springen en hoop je dat het allemaal wel goed komt? Krijg dat idee een beetje gezien de topics die je start.
Gewijzigd op 14/04/2014 21:22:12 door Obelix Idefix
Bedankt voor je 'kritische' reactie.
Heb even stuk code laten zien die eigenlijk echt nodig is :)
Ik ga die aanpassingen aanbrengen en eens zien wat dat geeft.
Alvast bedankt!