[CSS] voor dummies - deel 10

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_62901797
Vorige topics:

[CSS] voor dummies.
[CSS] voor dummies - Deel 2
[CSS] voor dummies - Deel 3
[CSS] voor dummies - Deel 4
[CSS] voor dummies - Deel 5
[CSS] voor dummies - deel 6
[CSS] voor dummies - Deel 7
[CSS] voor dummies - Deeltje 8
[CSS] voor dummies - deel 9

En we gaan hier lekker verder

Gelijk maar even mijn 1e vraag.

Ik moet een site ook wekend krijgen onder IE6, nu heb ik een div layer die over een design heen valt, echter komen de pulldowns er gewoon doorheen, de rest niet. Wat kan ik hier tegen doen?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  maandag 3 november 2008 @ 10:46:31 #2
26400 wijsneus
Radicaal Democraat
pi_62902403
Dit is een algemeen bekend probleem van IE.

In Windows is alles wat je zo'n beetje op het scherm ziet een 'Windows control'. Een applicatie heeft bijvoorbeeld een knop nodig, en vraagt aan Windows: geef mij een knop. Het OS tekent vervolgens de knop.

Nu is IE een beetje een vreemde eend in de bijt. Die heeft namelijk zelf code om allerlei dingen te tekenen. Dus, in plaast van aan het OS te vragen om een input boxje, tekent IE deze zelf. Hierdoor kan IE zelf de volgorde van elementen bepalen en bijvoorbeeld divjes over knoppen en inputs heen tekenen.

Je voelt hem al aankomen: niet alles is geimplementeerd. Waaronder dus de 'select' box. Hier vraag IE wel aan windows om hem voor hem te regelen.

Oplossing? Hij is er, maar die is echt verscrhikkelijk.

Met javascript alle elementen die je over een select-box heen wilt tekenen in hun eigen iframe stoppen. Tenminste, dat deden wij vroeger toen we nog menuutjes deden in pure javscript.
Siamo Tutti Antifascisti!
pi_62902987
Krijg steeds minder respect voor Microsoft wat een onzin, maar goed, een iframe zou een oplossing moeten zijn maar hoe moet ik deze dan benutten? het is namelijk erg vervelend
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  maandag 3 november 2008 @ 11:30:00 #4
26400 wijsneus
Radicaal Democraat
pi_62903493
Het is geen oplossing, het is een hack. Wij genereerden vroeger drop-down menus in javascript. De truuk was dan om in de div van het menu een iframe te genereren en daar dan weer de menuitems in te plaatsen. Dan ging ie over de drop-downs heen omdat een iframe ook een windowed control is.

Dus, binnen de div een iframe plaatsen, die even hoog en breed is als de div en geen scrollbars heeft.

Omdat wij dat allemaal met javscript deden, gingen we gewoon dingen in de document.body van die frame write()-en maar dat is mogelijk voor jou geen oplossing.

Ik denk dat je gewoon moet accepteren dat je site in IE er anders uitziet.

Je zou de select kunnen vervangen door radio buttons.
Siamo Tutti Antifascisti!
pi_62903885
Helaas kan ik de selects niet vervangen, maar de iframe optie zou moeten werken, zal eens kijken hoe ik dit kan oplossen. Iig vriendelijk bedankt voor je volledige omschrijving!
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_62903939
Als je al jquery in je site gebruikt kun je bijv gebruik maken van:
http://plugins.jquery.com/project/bgiframe

Of anders even verder zoeken, er zijn heel wat paginas over te vinden
pi_62945509
schopje richting MyAT.
pi_62992087
quote:
Op maandag 3 november 2008 11:49 schreef spaceninjapirate het volgende:
Als je al jquery in je site gebruikt kun je bijv gebruik maken van:
http://plugins.jquery.com/project/bgiframe

Of anders even verder zoeken, er zijn heel wat paginas over te vinden
Ik heb dus gezocht naar een simpele oplossing maar kon er helaas geen vinden, is er geen oplossing waarbij dynamisch een div een iframe kan omvatten?

Anyone? jquery kan ik niet gebruiken omdat ik te veel vergelijkbare functies in mijn scripting heb
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_63024137
Ik heb al een fix gevonden, die zeer simpel is ;)

http://www.actionscript.org/forums/showthread.php3?t=132324

oftewel

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		<html>
<head>
<script type="text/javascript">
     // make the specified div a windowed control in IE6
     // this masks an iframe (which is a windowed control) onto the div,
     // turning the div into a windowed control itself
     function makeWindowed(p_div)
     {
        var is_ie6 =
           document.all && 
           (navigator.userAgent.toLowerCase().indexOf("msie 6.") != -1);
        if (is_ie6)
        {
           var html =
              "<iframe style=\"position: absolute; display: block; " +
              "z-index: -1; width: 100%; height: 100%; top: 0; left: 0;" +
              "filter: mask(); background-color: #ffffff; \"></iframe>";
           if (p_div) p_div.innerHTML += html;
           // force refresh of div
           var olddisplay = p_div.style.display;
           p_div.style.display = 'none';
           p_div.style.display = olddisplay;
        };
     }
</script>
</head>
<body>
<div id="test" style="position: absolute; z-index: 2; 
top: 50; left: 30; width: 200px; height: 200px; 
background-color: red">
 
</div>
<select style="position: absolute; z-index: 1; top: 50;">
<option>test</option>
</select>
<a href="javascript:makeWindowed(document.getElementById('test'));">
Make Windowed</a>
</body>
</html>
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  vrijdag 7 november 2008 @ 10:35:10 #10
26400 wijsneus
Radicaal Democraat
pi_63024469
Jeuj!

maar wel een vieze, vieze hack hoor...
Siamo Tutti Antifascisti!
pi_63028559
Haha beter vies dan geen toch? tis sowiezo al jammer dat ik gebruik moet maken van een hack
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_63057221
Hoi, heb een css probleempje.

Ben voor scouting een nieuwe website aan het ontwerpen. We maken gebruik van Joomla en ben nu een bestaande template aan het wijzigen.

Ik vond alleen iets niet mooi wat met css te maken had maar krijg het niet opgelost.
Het gaat om het menu, is opgebouwd als een lijst. In FF werkt het prima maar IE doet gewoon erg moeilijk.
Ik heb echt voor alle lagen uit het menu gebruik gemaakt van een border-top, toch gebruikt IE kennelijk een border-bottom voor mijn hover.
http://test.scouting-olav.nl
Hier is het verschil te zien, hoop dat iemand weet of dit een vaker voorkomend probleem is en er ergens een hack bekend is.
Alvast bedankt.
I was trying to daydream, but my mind kept wandering...
pi_63057364
IE6 of IE7?
pi_63057811
IE7
I was trying to daydream, but my mind kept wandering...
  zaterdag 8 november 2008 @ 20:26:31 #15
26400 wijsneus
Radicaal Democraat
pi_63060483
Even algemeen: een lijstje van bekende IE bugs en hun oplossingen en hoe je in het algemeen te werk kunt gaan om IE in het gareel te krijgen.

Verder: de manier om te zorgen dat je CSS niet vol vieze hacks komt te staan.
Siamo Tutti Antifascisti!
pi_63062207
Ik zie mijn probleem er niet echt tussen staan. Kom wel dingen over block and list tegen, maar kan niet ontdekken hoe ik mijn probleem moet oplossen.
Staat ergens dat ik layout moet toewijzen aan mijn block, maar hoe ik dat zou moeten doen: geen idee!
I was trying to daydream, but my mind kept wandering...
pi_63073170
Nog even de code zodat iemand misschien nog een oplossing weet.
Dit is hoe mijn menu is opgebouwd, stonden automatisch nog meerdere div's omheen maar die heb ik weggehaald om het wat overzichtelijker te maken. Denk niet dat dat voor de oplossing uitmaakt omdat aan die div's geen class was toegewezen. Zoals ik eerder al zei is er een probleem met IE7 in het submenu, waar hij de border-top als border-bottom weergeeft. Althans, dat is wat ik denk dat er gebeurd. http://test.scouting-olav.nl

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		<div class="module_menu">
   <h3>Hoofdmenu</h3>
   <ul class="menu">
      <li class="item1">
         <a href="http://gooimeer.no-ip.info/olavtestsite/">   <span>Home</span></a>
      </li>
      <li class="parent active item3">
         <a href="/olavtestsite/index.php?Itemid=3"><span>Speltakken</span></a>
         <ul>
            <li class="item4">
               <a href="/olavtestsite/index.php?Itemid=4"><span>Bevers</span></a>
            </li>
            <li class="item5">
               <a href="/olavtestsite/index.php?Itemid=5"><span>Dolfijnen</span></a>
            </li>
            <li id="current" class="active item8">
               <a href="/olavtestsite/index.php?Itemid=8"><span>Zeeverkenners Ochtend</span></a>
            </li>
            <li class="item9">
               <a href="/olavtestsite/index.php?Itemid=9"><span>Zeeverkenners Middag</span></a>
            </li>
            <li class="item10">
               <a href="/olavtestsite/index.php?Itemid=10"><span>Wilde Vaart</span></a>
            </li>
            <li class="item11">
               <a href="/olavtestsite/index.php?Itemid=11"><span>Loodsenstam</span></a>
            </li>
            <li class="item14">
               <a href="/olavtestsite/index.php?Itemid=14"><span>Vaarschool Seal</span></a>
            </li>
            <li class="item12">
               <a href="/olavtestsite/index.php?Itemid=12"><span>Bestuur</span></a>
            </li>
            <li class="item13">
               <a href="/olavtestsite/index.php?Itemid=13"><span>Olav klusteam</span></a>
            </li>
         </ul>
      </li>
      <li class="parent item6">
         <a href="/olavtestsite/index.php?Itemid=6"><span>Onderkomens</span></a>
      </li>
      <li class="parent item7">
         <a href="/olavtestsite/index.php?Itemid=7"><span>Verhuur</span></a>
      </li>
      <li class="parent item20">
         <a href="/olavtestsite/index.php?Itemid=20"><span>Vrienden</span></a>
      </li>
      <li class="item2">
         <a href="http://gooimeer.no-ip.info/olavtestsite/administrator/index.html"><span>Site beheren</span></a>
      </li>
   </ul>
</div>


En dit is de bijbehorende css:
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
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402		* {
   padding: 0;
   margin: 0;
}

body {
   text-align: center;
   font-size: 76%;
   font-family: Arial, sans-serif, Verdana, Helvetica;
   line-height: 1.3;
}

h1, h2, h3, h4, h5, h6, p, blockquote, form, label, ul, ol, dl, fieldset, address {
   margin: 0.5em 0;
}

a img {
   border: 0px;
}

li, dd {
   margin-left: 1em;
}
li {
   list-style-type:circle;
}

fieldset {
   padding:5em;
}


td {
   padding:1px;
}

#wrap {
   min-width: 960px;
   max-width: 960px;
   width: auto !important;
   width: 960px;
   margin: 0 auto;
   text-align: left;
}

#header {
   background:#fff url(../images/hbg.jpg) 0 0 no-repeat;
   position:relative;
   height:180px;
   margin-top:10px;
   margin-bottom:5px;
   color:#fff;
}
#header .logo {
   margin-top:55px;
}
#header h1 {
   font-variant: small-caps;
   font-stretch: expanded;
   padding-left: 20px;
   color:#fff;
   font-weight: bold;
   font-size: 50px;
}
#header input {
   background: url(../images/search.png) no-repeat;
   border:0;
   height: 22px;
   width: 168px;
   padding: 2px;
   font-size:1em;
   color:#fff;
   border:1px solid #fff;
}
#header .search {
   position:absolute;
   top: 30px;
   right:20px;
   color:#fff;
}

#header .banner {
   position:absolute;
   top: 68px;
   right:20px;
   color:#fff;
}

#leftcol {
   float:left;
   width:23%;
   overflow:hidden;
}
#content {
   float:left;
   width: 54%;
}

#content1 {
   position:relative;
   float:left;
   width: 54%;
   overflow:hidden;
}

#content2 {
   position:relative;
   float:left;
   width: 77%;
   overflow:hidden;
}
#content3 {
   position:relative;
   float:left;
   width: 100%;
   overflow:hidden;
}


#rightcol {
   position:relative;
   float:left;
   width:23%;
   overflow:hidden;

}
#footer {
   clear:both;
   background:#fff url(../images/fbg.png) 0 bottom no-repeat;
   height:60px;
   margin-bottom:10px;
   padding-top:20px;
   text-align:center;
}
#top {
   padding:10px 10px 5px 10px;
   margin:0px;
}
#top .box {
   padding:0;
   margin:0;
   color:#000;
   background:#fff;
}

#bottom {
   clear:both;
   padding:10px 10px;
   margin:5px 10px;
   background:#fff;
   border-top:1px dotted #708059;
   border-bottom:1px dotted #708059;
}

#user {
   clear:both;
   padding:10px;
}

.box {
   padding:10px;
}

/* --- */

#leftcolbg {
   background: url(../images/lbg.png) 23% 0 repeat-y;
}

#rightcolbg {
   background: url(../images/rbg.png) 77% 0 repeat-y;
}


a {color: #99bf60;}
a:link {color: #708059;}
a:hover {color: #708059;}


h1, .contentheading, .componentheading, .contentpagetitle {
   color: #708059;
   font-weight:bold;
   font-size:1.5em;
}
h2{font-size: 1.5em;}
h3 {font-size: 1.3em;}
h4 {font-size: 1.2em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1em;}

hr {
   border:1px solid #DCE6CF;
}
fieldset {
   padding: 0.3em;
   border: 0px;
}

#footer, .small, .createdate, .modifydate {
   font-size:0.8em;
   color: #B4CC8F;
}
.module {
   margin-bottom: 1em;
   padding: 0 10px;
   padding-bottom: 5px;
   border: 1px solid #DCE6CF;
   text-align:left;
}

.module h3 {
   background: #DCE6CF;
   color: #708059;
   padding: 0.25em 0.5em;
   text-align: center;
   font-size: 1.1em;
   margin: 2px -8px 0.5em -8px;
   text-align: left;
}

.module_menu {
   padding:0;
   margin-bottom: 1em;
   color: #ffff99;
}

.module_menu h3 {
   background: #000000;
   color: #ffff99;
   padding: 0.25em 0.5em;
   text-align: left;
   font-size: 1.1em;
   margin: 0;
}

.module_menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

.module_menu li {
   margin: 0;
   list-style:none;
}

.module_menu li a {
   display: block;
   padding: 3px 5px 3px 0.5em;
   border-left: 10px solid #000000;
   background-color: #ffff99;
   color: #000000;
   text-decoration:none;
   border-top: 1px solid #3366ff;
}

html>body .module_menu li a {
   width: auto;
}
.module_menu li a:hover, a#active_menu:link, a#active_menu:visited {
   display: block;
   border-left: 10px solid #000;
   background-color: #ffff33;
   color:#000000;
   border-top: 1px solid #3366ff;
}

.module_menu #current a {
   display: block;
   border-left: 10px solid #000;
   background-color: #ffff33;
   color:#000000;
   border-top: 1px solid #3366ff;
}

/*sub*/
.module_menu ul li ul li a{
   display: block;
   padding: 3px 5px 3px 1.0em;
   border-left: 20px solid #000;
   background-color: #ffff99;
   color: #000000;
   text-decoration:none;
   border-top: 1px solid #3366ff;
}

/*zelf toegevoegd, hover submenu 20 px*/
.module_menu ul li ul li a:hover {
   display: block;
   border-left: 20px solid #000;
   background-color: #ffff33;
   color:#000000;
   border-top: 1px solid #3366ff;
}

/*als menu is geklikt waar submenu inzit, maar submenu nog niet gebruikt*/
.module_menu ul #current ul li a{
   display: block;
   padding: 3px 5px 3px 1.0em;
   border-left: 20px solid #000;
   border-top: 1px solid #3366ff;
   background-color: #ffff99;
   margin:0 0 -1px 0;
   color:#000;
}

/*zelf toegevoegd, submenu ook van kleur veranderen*/
.module_menu ul #current ul li a:hover{
   display: block;
   border-left: 20px solid #000;
   background-color: #ffff33;
   border-top: 1px solid #3366ff;
   color:#000;
}

/*als menu is geklikt waar submenu inzit, en daarin een pagina bezocht word*/
.module_menu ul li ul #current a{
   display: block;
   padding: 3px 5px 3px 1.0em;
   border-left: 20px solid #000;
   border-top: 1px solid #3366ff;
   background-color: #ffff33;
   margin:0 0 -1px 0;
   color:#000;
}

/*zelf toegevoegd, submenu ook van kleur veranderen*/
.module_menu ul li ul #current a:hover{
   display: block;
   padding: 3px 5px 3px 1.0em;
   border-left: 20px solid #000;
   border-top: 1px solid #3366ff;
   background-color: #ffff33;
   margin:0 0 -1px 0;
   color:#000;
}


#header .module {
   margin-bottom: 0em;
   padding: 0; border: 0px;
}


#mainlevel-nav {
   list-style:none;
   float:right;
   margin:0;
   padding:0;
   width:100%;
   list-style-type:none;
   position:absolute;
   bottom:0px;
   right:10px;
}

#mainlevel-nav li {
   list-style:none;
   float:right;
   margin:0;
   padding:0px;
}

#mainlevel-nav a:link,#mainlevel-nav a:visited {
   float:left;
   display:block;
   color:#000;
   text-decoration:none;
   margin:0 2px;
   padding:7px 8px 5px 8px;
   border-left: 1px solid #80896c;
   border-top: 1px solid #80896c;
   border-right: 1px solid #80896c;
   border-bottom: 1px solid #80896c;
   background:#DCE6CF;
}

#header #active_menu-nav, #mainlevel-nav #current a {
   float:left;
   display:block;
   color:#000;
   text-decoration:none;
   margin:0 2px;
   padding:7px 8px 5px 8px;
   border-left: 1px solid #80896c;
   border-top: 1px solid #80896c;
   border-right: 1px solid #80896c;
   border-bottom: 1px solid #fff;
   background:#fff;
}

#mainlevel-nav #current {
background:#fff;
}

#mainlevel-nav li a:hover {
background:#fff;
}

.pagination span, .pagination a, .pagination strong{
   margin:0 3px;
}
I was trying to daydream, but my mind kept wandering...
pi_63092294
Tering wat een lap CSS. Is dat werkelijk allemaal nodig?

overigens denk ik dat het hier fout gaat

1
2
3
4
5
6
7
8
9		.module_menu ul li ul #current a:hover{
   display: block;
   padding: 3px 5px 3px 1.0em;
   border-left: 20px solid #000;
   border-top: 1px solid #3366ff; <---------
   background-color: #ffff33;
   margin:0 0 -1px 0; <-----------
   color:#000;
}



die divs overlappen elkaar, dus de border van de onderste valt over de bovenste. Blijkbaar is IE niet erg consequent in welke border over welke heenvalt en verandert dit bij het hoveren.

nog wat tips:
- Het is niet nodig de volledige nodestructuur te gebruiken als selector. Zoals hierboven: "#current a" was genoeg geweest
- verdiep je eens in shorthand notaties
- probeer te voorkomen dat je (zoals hierboven ook) properties dubbel declareert. Anders zoek je je rot als je iets moet aanpassen.
pi_63353532
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		 #sidebar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 200px;
padding-left: 550px;
margin: 0px;
float:left;   
height: 0px;
}
#sidebar h1 {
display: block;
background-color:#FF9900;
font-size: 100%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:215px;
}

#sidebar ul {
list-style: none;
margin: 0px;
padding: 0px;
border: 1px;
}
#sidebar ul li {
margin: 0px;
padding: 0px;
}
#sidebar ul li a {
font-size: 100%;
display: block;
border-bottom: 1px dashed #C39C4E;
padding: 5px 0px 2px 4px;
text-decoration: none;
background-color: yellow;
color: #666666;
width:200px;
} 


Waarom springt het menu in internet explorer in en in firefox niet :( ?



:)
pi_63354534
Beetje vaag. Heb je een linkje?

-edit-
mcD hier
pi_63371844


De tekst wil ik in IE gewoon netjes helemaal naar links hebben staan.
pi_63373191
Wat een heerlijke browser toch, dat IE .

Gebruik je wel een doctype tag?
pi_63377138
Jup

1
2
3		  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
pi_63377409
Heb je niet gewoon een linkje ofzo? Of op zijn minst een stukje code? dat werkt toch vaak een stuk makkelijker...
pi_63377661
Website:
http://www.hokje10.nl/

+ bovenstaande CSS.
pi_63378745
<!--[if IE]><style type="text/css">#sidebar li {text-indent:-15px; } </style> <![endif]-->

Lelijk als de hel maar ik heb het uiteindelijk zo opgelost
pi_63379196
Het werkt . Bedankt, k had hier zelf noooit op gekomen.
pi_63393366
Er gaat iets mis met je conditional comment! Het staat nu in firefox te ver naar links
pi_63394824
quote:
Op vrijdag 21 november 2008 01:36 schreef mcDavid het volgende:
Er gaat iets mis met je conditional comment! Het staat nu in firefox te ver naar links
Ja, de code voor de conditional comment is niet goed. En 't staat op de verkeerde plaats.
fokstok.nl
  vrijdag 21 november 2008 @ 11:30:17 #30
141104 Patje1987
Madre me quiero un frikandel.
pi_63399498
TVP
Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!
pi_63404497
Waar moet hij nou ?
pi_63405423
Je moet gewoon precies die regel zoals ik hem had in de head sectie zetten.
  vrijdag 21 november 2008 @ 15:22:07 #33
141104 Patje1987
Madre me quiero un frikandel.
pi_63406233
Op verzoek, ik kreeg hem in firefox niet opgelost dat de height niet op 100% wilde. Sowieso moeten alle divs waar de div in zit op 100%, en dat was ook zo, heb ze allemaal even een standaard hoogte gegeven en het bleek dat ie vastliep op de holder (daar zitten 2 divs in). Toen heb ik de body gewoon een background-image gegeven want het menu resized toch wel mee :P.

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14		<div id="holder">
<div id="menu" runat="server" class="menu">
    <div class="header">
        <div class="version">Versie nummer</div>
        <div id="usermenu" runat="server" class="usermenu"></div>
    </div>
    <div id="menucontent" runat="server" class="menucontent"></div>
</div>
<div id="content">
    <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
    </asp:contentplaceholder>
</div>
</div>
<div id="footer">footer</div>


CSS
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		html
{
   height: 100%;
}

body
{
   margin: 0;
   padding: 0;
   font-family: Verdana;
   height: 100%;
   background: url(../images/menubackground.png) repeat-y;
}

#holder
{
   width: auto;
   height: 100%;
}

.menu
{
   height: 100%;
   width: 220px;
   float: left;
}
Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!
pi_63406598
quote:
Op vrijdag 21 november 2008 @ 15:22 schreef Patje1987 het volgende:
Op verzoek, ik kreeg hem in firefox niet opgelost dat de height niet op 100% wilde. Sowieso moeten alle divs waar de div in zit op 100%, en dat was ook zo, heb ze allemaal even een standaard hoogte gegeven en het bleek dat ie vastliep op de holder (daar zitten 2 divs in). Toen heb ik de body gewoon een background-image gegeven want het menu resized toch wel mee .

HTML
[ code verwijderd ]

CSS
[ code verwijderd ]
Dat is idd een veelgebruikte oplossing voor datsoort problemen!
pi_63410522
Edit: hij werkt wel in IE

[ Bericht 23% gewijzigd door hello_moto1992 op 21-11-2008 18:10:53 ]
pi_63410751
quote:
Op vrijdag 21 november 2008 18:02 schreef hello_moto1992 het volgende:
Edit: hij werkt wel in IE
Er staan nog wel wat foutjes in stylegreen.css. Om te beginnen regel 41. In css kun je geen conditional comments plaatsen, en al helemaal niet in html-stijl.
Dan regel 114 en 119. Die staan na een accolade sluiten, en waarschijnlijk moeten ze ervoor. Zo doen ze in ieder geval niets.
fokstok.nl
pi_63410795
En er zitten nog wat foutjes in je html. De meeste moet je simpel kunnen oplossen.
fokstok.nl
pi_63425163
De CSS is inmiddels opgelost. De rest ook een beetje. K moet er later nog mee bezig...al zie k niet echt wat er nu mis mee is
pi_63425255
Je hebt wel gezien dat er een linkje staat in m'n vorige post?
fokstok.nl
pi_63429112
TVP
Bodybuilding #1
Hardlopen #2
pi_63431474
quote:
Op zaterdag 22 november 2008 11:37 schreef Light het volgende:
Je hebt wel gezien dat er een linkje staat in m'n vorige post?
Jazeker! Ik gebruik het ook wel voor mijn site voor school.

Maar er waren vanmiddag nog 4 fouten over, maar k snapte niet hoe k die kon oplossen. Nu is het ineens nog maar 1 fout
pi_63439496
Ik heb ook even gekeken, er staan 4 foutmeldingen en aan de foutmeldingen te zien hoef je alleen de eerste op te lossen. De rest gaat dan automatisch ook goed. Die eerste melding geeft aan dat er ergens een div geopend wordt die niet weer wordt afgesloten. Er staat dus een <div> meer dan een </div>
fokstok.nl
pi_63476683
Ik heb een transparante PNG. http://hokje10.nl/img/bannergreen.png
Die wil ik in de header op een ander plaatje plakken. In de CSS heb ik dus in het ene plaatje, http://hokje10.nl/1.png , gezet. In de HTML heb ik daar de transparante PNG op gezet.

Maar nu wordt de achtergrond van de transparante PNG opeens wit. Als ik hem in de HTML code zet is hij wel goed.

CSS:
1
2
3
4		#logo {
   height: 145px;
   width: 960px;
    background: url(1.png) no-repeat;} 


HTML:
1
2
3		   <div id="logo">
<img src="img/bannergreen.png" alt="www.hokje10.nl" />
   </div> 
pi_63477189
quote:
Op maandag 24 november 2008 @ 13:40 schreef hello_moto1992 het volgende:
Ik heb een transparante PNG. http://hokje10.nl/img/bannergreen.png
Die wil ik in de header op een ander plaatje plakken. In de CSS heb ik dus in het ene plaatje, http://hokje10.nl/1.png , gezet. In de HTML heb ik daar de transparante PNG op gezet.

Maar nu wordt de achtergrond van de transparante PNG opeens wit. Als ik hem in de HTML code zet is hij wel goed.

CSS:
[ code verwijderd ]

HTML:
[ code verwijderd ]
IE6?
Die ondersteunt geen alpha transparency. Althans niet zonder hacks.
pi_63477299
quote:
Op maandag 24 november 2008 13:56 schreef mcDavid het volgende:

[..]

IE6?
Die ondersteunt geen alpha transparency. Althans niet zonder hacks.
Nee Firefox/IE7. Kijk maar eens op www.hokje10.nl bovenaan.
pi_63477416
hmm dan is er toch echt wat mis met je plaatje lijkt me.
pi_63477511
quote:
Op maandag 24 november 2008 13:40 schreef hello_moto1992 het volgende:
Ik heb een transparante PNG. http://hokje10.nl/img/bannergreen.png
Die wil ik in de header op een ander plaatje plakken. In de CSS heb ik dus in het ene plaatje, http://hokje10.nl/1.png , gezet. In de HTML heb ik daar de transparante PNG op gezet.

Maar nu wordt de achtergrond van de transparante PNG opeens wit. Als ik hem in de HTML code zet is hij wel goed.

CSS:
[ code verwijderd ]

HTML:
[ code verwijderd ]



1background: transparent url(1.png) no-repeat;

of
1
2		background-image: url(1.png);
background-repeat: no-repeat;
() en in het laatste geval moet het niet toevallig zo zijn dat de background-color ergens overgeerft wordt..


edit
die voorbeeldcode werkt niet omdat de hader div natuurlijk niet de IMG bevat .. maar dat overerfen van en background-color bleek dus wel te gebruen:

in je code staat:
1
2
3
4
5
6		img {
   border: 1px solid #f1f1f1;   
   background-color: #f5f5f5; 
   margin: 5px;
   padding: 5px; 
   text-align: center; }

waarschijnlijk moet je afvragen waarom dat precies is (waarschijnlijk o een nette 'band' om afbeeldingen te maken)
maar dat kun je dan betere een ietwat preciesere selector geven, bv iets als DIV#contentmid IMG { foo: bar; }
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_63479519
Ok, thanx! ik heb voor het gemak die rand maar ff verwijderd. Hij doet het nu .

edit:

1
2
3
4
5
6
7		 #contentmid img {
   margin: 5px;
   padding: 5px; 
   text-align: center; 
border: 1px solid #f1f1f1;   
   background-color: #f5f5f5; 
}


Dit heb k toch maar toegevoegd om de rand bij de andere plaatjes wel te houden.

[ Bericht 66% gewijzigd door hello_moto1992 op 24-11-2008 18:11:32 ]
  FOK!-Schrikkelbaas dinsdag 25 november 2008 @ 20:56:40 #49
1972 Swetsenegger
Egocentrische Narcist
pi_63518717
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <title> home</title>
      <link rel="stylesheet" type="text/css" href="includes/ui.css" />
      </head>
   <body>
      <div class="container">
                   <div id="top">
                          top
                   </div>
                        <div class="left" style="border:solid 1px red;">
                          links
              </div>
         <div class="bottom">
                              <p>Test...</p>
         </div>
      </div>
   </body>
</html>


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		html, body {
   margin:0;
   padding:0;  
   height:100%; 
}

body{
   font-family: tahoma, verdana, Sans, sans-serif;
   background-image: url(../image/bg.gif);
}
      
.container{
   position:relative;
   border: 1px solid #c5d6f9;
    margin: 20px 0px 5px 0px;
    background-color: #fffffe;
   margin:0 auto; /*horizontale centrering. Werkt niet in IE quircksmode. Dan text-align:center aan body toevoegen*/
   width:1000px;
}


#top{
   position:relative;
   height:100px;
   padding:0;
}

.bottom{
   float:right;
   width:834px;
   height:500px;
   min-height:500px;
}

.left{
   float:left;
   height:500px;
   min-height:500px;
   width:156px;
}


Waarom worden 'left' en 'bottom' niet genest binnen 'container' :?
 | FOK! Schrikkelbaasch
pi_63518880
Dat worden ze wel, maar met die float haal je ze uit de natuurlijke float, waardoor de overige elementen geen rekening meer houden met de grootte.

Zet er een divje onder met clear:both, dan dwingt die de container om er weer omheen te gaan staan.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - deel 10
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')