Website ziet er niet het zelfde uit op sommige computers
Ik zit met een irritant probleem.
Ik heb ontdekt dat me website op 'sommige' computers er niet het zelfde uit ziet.
Hoe kan ik dit oplossen?
De foto staat in het midden en de forms staan onder de foto wat niet moet.
De webpagina moet er zo uit zien: http://i42.tinypic.com/2vkcbjc.png
Ziet die zo bij jullie er ook uit?
http://www.mybuddies.nl
Alvast bedankt.
Gewijzigd op 09/01/2012 16:07:31 door Remco van Akker
Edit 16.08:
Ik heb ook op www.mybuddies.nl gekeken, en je kan er zelf al achter komen wat het probleem is. Maak het venster van je browser maar een breder of smaller: alles komt dan onder elkaar te staan, zelfs je menu! Je moet dus de gehele pagina in een div (of wrapper of hoe je het ook wilt noemen) zetten en deze een vaste breedte en een minimum hoogte geven.
Gewijzigd op 09/01/2012 16:09:20 door Andre Sep
Ik ben vergeten de website er neer te zetten!
http://www.mybuddies.nl
Je moet kijken of die er zelfde uit ziet als die afbeelding.
Ik was eigenlijk een beetje aan het stangen, ik heb mijn reactie gewijzigd: zie hierboven.
Dus in plaats van width: 100%; kan ik beter width: 1000px; gebruiken ofzo?
Ik laat mijn css code wel zien:
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
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
@charset "utf-8";
/* CSS Document */
body {
background-repeat:repeat;
font-family:Tahoma;
font-size:12px;
padding:0;
margin:0;
}
#header {
background-image: url(http://www.mybuddies.nl/img/header.png);
background-repeat: repeat-x;
width: 100%;
heigth: 120px;
margin: 0px auto;
}
* {
margin: 0;
padding: 0;
}
#menu {
background-image: url(http://www.mybuddies.nl/img/menu.png);
width: auto;
background-repeat:repeat-x;
}
ul {
list-style-type: none;
height: 50px;
margin-left: 190px;
}
li {
float: left;
}
ul a {
padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 50px;
text-decoration: none;
font-family:Verdana, Geneva, sans-serif;
font-size: 12px;
color: #371C1C;
}
ul a:hover {
color: #FFF;
background-color: #069;
}
#wrapper {
margin-left: 190px;
margin-top: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: left;
}
#inloggen {
margin: 0px 35px;
background-image: url(http://www.mybuddies.nl/img/bg_login.png);
background-repeat: no-repeat;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
float: left;
padding: 15px 15px 15px;
}
#float {
float: left;
}
#login_button {
float: left;
margin-left: 20px;
}
#registreren {
margin: 15px 35px;
background-image: url(http://www.mybuddies.nl/img/bg_registreren.png);
background-repeat: no-repeat;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px 15px 15px;
width: 250px;
float: left;
clear: both;
}
#registreernu {
color: #666;
}
#alles_rechts {
float: left;
width: 200x;
}
#submit_registratie_css {
float: right;
margin-right: 10px;
width:146px;
height:22px;
}
#alertblue {
background-color:#3582C6;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#428FE2), to(#2480B1));background-image:-moz-linear-gradient(top, #428FE2, #2480B1);background-image:-ms-linear-gradient(top, #428FE2, #2480B1);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #428FE2), color-stop(100%, #3582C6));background-image:-webkit-linear-gradient(top, #428FE2, #2480B1);background-image:-o-linear-gradient(top, #428FE2, #2480B1);background-image:linear-gradient(top, #428FE2, #2480B1);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#428FE2', endColorstr='#2480B1', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#3582C6 #3582C6 #065EAB;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); color: #fff; padding: 10px 15px 15px 15px;
width: 1100px;
}
#alert {
background-color:#c43c35;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); color: #fff; padding: 20px 20px 20px;width: 1100px;
}
input[type="submit"] {
cursor:pointer;display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:3px 15px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;
color:#ffffff;background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
/* CSS Document */
body {
background-repeat:repeat;
font-family:Tahoma;
font-size:12px;
padding:0;
margin:0;
}
#header {
background-image: url(http://www.mybuddies.nl/img/header.png);
background-repeat: repeat-x;
width: 100%;
heigth: 120px;
margin: 0px auto;
}
* {
margin: 0;
padding: 0;
}
#menu {
background-image: url(http://www.mybuddies.nl/img/menu.png);
width: auto;
background-repeat:repeat-x;
}
ul {
list-style-type: none;
height: 50px;
margin-left: 190px;
}
li {
float: left;
}
ul a {
padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 50px;
text-decoration: none;
font-family:Verdana, Geneva, sans-serif;
font-size: 12px;
color: #371C1C;
}
ul a:hover {
color: #FFF;
background-color: #069;
}
#wrapper {
margin-left: 190px;
margin-top: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: left;
}
#inloggen {
margin: 0px 35px;
background-image: url(http://www.mybuddies.nl/img/bg_login.png);
background-repeat: no-repeat;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
float: left;
padding: 15px 15px 15px;
}
#float {
float: left;
}
#login_button {
float: left;
margin-left: 20px;
}
#registreren {
margin: 15px 35px;
background-image: url(http://www.mybuddies.nl/img/bg_registreren.png);
background-repeat: no-repeat;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px 15px 15px;
width: 250px;
float: left;
clear: both;
}
#registreernu {
color: #666;
}
#alles_rechts {
float: left;
width: 200x;
}
#submit_registratie_css {
float: right;
margin-right: 10px;
width:146px;
height:22px;
}
#alertblue {
background-color:#3582C6;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#428FE2), to(#2480B1));background-image:-moz-linear-gradient(top, #428FE2, #2480B1);background-image:-ms-linear-gradient(top, #428FE2, #2480B1);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #428FE2), color-stop(100%, #3582C6));background-image:-webkit-linear-gradient(top, #428FE2, #2480B1);background-image:-o-linear-gradient(top, #428FE2, #2480B1);background-image:linear-gradient(top, #428FE2, #2480B1);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#428FE2', endColorstr='#2480B1', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#3582C6 #3582C6 #065EAB;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); color: #fff; padding: 10px 15px 15px 15px;
width: 1100px;
}
#alert {
background-color:#c43c35;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); color: #fff; padding: 20px 20px 20px;width: 1100px;
}
input[type="submit"] {
cursor:pointer;display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:3px 15px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;
color:#ffffff;background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
Dit kun je beter laten verdwijnen als je in het veld klikt om erin te typen omdat het erg eritant is om steeds het veld leeg te maken, en er daarna pas in te kunnen typen.
dit kun je oplossen dmv de volgende code in de input tag:
OnFocus="this.value=''"
Er staat dan nog steeds bijvoorbeeld "gebruikersnaam" in het veld, maar zodra je erin wil typen verdwijnt het en kun je ongestoord doortypen
Gewijzigd op 09/01/2012 16:16:20 door jan terhuijzen
Door zocht ik ook naar.
Heel erg bedankt :)
Op die manier kan in ieder geval de inhoud van je wrapper niet meer verschuiven op het moment dat je het venster vergroot of verkleind.
Huh?
Ik snap je niet.
Tegen wie heb je het?
Waar over?
Remco van Akker op 09/01/2012 16:11:20:
@AS
Dus in plaats van width: 100%; kan ik beter width: 1000px; gebruiken ofzo?
Dus in plaats van width: 100%; kan ik beter width: 1000px; gebruiken ofzo?
Tegen jou xD
Oh oke XD
Sorry ben nog niet helemaal wakker :P
Heb niet echt een goede nacht rust gehad..
Toevoeging op 09/01/2012 16:25:49:
Maar moet ik hem op auto doen of gewoon een standaard pixels?
Want als ik 1000 pixels doe ziet die er anders uit op me computer..
Toevoeging op 09/01/2012 16:27:06:
WACHT!
Ik heb volgens mij het probleem al gevonden.
Ik heb de wrapper geen width mee gegeven XD
Je kan gewoon een width meegeven en een margin-left, maar ook centreren dmv een width en margin: auto;
Ik snap je niet helemaal.
Hoe zorg ik er voor dat die knoppen niet onder elkaar komen?
Je maakt gewoon een soort van body_wrapper die je een breedte en een margin meegeeft.
Hier plaats je alles in.
(dan krijg je wel een probleem met je header en navigatie background, maar die kan je to 1 afbeelding maken en gewoon horizontaal herhalen als achtergrond van de body)
Omdat alles dan die goed uitgelijnd is..