:strip_icc():strip_exif()/u/79686/usericon.jpg?f=community)
Ik zit met een erg groot probleem.
Ik heb dus een template gemaakt met de volgende structuur :
( website hoeft alleen IE compatible en 1024x768 te zijn )
Maar als je nu op een schermresolutie van 1024 naar de website gaat.
en op een "Interne Link" drukt dan verspringt heel de layout.
Ik weet echt totaal geen manier om dit probleem om te lossen, en google leverd me ook al niet zoveel op.
Code zegt vaak meer dan Woorden :
De CSS
The Template
Heb natuurlijk alle overbodig code weggelaten.
Een online voorbeeld is te vinden op
www.respond.nl/1/index.php
( druk maar eens op een Nieuws=-item )
voor images :
http://www.picturetrail.c...9&gid=8264062&uid=3985070
Ik heb dus een template gemaakt met de volgende structuur :
- Header Div ( met images divs erin )
- Menu Div ( met een search/menu/empy div erin )
- Container div ( met een Menu/Content/Nieuws div erin )
( website hoeft alleen IE compatible en 1024x768 te zijn )
Maar als je nu op een schermresolutie van 1024 naar de website gaat.
en op een "Interne Link" drukt dan verspringt heel de layout.
Ik weet echt totaal geen manier om dit probleem om te lossen, en google leverd me ook al niet zoveel op.
Code zegt vaak meer dan Woorden :
De CSS
code:
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
| html {
}
body {
margin: 0px;
padding: 150px 0px 0px 0px;
height: 100%;
overflow: hidden;
}
#header {
background-image: url(images/Respond1_1.jpg);
margin-top: -150px;
height: 120px;
background-color: pink;
width: 1020px;
}
#plaatje1 {
width:80px;
height:80px;
border:1px solid #ffffff;
position:absolute;
left: 17px;
top: 20px;
background-image: url(images/brand%20klein2.jpg);
}
#plaatje3 {
width:80px;
height:80px;
border:1px solid #ffffff;
position:absolute;
left: 207px;
top: 19px;
background-image: url(images/controle%20centrum%20klein2.jpg);
}
#plaatje2 {
width:80px;
height:80px;
border:1px solid #ffffff;
position:absolute;
left: 112px;
top: 20px;
background-image: url(images/materiaal%20klein2.jpg);
}
#plaatje4 {
width:80px;
height:80px;
border:1px solid #ffffff;
position:absolute;
left: 302px;
top: 19px;
background-image: url(images/terrorisme%20klein2.jpg);
}
#hbalk {
height: 29px;
background-color: #E56B20;
}
#search {
left: 0px;
position: absolute;
width: 204px;
background-color:#e56b20;
border-left:1px solid #000000;
height:30px;
padding-top:4px;
padding-left:20px;
border-bottom:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
border-top:1px solid #FFFFFF;
}
#horMenu {
left: 205px;
position: absolute;
width: 583px;
height:30px;
background-color:#000000;
color:white;
border-bottom:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
}
#empty {
height:30px;
position:absolute;
left:789px;
border-right:0px solid #000000;
background-image: url(images/Respond2_4.jpg);
width:239px;
}
#container {
top: 150px;
bottom: 0px;
_height: expression(document.body.clientHeight - 150 + 'px'); /* equals value from #header height */
width: 1020px;
position: absolute;
}
#menu {
height: 100%;
overflow: auto;
width: 204px;
background-color: #003399;
float: left;
border-left:1px solid #000000;
padding-top:20px;
padding-left:20px;
border-bottom:1px solid #000000;
}
#content {
height: 100%;
overflow: auto;
width: 584px;
float: left;
background-color: #FFFFFF;
padding-top:10px;
padding-left:20px;
border-bottom:1px solid #000000;
}
#Nieuws {
width: 232px;
float: left;
height: 100%;
background-image: url(images/Respond4_2.jpg);
border-right:2px solid #000000;
padding-top:20px;
padding-left:10px;
}
#adres {
width:133px;
height:103px;
background-color:#e56b20;
position:absolute;
left: 801px;
top: 475px;
}
#vlag {
width:213px;
height:440px;
position:absolute;
left: 20px;
top: 568px;
} |
The Template
code:
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
| <body>
<script type='text/javascript' src='<?=$pth['folder']['template']?>menu.js'></script>
<div id="header">
<div id="plaatje1"></div>
<div id="plaatje2"></div>
<div id="plaatje3"></div>
<div id="plaatje4"></div>
</div>
<div id="hbalk">
<div id="search"></div>
<div id="horMenu"><?include ('dhtml.navi')?></div>
<div id="empty"></div>
</div>
<div id="container">
<div id="menu">div>
<div id="content></div>
<div id="nieuws></div>
</div>
<div id="adres"></div>
<div id="vlag"></div>
</body>
</html> |
Heb natuurlijk alle overbodig code weggelaten.
Een online voorbeeld is te vinden op
www.respond.nl/1/index.php
( druk maar eens op een Nieuws=-item )
voor images :
http://www.picturetrail.c...9&gid=8264062&uid=3985070
[ Voor 9% gewijzigd door Vecodo op 05-09-2005 10:46 ]