Css problemen
Ik ben nog steeds bezig met een site voor een kapperszaak,
elke keer stuit ik nog op een aantal fouten,
nu staan alle "headmenu's" op de zelfde positie,
maar toch zet de home-pagina hem een stuk hoger :S
ook heb ik gehoord dat bij sommige grotere beeldschermen en dergelijke,
je eerst naar rechts moet scrollen om de pagina goed te zien...
ik heb al heel veel geprobeerd, maar zonder succes
kan iemand mij hiermee helpen?
Groet Jason
Toevoeging op 30/12/2010 18:20:34:
edit:
De site is (even tijdelijk gehost) www.peak121.com
De laatste menu button is nog niet gelinkt aan een pagina,
als jullie nog andere bugs vinden in een bepaalde browser, hoor ik het graag!
HTML: Result: 17 Errors, 4 warning(s)
CSS: 10 fouten
Het ziet er niet echt correct uit of hoord dat zo? " Nieuwsblok, breedte grijze achtergrond " De menu balk buiten beschouwing gelaten.
Ik heb niet in detail gekeken maar ik zie scripts en div's boven je HTML staan. Tevens is je html/css op beide pagina's niet hetzelde dus daar zou ik eerst eens naar kijken
HTML:
- Geen doctype op regel 1
- Geen html tag
- Geen head tag
- 2 keer een pagina
- inline CSS
- onnodige javascript
CSS:
- Background- kan gewoon allemaal bij elkaar
- margin kan bij elkaar in de volgorde margin: [top] [right] [bottom] [left];
- color: black niet gebruiken. Gebruik HEX waardes.
maar
HTML: Result: 17 Errors, 4 warning(s)
CSS: 10 fouten
?
hoe kan ik die goed krijgen?
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.pack.js">
</script>
<script type="text/javascript" src="simplegallery.js">
//<![CDATA[
/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [517, 175], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["slideafbeeldingen/slide1.jpg", "http://www.peak121.com", "_new", "voobeeld 1"],
["slideafbeeldingen/slide2.jpg", "http://www.peak121.com", "_new", "voorbeeld 2"],
["slideafbeeldingen/slide3.jpg", "http://www.peak121.com", "_new", "voorbeeld 3"],
["slideafbeeldingen/slide4.jpg", "http://www.peak121.com", "_new", "voorbeeld 4"]
],
autoplay: [true, 3200, 10], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1400, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})
//]]>
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>
Kapsalon Ineke
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="bannerslide">
<div id="simplegallery1"></div>
</div>
<div class="headmenu">
<img src="afbeeldingen/button1.png" alt="#########" /> <a href="contact.php"><img src="afbeeldingen/button2a.png" onmouseover=
"this.src='afbeeldingen/button2b.png'" onmouseout="this.src='afbeeldingen/button2a.png'" alt="#########" /></a> <a href="foto's.php"><img src=
"afbeeldingen/button3a.png" onmouseover="this.src='afbeeldingen/button3b.png'" onmouseout="this.src='afbeeldingen/button3a.png'" alt=
"#########" /></a> <img src="afbeeldingen/button4a.png" onmouseover="this.src='afbeeldingen/button4b.png'" onmouseout=
"this.src='afbeeldingen/button4a.png'" alt="#########" />
</div>
<div id="container2">
<p align="center" style="color:#4b5053;font-family:verdana,arial;font-weight:bold;font-size:30px">
Welkom op de site van Kapsalon Ineke!<br />
<br />
</p>
<p align="left" style="margin-left:20px;margin-right:20px;color:#4b5053;font-family:verdana,arial;font-weight:bold;font-size:15px">
Hair Extensions!<br />
</p>
<p align="left" style="margin-left:20px;margin-right:20px;color:#4b5053;font-family:verdana,arial;">
Wij zijn al 25 jaar specialist in Hairextensions.<br />
Wij geven 4 weken volledige (schriftelijke) garantie,<br />
en maken iedere 4 weken een gratis controle afspraak.
</p><br />
<br />
<p align="left" style="margin-left:20px;margin-right:20px;color:#4b5053;font-family:verdana,arial;font-weight:bold;font-size:15px">
Wat is Great Lengths:
</p>
<p align="left" style="margin-left:20px;margin-right:20px;color:#4b5053;font-family:verdana,arial;">
Great Lengths is een haarvermeerderingssysteem dat bestaat uit hairextensions,<br />
Hairextensions zijn strengen haar en worden afzonderlijk aangebracht.<br />
De strengen haar hebben drie diktes en vijf lengtes van 20- 30- 40- 50- en 60 cm.<br />
Great Lengths is van top kwaliteit, herplaatsbaar en wordt door ons al vele jaren toegepast.<br />
Ook verkrijgbaar in gekruld haar.<br />
De prijzen staan onder in deze pagina.
</p><br />
<img style="width:170px;height:227px;" src="afbeeldingen/image1.jpg" alt="#########" /><br />
<br />
</div>
<div class="newsbg">
<img style="position:absolute;right:100px;top:350px;" src="afbeeldingen/news.jpg" alt="#########" />
</div>
<div class="news">
<p style="font-size:10px;font-weight:bold;color:#991a1a;">
Nieuwe Site!
</p><br />
Eindelijk hier is ie dan... De nieuwe site van kapsalon ineke! We zijn allemaal erg blij met de nieuwe site...
<p align="right" style="color:#991a1a;">
meer>>
</p>
<p>
<img style="padding:0px;margin-left:-5px;width:230px" src="afbeeldingen/Stripe.jpg" alt="#########" /> <!--hier een nieuw nieuwsbericht-->
</p>
<p style="font-size:10px;font-weight:bold;color:#991a1a">
Nieuwe Site!
</p><br />
Eindelijk hier is ie dan... De nieuwe site van kapsalon ineke! We zijn allemaal erg blij met de nieuwe site...
<p align="right" style="color:#991a1a;">
meer>>
</p>
<p>
<img style="padding:0px;margin-left:-5px;width:230px" src="afbeeldingen/Stripe.jpg" alt="#########" /> <!--hier eindigt het nieuwsbericht-->
<!--hier een nieuw nieuwsbericht-->
</p>
<p style="font-size:10px;font-weight:bold;color:#991a1a;">
Nieuwe Site!
</p><br />
Eindelijk hier is ie dan... De nieuwe site van kapsalon ineke! We zijn allemaal erg blij met de nieuwe site...
<p align="right" style="color:#991a1a;">
meer>>
</p>
<p>
<img style="padding:0px;margin-left:-5px;width:230px" src="afbeeldingen/Stripe.jpg" alt="#########" /> <!--hier eindigt het nieuwsbericht-->
<!--hier een nieuw nieuwsbericht-->
</p>
<p style="font-size:10px;font-weight:bold;color:#991a1a;">
Nieuwe Site!
</p><br />
Eindelijk hier is ie dan... De nieuwe site van kapsalon ineke! We zijn allemaal erg blij met de nieuwe site...
<p align="right" style="color:#991a1a;">
meer>>
</p>
<p>
<img style="padding:0px;margin-left:-5px;width:230px" src="afbeeldingen/Stripe.jpg" alt="#########" /> <!--hier eindigt het nieuwsbericht-->
<!--hier een nieuw nieuwsbericht-->
</p>
<p style="font-size:10px;font-weight:bold;color:#991a1a;">
Nieuwe Site!
</p><br />
Eindelijk hier is ie dan... De nieuwe site van kapsalon ineke! We zijn allemaal erg blij met de nieuwe site...
<p align="right" style="color:#991a1a;">
meer>>
</p>
<p>
<img style="padding:0px;margin-left:-5px;width:230px" src="afbeeldingen/Stripe.jpg" alt="#########" /> <!--hier eindigt het nieuwsbericht-->
</p>
</div>
<div class="footer">
Kapsalon Ineke Wesselernering 39 7544 JC Enschede tel:053 4762424
</div><!--Design by: </p><a href="http://www.peak121.com">peak121.com©</a>-->
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.pack.js">
</script>
<script type="text/javascript" src="simplegallery.js">
//<![CDATA[
/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of main gallery container,
dimensions: [517, 175], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
imagearray: [
["slideafbeeldingen/slide1.jpg", "http://www.peak121.com", "_new", "voobeeld 1"],
["slideafbeeldingen/slide2.jpg", "http://www.peak121.com", "_new", "voorbeeld 2"],
["slideafbeeldingen/slide3.jpg", "http://www.peak121.com", "_new", "voorbeeld 3"],
["slideafbeeldingen/slide4.jpg", "http://www.peak121.com", "_new", "voorbeeld 4"]
],
autoplay: [true, 3200, 10], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 1400, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
},
onslide:function(curslide, i){ //event that fires after each slide is shown
//Keyword "this": references current gallery instance
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})
//]]>
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>
Kapsalon Ineke
</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="bannerslide">
<div id="simplegallery1"></div>
</div>
<div class="headmenu">
<img src="afbeeldingen/button1.png" alt="#########" /> <a href="contact.php"><img src="afbeeldingen/button2a.png" onmouseover=
"this.src='afbeeldingen/button2b.png'" onmouseout="this.src='afbeeldingen/button2a.png'" alt="#########" /></a> <a href="foto's.php"><img src=
"afbeeldingen/button3a.png" onmouseover="this.src='afbeeldingen/button3b.png'" onmouseout="this.src='afbeeldingen/button3a.png'" alt=
"#########" /></a> <img src="afbeeldingen/button4a.png" onmouseover="this.src='afbeeldingen/button4b.png'" onmouseout=
"this.src='afbeeldingen/button4a.png'" alt="#########" />
</div>
<div id="container2">
<p align="center" style="color:#4b5053;font-family:verdana,arial;font-weight:bold;font-size:30px">
Welkom op de site van Kapsalon Ineke!<br />
<br />
</p>
<p align="left" style="margin-left:20px;margin-right:20px;color:#4b5053;font-family:verdana,arial;font-weight:bold;font-size:15px">
Hair Extensions!<br />
</p>
<p align="left" style="margin-left:20px;margin-right:20px;color:#4b5053;font-family:verdana,arial;">
Wij zijn al 25 jaar specialist in Hairextensions.<br />
Wij geven 4 weken volledige (schriftelijke) garantie,<br />
en maken iedere 4 weken een gratis controle afspraak.
</p><br />
<br />
<p align="left" style="margin-left:20px;margin-right:20px;color:#4b5053;font-family:verdana,arial;font-weight:bold;font-size:15px">
Wat is Great Lengths:
</p>
<p align="left" style="margin-left:20px;margin-right:20px;color:#4b5053;font-family:verdana,arial;">
Great Lengths is een haarvermeerderingssysteem dat bestaat uit hairextensions,<br />
Hairextensions zijn strengen haar en worden afzonderlijk aangebracht.<br />
De strengen haar hebben drie diktes en vijf lengtes van 20- 30- 40- 50- en 60 cm.<br />
Great Lengths is van top kwaliteit, herplaatsbaar en wordt door ons al vele jaren toegepast.<br />
Ook verkrijgbaar in gekruld haar.<br />
De prijzen staan onder in deze pagina.
</p><br />
<img style="width:170px;height:227px;" src="afbeeldingen/image1.jpg" alt="#########" /><br />
<br />
</div>
<div class="newsbg">
<img style="position:absolute;right:100px;top:350px;" src="afbeeldingen/news.jpg" alt="#########" />
</div>
<div class="news">
<p style="font-size:10px;font-weight:bold;color:#991a1a;">
Nieuwe Site!
</p><br />
Eindelijk hier is ie dan... De nieuwe site van kapsalon ineke! We zijn allemaal erg blij met de nieuwe site...
<p align="right" style="color:#991a1a;">
meer>>
</p>
<p>
<img style="padding:0px;margin-left:-5px;width:230px" src="afbeeldingen/Stripe.jpg" alt="#########" /> <!--hier een nieuw nieuwsbericht-->
</p>
<p style="font-size:10px;font-weight:bold;color:#991a1a">
Nieuwe Site!
</p><br />
Eindelijk hier is ie dan... De nieuwe site van kapsalon ineke! We zijn allemaal erg blij met de nieuwe site...
<p align="right" style="color:#991a1a;">
meer>>
</p>
<p>
<img style="padding:0px;margin-left:-5px;width:230px" src="afbeeldingen/Stripe.jpg" alt="#########" /> <!--hier eindigt het nieuwsbericht-->
<!--hier een nieuw nieuwsbericht-->
</p>
<p style="font-size:10px;font-weight:bold;color:#991a1a;">
Nieuwe Site!
</p><br />
Eindelijk hier is ie dan... De nieuwe site van kapsalon ineke! We zijn allemaal erg blij met de nieuwe site...
<p align="right" style="color:#991a1a;">
meer>>
</p>
<p>
<img style="padding:0px;margin-left:-5px;width:230px" src="afbeeldingen/Stripe.jpg" alt="#########" /> <!--hier eindigt het nieuwsbericht-->
<!--hier een nieuw nieuwsbericht-->
</p>
<p style="font-size:10px;font-weight:bold;color:#991a1a;">
Nieuwe Site!
</p><br />
Eindelijk hier is ie dan... De nieuwe site van kapsalon ineke! We zijn allemaal erg blij met de nieuwe site...
<p align="right" style="color:#991a1a;">
meer>>
</p>
<p>
<img style="padding:0px;margin-left:-5px;width:230px" src="afbeeldingen/Stripe.jpg" alt="#########" /> <!--hier eindigt het nieuwsbericht-->
<!--hier een nieuw nieuwsbericht-->
</p>
<p style="font-size:10px;font-weight:bold;color:#991a1a;">
Nieuwe Site!
</p><br />
Eindelijk hier is ie dan... De nieuwe site van kapsalon ineke! We zijn allemaal erg blij met de nieuwe site...
<p align="right" style="color:#991a1a;">
meer>>
</p>
<p>
<img style="padding:0px;margin-left:-5px;width:230px" src="afbeeldingen/Stripe.jpg" alt="#########" /> <!--hier eindigt het nieuwsbericht-->
</p>
</div>
<div class="footer">
Kapsalon Ineke Wesselernering 39 7544 JC Enschede tel:053 4762424
</div><!--Design by: </p><a href="http://www.peak121.com">peak121.com©</a>-->
</body>
</html>
De rest mag je met wat handwerk verrichten. ;)
Gewijzigd op 30/12/2010 20:36:35 door Bart V B
Jason van der Zeeuw op 30/12/2010 20:28:01:
ik zal allereerst dat van Wouter J even goed maken,
maar
HTML: Result: 17 Errors, 4 warning(s)
CSS: 10 fouten
?
hoe kan ik die goed krijgen?
maar
HTML: Result: 17 Errors, 4 warning(s)
CSS: 10 fouten
?
hoe kan ik die goed krijgen?
Een groot deel van mijn fouten zijn ook de fouten van de validator.
Stuur eventueel maar in een pm
aangezien dit mijn eerste site is die ik zelf ook echt online zet, waardeer ik jullie hulp heel erg :)!
bedankt tot zover allemaal!
Het is niet verstandig om je e-mail adres op een publiek forum te posten, spambots gebruiken het dan maar wat graag![/modedit]
Gewijzigd op 30/12/2010 23:32:50 door Joren de Wit
Binnen no time heb je een berg spam in je mailbox zitten.
Tikkes C:
lees eens alles na op w3schools.com
Alles? Dan kan je meteen php, mysql, javascript, html en css!
