css veranderen naar schermgrote
qua grote bestaat deze wel naar een verwijzing van de index.html maar hoe zit dit met CSS??
<!--
function redirectPage() {
var url640x480 = "URL"; //plaats URL hier
var url800x600 = "URL"; //plaats URL hier
var url1024x768 = "URL"; //plaats URL hier
if ((screen.width == 640) && (screen.height == 480))
window.location.href= url640x480;
else if ((screen.width == 800) && (screen.height == 600))
window.location.href= url800x600;
else if ((screen.width == 1024) && (screen.height == 768))
window.location.href= url1024x768;
else window.location.href= url800x600;
}
// -->
</SCRIPT>
zoiets bedoel je ??
in deze mogelijkheid wil ik het aanpassen maar voor die geen java aan heeft staan plaats ik tegelijk een dropdown menu met cookie zodat ze wel op de beste pagina komen aangezien ik zelf met 4 frame's werk ( header, menu links, welkome pagina , menu rechts , footer, die ik nu heb is gemaakt door een bedrijf alleen als ik op 800 bekijk is alle's 20 cm en dat ziet er iets minder uit. Tevens als ik de 100% vervang met 975px is het wel mooi op 800 maar weer niet met 1400.
Maarre...
Frames => af te raden
Resolutie check voor andere url / site => af te raden
CSS zaken in Javascript afhandelen => af te raden
Ik zou de tip over liquid templates ter harte nemen en me daarin verdiepen
Rens schreef op 25.06.2009 22:40:
Goede reactie, maar wat je zegt over frames klopt niet helemaal. Die zijn niet liquid of iets dergelijks.CSS is de beste oplossing. Als je met javascript aan de slag gaat moet je goed kijken of screen.width wel cross-browser is, dit is namelijk niet het geval geloof ik.
Maarre...
Frames => af te raden
Resolutie check voor andere url / site => af te raden
CSS zaken in Javascript afhandelen => af te raden
Ik zou de tip over liquid templates ter harte nemen en me daarin verdiepen
Maarre...
Frames => af te raden
Resolutie check voor andere url / site => af te raden
CSS zaken in Javascript afhandelen => af te raden
Ik zou de tip over liquid templates ter harte nemen en me daarin verdiepen
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
#header {
display: block;
width: 100%;
height: 250px;
position: relative;
background: url(banner_right.jpg) no-repeat top right;
}
display: block;
width: 100%;
height: 250px;
position: relative;
background: url(banner_right.jpg) no-repeat top right;
}
dan
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
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
#contents {
display: block;
clear: both;
padding: 0;
padding-top: 20px;
width: 100%;
height: auto;
overflow: hidden;
}
.sidebar {
display: block;
float: left;
width: 250px;
height: auto;
background: url(sidebar_bg.jpg) repeat-x top center;
text-align: left;
}
.sidebar .box {
display: block;
margin: 0 auto 10px;
width: 204px;
height: auto;
background: url(top_box.jpg) no-repeat top left;
}
.sidebar .box h3 {
display: block;
padding: 10px 0 20px;
text-align: center;
color: #FFF;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
line-height: 16px;
}
.sidebar .box h3 a {
color: #FFF;
text-decoration: none;
}
.sidebar .box h3 a:hover {
text-decoration: underline;
}
.sidebar ul {
margin: 15px;
list-style: none;
text-align: left;
}
.sidebar li {
}
.sidebar li a {
display: block;
padding: 10px 8px;
color: #023c42;
text-decoration: none;
}
.sidebar li a:hover {
color: #000;
background: #ffdceb;
}
.sidebar form {
margin: 15px;
line-height: 20px;
}
.sidebar form label {
margin: 5px 0;
width: 100%;
}
.sidebar form input.lOg {
margin: 5px 0;
width: 100%;
border: 1px solid #178aaf;
}
.sidebar .login1 {
margin: 0 auto;
width: 84px;
}
.sidebar input.button {
display: block;
width: 100%;
padding: 3px 25px 5px;
width: 85px height: 20px;
border: 0;
background: url(button.jpg) no-repeat center center;
margin-left: 2px;
color: #FFF;
font-size: 12px;
border: 0;
}
.sidebar .txt {
color: #000;
margin: 0 15px;
}
.sidebar .list-item {
display: block;
padding: 10px;
color: #000;
}
input.search {
padding: 3px 20px 5px;
width: 85px height: 20px;
border: 0;
background: url(button.jpg) no-repeat center center;
margin-left: 2px;
color: #FFF;
font-size: 12px;
border: 0;
}
#mainContent {
margin: 0 250px;
overflow: hidden;
}
#mainContent .newsletter {
display: block;
width: 226px;
height: 170px;
background: url(newsletter_bg.jpg) no-repeat top left;
}
#mainContent h1 {
display: block;
clear: both;
}
.welcome_box {
display: block;
padding: 20px 30px;
background: url(hr.jpg) no-repeat top left;
text-align: center;
font-size: 14px;
color: #333;
}
.welcome_box h1 {
margin: 5px 0;
font-weight: normal;
font-size: 24px;
font-family: Arial, sans-serif;
}
.content {
padding: 10px;
border: 1px solid #4485bb;
text-align: left;
}
display: block;
clear: both;
padding: 0;
padding-top: 20px;
width: 100%;
height: auto;
overflow: hidden;
}
.sidebar {
display: block;
float: left;
width: 250px;
height: auto;
background: url(sidebar_bg.jpg) repeat-x top center;
text-align: left;
}
.sidebar .box {
display: block;
margin: 0 auto 10px;
width: 204px;
height: auto;
background: url(top_box.jpg) no-repeat top left;
}
.sidebar .box h3 {
display: block;
padding: 10px 0 20px;
text-align: center;
color: #FFF;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
line-height: 16px;
}
.sidebar .box h3 a {
color: #FFF;
text-decoration: none;
}
.sidebar .box h3 a:hover {
text-decoration: underline;
}
.sidebar ul {
margin: 15px;
list-style: none;
text-align: left;
}
.sidebar li {
}
.sidebar li a {
display: block;
padding: 10px 8px;
color: #023c42;
text-decoration: none;
}
.sidebar li a:hover {
color: #000;
background: #ffdceb;
}
.sidebar form {
margin: 15px;
line-height: 20px;
}
.sidebar form label {
margin: 5px 0;
width: 100%;
}
.sidebar form input.lOg {
margin: 5px 0;
width: 100%;
border: 1px solid #178aaf;
}
.sidebar .login1 {
margin: 0 auto;
width: 84px;
}
.sidebar input.button {
display: block;
width: 100%;
padding: 3px 25px 5px;
width: 85px height: 20px;
border: 0;
background: url(button.jpg) no-repeat center center;
margin-left: 2px;
color: #FFF;
font-size: 12px;
border: 0;
}
.sidebar .txt {
color: #000;
margin: 0 15px;
}
.sidebar .list-item {
display: block;
padding: 10px;
color: #000;
}
input.search {
padding: 3px 20px 5px;
width: 85px height: 20px;
border: 0;
background: url(button.jpg) no-repeat center center;
margin-left: 2px;
color: #FFF;
font-size: 12px;
border: 0;
}
#mainContent {
margin: 0 250px;
overflow: hidden;
}
#mainContent .newsletter {
display: block;
width: 226px;
height: 170px;
background: url(newsletter_bg.jpg) no-repeat top left;
}
#mainContent h1 {
display: block;
clear: both;
}
.welcome_box {
display: block;
padding: 20px 30px;
background: url(hr.jpg) no-repeat top left;
text-align: center;
font-size: 14px;
color: #333;
}
.welcome_box h1 {
margin: 5px 0;
font-weight: normal;
font-size: 24px;
font-family: Arial, sans-serif;
}
.content {
padding: 10px;
border: 1px solid #4485bb;
text-align: left;
}
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
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
.content_bottom {
display: block;
clear: both;
width: 900px;
height: 32px;
background: url(content_footer.jpg) no-repeat bottom center;
}
#footer {
display: block;
margin: 0 auto;
margin-top: 3px;
width: 100%;
height: 72px;
color: #333;
background: url(footer_bg.jpg) repeat-x top center;
overflow: hidden;
}
#footer .divleft {
width: 430px;
padding: 15px 30px;
float: left;
text-align: left;
}
.divleft img {
vertical-align: middle;
}
#footer .divright {
width: 430px;
padding: 10px 30px;
float: right;
text-align: right;
line-height: 18px;
}
display: block;
clear: both;
width: 900px;
height: 32px;
background: url(content_footer.jpg) no-repeat bottom center;
}
#footer {
display: block;
margin: 0 auto;
margin-top: 3px;
width: 100%;
height: 72px;
color: #333;
background: url(footer_bg.jpg) repeat-x top center;
overflow: hidden;
}
#footer .divleft {
width: 430px;
padding: 15px 30px;
float: left;
text-align: left;
}
.divleft img {
vertical-align: middle;
}
#footer .divright {
width: 430px;
padding: 10px 30px;
float: right;
text-align: right;
line-height: 18px;
}
daar zit de fout die
op 800 ( totaal 20 cm beeld weergeef, middendeel pagina geef niet meer dan 20 letters )
op 1400 ( goede beeld zoals naar behoren)
Gewijzigd op 01/01/1970 01:00:00 door kevin
Midas schreef op 25.06.2009 22:42:
Goede reactie, maar wat je zegt over frames klopt niet helemaal. Die zijn niet liquid of iets dergelijks.[/quote]Ik zou de tip over liquid templates ter harte nemen en me daarin verdiepen
Ik zeg alleen dat het gebruik van frames af te raden is... Dus helemaal geen frames in je hele website. Ik zeg niets over liquid in combinatie met frames... En hoezo zijn frames niet liquid?
Een frame column van 100px en 1 met width * is zo liquid als het maar kan... Maar dan nog :-) Niet doen :p
@Kevin: plaats je code ff tussen en tags, dit is niet te lezen... en alleen relevante code graag...
Gewijzigd op 01/01/1970 01:00:00 door Rens nvt
Rens schreef op 25.06.2009 22:46:
@Kevin: plaats je code ff tussen en tags, dit is niet te lezen... en alleen relevante code graag...
verandert sorry
Gewijzigd op 01/01/1970 01:00:00 door kevin