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.
  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.
pi_63410795
En er zitten nog wat foutjes in je html. De meeste moet je simpel kunnen oplossen.
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?
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>
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' :?
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.
  FOK!-Schrikkelbaas dinsdag 25 november 2008 @ 21:05:00 #51
1972 Swetsenegger
Egocentrische Narcist
pi_63518948
quote:
Op dinsdag 25 november 2008 21:02 schreef mcDavid het volgende:
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.
Ik heb nu de floats in een wrap gezet met een min height en dat lijkt ook te werken... Maar vreemd dat je ook moet 'clearen' als er na je floats geen divs meer komen.
pi_63519065
dat werkt inderdaad, totdat de content van de div's die je gefloat hebt hoger wordt dan die minimum height. Dan zit je weer met het zelfde probleem.

En eigenlijk, als je er over nadenkt... dan zit er wel wat in. Of het handig is is een tweede.

Anyway gewoon <div style="clear:both"></div> eronder en klaar.

Mocht er een footer onder komen, kun je die er ook voor gebruiken.
  FOK!-Schrikkelbaas dinsdag 25 november 2008 @ 21:14:06 #53
1972 Swetsenegger
Egocentrische Narcist
pi_63519206
quote:
Op dinsdag 25 november 2008 21:09 schreef mcDavid het volgende:
dat werkt inderdaad, totdat de content van de div's die je gefloat hebt hoger wordt dan die minimum height. Dan zit je weer met het zelfde probleem.
Dat vreesde ik al...
quote:
En eigenlijk, als je er over nadenkt... dan zit er wel wat in. Of het handig is is een tweede.
Wat dan?
quote:
Anyway gewoon <div style="clear:both"></div> eronder en klaar.

Mocht er een footer onder komen, kun je die er ook voor gebruiken.
Die komt er wellicht onder dus dat gaan we maar doen.
  donderdag 27 november 2008 @ 20:01:10 #54
164509 Banzaiaap
Tony Rocky Horror
pi_63574412
Heb weer een leuk probleem? Mja, probleem.. ik probeer mn code zo netjes mogelijk te houden, maar heb geen idee hoe.. Heb namelijk een content div die over de nav bar heen moet vallen, maar 2 verschillende achtergronden moet hebben. 1 achtergrond voor de gradient aan de bovenkant van de main-content div en eentje voor de dubbele border. (Ik weet het omslachtig, maar het MOET kunnen )

Tot zover heb ik het al mooi weten te krijgen, van bovenaf gezien dan: http://test.banzaidesign.nl/

Moet dus uiteindelijk zo gaan worden:
  vrijdag 28 november 2008 @ 11:29:41 #55
141104 Patje1987
Madre me quiero un frikandel.
pi_63590258
quote:
Op donderdag 27 november 2008 20:01 schreef Banzaiaap het volgende:
Heb weer een leuk probleem? Mja, probleem.. ik probeer mn code zo netjes mogelijk te houden, maar heb geen idee hoe.. Heb namelijk een content div die over de nav bar heen moet vallen, maar 2 verschillende achtergronden moet hebben. 1 achtergrond voor de gradient aan de bovenkant van de main-content div en eentje voor de dubbele border. (Ik weet het omslachtig, maar het MOET kunnen )

Tot zover heb ik het al mooi weten te krijgen, van bovenaf gezien dan: http://test.banzaidesign.nl/

Moet dus uiteindelijk zo gaan worden:
[ afbeelding ]
Ik zou de body een achtergrond geven, en dan repeaten natuurlijk. Daarna en wrapper maken met bovenin een header div zonder achtergrond, waar je navigatie inkomt, en dan daaronder een div met je content en die een achtergrond geven (van de content).
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_63601968
tvp
  woensdag 3 december 2008 @ 23:23:56 #57
87680 Mirel
Mirel wil een bongophone.
pi_63741924

Ik wil er eentje rechts hebben, maar hoe moet je het opdelen? Momenteel zijn de rode in een div en ze zijn apart ook een div, en de blauwe in een div. Heb float left in de rechter gegooid, en die komt rechts te staan, maar dan tussen de andere 2 in.


Hoe moet ik het nou opdelen dat ie wél zoals in de paint komt?
When all else fails, you always have delusion.
pi_63743004
Je HTML en CSS posten zou handig zijn Of liever nog: ergens online zetten.
  donderdag 4 december 2008 @ 00:09:36 #59
87680 Mirel
Mirel wil een bongophone.
pi_63743187
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
41
42
43
44
45
46
47
48
49
50
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Matrozenkoor Apeldoorn</title>
   <link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
    <div id="header">
        <h1></h1>
           <p>slogan hier</p>
    </div> <!--einde header-->   
    <div id="inhoud">
    
       <div id="rij1">    
            <div id="welkom">
            <h3 id="welkombalk">Welkom!</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
         Sed posuere, purus nec mollis vulputate, lacus arcu bibendum augue, 
         ac blandit nunc diam ac massa. Mauris in purus at odio fringilla viverra. 
         Vestibulum et tellus sed massa pellentesque laoreet. Suspendisse eget nisi 
         sit amet elit semper ullamcorper.</p>   
            </div>
            
            <div id="agenda">
            <h3 id="agendabalk">Agenda</h3>
         <p>1 december optreden
         2 december optreden
         3 december optreden</p>
            </div>
       </div> <!--einde rij1-->
        
        <div id="rij2">    
           <div id="laatstenieuws">
            <h3 id="laatstenieuwsbalk">Het laatste nieuws</h3>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
         Sed posuere, purus nec mollis vulputate, lacus arcu bibendum augue, 
         ac blandit nunc diam ac massa. Mauris in purus at odio fringilla viverra. 
         Vestibulum et tellus sed massa pellentesque laoreet. Suspendisse eget nisi 
         sit amet elit semper ullamcorper.</p>   
            </div>   
       </div> <!--einde rij2-->
        
    </div> <!--einde inhoud-->   
</div> <!--einde container-->
</body>
</html>

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
html {

}

body {
background: url(images/strookheader.jpg) repeat-x;
font-size: 90%;
font-family: verdana, calibri, tahoma;
line-height: 1.6em;
text-align: center;
color: #444444;
}

ul,li, img, body, html { 
margin: 0; padding: 0;
}

a {
text-decoration: none;
color: #00d256;
}

a:hover {
text-decoration: underline;
}

a img (
border: none;
}

h3 {
background: url(images/strookitem.jpg) repeat-x;
font-size: 12px;
font-family: verdana, calibri, tahoma;
color: #FAFAFA;
margin: 0;
padding: -.2em .5em;
text-align: left;
text-transform: lowercase;
font-weight: normal;
}

.fr {
float: right;
}

.fl {
float: left;
}

#container {
text-align: left;
width: 866px;
margin: 0 auto;
}

#header {
background: url(images/header.jpg) no-repeat;
width: 866px;
height: 195px;
}

#inhoud {
padding: 0 1em;
}

#inhoud div {
overflow: hidden;
}

#rij1, #rij2 {
margin-bottom: 2em;
}

#rij1 div,
#rij2 div, {
border: 1px solid #ababab;
}

#rij1 #welkombalk {
height: 50x;
margin: 0;
padding: 0;
}


#agenda {
float: right;
width: 200px;
}

div namen spreken voor zich
When all else fails, you always have delusion.
  donderdag 4 december 2008 @ 08:34:33 #60
74548 Jo0Lz
Lick the box!
pi_63746921
Volgens mij moet je dat blok dat je aan de zijkant wilt hebben, buiten de "inhoud" div, maar in de "container" div zetten. Ik kan het niet zien, kun je het ergens online zetten?
(Ik heb je source wel gezien, maar mis natuurlijk de plaatjes in de opmaak.)
Yes we can! | I didn't fail, it's just postponed success.
  donderdag 4 december 2008 @ 09:12:45 #61
87680 Mirel
Mirel wil een bongophone.
pi_63747456
http://www.mirelmasic.nl/website/

De andere 2 apart dus, bínnen hun div, en de agenda los apart.

Ik zal dit eens proberen

[ Bericht 55% gewijzigd door Mirel op 04-12-2008 09:30:12 ]
When all else fails, you always have delusion.
  donderdag 4 december 2008 @ 10:02:53 #62
87680 Mirel
Mirel wil een bongophone.
pi_63748293
Ok dat is dus gelukt, maar ik heb moeite met waarop ik de float nou moet doen.

#welkom en #laatstenieuws zijn de linker 2, en het gedoe eromheen is de #inhoud, maar tot zover hoef ik niet in de #inhoud te kloten.
#agenda is de rechter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#welkom {
float: left;
width: 300px;
border: 1px solid #ababab;
}

#laatstenieuws {
float: right;
width: 300px;
border: 1px solid #ababab;
}


#agenda {
width: 200px;
border: 1px solid #ababab;
}


Ze komen wel naast elkaar, maar telkens net niet goed.

Het is misschien beter als ik 2 divs heb, ín de linker div zitten laatstenieuws en welkom, en ín de rechter zit agenda.
When all else fails, you always have delusion.
  donderdag 4 december 2008 @ 10:05:01 #63
141104 Patje1987
Madre me quiero un frikandel.
pi_63748352
quote:
Op donderdag 4 december 2008 10:02 schreef Mirel het volgende:
Ok dat is dus gelukt, maar ik heb moeite met waarop ik de float nou moet doen.

#welkom en #laatstenieuws zijn de linker 2, en het gedoe eromheen is de #inhoud, maar tot zover hoef ik niet in de #inhoud te kloten.
#agenda is de rechter.
[ code verwijderd ]

Ze komen wel naast elkaar, maar telkens net niet goed.

Het is misschien beter als ik 2 divs heb, ín de linker div zitten laatstenieuws en welkom, en ín de rechter zit agenda.
Je geeft zelf het antwoord al, gewoon 2 divs maken. In de linker welkom en laatste nieuws en in de rechter je agenda.
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!
  donderdag 4 december 2008 @ 10:08:13 #64
87680 Mirel
Mirel wil een bongophone.
pi_63748429
Jeujjjj dat werkte.
When all else fails, you always have delusion.
  donderdag 4 december 2008 @ 10:13:04 #65
87680 Mirel
Mirel wil een bongophone.
pi_63748539
Nou snap ik dus écht hoe je met divs moet werken.
When all else fails, you always have delusion.
  donderdag 4 december 2008 @ 10:16:24 #66
141104 Patje1987
Madre me quiero un frikandel.
pi_63748619
quote:
Op donderdag 4 december 2008 10:08 schreef Mirel het volgende:
Jeujjjj dat werkte.
Laat eens zien wat je hebt gemaakt
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!
  donderdag 4 december 2008 @ 10:28:48 #67
87680 Mirel
Mirel wil een bongophone.
pi_63748914
http://www.mirelmasic.nl/website/ (IE werkt ie alleen nog) Kan iemand kijken of het in firefox ook werkt? Heb namelijk alleen Opera en IE.
When all else fails, you always have delusion.
  donderdag 4 december 2008 @ 13:04:47 #68
141104 Patje1987
Madre me quiero un frikandel.
pi_63752866
Hij werkt totaal niet in firefox.
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!
  donderdag 4 december 2008 @ 13:25:25 #69
87680 Mirel
Mirel wil een bongophone.
pi_63753439
Waar kan dat aan liggen? :/
When all else fails, you always have delusion.
  donderdag 4 december 2008 @ 13:57:34 #70
74548 Jo0Lz
Lick the box!
pi_63754384
quote:
Op donderdag 4 december 2008 13:25 schreef Mirel het volgende:
Waar kan dat aan liggen? :/
FireBug zegt dat je stylesheet ophoud voor het a img gedeelte.
In IE 7 en in Safari neemt hij de css wel mee, maar in opera en FF niet?
Zie niets bijzonders in de code, zou het zo niet weten...
Yes we can! | I didn't fail, it's just postponed success.
  donderdag 4 december 2008 @ 14:13:21 #71
141104 Patje1987
Madre me quiero un frikandel.
pi_63754861
quote:
Op donderdag 4 december 2008 13:57 schreef Jo0Lz het volgende:

[..]

FireBug zegt dat je stylesheet ophoud voor het a img gedeelte.
In IE 7 en in Safari neemt hij de css wel mee, maar in opera en FF niet?
Zie niets bijzonders in de code, zou het zo niet weten...
Hij hoeft iig niet die h3 een ID te geven omdat ie al gedefineerd wordt in de CSS zelf.
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_63774553
quote:
Op donderdag 4 december 2008 13:25 schreef Mirel het volgende:
Waar kan dat aan liggen? :/
Er staat in ieder geval nog een fout in je css. Padding mag namelijk niet negatief zijn (margin mag dat wel).
pi_63801974
vraagje, benieuwd of het mogelijk is:

ik wil de standaard tekst die ik opgeef in een text veld (input type=text) grijzig laten zijn.. ( dit lukt wel)
echter zodra er tekst wordt ingetikt wil ik dat deze zwart is
dus een kleur verandering bij het invoeren van "eigen" tekst..
is dat mogelijk met CSS of moet ik hier javascript voor gaan inzetten?
pi_63802011
Volgens mij kan dat met de psuedo-class ":focus"


1textarea:focus {color:#000}


zoiets dus..

[ Bericht 40% gewijzigd door mcDavid op 06-12-2008 11:54:03 (verkeerde psuedo class :P) ]
pi_63802151
quote:
Op zaterdag 6 december 2008 11:47 schreef mcDavid het volgende:
Volgens mij kan dat met de psuedo-class ":focus"
[ code verwijderd ]

zoiets dus..
thnx

werkt weer niet in IE.. (8 in compatibilty mode), daar ga ik iig verder naar zoeken, heb nu een houvast
pi_63804311
Probeer het toch eens met active dan?

droevig stuk software, dat IE...
pi_63805270
quote:
Op zaterdag 6 december 2008 14:11 schreef mcDavid het volgende:
Probeer het toch eens met active dan?

droevig stuk software, dat IE...
IE8 in non compatibiliteits mode is errug relaxt
pi_63806179
quote:
Op zaterdag 6 december 2008 @ 15:15 schreef mschol het volgende:

[..]

IE8 in non compatibiliteits mode is errug relaxt
Ja omdat'ie dan eindelijk een strict-modus heeft. Zoals de andere browsers al sinds 2003 ofzo.
  zondag 7 december 2008 @ 23:02:39 #79
87680 Mirel
Mirel wil een bongophone.
pi_63837410
Kan je text links-onderaan een div zetten?
http://www.mirelmasic.nl/website/ Header en div is dan dit:


Als dit niet kan dan zal ik een andere approach moeten nemen voor de divs.
When all else fails, you always have delusion.
pi_63837849
quote:
Op zaterdag 6 december 2008 16:13 schreef mcDavid het volgende:

[..]

Ja omdat'ie dan eindelijk een strict-modus heeft. Zoals de andere browsers al sinds 2003 ofzo.
maar om eerlijk te zijn: in compatibiliteits modus kom ik bij m'n eigen css bar maar dan ook echt bar weinig tegen wat niet werkt... dus ik vraag me altijd maar weer af waarom men zo loopt te zeiken als het gewoon kan (en ik het kennelijk gewoon goed genoeg doe dat: a) alle browsers het snappen, b) W3c compliant is) enige zal zijn dat het misschien niet SEO is
pi_63838135
quote:
Op zondag 7 december 2008 @ 23:02 schreef Mirel het volgende:
Kan je text links-onderaan een div zetten?
http://www.mirelmasic.nl/website/ Header en div is dan dit:
[afbeelding]

Als dit niet kan dan zal ik een andere approach moeten nemen voor de divs.
Ik zou ze gewoon met margins uitlijnen zodat ze ongeveer onderaan staan.

Als je ze om wat voor reden dan ook echt van onderaf uit wilt lijnen, gebruik position:absolute; bottom:0;
Handigste is als je ze even in een div zet, en die uitlijnt..

[ Bericht 2% gewijzigd door mcDavid op 07-12-2008 23:52:55 (oeh, zin niet afgemaakt :') ]
pi_63838929
quote:
Op zondag 7 december 2008 @ 23:15 schreef mschol het volgende:

[..]

maar om eerlijk te zijn: in compatibiliteits modus kom ik bij m'n eigen css bar maar dan ook echt bar weinig tegen wat niet werkt... dus ik vraag me altijd maar weer af waarom men zo loopt te zeiken als het gewoon kan (en ik het kennelijk gewoon goed genoeg doe dat: a) alle browsers het snappen, b) W3c compliant is) enige zal zijn dat het misschien niet SEO is
IE7 doet het al behoorlijk prima idd, maar is nog steeds niet volledig strict op sommige punten. Maar in ieder geval de búgs zijn er voor een groot deel uit.
pi_63866567
Hoi iedereen,

Ik ben bezig met een website en ik heb een probleem waar ik maar niet uitkom... Op de volgende website is er iets raars aan de hand. Iedere keer dat ik klik op een afbeelding waar een link aan zit verspringt deze op de pagina, alsof de margin onclick veranderd... erg vervelend, dus ik hoopte dat hier iemand er een blik op zou kunnen werpen.

Kleine disclaimer: let niet op het gebruik van tables ipv div's etc

http://www.elckwatwils.nl/test_new/test.html
http://www.elckwatwils.nl/test_new/css.css

Testomgeving:
-Max OSX met FF2

Alvast tnx!
pi_63866860
klopt, precies zoals je in de CSS aangeeft:

1
2
3
4
5
6
7
8
9
10
11
#menutext .textitem a,a:hover,a:active{
   font-family: "Trebuchet MS", Arial;
   font-size: 12px;
   padding-left: 15px; <-----------------------
   padding-right:15px; <-----------------------
   font-weight: normal;
   color: #561420;
   text-decoration:none;
   font-weight:bold;
   border:0px;
}
pi_63872065
Ja maar dat heeft toch alleen betrekking op het menu? Daar is niks mis mee, ook als ik het verwijder blijven de afbeeldingen onclick verplaatsen...
pi_63875312
quote:
Op dinsdag 9 december 2008 10:19 schreef ludeau het volgende:
Ja maar dat heeft toch alleen betrekking op het menu? Daar is niks mis mee, ook als ik het verwijder blijven de afbeeldingen onclick verplaatsen...
Dat heeft betrekking op alle linkjes in het menu en op alle a:hover en a:active elementen.
pi_63876153
sowieso is je CSS een redelijk onoverzichtelijke brei geworden.

Het kan inderdaad soms handig zijn om verschillende items in één keer te defineren, of juist om eenzelfde item een aantal keer. Maar ik zou voorlopig gewoon ieder item op je pagina één keer apart in de CSS zetten. Dan zie je tenminste wat je doet.
Later kun je altijd nog besluiten sommige dingen samen te voegen of te splitsen.
pi_63877344
-edit:

oja, voor alle ,a:active elementen .blabla toevoegen helpt.. tnx!
pi_63898434
Ik ben op dit moment een website aan het maken waarbij het veel code gaat schelen als ik gebruik kan maken van dotted notation in css en multiple classes, dus <div class="classa classb"> en vervolgens div.classa.classb {} in de sheet gebruiken. Nou weet ik dat IE6 dotted notation niet ondersteunt (multiple classes wel), en hoe erg ik die browser ook haat, ik moet hem blijven ondersteunen. Ik vroeg me af of iemand toevallig op de hoogte is van een javascriptje, of een andere methode, om die support er in te hacken?
pi_63898756
De vraag is denk ik of je de presentatie af wilt laten hangen van het gebruik van Javascript. Dit is net iets meer dan een cosmetische verbetering m.b.v. Javascript (zoals rounded corners, etc), omdat je je hele design hiermee potentieel kan verneuken in een IE6 zonder JS. Als je dat wil gaan afvangen door netjes te "degraden" voor IE6 zonder JS dan kun je het beter meteen zonder doen

Een script ken ik niet, maar als het er is moet er makkelijk op te googlen zijn toch?
pi_63898763
Volgens mij is de enige oplossing om dit in IE6 te laten werken het maken van een nieuwe, gecombineerde class.

Dus in plaats van <div class="classa classb"> en div.classa.classb maak je dan het volgende:

1
2
3
4
5
6
7
CSS:
div.classa { }
div.classb { }
div.classa_classb { }

HTML:
<div class="classa_classb">


Niet echt optimaal, maar voor zover ik weet de enige oplossing.
pi_63898964
Opzich geen probleem, maar het hele principe dat class b dan een aantal properties van class a overschrijft is weg..
pi_63899038
De dag dat IE6 nog <5% marktaandeel heeft spring ik een gat in de lucht
pi_63901016
quote:
Op woensdag 10 december 2008 10:19 schreef Intrepidity het volgende:
De dag dat IE6 nog <5% marktaandeel heeft spring ik een gat in de lucht
Amen.

Is er niet iets als Sass voor PHP? Dat gebruik ik altijd in Rails projecten, en dan kun je simpel class1 en class2 includen in class1_class2. Overerving werkt dan gewoon, en je hebt geen duplicate code.
  woensdag 10 december 2008 @ 17:41:22 #95
87680 Mirel
Mirel wil een bongophone.
pi_63910426
www.mirelmasic.nl/matrozenkoor
http://www.mirelmasic.nl/oude/website-oud/ (IE)

Uiteindelijk is dus zoals in 1e link geworden. Weet iemand nog ideeën om dit wat meer pro te laten ogen? Het ziet er zo amateuristisch uit
When all else fails, you always have delusion.
pi_63910514
Kleiner en ander font in het menu bovenaan, dit lijkt wel comic sans.. Ik kan het niet helemaal plaatsen maar de kleuren van de box aan de rechterkant kloppen niet helemaal, en daarnaast is de tekst die daarin staat slecht leesbaar.
Daarnaast:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.mirelmasic.nl%2Fmatrozenkoor%2Fcontact.html
pi_63911935
quote:
Op woensdag 10 december 2008 @ 17:41 schreef Mirel het volgende:
www.mirelmasic.nl/matrozenkoor
http://www.mirelmasic.nl/oude/website-oud/ (IE)

Uiteindelijk is dus zoals in 1e link geworden. Weet iemand nog ideeën om dit wat meer pro te laten ogen? Het ziet er zo amateuristisch uit
Er moeten plaatjes van schelpen en aangespoelde ankers en visnetten enzo op het strand!
  woensdag 10 december 2008 @ 20:03:15 #98
87680 Mirel
Mirel wil een bongophone.
pi_63914099
quote:
Op woensdag 10 december 2008 18:45 schreef mcDavid het volgende:

[..]

Er moeten plaatjes van schelpen en aangespoelde ankers en visnetten enzo op het strand!
Leuk dat je ziet dat het een strand en zee moet voorstellen, was precies mijn bedoeling.
Maar dat op een handige javascript manier? Lijkt me niet zo makkelijk met divs kloten eerlijk gezegd...

En nou snap ik het verschil tussen id's en classes wel. Zal dat nog gaan veranderen
edit: da's klaar.

He wat is de css code om text gewoon te forceren onder elkaar te komen? Nou heb ik een list bij de agenda, maar als ik de lettertype kleiner doe, dan komt de text naast elkaar, gewoon omdat er genoeg ruimte is.

[ Bericht 18% gewijzigd door Mirel op 11-12-2008 11:38:26 ]
When all else fails, you always have delusion.
pi_64200859
Iemand nog leuke tips om een website op te vrolijken met kermis-attributen?
pi_64201852
kerstmis dus
pi_64201958
Ik heb nog nooit gehoord van "jingle-bells" of "chrsitmas-tree" CSS properties. Met andere woorden: wat heeft dit met CSS te maken
pi_64202468
quote:
Op zondag 21 december 2008 11:16 schreef Roy_T het volgende:
Ik heb nog nooit gehoord van "jingle-bells" of "chrsitmas-tree" CSS properties. Met andere woorden: wat heeft dit met CSS te maken
hij wil waarschijnlijk sneeuwvlokjes of lampjes rond de site hebben oid?

http://www.schillmania.com/projects/snowstorm/
pi_64204967
quote:
Op zondag 21 december 2008 11:16 schreef Roy_T het volgende:
Ik heb nog nooit gehoord van "jingle-bells" of "chrsitmas-tree" CSS properties. Met andere woorden: wat heeft dit met CSS te maken
Nou misschien meer met 'opmaak' dan
  zondag 21 december 2008 @ 17:46:20 #104
134533 donroyco
dus niet Donroyco
pi_64214526
Hoe kan ik het menu fixen in Internet Explorer? Het menu van 'Tentoonstellingen' loopt daar maar tot net aan de content, dan valt ie erachter..

De site

Bij voorbaat dank!
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_64263683
Ik doe al behoorlijk lang puur ontwerp in photoshop, waarna ik die doorgeef aan een slicer/coder, maar begin dat toch wel zonde te vinden, dus vandaar dat ik nu deze tutorial volgl:
http://css-tricks.com/vid(...)age-1/#comment-43161

Tot min. 15 gaat het prima, maar op een gegeven moment laat hij even als voorbeeldje zien of z'n background image het doet. Bij mij geeft hij echter geen enkele blijk van het ook openen van de CSS.
Mijn site is wel anders opgebouwd dan die van hem en dat was ik van plan daarom een beetje op mijn eigen manier te gaan doen, maar dan zou hij op zijn minst toch gewoon mijn plaatje moeten laten zien, waar ik naar verwijs?

Heb hier een zipje voor wat meer opheldering, heb de PSD er voor de leukigheid even bijgedaan. Heb hem expres simpel gehouden, zodat het niet te ingewikkeld was voor het codeerwerk.
Link:
http://www.megaupload.com/?d=DH9MR7U4
Bij voorbaat dank
pi_64264517
quote:
Op zondag 21 december 2008 @ 17:46 schreef donroyco het volgende:
Hoe kan ik het menu fixen in Internet Explorer? Het menu van 'Tentoonstellingen' loopt daar maar tot net aan de content, dan valt ie erachter..

De site

Bij voorbaat dank!
IE is een ramp met z-index enzo.
Google eens op haslayout... en geef sowieso #header en # content beide position:relative (zonder daadwerkelijke positie) en een Z-index. #header dan de hoogste natuurlijk.
-edit-
misschien juist position:relative van content weghalen... dat zou wel eens juist kunnen zijn waar IE over struikelt in dit geval...
pi_64264785
quote:
Op maandag 22 december 2008 @ 22:47 schreef Mindstate het volgende:
Ik doe al behoorlijk lang puur ontwerp in photoshop, waarna ik die doorgeef aan een slicer/coder, maar begin dat toch wel zonde te vinden, dus vandaar dat ik nu deze tutorial volgl:
http://css-tricks.com/vid(...)age-1/#comment-43161

Tot min. 15 gaat het prima, maar op een gegeven moment laat hij even als voorbeeldje zien of z'n background image het doet. Bij mij geeft hij echter geen enkele blijk van het ook openen van de CSS.
Mijn site is wel anders opgebouwd dan die van hem en dat was ik van plan daarom een beetje op mijn eigen manier te gaan doen, maar dan zou hij op zijn minst toch gewoon mijn plaatje moeten laten zien, waar ik naar verwijs?

Heb hier een zipje voor wat meer opheldering, heb de PSD er voor de leukigheid even bijgedaan. Heb hem expres simpel gehouden, zodat het niet te ingewikkeld was voor het codeerwerk.
Link:
http://www.megaupload.com/?d=DH9MR7U4
Bij voorbaat dank
stylesheet hoort ín de head, niet net eronder.
Verder is het praktischer als je je voorbeelden ergens online zet (everyoneweb ofzo voor gratis) en als je je HTML duidelijk indent...
  maandag 22 december 2008 @ 23:09:58 #108
134533 donroyco
dus niet Donroyco
pi_64265008
quote:
Op maandag 22 december 2008 23:01 schreef mcDavid het volgende:

[..]

IE is een ramp met z-index enzo.
Google eens op haslayout... en geef sowieso #header en # content beide position:relative (zonder daadwerkelijke positie) en een Z-index. #header dan de hoogste natuurlijk.
-edit-
misschien juist position:relative van content weghalen... dat zou wel eens juist kunnen zijn waar IE over struikelt in dit geval...
Dank voor je antwoord Ik ga het eens proberen
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_64265870
quote:
Op maandag 22 december 2008 23:06 schreef mcDavid het volgende:

[..]

stylesheet hoort ín de head, niet net eronder.
Verder is het praktischer als je je voorbeelden ergens online zet (everyoneweb ofzo voor gratis) en als je je HTML duidelijk indent...
ooooh, je wilt niet weten hoe lang ik er mee bezig ben geweest om te kijken wat er mis was, bedankt

en met indenten bedoel je het soms gebruiken van tabjes en witregels zodat het duidelijker is om iets op te zoeken?

Ik heb het nu in de head zo staan:
1
2
3
4
5
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>ForumPost.nl - Een kickstart voor je forum!</title>
</head>


en de style.css als:
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
@charset "utf-8";
/* CSS Document */

/*RESETS AND BASIC PAGE SETUP*/
*{margin: 0; padding: 0; }
html {overflow-y: scroll; }
body {
   font: 62,5% Verdana, sans-serif; 
   background: url;(images/bodybg.jpg); top left repeat;
}

ul {list-style: none inside; }
p {font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
a {outline: none; }
a img {border: none; }
/* END RESET */

/* TOOLBOX */
.floatleft {float: left; }
.floatright {float: right; }
.clear  {clear: both; }
/* END TOOLBOX */

/* STRUCTURE AND STUFF */
#page-wrap {
   width: 775px;
   margin: 0 auto;
}
/* END STRUCTURE */


maar wil hem nog steeds niet weergeven
pi_64272814
quote:
Op maandag 22 december 2008 23:24 schreef Mindstate het volgende:

[..]

ooooh, je wilt niet weten hoe lang ik er mee bezig ben geweest om te kijken wat er mis was, bedankt :D

en met indenten bedoel je het soms gebruiken van tabjes en witregels zodat het duidelijker is om iets op te zoeken?

Ik heb het nu in de head zo staan:
[ code verwijderd ]

en de style.css als:
[ code verwijderd ]

maar wil hem nog steeds niet weergeven :{
Bij background hoort na url geen ; te staan. De url die je opgeeft is normaal gesproken relatief ten opzichte van het css-bestand. Dat gaat wel goed hier, omdat ze beide in dezelfde directory staan. Het stukje "top left repeat;" is overbodig, omdat het de standaardwaarde is. Als je het wilt specificeren moet er geen puntkomma voor staan, alleen achter.

En ik zou html en body altijd samen pakken. Ook zou ik de initiele fontgrootte met een absolute waarde specificeren (dus in px, niet in % of em ofzo). Voor andere elementen kan een relatieve grootte wel.

1
2
3
4
html, body {
   font: 10px Verdana, sans-serif;
   background: url(images/bodybg.jpg);
}


Tip: Om fouten in een css-bestand op te sporen, kun je gebruik maken van een css-validator. Die hoort geen fouten te vinden (tenzij je bewust gebruik maakt van css hacks voor sommige browsers).
pi_64279926
Oh, het lag dus aan die ;, bedankt.

Ook bedankt voor die CSS Validator, kan nog goed van pas komen
pi_64284004
quote:
Op dinsdag 23 december 2008 @ 12:44 schreef Mindstate het volgende:
Oh, het lag dus aan die ;, bedankt.

Ook bedankt voor die CSS Validator, kan nog goed van pas komen
installeer sowieso even de Web Developer firefox addon, maakt het leven een stuk makkelijker!

-edit-
mcDavid hier dus
pi_64285324
quote:
Op dinsdag 23 december 2008 04:01 schreef Light het volgende:

En ik zou html en body altijd samen pakken.
Tenzij je relatieve waarden wilt gebruiken, want dan zou bijvoorbeeld "75%" betekenen dat de <body> een grootte heeft van 75% van de 75% van de <html>.
quote:
Ook zou ik de initiele fontgrootte met een absolute waarde specificeren (dus in px, niet in % of em ofzo). Voor andere elementen kan een relatieve grootte wel.
Tenzij je wilt dat de lettergrootte fatsoenlijk te resizen is in IE6
pi_64287097
quote:
Op dinsdag 23 december 2008 @ 15:00 schreef Roy_T het volgende:

[..]

Tenzij je wilt dat de lettergrootte fatsoenlijk te resizen is in IE6
Een jaar geleden was dat wel een goed punt, maar tegenwoordig heb ik zoiets van als je slecht ziend bent installeer je maar IE7
pi_64292400
Kan iemand mij uitleggen waarom
1
2
3
4
 iframe {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
niet werkt?

Het hoort volgens mij te werken (in firefox natuurlijk) . Ik wil dus elke ifframe op de site ronde hoeken geven
pi_64292486
Hoe kun je via css ingeven dat een bepaald plaatje altijd recht onder een ander plaatje staat? Ik doe het nu via het opgeven van het aantal pixels dat alle plaatjes van de randen moeten staan, maar dat is op een gegeven moment geen doen meer. Stel ik wil plaatje B onder plaatje A hebben, hoe stel ik dit in?
pi_64292643
quote:
Op dinsdag 23 december 2008 @ 18:16 schreef Mindstate het volgende:
Hoe kun je via css ingeven dat een bepaald plaatje altijd recht onder een ander plaatje staat? Ik doe het nu via het opgeven van het aantal pixels dat alle plaatjes van de randen moeten staan, maar dat is op een gegeven moment geen doen meer. Stel ik wil plaatje B onder plaatje A hebben, hoe stel ik dit in?
Alle plaatjes samen in een div zetten?
Beetje vaag probleem zo, zonder voorbeeld.
quote:
Op dinsdag 23 december 2008 @ 18:13 schreef hello_moto1992 het volgende:
Kan iemand mij uitleggen waarom
[ code verwijderd ]

niet werkt?

Het hoort volgens mij te werken (in firefox natuurlijk) . Ik wil dus elke ifframe op de site ronde hoeken geven
Het lijkt me het meest waarschijnlijk dat border-radius op iframes niet ondersteund worden. Sowieso werkt dit alleen in firefox, safari en chrome, maar dat weet je heh?
pi_64292866
quote:
Op dinsdag 23 december 2008 15:00 schreef Roy_T het volgende:

[..]

Tenzij je relatieve waarden wilt gebruiken, want dan zou bijvoorbeeld "75%" betekenen dat de <body> een grootte heeft van 75% van de 75% van de <html>.
Dan nog. Het gaat er om hoe groot de letters uiteindelijk worden. En of je een effect nou bereikt door 75% of door 87% op te geven, doet dan niet echt ter zake. Daarbij, als je een relatieve fontgrootte opgeeft, wat is dan je uitgangspunt? Relatief is immers altijd ten opzichte van iets anders.
quote:
Tenzij je wilt dat de lettergrootte fatsoenlijk te resizen is in IE6
Dan gebruik je daar maar een andere browser voor. Ik ga geen rekening houden met alle problemen van alle prehistorische browsers.
pi_64292972
quote:
Op dinsdag 23 december 2008 18:20 schreef mcDavid het volgende:

[..]

Alle plaatjes samen in een div zetten?
Beetje vaag probleem zo, zonder voorbeeld.
[..]

Het lijkt me het meest waarschijnlijk dat border-radius op iframes niet ondersteund worden. Sowieso werkt dit alleen in firefox, safari en chrome, maar dat weet je heh?
Ja dat weet ik Toch jammer dat het dan niet kan

[ Bericht 8% gewijzigd door hello_moto1992 op 23-12-2008 18:34:01 ]
  dinsdag 23 december 2008 @ 18:30:09 #120
134533 donroyco
dus niet Donroyco
pi_64293021
@mcDavid

"position: relative" weghalen heeft geholpen Dank!
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_64293509
quote:
Op dinsdag 23 december 2008 18:20 schreef mcDavid het volgende:

[..]

Alle plaatjes samen in een div zetten?
Beetje vaag probleem zo, zonder voorbeeld.
[..]

Het lijkt me het meest waarschijnlijk dat border-radius op iframes niet ondersteund worden. Sowieso werkt dit alleen in firefox, safari en chrome, maar dat weet je heh?
Heb het geheel even geupload, misschien dat het zo wat duidelijker is:
http://www.forumpost.nl/

Ik heb dat eerste plaatje (het logo) in een div gezet en ingesteld dat hij een bep. aantal pixels vanaf de top moet zijn. Nu heb ik nog een plaatje, waarvan ik wil dat hij recht onder dat logo kom, hoe dat dan in te stellen.

[ Bericht 14% gewijzigd door Mindstate op 23-12-2008 18:57:04 ]
pi_64295092
quote:
Op dinsdag 23 december 2008 @ 18:44 schreef Mindstate het volgende:

[..]

Heb het geheel even geupload, misschien dat het zo wat duidelijker is:
http://www.forumpost.nl/

Ik heb dat eerste plaatje (het logo) in een div gezet en ingesteld dat hij een bep. aantal pixels vanaf de top moet zijn. Nu heb ik nog een plaatje, waarvan ik wil dat hij recht onder dat logo kom, hoe dat dan in te stellen.
In welke browser heb je dat getest Het ziet er in iedere browser namelijk anders uit en bij geeneen heb ik het idee dat het zo hoort...
  dinsdag 23 december 2008 @ 23:14:13 #123
159635 Spike1506
NullPointerException
pi_64306294
quote:
Op dinsdag 23 december 2008 18:44 schreef Mindstate het volgende:

[..]

Heb het geheel even geupload, misschien dat het zo wat duidelijker is:
http://www.forumpost.nl/

Ik heb dat eerste plaatje (het logo) in een div gezet en ingesteld dat hij een bep. aantal pixels vanaf de top moet zijn. Nu heb ik nog een plaatje, waarvan ik wil dat hij recht onder dat logo kom, hoe dat dan in te stellen.
Ik zou eerst eens kijken naar je.css, die is namenlijk best een rotzooi.
Sowieso moet je nooit
1
2
3
4
* { 
margin: 0; 
padding: 0; 
}

gebruiken. Beste kun je margin en padding op 0 zetten in je body { }.
Ook moet je <ul> in een aparte div, deze zit nu gewoon los in de div met id: page-wrap. Deze zal dus gewoon bovenaan gezet worden.

Mijn tip(s):
- doe alles wat je op een andere positie wilt hebben een een div en geef deze een herkanbaae naam.
- geef deze divjes een border zodat je beter kunt zien waar ze staan.
- doe alles 1 voor 1 en kijk daarna pas hoe je de elementen in deze divs gaat stylen.
pi_64306509
quote:
Op dinsdag 23 december 2008 18:44 schreef Mindstate het volgende:

[..]

Heb het geheel even geupload, misschien dat het zo wat duidelijker is:
http://www.forumpost.nl/
Let ook eens op > als je een <div opent. Zou zomaar kunnen helpen.
pi_64306621
quote:
Op dinsdag 23 december 2008 @ 23:14 schreef Spike1506 het volgende:

[..]

Ik zou eerst eens kijken naar je.css, die is namenlijk best een rotzooi.
Sowieso moet je nooit * { margin: 0; padding: 0; } gebruiken. Beste kun je margin en padding op 0 zetten in je body { }.
Ook moet je <ul> in een aparte div, deze zit nu gewoon los in de div met id: page-wrap. Deze zal dus gewoon bovenaan gezet worden.

Mijn tip(s):
- doe alles wat je op een andere positie wilt hebben een een div en geef deze een herkanbaae naam.
- geef deze divjes een border zodat je beter kunt zien waar ze staan.
- doe alles 1 voor 1 en kijk daarna pas hoe je de elementen in deze divs gaat stylen.
Ben het er mee eens dat je dat 'resetten' beter achterwege kunt laten.
Je eerste tip ben ik het absolúút niet mee eens, klakkeloos alles in losse divjes gooien is onzin. Een list wordt al omvat door ul dus nergens voor nodig ook. Sterker nog ik zou die divjes om de img's ook weghalen. Of nog beter de img's weghalen en achtergrondafbeeldingen van maken.

Andere twee tips zijn wel weer hele goeie.
  dinsdag 23 december 2008 @ 23:20:27 #126
159635 Spike1506
NullPointerException
pi_64306639
quote:
Op dinsdag 23 december 2008 18:13 schreef hello_moto1992 het volgende:
Kan iemand mij uitleggen waarom
[ code verwijderd ]

niet werkt?

Het hoort volgens mij te werken (in firefox natuurlijk) . Ik wil dus elke ifframe op de site ronde hoeken geven
Wat als je de betreffende iframe(s) nu een id/class meegeeft om daarna deze id/class te stylen in je .css?
pi_64307319
quote:
Op dinsdag 23 december 2008 23:14 schreef Spike1506 het volgende:

Ook moet je <ul> in een aparte div, deze zit nu gewoon los in de div met id: page-wrap. Deze zal dus gewoon bovenaan gezet worden.
Er is geen enkele reden om een extra <div> om een <ul> te zetten. Een <ul> kun je gewoon een id geven en stylen, het is gewoon een blokelement. Voor de plaats op het scherm is een extra <div> dus niet nodig.
pi_64307436
quote:
Op dinsdag 23 december 2008 19:34 schreef mcDavid het volgende:

[..]

In welke browser heb je dat getest Het ziet er in iedere browser namelijk anders uit en bij geeneen heb ik het idee dat het zo hoort...
Hij was sowieso nog lang niet klaar, ik was alleen bezig met het in elkaar zetten van het geheel, toen ik er maar niet uitkwam hoe je simpelweg een plaatje onder een ander plaatje zet.

Allemaal heel erg bedankt voor jullie hulp, maar aangezien dit echt mijn eerste site is, is een heleboel voor mij nog echt abracadabra, ik gebruik deze tutorial: http://css-tricks.com/vid(...)age-1/#comment-43161

heb direct zijn stappen opgevolgd, waarbij ik er dus vanuit ging dat dit juist wel goed zou werken, maar niet dus

Ik zal kijken of ik iets van de opmerkingen kan bakken (als in; erachter komen wat ze betekenen)
pi_64307678
Tip: www.w3schools.com, start reading

-edit-
en begin met de tip van spike: alle elementen een achtergrondkleurtje geven (hoe lelijk ook) zodat je kunt zien wat er gebeurt.
  woensdag 24 december 2008 @ 12:57:36 #130
87680 Mirel
Mirel wil een bongophone.
pi_64321841
Weet er iemand nog goede open source systemen? Ik heb al een layout en wil een CMS systeem die het mogelijk maakt om:

-Content toe te voegen in elke pagina (ook video, dacht eraan om youtube te linken/embedden)
-Agenda kunnen beheren
-Een login hebben met beveiligde paginas

Er moet ook nog een contact- en boekingsformulier in maar die lukken mij nog wel aan de hand van tutorials.

Ik ben wat dat betreft absoluut een leek in PHP. Heb niet echt een idee wat voor database ik me er bij moe voorstellen ook.
Heb op school gewerkt met Joomla, maar dat vond ik niet echt duidelijk een kut programma, en ook een keertje met Drupal. Maar ik heb dus al een layout en ik weet niet of het zo slim is om dan de layout om te zetten in een van de skins ofzo van de bovengenoemde cms systemen.
Ik zit nu te kijken naar Xoops, eens kijken of dat iets zal worden

[ Bericht 2% gewijzigd door Mirel op 24-12-2008 13:02:39 ]
When all else fails, you always have delusion.
  woensdag 24 december 2008 @ 13:03:47 #131
134533 donroyco
dus niet Donroyco
pi_64322028
Wat dacht je van Joomla, Mirel? Het is misschien niet duidelijk in het begin, maar bij elk CMS-systeem is dat lastig
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_64322219
niet echt een CSS probleem, maar ik zou wordpress eens bekijken!
pi_64333704
quote:
Op dinsdag 23 december 2008 23:39 schreef mcDavid het volgende:
Tip: www.w3schools.com, start reading

-edit-
en begin met de tip van spike: alle elementen een achtergrondkleurtje geven (hoe lelijk ook) zodat je kunt zien wat er gebeurt.
Bedankt, heb nu alles een achtergrond kleur gegeven, maar staat allemaal nog compleet random in de layout (niet geupload), hoe kan ik het dan netjes op de goede plekken zetten, heb op die site zitten zoeken maar daar zag ik alleen uitleg over de absolute positie.
pi_64338545
quote:
Op woensdag 24 december 2008 @ 18:53 schreef Mindstate het volgende:

[..]

Bedankt, heb nu alles een achtergrond kleur gegeven, maar staat allemaal nog compleet random in de layout (niet geupload), hoe kan ik het dan netjes op de goede plekken zetten, heb op die site zitten zoeken maar daar zag ik alleen uitleg over de absolute positie.
eerst eens valide html maken, dan maak je het jezelf een stuk makkelijker
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.forumpost.nl%2F

Daarna, positioneren doe je door na te denken over je float. Als je je HTML goed semantisch hebt opgebouwd zul je met de CSS-eigenschappen float, margin en clear vrijwel alles kunnen bereiken wat je wilt.
pi_64504660


[ Bericht 53% gewijzigd door hello_moto1992 op 31-12-2008 13:52:34 ]
pi_64505016
als je nou eens begint met alle overbodige info uit je post te halen, of nog beter met een testcase maken, gaat het een stuk sneller.
pi_64505051
enneuh, sja wat dacht je van erín?
pi_64505431
Het lijkt mij ingewikkeld om het er in te doen in verband met verschillende stijlen.

[ Bericht 18% gewijzigd door hello_moto1992 op 31-12-2008 13:52:44 ]
pi_64507225
hoe bedoel je dat?
pi_64507872
Ehm bij nader inzien kan dat ook wel. Ik zal het ff proberen.
pi_64530111
Ik heb een aantal erg kleine plaatjes, en ik las dat het ivm het aantal http requests interessant is om de 'code' van die plaatjes dan in je html te droppen. Kan zoiets ook in je CSS?

Het probleem is dat ik niet meer weet hoe je dat ookweer noemt, en dat ik het niet bij elkaar gegoogled krijg .
  FOK!-Schrikkelbaas woensdag 31 december 2008 @ 13:15:36 #142
1972 Swetsenegger
Egocentrische Narcist
pi_64530325
Ik heb eigenlijk geen flauw idee wat je bedoelt met de 'code' in je html droppen?
pi_64530699
Ikke zoeken jongen!
http://nl.wikipedia.org/wiki/Inline_image

Heb het dus gevonden! .

Alleen ben ik er nog niet uit hoe dat met CSS kan.
pi_64531173
quote:
Op woensdag 31 december 2008 13:27 schreef veldmuis het volgende:
Alleen ben ik er nog niet uit hoe dat met CSS kan.
Hetzelfde. "background-image: url(data:etc)".
pi_64532170
quote:
Op woensdag 31 december 2008 @ 13:44 schreef Roy_T het volgende:

[..]

Hetzelfde. "background-image: url(data:etc)".
en was het niet zo dat IE dat weer eens niet begrijpt?
pi_64532476
quote:
Op woensdag 31 december 2008 14:14 schreef mcDavid het volgende:

[..]

en was het niet zo dat IE dat weer eens niet begrijpt?
Gaat perfect in zowel IE7 als IE8. Wat 6 doet interesseert me ff wat minder.
  FOK!-Schrikkelbaas woensdag 31 december 2008 @ 14:26:47 #147
1972 Swetsenegger
Egocentrische Narcist
pi_64532639
Maar zijn http requests met de hedendaagse breedband snelheden en server backbones nog een issue dan
pi_64533216
Elke milliseconde is meegenomen.
  FOK!-Schrikkelbaas woensdag 31 december 2008 @ 14:42:28 #149
1972 Swetsenegger
Egocentrische Narcist
pi_64533233
Nou..!

pi_64533298
quote:
Op woensdag 31 december 2008 14:26 schreef Swetsenegger het volgende:
Maar zijn http requests met de hedendaagse breedband snelheden en server backbones nog een issue dan
Absoluut. Sterker nog: ze zijn de nummer 1 reden waarom een website snel of traag is (of overkomt). Hoe snel je verbinding ook is, een browser kan niet meer dan 2 requests per domein aan (en voor JS-bestanden 1). Hoe meer request, hoe langer het duurt. Kun je oplossen door meer assets hosts te gebruiken (static1.example.com, static2.example.com, die allemaal naar dezelfde fysieke locatie verwijzen), maar bij teveel verschillende hosts krijg je weer last van vertraging door DNS lookups.

Of inline images wel of niet handig zijn hangt heel erg van je doel af. Voor de gemiddelde website maakt het niets uit of is het nadeliger (wanneer je geen goede caching gebruikt). Je hebt het echt over high traffic sites wil het interessant worden.

Leesvoer: http://developer.yahoo.com/performance/
  FOK!-Schrikkelbaas woensdag 31 december 2008 @ 14:48:03 #151
1972 Swetsenegger
Egocentrische Narcist
pi_64533423
quote:
Op woensdag 31 december 2008 14:44 schreef Roy_T het volgende:

[..]

Absoluut. Sterker nog: ze zijn de nummer 1 reden waarom een website snel of traag is (of overkomt). Hoe snel je verbinding ook is, een browser kan niet meer dan 2 requests per domein aan (en voor JS-bestanden 1). Hoe meer request, hoe langer het duurt. Kun je oplossen door meer assets hosts te gebruiken (static1.example.com, static2.example.com, die allemaal naar dezelfde fysieke locatie verwijzen), maar bij teveel verschillende hosts krijg je weer last van vertraging door DNS lookups.

Of inline images wel of niet handig zijn hangt heel erg van je doel af. Voor de gemiddelde website maakt het niets uit of is het nadeliger (wanneer je geen goede caching gebruikt). Je hebt het echt over high traffic sites wil het interessant worden.

Leesvoer: http://developer.yahoo.com/performance/
Ja dat snap ik allemaal maar of die website nu in 0,5 seconde of 1,2 seconde op het beeld staat zal de gemiddelde surfer echt aan zijn reet roesten.
pi_64533672
quote:
Op woensdag 31 december 2008 14:48 schreef Swetsenegger het volgende:

Ja dat snap ik allemaal maar of die website nu in 0,5 seconde of 1,2 seconde op het beeld staat zal de gemiddelde surfer echt aan zijn reet roesten.
Je zou de laadtijd door het minimaliseren van het aantal http requests met ongeveer 80% kunnen verminderen. En laat onderzoek nou uitwijzen dat bezoekers het wél fijn vinden wanneer een site er na een halve seconde staat ipv na 2,5 seconden. Zeker bij webapplicaties is het ergernis nummer 1 om te moeten wachten totdat je kunt doen wat je eigenlijk wilde doen.

Ik zou het eerder in goede caching, het samenvoegen van bestanden (de 9 externe JS bestanden op de Fok! frontpage zouden makkelijk tijdens het deploy proces kunnen worden samengevoegd bijvoorbeeld) en far future expiry headers zoeken overigens dan inline images, maar het is leuk om te weten hoe het werkt

Zie ook http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
pi_64533903
quote:
Op woensdag 31 december 2008 @ 14:26 schreef Swetsenegger het volgende:
Maar zijn http requests met de hedendaagse breedband snelheden en server backbones nog een issue dan
ik denk dat het nu júíst een issue is. Vroeger maakte je zoveel mogelijk hele kleine bestandjes zodat er zoveel mogelijk in de cache terecht kwam (websites in frames anyone?) maar tegenwoordig boeit de download tijd maar weinig meer dus kun je beter gewoon één groot bestand maken en het voor lief nemen dat niet alles door de browser gecached kan worden.
Neemt natuurlijk niet weg dat je wel realistisch moet blijven... dr was laatst ook een topic over imagemapping, dat kan ook nog wat uitmaken en lijkt me praktischer.
pi_64534023
quote:
Op woensdag 31 december 2008 15:04 schreef RenRen- het volgende:

Neemt natuurlijk niet weg dat je wel realistisch moet blijven... dr was laatst ook een topic over imagemapping, dat kan ook nog wat uitmaken en lijkt me praktischer.
En als iemand erop wil Googlen: dat ging over "CSS sprites"

En over caching: tenzij je goede expiry headers gebruikt heb je nog steeds voor ieder bestand een request: de browser vraagt aan de server "is dit bestand gewijzigd", krijgt "nee" terug en gebruikt dan de versie in de cache. Laat daarom de eerste keer je server al duidelijk vertellen "dit bestand is geldig tot 1 januari 2013, dus voor die tijd mag je het altijd meteen uit de cache gebruiken" (pas je iets aan, dan moet je wel de bestandsnaam veranderen dus, of bestand.ext?timestamp gebruiken, anders komt de oude versie uit de cache).
  FOK!-Schrikkelbaas woensdag 31 december 2008 @ 17:27:29 #155
1972 Swetsenegger
Egocentrische Narcist
pi_64539074
quote:
Op woensdag 31 december 2008 14:55 schreef Roy_T het volgende:

[..]

Je zou de laadtijd door het minimaliseren van het aantal http requests met ongeveer 80% kunnen verminderen. En laat onderzoek nou uitwijzen dat bezoekers het wél fijn vinden wanneer een site er na een halve seconde staat ipv na 2,5 seconden. Zeker bij webapplicaties is het ergernis nummer 1 om te moeten wachten totdat je kunt doen wat je eigenlijk wilde doen.

Ik zou het eerder in goede caching, het samenvoegen van bestanden (de 9 externe JS bestanden op de Fok! frontpage zouden makkelijk tijdens het deploy proces kunnen worden samengevoegd bijvoorbeeld) en far future expiry headers zoeken overigens dan inline images, maar het is leuk om te weten hoe het werkt

Zie ook http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
Ja alleen maak jij er nu 500% van ipv een toename van 70% zoals in mijn voorbeeld. Bij een webapplicatie heeft het misschien nog zin, hoewel een gemiddelde webapplicatie echt geen tientallen images heeft.

Ik vind het allemaal nogal overtrokken.
pi_64577484
quote:
Op woensdag 31 december 2008 17:27 schreef Swetsenegger het volgende:

Ja alleen maak jij er nu 500% van ipv een toename van 70% zoals in mijn voorbeeld. Bij een webapplicatie heeft het misschien nog zin, hoewel een gemiddelde webapplicatie echt geen tientallen images heeft.
Alleen zijn mijn cijfers wél gebaseerd op onderzoeksresultaten.
quote:
Ik vind het allemaal nogal overtrokken.
Dat mag Voor de rest (lees: alle grote en/of bekende websites) is het inmiddels gewoon een industriestandaard.
  maandag 5 januari 2009 @ 20:30:15 #157
87680 Mirel
Mirel wil een bongophone.
pi_64702199
quote:
Op woensdag 24 december 2008 13:10 schreef mcDavid het volgende:
niet echt een CSS probleem, maar ik zou wordpress eens bekijken!
Wat is het toch een gedoe. Is het nou de bedoeling dat ik een theme uitzoek die dezelfde layout zoals de mijne heeft zodat ik dat allemaal om kan zetten?
Kutgedoe
When all else fails, you always have delusion.
pi_64704156
quote:
Op maandag 5 januari 2009 @ 20:30 schreef Mirel het volgende:

[..]

Wat is het toch een gedoe. Is het nou de bedoeling dat ik een theme uitzoek die dezelfde layout zoals de mijne heeft zodat ik dat allemaal om kan zetten?
Kutgedoe
Het is de bedoeling dat je je eigen layout omzet in templates. Het kan wel helpen als je eerst een (soortgelijke) template eens goed bekijkt, zodat je een beetje een idee krijgt hoe dat werkt. Verder zijn er met google vast honderden tutorials te vinden over hoe je een wordpresstemplate maakt.
pi_64721842
Ik heb een echte leek vraag waarschijnlijk.

Ik heb een header, menu en content met normale indeling, header boven, menu en content naast elkaar met float left & right.

Nu wil ik alleen dat mijn content automatisch verlengt als er meer tekst in staat. Ik ben enkel de code er voor vergeten zo 123. Google word geblokkeerd hier vanaf het bedrijf (vraag me niet waarom) dus ik hoop dat iemand hier het antwoord weet
pi_64722141
Content geen "height" geven (dus impliciet "height: auto").
pi_64809027
Ik heb een klein vraagje dat over a en input gaat, deze wil ik namelijk beiden stijlen met een zelfde class

class:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.but, 
.butlong { 
    display: block; 
    float: left; 
    height: 16px; 
    margin: 0px 10px 0px 0px; 
    color:#337f92; 
    background: #d2eaf0; 
    padding: 2px; 
    text-align:center; 
    text-decoration: none; 
    border: 1px solid #337f92;
}

.but { width: 100px; }
.butlong { width: 175px; }


html:
1
2
<input type="submit" name="action_send" class="butlong" value="Verstuur bericht" />
<a href="/user/mailbox/delete/<?php echo $list->id; ?>.html" class="butlong">Verwijder bericht</a>


maar ik krijg als resulaat dit


Wat doe ik fout? :D
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_64809262
quote:
Op donderdag 8 januari 2009 @ 13:52 schreef Chandler het volgende:
Ik heb een klein vraagje dat over a en input gaat, deze wil ik namelijk beiden stijlen met een zelfde class

class:
[ code verwijderd ]

html:
[ code verwijderd ]

maar ik krijg als resulaat dit
[afbeelding]

Wat doe ik fout?
Line-height ook op 16px zetten.

Omdat die <a> een innerhtml heeft om het maar zo te zeggen krijgt die de minimale hoogte van de tekst die erin staat.

Maar als ik het plaatje zo bekijk wil je eerder dat de button net zo hoog wordt als de anchor. Dus de height op 22px zetten.
pi_64810462
Ik heb het geprobeerd maar wil nog niet helemaal lukken eingelijk Ik wil idd beiden even hoog/groot hebben! is dat mogelijk met 1 class? of dien ik apparte classes te maken?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_64811291
quote:
Op donderdag 8 januari 2009 @ 14:24 schreef Chandler het volgende:
Ik heb het geprobeerd maar wil nog niet helemaal lukken eingelijk Ik wil idd beiden even hoog/groot hebben! is dat mogelijk met 1 class? of dien ik apparte classes te maken?
tuurlijk is dat mogelijk, als je maar specifiek genoeg bent.

In dit geval ben je niet specifiek genoeg omdat <a> nog een line-height heeft waardoor die knop hoger wordt.
-edit-
misschien ligt het wel aan die padding. Bij die button valt er uiteraard weinig te padden.

[ Bericht 7% gewijzigd door mcDavid op 08-01-2009 14:54:27 ]
pi_64811776
idd, maar waarom valt er weinig te padden aan de button zelf? dat moet je toch ook kunnen instellen? zelfs met padding/margin 0 op de inputs kreeg ik geen lekker resultaat
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_64812868
Omdat er niets in de button staat. Hij heeft wel een value, maar daar heeft het hele HTML Box Model niets mee van doen. Dus er valt niets te padden.

Bij de anchor is dat anders omdat er daadwerkelijk content tussen de open- en sluittag staat.\

anyway ik ga ff prutsen dit moet gewoon kunnen.
pi_64813053
Je kunt bij een button toch gewoon de height opgeven?

En als het er mee te maken heeft dat je content tussen de open en sluit tag moet hebben (wat bij een input niet gaat), dan kun je gewoon de <button> tag gebruiken. Heeft hetzelfde resultaat.
pi_64813364
Ik zie al wat het probleem is: bij een button komt de border bínnen het element, bij een anchor erbuiten.

http://duft.nl/test.php heb het opgelost met wat spelen met de font-size en line-height (laatste heeft alleen effect op anchor). Maar een handigere oplossing zou denk ik zijn om de maat apart te defineren

button.but {height:22px;}
a.but{height:20px;}
zoiets.
pi_64813892
Nieuwe sig.
  donderdag 8 januari 2009 @ 17:37:32 #170
134533 donroyco
dus niet Donroyco
pi_64818376
Heeft iemand een fix voor
http://plaatsmaken.donroycodesign.nl

de button/image rechtsboven blijft niet goed staan, hij moet evenwijdig aan de knop daarboven komen te staan..
Hier (1280x800) staat ie wel goed..

Wie heeft een oplossing? Bij voorbaat dank
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_64820668
De input een float: left meegeven, en de img ook een float:left meegeven en die margin van 35px weghalen cq verminderen?

een vertical-align: middle werkt trouwens alleen in tabellen als ik me niet vergis, maar dat kan mcDavid vast beter vertellen
  donderdag 8 januari 2009 @ 18:46:35 #172
134533 donroyco
dus niet Donroyco
pi_64820713
quote:
Op donderdag 8 januari 2009 18:45 schreef veldmuis het volgende:
De input een float: left meegeven, en de img ook een float:left meegeven en die margin van 35px weghalen cq verminderen?

een vertical-align: middle werkt trouwens alleen in tabellen als ik me niet vergis, maar dat kan mcDavid vast beter vertellen
Thsnks, dat laatste gaf mcDavid mij mee
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_64820824
Nog even mierenneuken op die sait: rechtsonder, dat meer informatie-knopje, daar zou ik tekst van maken. Ivm cleartype en andere AA-dingetjes op tekst steekt dat nogal af. Die oranje onderrand is gewoon een border-bottom.
  donderdag 8 januari 2009 @ 19:23:04 #174
134533 donroyco
dus niet Donroyco
pi_64822109
quote:
Op donderdag 8 januari 2009 18:49 schreef veldmuis het volgende:
Nog even mierenneuken op die sait: rechtsonder, dat meer informatie-knopje, daar zou ik tekst van maken. Ivm cleartype en andere AA-dingetjes op tekst steekt dat nogal af. Die oranje onderrand is gewoon een border-bottom.
Hmm, dat kan Thanks voor het meedenken en je suggestie hielp
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_64824595
quote:
Op donderdag 8 januari 2009 @ 18:45 schreef veldmuis het volgende:
De input een float: left meegeven, en de img ook een float:left meegeven en die margin van 35px weghalen cq verminderen?

een vertical-align: middle werkt trouwens alleen in tabellen als ik me niet vergis, maar dat kan mcDavid vast beter vertellen
vertical-align kan volgens mij ook gebruikt worden om de positie van plaatjes op de tekstregel te bepalen. Het werkte wel iig .
pi_64834547
Vertical-align werkt ook op andere elementen (zoals afbeeldingen), maar je moet dan wel snappen dat je niet zegt "alles binnen het element met vertical-align: middle" staat in het midden, maar dat je zegt "dat element staat verticaal in het midden van het parent element.
pi_64841497
quote:
Op donderdag 8 januari 2009 15:31 schreef mcDavid het volgende:
Ik zie al wat het probleem is: bij een button komt de border bínnen het element, bij een anchor erbuiten.

http://duft.nl/test.php heb het opgelost met wat spelen met de font-size en line-height (laatste heeft alleen effect op anchor). Maar een handigere oplossing zou denk ik zijn om de maat apart te defineren

button.but {height:22px;}
a.but{height:20px;}
zoiets.
Ik heb het even bekeken maar zie nog steeds een verschil



The people who lost my respect will never get a capital letter for their name again.
Like trump...
  vrijdag 9 januari 2009 @ 10:04:41 #178
134533 donroyco
dus niet Donroyco
pi_64841625
quote:
Op vrijdag 9 januari 2009 10:00 schreef Chandler het volgende:

[..]

Ik heb het even bekeken maar zie nog steeds een verschil

[ afbeelding ]

In IE klopt het niet, in FF wel..
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_64845072
quote:
Op vrijdag 9 januari 2009 @ 10:00 schreef Chandler het volgende:

[..]

Ik heb het even bekeken maar zie nog steeds een verschil

[afbeelding]

Moet je maar niet zo'n idiote browser gebruiken
pi_64845692
Tja terwijl meer dan de helft van de wereld deze ook gebruikt
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_64850766
Dat kan kloppen want meer dan de helft van de mensen zijn idioten.

-edit-
op fok minder trouwens.
  vrijdag 9 januari 2009 @ 14:30:30 #182
141104 Patje1987
Madre me quiero un frikandel.
pi_64851396
Zo ik ben aan mijn portfolio site begonnen, en het begin is gemaakt.

http://www.patrickvd.com/
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_64851474
quote:
Op vrijdag 9 januari 2009 14:14 schreef mcDavid het volgende:
Dat kan kloppen want meer dan de helft van de mensen zijn idioten.

-edit-
op fok minder trouwens.
Je bedoeld in de topics waar jij in post ?
pi_64852183
quote:
Op vrijdag 9 januari 2009 @ 14:32 schreef HuHu het volgende:

[..]

Je bedoeld in de topics waar jij in post ?
Ja en aangezien ik nogal eens op F5 ram is de fx-score vast wat overrated, maar dan nog.
pi_64852701
Maar goed, een oplossing voor alle browsers is er niet?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_64852925
quote:
Op vrijdag 9 januari 2009 @ 15:02 schreef Chandler het volgende:
Maar goed, een oplossing voor alle browsers is er niet?
Ik ben bang van niet.

Als je toch dezelfde class wilt gebruiken kun je gewoon in je css het onderscheid maken d.m.v.

input.but {}
a.but{}
pi_64854042
ok tnx, ik ga even verder stoeien met dit geheel!
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_64857626
quote:
Op vrijdag 9 januari 2009 15:02 schreef Chandler het volgende:
Maar goed, een oplossing voor alle browsers is er niet?
Waarom niet in beide gevallen een button gebruiken? 1 met <input type="submit" ... /> en de andere met <input type="button" onclick="" ... />

Daar kun je dan natuurlijk nog weer classes aanhangen
pi_64861232
quote:
Op vrijdag 9 januari 2009 14:30 schreef Patje1987 het volgende:
Zo ik ben aan mijn portfolio site begonnen, en het begin is gemaakt.

http://www.patrickvd.com/
Frames?!

Dat 'Valid HTML' onderin kun je trouwens ook wel weghalen .

Edit: Ohw, je zit in een frame ivm je domein.
  vrijdag 9 januari 2009 @ 18:49:44 #190
141104 Patje1987
Madre me quiero un frikandel.
pi_64861441
quote:
Op vrijdag 9 januari 2009 18:44 schreef veldmuis het volgende:

[..]

Frames?!

Dat 'Valid HTML' onderin kun je trouwens ook wel weghalen .

Edit: Ohw, je zit in een frame ivm je domein.
Klopt had al een host met domein, dus alleen een extra domein erbij besteld. Die valid dingen heb ik nog niet doorgelinkt dus ook nog niet getest
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_64862981
quote:
Op vrijdag 9 januari 2009 @ 18:49 schreef Patje1987 het volgende:

[..]

Klopt had al een host met domein, dus alleen een extra domein erbij besteld. Die valid dingen heb ik nog niet doorgelinkt dus ook nog niet getest ;)
1
2
3
RewriteEngine on
RewriteCond %{HTTP_HOST} ^.*(patrickvd.com)$ [NC]
RewriteRule ^(.*)$ http://patrickvd.derium-online.com/$1 [L]

Niet een idee? Of kun je echt helemaal niets met dat andere domein?
pi_64864454
quote:
Op vrijdag 9 januari 2009 16:54 schreef Light het volgende:

[..]

Waarom niet in beide gevallen een button gebruiken? 1 met <input type="submit" ... /> en de andere met <input type="button" onclick="" ... />

Daar kun je dan natuurlijk nog weer classes aanhangen
Omdat je dan JS nodig hebt, en anders niet?
  vrijdag 9 januari 2009 @ 20:34:41 #193
87680 Mirel
Mirel wil een bongophone.
pi_64865267
Wat is trouwens de menumodule code in joomla. Ben die even kwijt
When all else fails, you always have delusion.
pi_64879211
quote:
Op vrijdag 9 januari 2009 20:10 schreef Roy_T het volgende:

[..]

Omdat je dan JS nodig hebt, en anders niet?
Idd
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_64921162
quote:
Op vrijdag 9 januari 2009 20:34 schreef Mirel het volgende:
Wat is trouwens de menumodule code in joomla. Ben die even kwijt
Ik heb even in de CSS specs gekeken, maar zag het er niet in staan
pi_64929068
Ik heb wat hulp nodig met het inelkaar zetten van mijn site, ik heb nog niet zoveel verstand van het positioneren van Div bestanden,, dus het is weer een grote rommelzooi.

Nou had ik de vraag hoe plaats ik dit goed en onthoud ik dit voor de volgende keer

http://www.mediavormgever.net/~thillart86/animatie/

http://i43.tinypic.com/2je4wib.jpg ( zo ziet de site er uit als het zou werken )

dat is de link waarop de site weergeven wordt
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
body {
background-image:url(bg.jpg);
margin-top:0;


ul, li {
padding: 0px;
margin: 0px;
}

img {
border: none;
}

#container {
width:757px;
height:868px;
margin-left:auto;
margin-right:auto;
}

#header {
background-image:url(images/ani_01.jpg);
width:757px;
height:248px;
float:left;
}

ul{
list-style:none;

}

li{
display:inline;
}

#sidebalkleft{
background-image:url(images/ani_02.jpg);
width:28px;
height:575px;
float:left;
}

#menu{
width:479px;
height:41px;
float:left;
}

#menu a{
border:0;
text-decoration:none;
list-style:none;
display:inline;
}

#onderstuk{
background-image:url(images/ani_07.jpg);
width:223px;
height:41px;
float:left;
}

#content{
background-image:url(images/ani_10.jpg);
width:556px;
height:495px;
float:left;
}

#menubalk{
background-image:url(images/ani_09.jpg);
height:39px;
width:702px;'
float:right;
}

#onderbalk{
background-image:url(images/ani_12.jpg);
width:757px;
height:45px;
float:inherit;
}

#rechterbalk{
background-image:url(images/ani_08.jpg);
height:575px;
width:28px;
float:right;
}



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
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Animatie</title>
<link href="div.css" rel="stylesheet" type="text/css" />
</head>

<body><div id="container">
   <div id="header">
   </div>
      <div id="sidebalkleft">
  </div>
         <div id="menu">
      <ul>
         <li><a href="index.html"> <img src="images/ani_03.jpg" width="118" height="41" /></a></li>
         <li><a href="historie.html"><img src="images/ani_04.jpg" width="120" height="41" /></a></li>
         <li><a href="studiolfc.html"><img src="images/ani_05.jpg" width="121" height="41" /></a></li>
         <li><a href="contact.html"> <img src="images/ani_06.jpg" width="120" height="41" /> </a> </li>
        </ul>

  </div>
  <div id="onderstuk"></div>      <div id="rechterbalk"></div>
      
         <div id="menubalk"></div>
         <div id="content">
         </div>
         
   
            <div id="onderbalk">
            </div>
</div>
</body>
</html>


[ Bericht 1% gewijzigd door Mailbox op 11-01-2009 21:51:26 ]
pi_64929237
Begin eens met

ul, li {
padding: 0px;
margin: 0px;
}
  zondag 11 januari 2009 @ 21:39:00 #198
134533 donroyco
dus niet Donroyco
pi_64929310
en geef je images een border="0" mee..
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_64929363
Oeh gelijk even proberen
pi_64929389
quote:
Op zondag 11 januari 2009 21:37 schreef veldmuis het volgende:
Begin eens met

ul, li {
padding: 0px;
margin: 0px;
}
het is een begin
pi_64929526
quote:
Op zondag 11 januari 2009 21:39 schreef donroyco het volgende:
en geef je images een border="0" mee..
Dat moet je dus in css doen, niet in html.
pi_64929535
quote:
Op zondag 11 januari 2009 21:39 schreef donroyco het volgende:
en geef je images een border="0" mee..
dan wel

img {
border: none;
}
pi_64929825
quote:
Op zondag 11 januari 2009 21:44 schreef veldmuis het volgende:

[..]

dan wel

img {
border: none;
}
dat geeft al enig effect
pi_64930008
Ik denk dat je er toch wat over moet gaan lezen nu. Je divt alles aan elkaar, en dat hoeft helemaal niet.
pi_64930425
quote:
Op zondag 11 januari 2009 21:55 schreef veldmuis het volgende:
Ik denk dat je er toch wat over moet gaan lezen nu. Je divt alles aan elkaar, en dat hoeft helemaal niet.
hmm oke, ja ik vind dit echt lastig maarja ik studeer het dus eigenlijk moet ik het begrijpen
  zondag 11 januari 2009 @ 22:08:54 #206
87680 Mirel
Mirel wil een bongophone.
pi_64930618
quote:
Op zondag 11 januari 2009 18:00 schreef Roy_T het volgende:

[..]

Ik heb even in de CSS specs gekeken, maar zag het er niet in staan
Zit ook niet in het css bestand. Het is iets zoals <jdoc balblabalblabalbalbal> wat in een div wordt neergezet.
When all else fails, you always have delusion.
pi_64930668
Om een voorbeeld te geven, je hebt die ul staan waar je menu in staat. Die kun je gewoon een id (of class, want waarom werk je met id's?) meegeven en positioneren.

Als het de enige ul is die in je container staat dan geef je geen class mee maar dan doe je .container ul: weer een class minder nodig.
  zondag 11 januari 2009 @ 22:12:04 #208
87680 Mirel
Mirel wil een bongophone.
pi_64930765
quote:
Op zondag 11 januari 2009 22:09 schreef veldmuis het volgende:
Om een voorbeeld te geven, je hebt die ul staan waar je menu in staat. Die kun je gewoon een id (of class, want waarom werk je met id's?) meegeven en positioneren.

Als het de enige ul is die in je container staat dan geef je geen class mee maar dan doe je .container ul: weer een class minder nodig.
Ik had begrepen dat je eerst iets een id moest geven voordat je de rest een class wilt geven? Maar dat hoeft dus niet?
When all else fails, you always have delusion.
pi_64931002
Nope.

De dingen die je een ID meegeeft in de CSS overrulen de dingen die in de class staan, daar kun je het voor gebruiken. Een !important in een class overruled echter weer het spul in een id. Inline dingen, in een style dus, overrulen alles behalve een !important, om het verhaal compleet te maken.

Ik gebruik een ID alleen als ik ergens met javascript aan de gang ga, en dat element aan wil roepen.
pi_64931755
Meer leesvoer: "CSS specificity": http://htmldog.com/guides/cssadvanced/specificity/

Er valt nog meer over te weten, en dan met name dat hoe specifieker de rule, hoe hoger de prioriteit. Als je deze code hebt:

1
2
3
4
5
6
7
div p {
   color: red;
}

p {
   color: blue;
}


Dan worden de paragrafen binnen een div rood, en niet blauw (ondanks dat deze onderaan in je CSS-bestand staat).

Als je zowel classes, elements en id's in je rule gebruikt, dan vergt dat wat rekenwerk. Uitleg hierover: zie bovenstaande link.
pi_64998239
Nagekeken

Nu heb ik nog 1 probleem 1 balk wil hij niet tussen het menu en de content zetten.
Iemand die het wel begrijpt?

Dit is hoe het er nu uitziet

http://www.mediavormgever.net/~thillart86/animatie/

http://i43.tinypic.com/2je4wib.jpg ( zo ziet de site er uit als het zou werken )

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
/* CSS Document */
ul, li {
padding: 0;
margin: 0;
}


ul{
list-style:none;
}

li{
float:left;
}


.klier{clear:both;}


body {
background-image:url(bg.jpg);
margin-top:0;



img {
border: none;
}

#container {
width:758px;
margin-left:auto;
margin-right:auto;
}

#header {
background-image:url(images/ani_01.jpg);
height:248px;
}

#midden{
width:702px;
float:left;

}

#menu li a{
background-image:url(images/ani_06.jpg);
width:120px;
height:41px;
display:block;
border:0;
text-decoration:none;
}

/* Menu li */

#menu li a.buik{
background-image:url(images/ani_07.jpg);
width:224px;
}

#menu li a.home{
background-image:url(images/ani_03.jpg);
width:118px;
height:41px;
display:block;
border:0;
text-decoration:none;
}

#menu li a.historie{
background-image:url(images/ani_04.jpg);
width:120px;
height:41px;
display:block;
border:0;
text-decoration:none;
}

#menu li a.studio{
background-image:url(images/ani_05.jpg);
width:121px;
height:41px;
display:block;
border:0;
text-decoration:none;
}

#menu li a.studio{
background-image:url(images/ani_05.jpg);
width:120px;
height:41px;
display:block;
border:0;
text-decoration:none;
}


#content{
background-image:url(images/ani_10.jpg);
width:556px;
height:495px;
float:left;
}

#menubalk{
background-image:url(images/ani_09.jpg);
float:left;
}

#menurechts{
background-image:url(images/ani_11.jpg);
width:146px;
height:495px;
float:left;
}


/* Extra Balken */

#sidebalkleft{
background-image:url(images/ani_02.jpg);
width:27px;
height:575px;
float:left;
}

#onderbalk{
background-image:url(images/ani_12.jpg);
height:45px;
clear:both;
}

#rechterbalk{
background-image:url(images/ani_08.jpg);
height:575px;
width:29px;
float:left;
}


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
41
42
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Animatie</title>
<link href="div.css" rel="stylesheet" type="text/css" />
</head>

<body><div id="container">

   <div id="header">
   </div>
   

      <div id="sidebalkleft">
  </div>
     <div id="midden">
      <div id="menu">
      <ul>
         <li><a href="index.html" class="home"></a></li>
         <li><a href="historie.html" class="historie"></a></li>
         <li><a href="studiolfc.html" class="studio"></a></li>
         <li><a href="contact.html" class="contact"></a></li>
         <li><a href="#" class="buik"></a></li>
      </ul>
      
     </div>
     
      <div id="menubalk"></div>
      <div id="content">
         </div>
         <div id="menurechts">
         </div>
   </div>
     <div id="rechterbalk"></div>
 

            <div id="onderbalk">
            </div>
</div>
</body>
</html>
pi_65000762
quote:
Op dinsdag 13 januari 2009 @ 17:53 schreef Mailbox het volgende:
Nagekeken

Nu heb ik nog 1 probleem 1 balk wil hij niet tussen het menu en de content zetten.
Iemand die het wel begrijpt?

Dit is hoe het er nu uitziet

http://www.mediavormgever.net/~thillart86/animatie/

http://i43.tinypic.com/2je4wib.jpg ( zo ziet de site er uit als het zou werken )

CSS
[ code verwijderd ]

HTML
[ code verwijderd ]
Gaat hier gewoon goed
Welke browser?
pi_65001936
Een hover in een apart plaatje is trouwens lelijk, je ziet een rode flits (de achtergrond) terwijl het hover plaatje aan het laden is.
Beter zet je de link en de hover beide in hetzelfde plaatje en speel je met je backgroundposition. Nog netter ook; die vier a:hover dingen vervang je door één die iets met de backgroundposition doet. Scheelt weer css.
pi_65002191
Hallo,

Momenteel ben ik begonnen met het slicen in divs/css, eerder deed ik dit altijd in tabellen. Momenteel ben ik al een klein stukje gekomen, maar ben opgelopen naar 2 problemen.

1) In Internet explorer staat de balk boven aan heel erg naar rechts en begint niet links. In firefox is dit wel het geval. Waar dit aan licht weet ik niet?

2) Ik wil dat de content background (waar het woord 'text' staat) achter het boven plaatje komt. Wel op de zelfde hoogte als nu maar gewoon erachter, nu staat het er voor. Ik heb het geprobeerd met z-index, maar het deed niet zoals ik wou. Het kan zijn dat ik het verkeerd deed

[html]<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<style type="text/css">
body {
background : url(http://www.bittybotanic.com/images/bg.gif);
margin: 0px;
font-family : Verdana,Helvetica,sans-serif;
font-size : 10px;
}
#template {
padding: 50px; 0px; 0px; 0px;
margin: 0 auto;
width: 835px;
}
#loginBalk {
margin-left: 0px;
background-image: url(top.png);
width : 100%;
border-bottom : 1px solid #000;
position : fixed;
height : 30px;
}
#bovenkant {
background: url('bovenkant.gif');
width : 835px;
height : 323px;
}
#achter {
margin-top : -6px;
background-image: url('bgs.PNG');

}
#achter #midden {
background: url('midden.gif');
width:815px;
padding: 10px;
}
#onderkant {
background: url('onderkant.gif');
width: 835px;
height: 24px;
}

</style>
</head>
<body>

<div id="loginBalk">
test
</div>

<div id="template">
<div id="bovenkant">

</div>
<div id="achter">
<div id="midden">
text
</div>
</div>
<div id="onderkant">

</div>
</div>
</body>
</html>[/html]

Voorbeeld: http://www.bittybotanic.com/red/index.html

Ik hoop dat jullie me kunnen helpen
pi_65002840
1) wellicht left:0; toevoegen?
2) hoe zie je dat voor je? moeten de divs over elkaar vallen met een opacity ofzo? Waarom nest je ze niet?
  dinsdag 13 januari 2009 @ 20:01:09 #216
230788 n8n
Pragmatisch
pi_65002899
Mailbox, ik zou de afbeeldingen van je menu samenvoegen en dan positioneren in de achtergrond met de css, dan hoef je maar 1 plaatje in te laden, en dat scheelt snelheid. Verder krijg je nu een rode 'flits' als je over het menu gaat, omdat de :hover-achtergrond geladen moet worden.

edit, is al door Veldmuis gezegd, dat krijg je als je meerdere 'nog-te-volgen-tabs' open laat en dan boodschappen gaat doen.

@ Veeltje, je vragen zijn niet heel erg duidelijk, verder heb je voor het logo in de rode header een jpeg met een kleurprofiel gebruikt. Hierdoor verschilt de achtergrond van de div met de achtergrond van de afbeelding (,of is da t de bedoeling?).

[ Bericht 14% gewijzigd door n8n op 13-01-2009 20:07:26 ]
Specialization is for insects”.—Robert Heinlein
pi_65003528
Bedankt mcDavid,

Probleem 1 is opgelost. Nu alleen nog probleem 2.
Maar met probleem 2 bedoel ik dat het in plaats naar voren naar achteren moet. Zoals hier: http://www.bittybotanic.com/red/template.html

Maar die is verkeerd dus die gebruik ik niet, maar daarbij zie je wel hoe ik het bedoel
pi_65003730
Waarom zit die redirect in je link?
pi_65003804
Hoe bedoel je?
pi_65004432
quote:
Op zondag 11 januari 2009 22:08 schreef Mirel het volgende:

[..]

Zit ook niet in het css bestand. Het is iets zoals <jdoc balblabalblabalbalbal> wat in een div wordt neergezet.
Dus is het geen css, en hoort het niet in dit topic.
  dinsdag 13 januari 2009 @ 20:40:06 #221
230788 n8n
Pragmatisch
pi_65004575
quote:
Op dinsdag 13 januari 2009 20:21 schreef Veeltje het volgende:
Hoe bedoel je?
http://www.habbers.nl/redirect.php?url=http://www.bittybotanic.com/red/index.html

Vandaar dat ik begon over je rode header Ben niet helemaal bij de les vandaag.
Specialization is for insects”.—Robert Heinlein
pi_65004897
Oh woop, had het op een forum geplaatst eerder maar daar reageerde niemand. Dus had ik 't maar hier geplaatst en die link word daar automatisch zo neergezet. Dit is de normale link: http://www.bittybotanic.com/red/index.html
pi_65005066
quote:
Op dinsdag 13 januari 2009 @ 20:16 schreef Veeltje het volgende:
Bedankt mcDavid,

Probleem 1 is opgelost. Nu alleen nog probleem 2.
Maar met probleem 2 bedoel ik dat het in plaats naar voren naar achteren moet. Zoals hier: http://www.bittybotanic.com/red/template.html

Maar die is verkeerd dus die gebruik ik niet, maar daarbij zie je wel hoe ik het bedoel
ah nu zie ik wat je bedoelt.

Ik denk dat je beide elementen position:relative; moet geven, en dan de onderste met top:-10 ofzo naar boven moet schuiven.
Als je ze beide position:relative gegeven hebt werkt z-index wel.
pi_65005308
Heel erg bedankt, ik heb nu alleen bovenkant die position relavtive gegeven en het werkt nu perfect
  woensdag 14 januari 2009 @ 12:42:08 #225
87680 Mirel
Mirel wil een bongophone.
pi_65025664
Hoi, ik heb 2 divs die elk een afbeelding zijn, en wil graag de ene div in het midden centeren, en de andere div ernaast die rechts uitgelijnd is. Ik heb ze geprobeerd te floaten, want dan komen ze naast elkaar maar ik kan de ene div niet in het midden centeren met de float code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#logo {
background: url(images/logo.png) no-repeat;
width: 300px;
height: 200px;
margin: 0 auto;
float: left;
}

#ster {
background: url(images/ster.png) no-repeat;
width: 190px;
height: 152px;
float: right;
}

zo is het nu dus maar het werkt niet.
When all else fails, you always have delusion.
pi_65025975
ehm, float laat een DIV niet in het midden staan.... het zet een BLOCK-element enkel in de 'text-flow' links of rechts uitgelijnd (dat de rest van de test er 'rondloopt')


wat je wil bereiken is eventueel wel te doen door een element absoluut te positioneren (in het midden) waardoor hij verder geen invloed heeft op andere elementen in de pagina, en het andere relative positioning te geven en een 'left: n px;' waarbij n de afstand is die hij naar rechts moet bewegen

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>test</title>
   
   <style type="text/css">
BODY {
   text-align: center;
}
#logo {
   position: absolute;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid green;
}

#ster {
   position: relative;
   left: 225px;
   width: 150px;
   height: 150px;
   border: 1px solid red;
}
   </style>
</head>

<body>

<div id="logo"></div>
<div id="ster"></div>


</body>
</html>
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_65035556
Hallo,

Wanneer ik een menu in een absoluut geplaatste div zet verschijnt de menu beschrijving door de afbeelding heen.

Is er een manier om de tekst te verbergen zodat deze niet door de afbeeldingen heen komt?

1
2
3
4
5
6
<ul id="navigation">
                                     <li><a href="/" id="home" class="active">home</a></li>
                                                              etc.


</ul>


navigation komt terug in style.css met

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
#navigation{
   background: url(images/bg-navigation.gif) no-repeat right top;
   list-style: none;
   overflow: hidden;
   height: 70px;
   font-family: 'Lucida Grande', Arial, sans-serif;
   font-size: 12px;


}
#navigation li{
   float: left;
}
#navigation a{
   display: block;
   text-decoration: none;
   border-top: none;
   line-height: 400px;
   overflow: hidden;
}
#navigation a#home{
   background: url(../images/nav-home-off.png) no-repeat;
   width: 117px;
}
#navigation a#home:hover,#navigation a#home.active{
   background: url(../images/nav-home-on.png) no-repeat;
   



Je kan natuurlijk denken: plaats het buiten de absolute div maar dan krijg ik hem niet op de goede plek...

Iemand een tip die ik kan proberen??

Bedankt!
pi_65036017
wat wil je precies? De tekst in de link in een achtergrondafbeelding zetten en dan de letterlijke tekst verbergen?
Kun je doen door het in een <span> te zetten en die display:none te geven...
pi_65036320
quote:
Op woensdag 14 januari 2009 16:50 schreef mcDavid het volgende:
wat wil je precies? De tekst in de link in een achtergrondafbeelding zetten en dan de letterlijke tekst verbergen?
Kun je doen door het in een <span> te zetten en die display:none te geven...
Of beter geschikt voor Google en alternatieve user agents: "text-indent: -9999px".
pi_65036384
bedankt!
  zondag 18 januari 2009 @ 23:40:05 #231
87680 Mirel
Mirel wil een bongophone.
pi_65192960
Hey boys. Ik had een best irritant probleem met links. Ik had ze in de .css opgemaakt dat ze wit waren. Later kreeg ik daar problemen mee want een andere set met links wilde ik niet wit hebben. Ik heb ze geprobeerd apart te definieren maar het is me niet gelukt. Uiteindelijk heb ik bij de links die ik níet wit wilde hebben maar uit eindelijk de achtergrond kleur veranderd zodat je ze alsnog kon zien.
Maar nu zit met joomla bezig, en daar komt ook weer zo'n link terug, en m'n achtergrond is wit dus die link die gemaakt is met joomla is nu ook wit en nou moet ik toch weer terug naar dat css bestand.

index.php (1 set links, de agenda, is nu nog over omdat de andere, het menu, over is genomen door joomla, maar die verandert wel telkens mee als ik de agenda links wil veranderen)
1
2
3
4
5
6
7
8
                  <ul id=agendalijst>
                      <li class="agendalinks"><a href="#">optreden1</a></li>
                      <li class="agendalinks"><a href="#">optreden2</a></li>
                      <li class="agendalinks"><a href="#">optreden3</a></li>
                      <li class="agendalinks"><a href="#">optreden4</a></li>
                      <li class="agendalinks"><a href="#">optreden5</a></li>
                      <li class="agendalinks"><a href="#">optreden6</a></li>
                     <li class="agendalinks"><a href="#">optreden7</a></li>


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
html {

}

body {
background: #dcc57f url(images/header.jpg) repeat-x;
font-size: 11px;
font-family: verdana, calibri, tahoma;
text-align: center;
color: #444444;
}

h2 {
font-size: 11px;
font-family: verdana, calibri, tahoma;
color: #444444;
margin: 0;
padding-left: 2px;
padding-top: 25px;
text-align: left;
font-weight: bold;
}

h3 {
font-size: 24px;
font-family: verdana, calibri, tahoma;
color: #413387;
margin: 0;
padding: 2px;
text-align: left;
font-weight: normal;
}

h4 {
background: url(images/agendabalk.png) no-repeat;
font-size: 11px;
font-family: verdana, calibri, tahoma;
line-height: 18px;
padding-left: 18px;
color: white;
margin: 0;
text-align: left;
font-weight: bold;
}

#menu {
background: url(images/menubalk.jpg);
text-align: left;
width: 1000px;
height: 22px;
line-height: 20px;
font-family: century gothic;
font-size: 18px;
color: white;
}

#container {
text-align: left;
width: 1000px;
margin: 0 auto;
}

#inhoud {
padding-left: 10px;
padding-right: 10px;
background: white repeat-y;
border-left: 1px solid #444444;
border-right: 1px solid #444444;
}

#inhoud div {
overflow: hidden;
}

#linker {
float:left;
width: 74%;
margin-right: 10px;
margin-top: 10px;
margin-left: 0px;
}

#rechter {
float: right;
width: 24%;
margin-right: 0px;
margin-top: 10px;
}

#kop1 {
margin-bottom: 10px;
background: white;
}

#kop2 {
margin-bottom: 10px;
background: white;
}

#agenda {
width: 184px;
height: 400px;
border: 1px solid #4263ba;
color: black;
background: #66c7d9;
margin-bottom: 10px;
}

li{
display:inline;
padding-left:15px;
padding-right:15px;
}

#nav {
margin-bottom: 1px;
}

#agendalijst {
font-family: calibri;
font-size: 13px;
padding-left: 2px;
}

a{
text-decoration: none;
color: white;
}

a:hover{
text-decoration: underline;
}

#footer {
background: url(images/footerbalk.jpg) repeat-x;
color: #eaeaea;
font-size: 11px;
font-family: verdana, tahoma;
text-align: right;
height: 16px;
border-left: 1px solid #444444;
border-right: 1px solid #444444;
border-bottom: 1px solid #444444;
}

#logo {
background: url(images/logo.png) no-repeat;
width: 300px;
height: 200px;
margin: 0 auto;
}

#ster {
background: url(images/ster.png) no-repeat;
width: 190px;
height: 152px;
position: absolute;
margin-left: 950px;
}


Nu wil ik de links van de agenda wit laten, maar van de div "linker" wil ik de links gewoon blauw of donkerblauw hebben. Hoe kan ik ze los van elkaar definieren in de css want iets overridet blijkbaar alles. Ik heb geprobeerd 1 a href linkje een id te geven van 'agenda' en dan in de css 'a agenda{ color bla} te doen maar dat werkte niet.
Ik merkte ook dat de kleur van links alleen te definiëren valt in de css als ze in zo'n a { }ding staan en niet in een #naam div { }
Maar ik kom er niet uit.

Waar het eigenlijk op neer komt is dit: Ik wil dat het menu en de agenda gewoon wit blijven, máár dat de link die door joomla gemaakt wordt, wél een aparte definitie heeft zodat ik die los van de andere 2 kan verandern.
Maar ik weet dus niet of ik zo'n <jdoc:include type="module" name="latestnews" /> wel apart kan bewerken.
Als dat niet op díe manier kan, dan is het wel mogelijk dat ik de globale links dan bijv. op rood laat zodat dat joomlageval ook rood wordt en dus te zien is, en die andere 2 (menu en agenda) los definieër.

En anders, weten jullie een betere laatste nieuws module want dit standaard ding van Joomla laat alleen linkje van de titel van het artikel zien en dat is eigenlijk vrij weinig, wil liever dat het gehele bericht te zien is.
When all else fails, you always have delusion.
  zondag 18 januari 2009 @ 23:51:16 #232
230788 n8n
Pragmatisch
pi_65193329
a {
color: blue;
}

#menu a, #agendalijst a {
color: white;
}

Dit zou moeten werken, anders moet je even met voorbeelden komen. De <li>'s in ul#agendalijst hoef je ook geen class te geven, die bereik je al met '#agendalijst li { }'.
Specialization is for insects”.—Robert Heinlein
  zondag 18 januari 2009 @ 23:58:12 #233
87680 Mirel
Mirel wil een bongophone.
pi_65193578
Ha yes dat werkte, dank je wel. Ik wist dus niet dat je #menu en #agenda kon doen omdat het links waren, en tot nu toe zag ik dat die iedere keer geen # hadden. Dank je
When all else fails, you always have delusion.
pi_65218174
quote:
Op woensdag 14 januari 2009 16:57 schreef Roy_T het volgende:

[..]

Of beter geschikt voor Google en alternatieve user agents: "text-indent: -9999px".
Dat maakt toch geen reet uit?
Google leest geen CSS, en alternatieve user agents over het algemeen ook niet.
  maandag 19 januari 2009 @ 19:13:17 #235
230788 n8n
Pragmatisch
pi_65218658
text-indent vereist geen span
Specialization is for insects”.—Robert Heinlein
pi_65219184
Ow excuse me, een achtergrondafbeelding. Ik heb niks gezegd.
pi_65219215
quote:
Op maandag 19 januari 2009 18:59 schreef veldmuis het volgende:

Dat maakt toch geen reet uit?
Google leest geen CSS, en alternatieve user agents over het algemeen ook niet.
Google weet ik niet zeker, maar er zijn wel alternatieve user agents die een element met "display: none" volledig negeren. En een extra element gebruiken is gewoon ranzig
pi_65219264
Van Google weet ik behoorlijk zeker dat er niet naar CSS gekeken wordt. Een extra element, zover had ik niet gekeken, en dat is idd ranzig en nutteloos. Ben het dus volkomen met je eens wat dat betreft. Ik las slecht.
  dinsdag 20 januari 2009 @ 22:22:27 #239
87680 Mirel
Mirel wil een bongophone.
pi_65264265
Ik zie dat er geen standaard Joomla topic is, en misschien heeft mijn probleem met css te maken.
Ik heb een nieuwspagina op een site gemaakt, gewoon artikelen die onder elkaar staan. Wanneer ik een foto of youtube filmpje in een artikel zet, dan gaat bij het plaatsen van het 2e artikel dáárna, opeens de tekst verschuiven. Bij het plaatsen van een nieuwe artikel na eentje met een foto of youtube, dan gaat het nog goed. Pas bij het artikel dáárna gaat het opeens fucken.


M'n CSS bestand staat op deze pagina een paar reacties terug nog, div #linker.

En ik heb geen URL, zit op localhost te testen.
When all else fails, you always have delusion.
pi_65264321
url?
  dinsdag 20 januari 2009 @ 22:25:45 #241
87680 Mirel
Mirel wil een bongophone.
pi_65264419
editje, heb ik niet.
When all else fails, you always have delusion.
pi_65265432
Ja, dan is het lastig. Installeer de IE devtoolbar of firebug en ga proberen.
  dinsdag 20 januari 2009 @ 22:47:02 #243
87680 Mirel
Mirel wil een bongophone.
pi_65265599
Wat wil je dan precies zien op de site wat ik je niet kan beschrijven?
When all else fails, you always have delusion.
  dinsdag 20 januari 2009 @ 23:01:36 #244
87680 Mirel
Mirel wil een bongophone.
pi_65266345
Oh het ligt geeneens aan de youtube player of aan foto's. Een willekeurig berichtje gaat gewoon heel leuk naar rechts.
When all else fails, you always have delusion.
pi_65268547
Wat is dan de bedoeling als je drie nieuwsberichten hebt?
pi_65268881
Beetje lastig analyseren zonder enige code he Educated guess: floats.
pi_65271319
Ik heb een vraagje en ik weet niet zeker of dit oplosbaar is met CSS..

Ik heb in photoshop een layout gemaakt, die gesliced en in dreamweaver van de hele layout een div gemaakt en de gebieden waar content in komt ook een div gemaakt.. (dus div in div) Nu heb ik een probleempje met div in de div. Zodra ik er content (tekst) aan toevoeg, wordt de div iets groter in FireFox, in IE is dat niet.. Nu had ik dus de div grootte aangepast (kleiner maken) en padding toegevoegd en dat werkt in Firefox, want de padding duwt de div terug naar zijn originele grootte..

Maar.. In IE wordt de div dan kleiner (zoals ingesteld) maar daar duwt de padding de div niet terug naar originele grootte..

Hoe o Hoe kan ik zorgen dat de div dezelfde grootte houdt als ik tekst in de div zet?

1
2
3
4
5
6
7
main_index_layout #Table_01 tr td #main_content {
   height: 290px;
   width: 471px;
   background-color: #99cc66;
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
   padding: 5px;
}


Dat is de css van de div waar die tekst in moet... Ik ben trouwens echt een noob dus simpele uitleg gelieve..
pi_65272362
wc-eend, welk doctype gebruik je? Als je er geen gebruikt, voeg die dan eerst eens toe. Klinkt als verschillende box models namelijk
pi_65273320
uhhhhhh even google opstarten
pi_65273459
quote:
Op woensdag 21 januari 2009 09:51 schreef wc-eend het volgende:
uhhhhhh even google opstarten
Gewoon in de bron van je paginacode kijken (dus in de browser kiezen voor iets als bron weergeven). Als er een doctype is, staat het op de eerste regel. En als je wilt weten hoe zoiets eruit hoort te zien kun je ook de broncode van deze pagina bekijken.
pi_65273564
Een gedeelte uit de code van index.html

1
2
3
4
5
6
7
8
9
<html><!-- InstanceBegin template="/Templates/index_layout.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>index_layout</title>
<!-- InstanceEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url("menu/Menu.css");


Eem code gedeelte van template waar index.html van gemaakt is

1
2
3
4
5
6
7
8
9
<html>
<head>
<!-- TemplateBeginEditable name="doctitle" -->
<title>index_layout</title>
<!-- TemplateEndEditable -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
@import url("../menu/Menu.css");


Ik kan niet echt vinden zoals http://www.w3schools.com/tags/tag_DOCTYPE.asp daar staat :)
pi_65274010
Het ziet er uit als HTML 4.01 strict, dus ik denk dat je dat doctype moet pakken. (of anders de transitional).

Gewoon kopiëren en helemeaal bovenaan invoegen (op de eerste regel, nog voor <html>.)
pi_65274824
Dat werkt thanks an bunch
pi_65280237
Wat is het toch lekker simpel soms
  zondag 25 januari 2009 @ 23:55:03 #255
87680 Mirel
Mirel wil een bongophone.
pi_65405087
Hey ik heb in Joomla een 2e menu aangemaakt en heb in de index en de css het uitgewerkt, maar de menu items zijn niet te zien. Als ik even wat tekst type binnen de div dan zie je die wel verschijnen maar de menu items niet. Ik weet zeker dat ik alle instellingen in de backend van joomla goed heb gedaan, maar toch.

In Joomla heb ik het nu usermenu genoemd, en heb in de index.php dit dus staan:
1
2
3
<div id="extramenu">
<jdoc:include type="module" name="usermenu" />
</div>


En in de css dit, maar ik weet niet of dat écht wat uitmaakt.
1
2
3
4
5
6
7
8
9
10
11
#extramenu {
background: white;
width: 120px;
height: 300px;
font-family: verdana, calibri;
font-size: 11px;
color: black;
margin-left: 1000px;
margin-top: 100px;
position: absolute;
}


Het is dan meer een joomla probleem maar hier op fok krijg ik altijd betere en snellere reacties dan op joomla sites.

(www.mirelmasic.nl/joomla)
When all else fails, you always have delusion.
  maandag 26 januari 2009 @ 00:04:58 #256
87680 Mirel
Mirel wil een bongophone.
pi_65405437
Goh, je moet het in de code wél dezelfde naam geven, ofzo. Jezus wat is joomla soms raar.
When all else fails, you always have delusion.
  maandag 26 januari 2009 @ 00:05:02 #257
134533 donroyco
dus niet Donroyco
pi_65405439
quote:
Op zondag 25 januari 2009 23:55 schreef Mirel het volgende:
Hey ik heb in Joomla een 2e menu aangemaakt en heb in de index en de css het uitgewerkt, maar de menu items zijn niet te zien. Als ik even wat tekst type binnen de div dan zie je die wel verschijnen maar de menu items niet. Ik weet zeker dat ik alle instellingen in de backend van joomla goed heb gedaan, maar toch.

In Joomla heb ik het nu usermenu genoemd, en heb in de index.php dit dus staan:
[ code verwijderd ]

En in de css dit, maar ik weet niet of dat écht wat uitmaakt.
[ code verwijderd ]

Het is dan meer een joomla probleem maar hier op fok krijg ik altijd betere en snellere reacties dan op joomla sites.

(www.mirelmasic.nl/joomla)
Het menu komt bij mij rechts buiten de pagina te staan.. FF 3.0.5
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
  maandag 26 januari 2009 @ 07:27:16 #258
87680 Mirel
Mirel wil een bongophone.
pi_65409562
Ja dat is dat gewone menu, dat kan ik wel maken. Het gaat me erom dat hij niet dat gewone menu daar neerzet maar een andere. Zo heb ik heb op dutchjoomla beschreven: http://forum.dutchjoomla.org/showthread.php?p=274610#post274610



2 menu's, plaats er 1 ergens en die komt daar, het andere menu plaats ik ergens en die doet niks. -__-
When all else fails, you always have delusion.
  maandag 26 januari 2009 @ 07:30:28 #259
87680 Mirel
Mirel wil een bongophone.
pi_65409573
Misschien is die manier fout maar goed. Ik heb 2 menus, je kan ze zelf definieren maar als je na het aanmaken in de opties kijkt hebben ze dezelfde gedefinieerde naam
When all else fails, you always have delusion.
pi_65411358
Ik zit met een CSS vraag.



Ik wil de plaatjes graag ook centeren verticaal, maar hoe krijg ik dat voor elkaar?

Huidige code
1
2
3
4
5
6
7
8
<div class="img"><a href="/8548.html"><img src="/view.php?t=1&id=8548" alt=" afbeelding 8548 in categorie Dieren"  height="100" /></a></div>
<div class="img"><a href="/8549.html"><img src="/view.php?t=1&id=8549" alt=" afbeelding 8549 in categorie Dieren"  height="98" /></a></div>
<div class="img"><a href="/8550.html"><img src="/view.php?t=1&id=8550" alt=" afbeelding 8550 in categorie Dieren"  height="98" /></a></div>
<div class="img"><a href="/8551.html"><img src="/view.php?t=1&id=8551" alt=" afbeelding 8551 in categorie Dieren"  height="96" /></a></div>
<div class="img"><a href="/8552.html"><img src="/view.php?t=1&id=8552" alt=" afbeelding 8552 in categorie Dieren"  height="96" /></a></div>
<div class="img"><a href="/8553.html"><img src="/view.php?t=1&id=8553" alt=" afbeelding 8553 in categorie Dieren"  height="100" /></a></div>
<div class="img"><a href="/8554.html"><img src="/view.php?t=1&id=8554" alt=" afbeelding 8554 in categorie Dieren"  height="96" /></a></div>
<div class="img"><a href="/8555.html"><img src="/view.php?t=1&id=8555" alt=" afbeelding 8555 in categorie Dieren"  height="96" /></a></div>


class IMG is

1
2
3
4
5
6
7
8
9
.img {
    width: 180px; 
    margin: 5px; 
    height: 175px; 
    float: left; 
    display: block; 
    text-align: center;
    border: 3px solid #676767;
}


Weet iemand hoe ik dit kan oplossen?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_65411412
1
2
padding-top: 50 px;
height: 125px;


Volgens mij kun je niet "echt" verticaal centreren, dat werkt nooit lekker. Het is mij in ieder geval nog nooit automatisch gelukt, doe het altijd middels de padding.
pi_65412096
Zou idd op die manier kunnen werken als alle plaatjes even groot zouden zijn maar dat is helaas het geval niet
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_65412176
Of ik moet gaan werken met tabellen maar dat vind ik weer vies
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  maandag 26 januari 2009 @ 10:38:46 #264
26400 wijsneus
Radicaal Democraat
pi_65412397
Als die plaatjes altijd dezelfde maat hebben is dat natuurlijk ook helemaal niet nodig.
Siamo Tutti Antifascisti!
pi_65412496
Dat is dus niet het geval, 90% van alle plaatjes hebben afwijkende maten!
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  maandag 26 januari 2009 @ 10:49:51 #266
26400 wijsneus
Radicaal Democraat
pi_65412723
Zoals het nu met 10.000 divjes doet is ook niet _echt_ lekker. Het is een lijstje van afbeeldingen toch? Lijstjes hebben we <ul> voor. Niet dat dat je probleem op lost, maar die "tabellen zijn evil dus overal een divje voor" mentaliteit moeten we ook vanaf.

Valt me trouwens zowieso vaak op, dat mensen best wel goed zijn in css, maar eigenlijk nog veel over HTML moeten leren.

nofi... trouwens...
Siamo Tutti Antifascisti!
  maandag 26 januari 2009 @ 10:53:12 #267
26400 wijsneus
Radicaal Democraat
pi_65412827
Als ik mijn designer-petje ook nog even mag opzetten...

Ik denk dat je een rustiger beeld krijgt als je alle plaatjes dezelfde hoogte geeft. Dus - geef ze maar een height en laat de browser de width maar oplossen. Dat lost meteen ook je verticaal centreren probleem op.
Siamo Tutti Antifascisti!
  maandag 26 januari 2009 @ 11:20:39 #268
230788 n8n
Pragmatisch
pi_65413586
Heb je invloed op de manier waarop de gallery opgebouwd wordt? Anders zou je het zo kunnen proberen. Niet helemaal zoals gewenst maar het geeft wat je wilt. En voor screenreaders staat er gewoon de link.

[ Bericht 90% gewijzigd door n8n op 26-01-2009 12:02:34 ]
Specialization is for insects”.—Robert Heinlein
pi_65417854
quote:
Op maandag 26 januari 2009 @ 10:30 schreef Chandler het volgende:
Of ik moet gaan werken met tabellen maar dat vind ik weer vies
Er is niets vies aan tabellen.

Je hele site positioneren dmv tabellen en genestte tabellen in tabellen is inderdaad smerig, maar als je een tabel met foto's wilt weergeven mag je daar best de <table> tag voor gebruiken.
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 14:01:06 #270
1972 Swetsenegger
Egocentrische Narcist
pi_65418542
quote:
Op maandag 26 januari 2009 09:54 schreef Chandler het volgende:
Ik zit met een CSS vraag.

[ afbeelding ]

Ik wil de plaatjes graag ook centeren verticaal, maar hoe krijg ik dat voor elkaar?

Huidige code
[ code verwijderd ]

class IMG is
[ code verwijderd ]

Weet iemand hoe ik dit kan oplossen?
Je div een line-height meehgeven gelijk aan de height van je div en in je image "vertical-align:middle" opnemen
  maandag 26 januari 2009 @ 15:41:15 #271
26400 wijsneus
Radicaal Democraat
pi_65422002
quote:
Op maandag 26 januari 2009 14:01 schreef Swetsenegger het volgende:

[..]

Je div een line-height meehgeven gelijk aan de height van je div en in je image "vertical-align:middle" opnemen
You, sir, rock.
Siamo Tutti Antifascisti!
pi_65425357
quote:
Op maandag 26 januari 2009 14:01 schreef Swetsenegger het volgende:

[..]

Je div een line-height meehgeven gelijk aan de height van je div en in je image "vertical-align:middle" opnemen
Helaas heb het geprobeerd maar wil niet werken

Maar voor dit geval is het gebruik van tabellen volgens jullie de enige simpele en juiste oplossing?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_65432306
quote:
Op maandag 26 januari 2009 17:02 schreef Chandler het volgende:

Maar voor dit geval is het gebruik van tabellen volgens jullie de enige simpele en juiste oplossing?
Nee, want het is geen tabulaire data maar een opsomming.
pi_65433002
Wat moet ik dan gebruiken volgens jullie? toch gewoon mijn divjes?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
  maandag 26 januari 2009 @ 20:44:13 #275
230788 n8n
Pragmatisch
pi_65433043
<ul>
<li>
</ul>
Specialization is for insects”.—Robert Heinlein
pi_65433878
quote:
Op maandag 26 januari 2009 14:01 schreef Swetsenegger het volgende:

[..]

Je div een line-height meehgeven gelijk aan de height van je div en in je image "vertical-align:middle" opnemen
IE7: Werkt.
IE8: Werkt niet.
FX: Werkt niet.
pi_65433924
quote:
Op maandag 26 januari 2009 20:25 schreef Roy_T het volgende:

[..]

Nee, want het is geen tabulaire data maar een opsomming.
Ik zie eigenlijk ook geen andere manier om verticaal te centreren?

Enige optie die er fatsoenlijk uit ziet is wat er al geroepen werd, uitlijnen op de bodem. Da's nog simpel ook, gewoon de img's absoluut positioneren en dan ben je klaar
pi_65435823
veldmuis, ik zie inderdaad ook geen andere oplossing, heel netjes niet en de validator valt er wel over maar een tabel zou de meest simpele oplossing zijn.

Maar kun je jou oplossing eens laten zien? en werkt deze wel in alle browsers?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_65435988
Ik zou het sowieso anders doen.

die div weglaten, die ul zelfs weglaten en gewoon de a een display block geven, breedte, hoogte, etc.

de a dan een position relative, de img een position absolute, bottom op 0px en eh..nou zit ik ff te denken hoe ik die zou centreren. margin 0px auto denk ik.
pi_65436289
Nou eens zien of het werkt, zal het morgen even proberen en de resultaten posten!.

/meld af
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_65436612
quote:
Op maandag 26 januari 2009 21:05 schreef veldmuis het volgende:

Ik zie eigenlijk ook geen andere manier om verticaal te centreren?
Scheiding van structuur en presentatie enzo Het is een lijst, dus het zou gewoon (zoals hierboven staat) een <ul> moeten zijn. Dat je dat niet in de look krijgt die je wil, maakt nog niet dat tabellen hier "dus" correct zijn.
pi_65436730
quote:
Op maandag 26 januari 2009 22:03 schreef Roy_T het volgende:

[..]

Scheiding van structuur en presentatie enzo Het is een lijst, dus het zou gewoon (zoals hierboven staat) een <ul> moeten zijn. Dat je dat niet in de look krijgt die je wil, maakt nog niet dat tabellen hier "dus" correct zijn.
Semantisch is het wellicht netter om <ul><li><table><tr><td><a><img></a></td></tr></table></li><li><table><tr><td><a><img></a></td></tr></table></li></ul> te doen. Ik zou echter voor een gewone ouderwetse table gaan hoor. Kan hier prima imo. Het is niet helemaal table-data wat je daar hebt, maar zolang het één tabel is in een keurige html, boeiend toch?
pi_65437077
Nee, semantisch is het netter om gewoon helemaal geen tabel te gebruiken I.p.v. die <div>'s gewoon <li>'s en klaar. Hier tabellen voor gebruiken is nooit keurige HTML, want het is niet "niet helemaal" tabulaire data, maar "helemaal niet" (tenzij je een kolom "afbeelding", "bestandsnaam", etc maakt en per afbeelding een rij).
pi_65437172
Klopt. Maar gaat netheid dan boven ontwerp? Stel je dan niet een beetje verkeerde prioriteiten?
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:17:24 #285
1972 Swetsenegger
Egocentrische Narcist
pi_65437272
quote:
Op maandag 26 januari 2009 21:04 schreef veldmuis het volgende:

[..]

IE7: Werkt.
IE8: Werkt niet.
FX: Werkt niet.


http://test.xploise.nl/align.html
pi_65437405
quote:
Op maandag 26 januari 2009 22:15 schreef veldmuis het volgende:
Klopt. Maar gaat netheid dan boven ontwerp? Stel je dan niet een beetje verkeerde prioriteiten?
Het één is wat mij betreft niet ondergeschikt aan het andere. De HTML moet goed zijn, de CSS moet net zo goed zijn en de JavaScript ook. Er zit natuurlijk altijd wat rekbaarheid in, maar tabellen gebruiken enkel en alleen voor positionering is plain evil imo.
pi_65437487
quote:
Werkt in FF 3.0.5 en Safari 3.2.1, ondanks het foutje in je HTML (staat een dubbele quote verkeerd).
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:23:04 #288
1972 Swetsenegger
Egocentrische Narcist
pi_65437550
quote:
Op maandag 26 januari 2009 22:21 schreef Roy_T het volgende:

[..]

Werkt in FF 3.0.5 en Safari 3.2.1, ondanks het foutje in je HTML (staat een dubbele quote verkeerd).
Die had ik al gevonden ja
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:24:07 #289
1972 Swetsenegger
Egocentrische Narcist
pi_65437591
Er moet wel een tekst achter de image staan zie ik nu, maar dat kan je wel met een spatie oplossen. -edit- zoals nu in mijn huidige voorbeeld.
pi_65438041
IE8 weigert nog wel.
Wat betreft FX heb je gelijk .
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:35:47 #291
1972 Swetsenegger
Egocentrische Narcist
pi_65438091
quote:
Op maandag 26 januari 2009 22:34 schreef veldmuis het volgende:
IE8 weigert nog wel.
Wat betreft FX heb je gelijk .
Ik zit hier op Mac, dus kan IE8 niet testen nu. Maar IE8 is beta en weigert wel meer
Ik zal morgen ff met IE8 kijken.
pi_65438122
IE8 is RC
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:38:14 #293
1972 Swetsenegger
Egocentrische Narcist
pi_65438199
quote:
Op maandag 26 januari 2009 22:36 schreef veldmuis het volgende:
IE8 is RC
Ik heb volgens mij beta 1 nog geinstalleerd staan, maar zal morgen ff kijken. Zou wel vreemd zijn als IE8 het niet doet, want dit is standaard CSS. En wat ik tot op heden van IE8 heb gezien stemt positief.
pi_65438248
Ik vind IE8 ook zeker een vooruitgang. Alleen jammer dat bijvoorbeeld opacity nog niet ondersteund wordt, maar dat ze daar nu een filter voor pakken wat weer op een andere manier werkt als IE7. Dat soort dingen stellen me wel teleur.
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:42:01 #295
1972 Swetsenegger
Egocentrische Narcist
pi_65438344
Hmz, ff via citrix getest. Op chrome doettie het ook, maar op IE7 ook niet. ff kijken wat hij met een doctype doet
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:44:56 #296
1972 Swetsenegger
Egocentrische Narcist
pi_65438455
quote:
Op maandag 26 januari 2009 22:39 schreef veldmuis het volgende:
Ik vind IE8 ook zeker een vooruitgang. Alleen jammer dat bijvoorbeeld opacity nog niet ondersteund wordt, maar dat ze daar nu een filter voor pakken wat weer op een andere manier werkt als IE7. Dat soort dingen stellen me wel teleur.
Is dat zo? Dat wist ik eigenlijk niet, ik zie in ieder geval dat ik nu transparante PNG's hebt zonder dat ik zelf een workaround moet verzinnen.

Met de doctype lijkt hij het nu op alle browsers goed te doen. Getest in

Safari 3.2.x Mac
Firefox 3.0.xx Mac
Opera 9.6x Mac
IE 7.0.x Windows
Chrome 1.0.x Windows
pi_65438611
Misschien is http://kimblim.dk/csstest/ ook handig om na te kijken welke browser welke css-features ondersteund. Niet dat alles wordt getest, maar het is wel een leuk overzicht. En je vraagt je meteen weer af waarom IE6 nog steeds niet in de ban is gedaan.
pi_65438667
quote:
Op maandag 26 januari 2009 22:44 schreef Swetsenegger het volgende:

[..]

Is dat zo? Dat wist ik eigenlijk niet, ik zie in ieder geval dat ik nu transparante PNG's hebt zonder dat ik zelf een workaround moet verzinnen.
Transparante PNG's gaan ook in IE7 al gewoon goed, zonder vage workarounds.
  FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:50:27 #299
1972 Swetsenegger
Egocentrische Narcist
pi_65438714
quote:
Op maandag 26 januari 2009 22:49 schreef Light het volgende:

[..]

Transparante PNG's gaan ook in IE7 al gewoon goed, zonder vage workarounds.
Ja precies.
pi_65439181
quote:
Op maandag 26 januari 2009 22:36 schreef veldmuis het volgende:
IE8 is RC
en hier geinstalleerd, nu hopen dat de JS enigne wat stabieler is
abonnement Unibet Coolblue Bitvavo
Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')