3 column layout

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Pagina: « vorige 1 2 3 4 5 volgende »

Winkie

winkie

01/08/2007 10:49:00
Quote Anchor link
de middelste box dropt namelijk omdat IE de breedte anders interpreteert dan MOZ. IE telt namelijk de marges niet bij de breedte op, en MOZ wel. Wat je dan krijgt, is dat volgens IE je div veel breder is dan dat hij eigenlijk is. Gevolg: het past niet meer en je div 'dropt' onder de anderen.
Met de voice family hack kan je dit aanpassen door de breedte van je div voor IE anders in te stellen :)
 
PHP hulp

PHP hulp

27/11/2024 09:58:27
 
Lord Niek

Lord Niek

01/08/2007 10:52:00
Quote Anchor link
hmm... Hoe werkt dit dan ? ik zit nu te kijken op Google, maar ik vindt er alleen informatie over font grootte problemen over..
 
Winkie

winkie

01/08/2007 10:59:00
Quote Anchor link
voice-family hack, a.k.a. box model hack:

http://webguide.fgov.be/nl/guide/technology/webstandards/11471.html
 
Lord Niek

Lord Niek

01/08/2007 11:07:00
Quote Anchor link
Ik heb het nu toegevoegd in mijn ie.css , maar nog steeds werkt t niet.. (Toegevoegd zoals ik denk dat het moet ;) )
 
Lord Niek

Lord Niek

01/08/2007 12:22:00
Quote Anchor link
Het kan zijn dat ik de width's niet goed heb berekend, maar dat denk ik niet ..
 
Tineau

tineau

01/08/2007 12:29:00
Quote Anchor link
Je kunt fixed width gebruiken en ervoor zorgen dat je voor IE de waarden zodanig aanpast dat e.e.a. wel past!
bijvoorbeeld door:
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/IE6fix.css"><![endif]-->
 
Lord Niek

Lord Niek

01/08/2007 12:30:00
Quote Anchor link
ja, ik heb nu ook al CC's (Conditional Comments) maar mijn ie.css geeft nog niet de goede resultaten op die website.
 
Lord Niek

Lord Niek

01/08/2007 12:33:00
Quote Anchor link
Hmm, hoe veel ik ook die waardes bij die box-model hack verminder, zelfs naar 400 pixels, nog doet-ie-t-niet :(
 
Tineau

tineau

01/08/2007 12:54:00
Quote Anchor link
zorg wel dat je CC's achteraan je normale stylesheet plakt. Dat werkt bij mij namelijk prima. Ik overschrijf de waarden voor bijvoorbeeld firefox in het iefix.css met de waarden die voor IE wel werken.
 
Lord Niek

Lord Niek

01/08/2007 13:28:00
Quote Anchor link
ja dat doe ik ook, maar t werkt gewoon niet. Daarom vraag ik jullie hulp voor de site
 
Winkie

winkie

01/08/2007 14:03:00
Quote Anchor link
Niek, begin even met een frisse nieuwe stylesheet. Ik heb het idee dat je door de bomen het bos niet meer ziet :)
 
Winkie

winkie

01/08/2007 14:05:00
Quote Anchor link
oh en ik las net dat je de box model hack in je ie.css hebt gezet; dit moet je natuurlijk in je gewone style.css zetten anders heeft het vrij weinig zin :)
 
Lord Niek

Lord Niek

01/08/2007 14:05:00
Quote Anchor link
Mwha, Het lukt wel, alleen dat stomme Internet Exploiter werkt niet mee! Ik snap dus ook niet waarom zelfs een IE hack niet werkt.. :( Als iemand me daar mee kan helen, graag! want een nieuwe css maken wil ik liever niet ..
 
Lord Niek

Lord Niek

01/08/2007 14:06:00
Quote Anchor link
Oeps, ja.. Inderdaad. verkeerde css bestand :$ maar nog steeds werkt het niet :(
 
- wes -

- wes -

01/08/2007 14:16:00
Quote Anchor link
geef eens even aan wat je nu hebt en wat er niet goed gaat ermee. je gilt wel 20x van het wil niet en werkt niet, maar die tuts en codes staan niet helemaal voor jan lul op internet, ze werken namelijk wel.
 
Lord Niek

Lord Niek

01/08/2007 14:18:00
Quote Anchor link
Ja het probleem is dus dat in IE (Je weet wel , Internet Explorer) mijn contentbox, de middelste colom dus, naar onderen staat, in plaats van in het midden. In Firefox staat t wel goed. Ik heb nu met Conditional Comments een apparte css ding voor IE gemaakt, maar die krijg ik ook niet goed.

Nu heb ik in mijn basis css die box hack ding van winkie erin gezet, maar nog steeds werkt t niet...
 
- wes -

- wes -

01/08/2007 14:21:00
Quote Anchor link
code
code
code
code
code
code

wil ik zien
 
Lord Niek

Lord Niek

01/08/2007 14:23:00
Quote Anchor link
Staat op de site site site site site :P

Mijn CSS is:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
body {
    font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
    font-size: 10px;
    text-align: center;
}

#headerstart {
    text-align: center;
}

#header {
    width: 800px;
    margin: 0 auto;
}

#header #image {
    text-align: center;
    float: left;
}

#header ul {
    float: left;
    padding-top: 50px;
    padding-right: 5px;
}

.clear {
    clear: both;
}

#clear {
    clear: both;
}

.zwart {
    color: #000;
}

.pinktext {
    color: #000;
}

#content {
    margin-top: 90px;
    margin: auto;
    width: 890px;
    padding: 5px;
    margin-bottom: 10px;
    text-align: left;
        font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
    font-size: 10px;
}

.top-left, .top-right, .bottom-left, .bottom-right {
    background-image: url('images/corners.gif');
    height: 9px;
    font-size: 2px;
}
    
.top-left, .bottom-left {
    margin-right: 9px;
}
    
.top-right, .bottom-right {
    margin-left: 9px;
    margin-top: -9px;
}

.top-right {
    background-position: 100% 0;
}
    
.bottom-left  {
    background-position: 0 -9px;
}
    
.bottom-right {
    background-position: 100% -9px;
}
    
.inside {
    border-left: 1px solid #C00000;
    border-right: 1px solid #C00000;
    background: #EFEFEF;
    color: #000000;
    padding-left: 10px;
    padding-right:10px;
}

.notopgap    { margin-top: 0; }
.nobottomgap { margin-bottom: 0; }

.inside-small {
     padding: 1px 3px;
}

.negative-top h2 {
     margin: -12px 0 20px 0;
}

.negative-bottom p {
     position: relative;
     margin: 20px 0 -8px 0;
}

#footer {
    margin: auto;
    width: 890px;
    text-align: center;
    font-size: 9px;
    padding-top: 5px;
}

#footer hr {
    width: 100px;
    color: #000;
    background-color: #000;
    height: 1px;
    border: solid 0px #000;
}

a  {
    color: darkblue;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: blue;
    text-decoration: underline;
    font-weight: bold;
}

#footer strong {
    font-weight: bold;
    font-style: none;
}

.cornerexample2, .cornerexample3, .cornerexample4,  .cornerexample5,  .cornerexample6 {
    position: relative;
    width:60%;
    margin: 0 auto;
    padding:1em;
    text-align:left;
}

.content {
    width:60%;
    margin: 15px auto;
    padding:1em;
    background: #ffffff;
    color: #000000;
    text-align:left;
}

.inside {
    border-left: 1px solid #C00000;
    border-right: 1px solid #C00000;
    background: #ffffff;
    color: #000000;
    padding-left: 10px;
    padding-right:10px;
}

h2, p {
    margin: 20px 0;
}

.inside2 {
    border-left: 1px solid #C00000;
    border-right: 1px solid #C00000;
    background: #ffffff;
    color: #000000;
    padding-left: 10px;
    padding-right:10px;
}

.inside4, .inside5, .inside6 {
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    background: #ffffff;
    color: #000000;
    padding-left: 10px;
    padding-right:10px;
    padding-top: 1px;
    padding-bottom: 1px;
}

.inside-small {
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    background: #ffffff;
    color: #000000;
    padding: 1px 3px;
}

#padding h2, #padding p {
    margin: 0;
    padding: 20px 0;
}

.negative-top h2 {
    margin: -12px 0 20px 0;
}

.negative-bottom p {
    position: relative;
    margin: 20px 0 -8px 0;
}
    
p {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    border: 0;
    line-height: 125%;
}
    
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 125%;
    color: white;
    background-color: #aaa;
        font-size: 10px;
        font-weight: bold;
        padding: 2px;
        padding-left: 3px;
}

#header ul {
    list-style: none;
}

#header li {
    display: inline;
}

#header li a  {
    padding: 10px;
    color: #220000;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
}

#header li a:hover {
    color: silver;
}

#leftbox {
    width: 160px;
    padding: 5px;
    float: left;
    text-align: left;
}

#contentbox {
    margin-left: 180px;
    margin-right: 180px;
    border-left: dashed 1px orange;
    border-right: dashed 1px orange;
    padding-left: 10px;
    padding-right: 10px;
    width: 605px;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 505px;

}

.notice {
    color:              #000000;
    background-color:   #FFFFDD;
}
h1.notice,
div.notice {
    margin:             0.5em 0 0.5em 0;
    border:             0.1em solid #FFD700;
    background-repeat:  no-repeat;
            background-position: 10px 50%;
    padding:            10px 10px 10px 36px;
            }
.notice h1 {
    border-bottom:      0.1em solid #FFD700;
    font-weight:        bold;
    text-align:         left;
    margin:             0 0 0.2em 0;
}

#rightbox {
    float: right;
    width: 160px;
    padding: 5px;
    text-align: left;
}

#rightbox ul {
    list-style-image: url(images/listdot.gif);
    padding: 0px;
    margin: 0px;
    margin-top: 3px;
    padding-left: 15px;
}

#leftbox ul {
    list-style-image: url(images/listdot.gif);
    padding-left: 15px;
}

form {
    border: solid 1px #000;
    background-color: #EEE;
    font-size: 9px;
    margin-bottom: -10px;
}

.inputbreed {
    border: solid 1px #000;
    width: 130px;
    margin-left: 2px;
    margin-top: 3px;
    margin-bottom: 2px;
}

.inputklein {
    border: solid 1px #000;
    width: 45px;
    margin-top: 3px;
    margin-bottom: 2px;
}

label {
    float: left;
    width: 85px;
    margin-left: 2px;
    margin-top: 3px;
    margin-bottom: 2px;
}

form .text {
    margin: 0px;
    padding: 2px;
    margin-bottom: -20px;
}

form label span {
    min-height: 100%;
    height: 100%;
    vertical-align: middle;
}

.moduletableNieuws {
    margin-bottom: 10px;
}

.moduletableVacatures {
    margin-bottom: 10px;
}

.column {
    padding-bottom: 1001em;
    margin-bottom: -1000em;
}

.inside-small {
    overflow: hidden;
}

.mainlevel div img {
    margin-right: 5px;
}


en mijn HTML file, tenmisnte, het deel waarover het gaat:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
        <div class="column" id="content">
            <div class="top-left"></div>
            <div class="top-right"></div>
            <div class="inside-small">
                <div class="gap-saver"></div>
                <div id="leftbox">
                    <?php mosLoadModules ( 'left', -2 ); ?>
                </div>
                <div id="rightbox">
                    <?php mosLoadModules ( 'right', -2 ); ?>
                </div>
                <div id="contentbox">
                    <?php mosMainBody(); ?>
                </div>
                <div id="clear">&nbsp;</div>
                <div class="gap-saver"></div>
            </div>
            <div class="bottom-left"></div>
            <div class="bottom-right"></div>
 
Winkie

winkie

01/08/2007 14:57:00
Quote Anchor link
Uhm, je moet de contentbox tussen de left en right inzetten.
 
Lord Niek

Lord Niek

01/08/2007 14:58:00
Quote Anchor link
In de HTML ook!?
 

Pagina: « vorige 1 2 3 4 5 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.