Hoofdcategorieën

[RSS] Forum » DevschuurŽ » Webdesign, Markup & Clientside Scripting » [Anchors] Verkl*te Layout.

Topicacties

[Anchors] Verkl*te Layout.

Pagina: 1

Reageer Nieuw Topic

offline Geplaatst op maandag 05 september 2005 09:02

Acties: [view][quote]

Door: Vecodo
SpamSlet !
Berichten: 1.091
Reg. datum: 26 februari 2003
Ik zit met een erg groot probleem.
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 )
Nu ziet dit er allemaal goed uit.
( 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

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

<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...d=8264062&uid=3985070

Vecodo wijzigde dit bericht 05-09-2005 10:46 (9%)

{~* Ik zal voortaan lief zijn !! *~}

offline Geplaatst op maandag 05 september 2005 10:35

Acties: [view][quote]

Door: dexus389
uuh...Nee
Berichten: 314
Reg. datum: 24 april 2004
om te beginnen raad ik je aan om
deze pagina even door te lezen.

en ik zie niet echt wat je bedoelt met het "verspringen van de layout"...
 

offline Geplaatst op maandag 05 september 2005 10:47

Acties: [view][quote]

Door: Vecodo
SpamSlet !
Berichten: 1.091
Reg. datum: 26 februari 2003
quote:
dexus schreef op maandag 05 september 2005 @ 10:35:
om te beginnen raad ik je aan om
deze pagina even door te lezen.

en ik zie niet echt wat je bedoelt met het "verspringen van de layout"...


dit bedoel ik met verspingen :
http://www.picturetrail.c...d=8264062&uid=3985070

{~* Ik zal voortaan lief zijn !! *~}

Pagina: 1

VNU Media logo Powered by True

© 1998 - 2009 Tweakers.net - Alle rechten voorbehouden - Uw Privacy - Algemene Voorwaarden

Uitgever van: