[CSS] voor dummies - deel 10 | Digital Corner (DIG/DEV)

maandag 3 november 2008 @ 10:16:12 #1

Chandler

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

wijsneus

Radicaal Democraat

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!

maandag 3 november 2008 @ 11:12:04 #3

Chandler

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

wijsneus

Radicaal Democraat

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!

maandag 3 november 2008 @ 11:47:06 #5

Chandler

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...

maandag 3 november 2008 @ 11:49:24 #6

spaceninjapirate

mhh k

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

dinsdag 4 november 2008 @ 20:43:11 #7

mcDavid

schopje richting MyAT.

donderdag 6 november 2008 @ 10:06:25 #8

Chandler

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...

vrijdag 7 november 2008 @ 10:19:49 #9

Chandler

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

wijsneus

Radicaal Democraat

Jeuj!

maar wel een vieze, vieze hack hoor...

Siamo Tutti Antifascisti!

vrijdag 7 november 2008 @ 13:14:55 #11

Chandler

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...

zaterdag 8 november 2008 @ 18:04:27 #12

Tieu

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...

zaterdag 8 november 2008 @ 18:11:44 #13

mcDavid

IE6 of IE7?

zaterdag 8 november 2008 @ 18:36:10 #14

Tieu

IE7

I was trying to daydream, but my mind kept wandering...

zaterdag 8 november 2008 @ 20:26:31 #15

wijsneus

Radicaal Democraat

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!

zaterdag 8 november 2008 @ 21:29:22 #16

Tieu

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...

zondag 9 november 2008 @ 14:06:06 #17

Tieu

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...

maandag 10 november 2008 @ 00:26:17 #18

mcDavid

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.

woensdag 19 november 2008 @ 19:26:34 #19

hello_moto1992

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 :( ?

:)

woensdag 19 november 2008 @ 19:57:54 #20

RenRen-

Beetje vaag. Heb je een linkje?

-edit-
mcD hier

donderdag 20 november 2008 @ 13:10:03 #21

hello_moto1992

De tekst wil ik in IE gewoon netjes helemaal naar links hebben staan.

donderdag 20 november 2008 @ 13:57:32 #22

mcDavid

Wat een heerlijke browser toch, dat IE

.

Gebruik je wel een doctype tag?

donderdag 20 november 2008 @ 16:12:20 #23

hello_moto1992

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">

donderdag 20 november 2008 @ 16:20:35 #24

mcDavid

Heb je niet gewoon een linkje ofzo? Of op zijn minst een stukje code? dat werkt toch vaak een stuk makkelijker...

donderdag 20 november 2008 @ 16:28:43 #25

hello_moto1992

Website:
http://www.hokje10.nl/

+ bovenstaande CSS.

donderdag 20 november 2008 @ 17:08:30 #26

mcDavid

Lelijk als de hel maar ik heb het uiteindelijk zo opgelost

donderdag 20 november 2008 @ 17:30:04 #27

hello_moto1992

Het werkt

. Bedankt, k had hier zelf noooit op gekomen.

vrijdag 21 november 2008 @ 01:36:49 #28

mcDavid

Er gaat iets mis met je conditional comment! Het staat nu in firefox te ver naar links

vrijdag 21 november 2008 @ 07:15:35 #29

Light

quote:
Op vrijdag 21 november 2008 01:36 schreef mcDavid het volgende:
Er gaat iets mis met je conditional comment! Het staat nu in firefox te ver naar links

Ja, de code voor de conditional comment is niet goed. En 't staat op de verkeerde plaats.

fokstok.nl

vrijdag 21 november 2008 @ 11:30:17 #30

Patje1987

Madre me quiero un frikandel.

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!

vrijdag 21 november 2008 @ 14:21:57 #31

hello_moto1992

Waar moet hij nou

?

vrijdag 21 november 2008 @ 14:53:36 #32

mcDavid

Je moet gewoon precies die regel zoals ik hem had in de head sectie zetten.

vrijdag 21 november 2008 @ 15:22:07 #33

Patje1987

Madre me quiero un frikandel.

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!

vrijdag 21 november 2008 @ 15:33:26 #34

mcDavid

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!

vrijdag 21 november 2008 @ 18:02:59 #35

hello_moto1992

Edit: hij werkt wel in IE

[ Bericht 23% gewijzigd door hello_moto1992 op 21-11-2008 18:10:53 ]

vrijdag 21 november 2008 @ 18:15:57 #36

Light

quote:
Op vrijdag 21 november 2008 18:02 schreef hello_moto1992 het volgende:
Edit: hij werkt wel in IE

Er staan nog wel wat foutjes in stylegreen.css. Om te beginnen regel 41. In css kun je geen conditional comments plaatsen, en al helemaal niet in html-stijl.
Dan regel 114 en 119. Die staan na een accolade sluiten, en waarschijnlijk moeten ze ervoor. Zo doen ze in ieder geval niets.

fokstok.nl

vrijdag 21 november 2008 @ 18:18:42 #37

Light

En er zitten nog wat foutjes in je html. De meeste moet je simpel kunnen oplossen.

fokstok.nl

zaterdag 22 november 2008 @ 11:30:40 #38

hello_moto1992

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

zaterdag 22 november 2008 @ 11:37:00 #39

Light

Je hebt wel gezien dat er een linkje staat in m'n vorige post?

fokstok.nl

zaterdag 22 november 2008 @ 14:57:38 #40

Kerol

Coño

TVP

Bodybuilding #1
Hardlopen #2

zaterdag 22 november 2008 @ 17:00:09 #41

hello_moto1992

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

zaterdag 22 november 2008 @ 23:03:38 #42

Light

Ik heb ook even gekeken, er staan 4 foutmeldingen en aan de foutmeldingen te zien hoef je alleen de eerste op te lossen. De rest gaat dan automatisch ook goed. Die eerste melding geeft aan dat er ergens een div geopend wordt die niet weer wordt afgesloten. Er staat dus een <div> meer dan een </div>

fokstok.nl

maandag 24 november 2008 @ 13:40:30 #43

hello_moto1992

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

maandag 24 november 2008 @ 13:56:02 #44

mcDavid

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.

maandag 24 november 2008 @ 13:59:55 #45

hello_moto1992

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.

maandag 24 november 2008 @ 14:04:35 #46

mcDavid

hmm dan is er toch echt wat mis met je plaatje lijkt me.

maandag 24 november 2008 @ 14:08:43 #47

RM-rf

1/998001

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 ]

1	background: 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

maandag 24 november 2008 @ 15:27:59 #48

hello_moto1992

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

Swetsenegger

Egocentrische Narcist

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <title> home</title>
      <link rel="stylesheet" type="text/css" href="includes/ui.css" />
      </head>
   <body>
      <div class="container">
                   <div id="top">
                          top
                   </div>
                        <div class="left" style="border:solid 1px red;">
                          links
              </div>
         <div class="bottom">
                              <p>Test...</p>
         </div>
      </div>
   </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

html, body {
   margin:0;
   padding:0;
   height:100%;
}

body{
   font-family: tahoma, verdana, Sans, sans-serif;
   background-image: url(../image/bg.gif);
}

.container{
   position:relative;
   border: 1px solid #c5d6f9;
    margin: 20px 0px 5px 0px;
    background-color: #fffffe;
   margin:0 auto; /*horizontale centrering. Werkt niet in IE quircksmode. Dan text-align:center aan body toevoegen*/
   width:1000px;
}

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

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

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

Waarom worden 'left' en 'bottom' niet genest binnen 'container' :?

 | FOK! Schrikkelbaasch

dinsdag 25 november 2008 @ 21:02:26 #50

mcDavid

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

Swetsenegger

Egocentrische Narcist

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.

 | FOK! Schrikkelbaasch

dinsdag 25 november 2008 @ 21:09:04 #52

mcDavid

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

Swetsenegger

Egocentrische Narcist

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.

 | FOK! Schrikkelbaasch

donderdag 27 november 2008 @ 20:01:10 #54

Banzaiaap

Tony Rocky Horror

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

Patje1987

Madre me quiero un frikandel.

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!

vrijdag 28 november 2008 @ 19:15:30 #56

Roy_T

tvp

woensdag 3 december 2008 @ 23:23:56 #57

Mirel

Mirel wil een bongophone.

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.

donderdag 4 december 2008 @ 00:01:20 #58

Roy_T

Je HTML en CSS posten zou handig zijn

Of liever nog: ergens online zetten.

donderdag 4 december 2008 @ 00:09:36 #59

Mirel

Mirel wil een bongophone.

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

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

    </div> 
</div> 
</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

Jo0Lz

Lick the box!

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

Mirel

Mirel wil een bongophone.

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

Mirel

Mirel wil een bongophone.

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

Patje1987

Madre me quiero un frikandel.

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

Mirel

Mirel wil een bongophone.

Jeujjjj dat werkte.

When all else fails, you always have delusion.

donderdag 4 december 2008 @ 10:13:04 #65

Mirel

Mirel wil een bongophone.

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

Patje1987

Madre me quiero un frikandel.

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

Mirel

Mirel wil een bongophone.

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

Patje1987

Madre me quiero un frikandel.

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

Mirel

Mirel wil een bongophone.

Waar kan dat aan liggen? :/

When all else fails, you always have delusion.

donderdag 4 december 2008 @ 13:57:34 #70

Jo0Lz

Lick the box!

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

Patje1987

Madre me quiero un frikandel.

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!

vrijdag 5 december 2008 @ 07:12:42 #72

Light

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).

fokstok.nl

zaterdag 6 december 2008 @ 11:44:18 #73

mschol

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?

zaterdag 6 december 2008 @ 11:47:54 #74

mcDavid

Volgens mij kan dat met de psuedo-class ":focus"

1	textarea:focus {color:#000}

zoiets dus..

[ Bericht 40% gewijzigd door mcDavid op 06-12-2008 11:54:03 (verkeerde psuedo class :P) ]

zaterdag 6 december 2008 @ 11:57:39 #75

mschol

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

zaterdag 6 december 2008 @ 14:11:36 #76

mcDavid

Probeer het toch eens met active dan?

droevig stuk software, dat IE...

zaterdag 6 december 2008 @ 15:15:39 #77

mschol

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

zaterdag 6 december 2008 @ 16:13:44 #78

mcDavid

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

Mirel

Mirel wil een bongophone.

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.

zondag 7 december 2008 @ 23:15:18 #80

mschol

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

zondag 7 december 2008 @ 23:23:55 #81

mcDavid

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 :') ]

zondag 7 december 2008 @ 23:48:05 #82

mcDavid

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.

dinsdag 9 december 2008 @ 00:02:55 #83

ludeau

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!

dinsdag 9 december 2008 @ 00:13:36 #84

mcDavid

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;
}

dinsdag 9 december 2008 @ 10:19:49 #85

ludeau

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...

dinsdag 9 december 2008 @ 12:27:22 #86

Light

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.

fokstok.nl

dinsdag 9 december 2008 @ 13:02:47 #87

mcDavid

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.

dinsdag 9 december 2008 @ 13:43:09 #88

ludeau

-edit:

oja, voor alle ,a:active elementen .blabla toevoegen helpt.. tnx!

woensdag 10 december 2008 @ 09:50:51 #89

Intrepidity

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?

woensdag 10 december 2008 @ 10:05:47 #90

Roy_T

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?

woensdag 10 december 2008 @ 10:06:07 #91

HuHu

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.

woensdag 10 december 2008 @ 10:15:32 #92

Intrepidity

Opzich geen probleem, maar het hele principe dat class b dan een aantal properties van class a overschrijft is weg..

woensdag 10 december 2008 @ 10:19:05 #93

Intrepidity

De dag dat IE6 nog <5% marktaandeel heeft spring ik een gat in de lucht

woensdag 10 december 2008 @ 11:29:46 #94

Roy_T

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

Mirel

Mirel wil een bongophone.

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.

woensdag 10 december 2008 @ 17:44:34 #96

Intrepidity

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

woensdag 10 december 2008 @ 18:45:26 #97

mcDavid

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

Mirel

Mirel wil een bongophone.

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.

zondag 21 december 2008 @ 09:47:53 #99

hello_moto1992

Iemand nog leuke tips om een website op te vrolijken met kermis-attributen?

zondag 21 december 2008 @ 11:09:37 #100

hello_moto1992

kerstmis dus

zondag 21 december 2008 @ 11:16:18 #101

Roy_T

Ik heb nog nooit gehoord van "jingle-bells" of "chrsitmas-tree" CSS properties. Met andere woorden: wat heeft dit met CSS te maken

zondag 21 december 2008 @ 11:42:19 #102

mschol

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/

zondag 21 december 2008 @ 13:17:38 #103

hello_moto1992

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

donroyco

dus niet Donroyco

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. :'(

maandag 22 december 2008 @ 22:47:37 #105

Mindstate

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

maandag 22 december 2008 @ 23:01:21 #106

mcDavid

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...

maandag 22 december 2008 @ 23:06:06 #107

mcDavid

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

donroyco

dus niet Donroyco

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. :'(

maandag 22 december 2008 @ 23:24:39 #109

Mindstate

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

dinsdag 23 december 2008 @ 04:01:38 #110

Light

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).

fokstok.nl

dinsdag 23 december 2008 @ 12:44:57 #111

Mindstate

Oh, het lag dus aan die ;, bedankt.

Ook bedankt voor die CSS Validator, kan nog goed van pas komen

dinsdag 23 december 2008 @ 14:27:54 #112

RenRen-

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

dinsdag 23 december 2008 @ 15:00:34 #113

Roy_T

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

dinsdag 23 december 2008 @ 15:48:29 #114

RenRen-

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

dinsdag 23 december 2008 @ 18:13:20 #115

hello_moto1992

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

dinsdag 23 december 2008 @ 18:16:08 #116

Mindstate

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?

dinsdag 23 december 2008 @ 18:20:55 #117

mcDavid

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?

dinsdag 23 december 2008 @ 18:26:42 #118

Light

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.

fokstok.nl

dinsdag 23 december 2008 @ 18:29:00 #119

hello_moto1992

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

donroyco

dus niet Donroyco

@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. :'(

dinsdag 23 december 2008 @ 18:44:19 #121

Mindstate

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 ]

dinsdag 23 december 2008 @ 19:34:55 #122

mcDavid

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

Spike1506

NullPointerException

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.

Twitter | Sensiva.net Webhosting | Mijn blog.

dinsdag 23 december 2008 @ 23:17:55 #124

Light

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.

fokstok.nl

dinsdag 23 december 2008 @ 23:20:10 #125

mcDavid

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

Spike1506

NullPointerException

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?

Twitter | Sensiva.net Webhosting | Mijn blog.

dinsdag 23 december 2008 @ 23:32:45 #127

Light

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.

fokstok.nl

dinsdag 23 december 2008 @ 23:34:49 #128

Mindstate

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)

dinsdag 23 december 2008 @ 23:39:27 #129

mcDavid

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

Mirel

Mirel wil een bongophone.

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

donroyco

dus niet Donroyco

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. :'(

woensdag 24 december 2008 @ 13:10:43 #132

mcDavid

niet echt een CSS probleem, maar ik zou wordpress eens bekijken!

woensdag 24 december 2008 @ 18:53:00 #133

Mindstate

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.

woensdag 24 december 2008 @ 20:54:21 #134

mcDavid

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.

dinsdag 30 december 2008 @ 19:17:51 #135

hello_moto1992

[ Bericht 53% gewijzigd door hello_moto1992 op 31-12-2008 13:52:34 ]

dinsdag 30 december 2008 @ 19:28:05 #136

mcDavid

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.

dinsdag 30 december 2008 @ 19:29:01 #137

mcDavid

enneuh, sja wat dacht je van erín?

dinsdag 30 december 2008 @ 19:39:36 #138

hello_moto1992

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 ]

dinsdag 30 december 2008 @ 20:29:28 #139

mcDavid

hoe bedoel je dat?

dinsdag 30 december 2008 @ 20:45:11 #140

hello_moto1992

Ehm bij nader inzien kan dat ook wel. Ik zal het ff proberen.

woensdag 31 december 2008 @ 13:08:41 #141

veldmuis

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

Swetsenegger

Egocentrische Narcist

Ik heb eigenlijk geen flauw idee wat je bedoelt met de 'code' in je html droppen?

 | FOK! Schrikkelbaasch

woensdag 31 december 2008 @ 13:27:38 #143

veldmuis

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.

woensdag 31 december 2008 @ 13:44:02 #144

Roy_T

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)".

woensdag 31 december 2008 @ 14:14:58 #145

mcDavid

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?

woensdag 31 december 2008 @ 14:22:37 #146

veldmuis

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

Swetsenegger

Egocentrische Narcist

Maar zijn http requests met de hedendaagse breedband snelheden en server backbones nog een issue dan

 | FOK! Schrikkelbaasch

woensdag 31 december 2008 @ 14:41:53 #148

veldmuis

Elke milliseconde is meegenomen.

FOK!-Schrikkelbaas woensdag 31 december 2008 @ 14:42:28 #149

Swetsenegger

Egocentrische Narcist

Nou..!

 | FOK! Schrikkelbaasch

woensdag 31 december 2008 @ 14:44:24 #150

Roy_T

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

Swetsenegger

Egocentrische Narcist

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.

 | FOK! Schrikkelbaasch

woensdag 31 december 2008 @ 14:55:47 #152

Roy_T

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/

woensdag 31 december 2008 @ 15:04:08 #153

RenRen-

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.

woensdag 31 december 2008 @ 15:07:51 #154

Roy_T

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

Swetsenegger

Egocentrische Narcist

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.

 | FOK! Schrikkelbaasch

vrijdag 2 januari 2009 @ 14:11:15 #156

Roy_T

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

Mirel

Mirel wil een bongophone.

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.

maandag 5 januari 2009 @ 21:05:39 #158

mcDavid

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.

dinsdag 6 januari 2009 @ 11:16:20 #159

Puala

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

dinsdag 6 januari 2009 @ 11:24:58 #160

Roy_T

Content geen "height" geven (dus impliciet "height: auto").

donderdag 8 januari 2009 @ 13:52:18 #161

Chandler

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...

donderdag 8 januari 2009 @ 13:57:55 #162

mcDavid

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.

donderdag 8 januari 2009 @ 14:24:38 #163

Chandler

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...

donderdag 8 januari 2009 @ 14:44:55 #164

mcDavid

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 ]

donderdag 8 januari 2009 @ 14:56:46 #165

Chandler

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...

donderdag 8 januari 2009 @ 15:20:30 #166

mcDavid

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.

donderdag 8 januari 2009 @ 15:24:17 #167

HuHu

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.

donderdag 8 januari 2009 @ 15:31:19 #168

mcDavid

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.

donderdag 8 januari 2009 @ 15:43:04 #169

mcDavid

Nieuwe sig.

donderdag 8 januari 2009 @ 17:37:32 #170

donroyco

dus niet Donroyco

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. :'(

donderdag 8 januari 2009 @ 18:45:25 #171

veldmuis

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

donroyco

dus niet Donroyco

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. :'(

donderdag 8 januari 2009 @ 18:49:46 #173

veldmuis

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

donroyco

dus niet Donroyco

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. :'(

donderdag 8 januari 2009 @ 20:23:53 #175

mcDavid

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

.

donderdag 8 januari 2009 @ 23:48:19 #176

Roy_T

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.

vrijdag 9 januari 2009 @ 10:00:26 #177

Chandler

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

donroyco

dus niet Donroyco

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. :'(

vrijdag 9 januari 2009 @ 11:37:24 #179

mcDavid

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

vrijdag 9 januari 2009 @ 11:53:40 #180

Chandler

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...

vrijdag 9 januari 2009 @ 14:14:00 #181

mcDavid

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

Patje1987

Madre me quiero un frikandel.

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!

vrijdag 9 januari 2009 @ 14:32:28 #183

HuHu

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

?

vrijdag 9 januari 2009 @ 14:49:17 #184

mcDavid

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.

vrijdag 9 januari 2009 @ 15:02:20 #185

Chandler

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...

vrijdag 9 januari 2009 @ 15:07:44 #186

mcDavid

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

vrijdag 9 januari 2009 @ 15:33:56 #187

Chandler

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...

vrijdag 9 januari 2009 @ 16:54:46 #188

Light

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

fokstok.nl

vrijdag 9 januari 2009 @ 18:44:37 #189

veldmuis

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

Patje1987

Madre me quiero un frikandel.

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!

vrijdag 9 januari 2009 @ 19:33:31 #191

mcDavid

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?

vrijdag 9 januari 2009 @ 20:10:56 #192

Roy_T

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

Mirel

Mirel wil een bongophone.

Wat is trouwens de menumodule code in joomla. Ben die even kwijt

When all else fails, you always have delusion.

zaterdag 10 januari 2009 @ 10:12:39 #194

Chandler

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...

zondag 11 januari 2009 @ 18:00:53 #195

Roy_T

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

zondag 11 januari 2009 @ 21:33:47 #196

Mailbox

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 ]

zondag 11 januari 2009 @ 21:37:12 #197

veldmuis

Begin eens met

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

zondag 11 januari 2009 @ 21:39:00 #198

donroyco

dus niet Donroyco

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. :'(

zondag 11 januari 2009 @ 21:40:04 #199

Mailbox

Oeh gelijk even proberen

zondag 11 januari 2009 @ 21:40:46 #200

Mailbox

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

zondag 11 januari 2009 @ 21:43:48 #201

Light

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.

fokstok.nl

zondag 11 januari 2009 @ 21:44:04 #202

veldmuis

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;
}

zondag 11 januari 2009 @ 21:50:36 #203

Mailbox

quote:
Op zondag 11 januari 2009 21:44 schreef veldmuis het volgende:

[..]

dan wel

img {
border: none;
}

dat geeft al enig effect

zondag 11 januari 2009 @ 21:55:21 #204

veldmuis

Ik denk dat je er toch wat over moet gaan lezen nu. Je divt alles aan elkaar, en dat hoeft helemaal niet.

zondag 11 januari 2009 @ 22:04:30 #205

Mailbox

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

Mirel

Mirel wil een bongophone.

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.

zondag 11 januari 2009 @ 22:09:54 #207

veldmuis

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

Mirel

Mirel wil een bongophone.

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.

zondag 11 januari 2009 @ 22:17:47 #209

veldmuis

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.

zondag 11 januari 2009 @ 22:36:12 #210

Roy_T

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.

dinsdag 13 januari 2009 @ 17:53:33 #211

Mailbox

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>

dinsdag 13 januari 2009 @ 19:09:17 #212

mcDavid

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?

dinsdag 13 januari 2009 @ 19:38:24 #213

veldmuis

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.

dinsdag 13 januari 2009 @ 19:44:28 #214

Veeltje

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

dinsdag 13 januari 2009 @ 19:59:41 #215

mcDavid

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

n8n

Pragmatisch

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

dinsdag 13 januari 2009 @ 20:16:09 #217

Veeltje

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

dinsdag 13 januari 2009 @ 20:20:38 #218

veldmuis

Waarom zit die redirect in je link?

dinsdag 13 januari 2009 @ 20:21:57 #219

Veeltje

Hoe bedoel je?

dinsdag 13 januari 2009 @ 20:36:42 #220

Light

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.

fokstok.nl

dinsdag 13 januari 2009 @ 20:40:06 #221

n8n

Pragmatisch

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

dinsdag 13 januari 2009 @ 20:47:29 #222

Veeltje

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

dinsdag 13 januari 2009 @ 20:51:58 #223

mcDavid

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.

dinsdag 13 januari 2009 @ 20:58:28 #224

Veeltje

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

Mirel

Mirel wil een bongophone.

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.

woensdag 14 januari 2009 @ 12:49:06 #226

RM-rf

1/998001

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

woensdag 14 januari 2009 @ 16:40:58 #227

klusmeister

flex

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

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!

woensdag 14 januari 2009 @ 16:50:47 #228

mcDavid

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...

woensdag 14 januari 2009 @ 16:57:18 #229

Roy_T

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".

woensdag 14 januari 2009 @ 16:58:43 #230

klusmeister

flex

bedankt!

zondag 18 januari 2009 @ 23:40:05 #231

Mirel

Mirel wil een bongophone.

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

n8n

Pragmatisch

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

Mirel

Mirel wil een bongophone.

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.

maandag 19 januari 2009 @ 18:59:17 #234

veldmuis

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

n8n

Pragmatisch

text-indent vereist geen span

“Specialization is for insects”.—Robert Heinlein

maandag 19 januari 2009 @ 19:27:06 #236

veldmuis

Ow excuse me, een achtergrondafbeelding. Ik heb niks gezegd.

maandag 19 januari 2009 @ 19:27:59 #237

Roy_T

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

maandag 19 januari 2009 @ 19:29:28 #238

veldmuis

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

Mirel

Mirel wil een bongophone.

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.

dinsdag 20 januari 2009 @ 22:23:35 #240

veldmuis

url?

dinsdag 20 januari 2009 @ 22:25:45 #241

Mirel

Mirel wil een bongophone.

editje, heb ik niet.

When all else fails, you always have delusion.

dinsdag 20 januari 2009 @ 22:43:24 #242

veldmuis

Ja, dan is het lastig. Installeer de IE devtoolbar of firebug en ga proberen.

dinsdag 20 januari 2009 @ 22:47:02 #243

Mirel

Mirel wil een bongophone.

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

Mirel

Mirel wil een bongophone.

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.

woensdag 21 januari 2009 @ 00:00:18 #245

Light

Wat is dan de bedoeling als je drie nieuwsberichten hebt?

fokstok.nl

woensdag 21 januari 2009 @ 00:14:21 #246

Roy_T

Beetje lastig analyseren zonder enige code he

Educated guess: floats.

woensdag 21 januari 2009 @ 07:28:11 #247

wc-eend

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..

woensdag 21 januari 2009 @ 09:07:51 #248

Roy_T

wc-eend, welk doctype gebruik je? Als je er geen gebruikt, voeg die dan eerst eens toe. Klinkt als verschillende box models namelijk

woensdag 21 januari 2009 @ 09:51:55 #249

wc-eend

uhhhhhh

even google opstarten

woensdag 21 januari 2009 @ 09:57:25 #250

Light

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.

fokstok.nl

woensdag 21 januari 2009 @ 10:01:20 #251

wc-eend

Een gedeelte uit de code van index.html

1
2
3
4
5
6
7
8
9

<html>
<head>

<title>index_layout</title>

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

<title>index_layout</title>

<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 :)

woensdag 21 januari 2009 @ 10:16:59 #252

mcDavid

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>.)

woensdag 21 januari 2009 @ 10:42:06 #253

wc-eend

Dat werkt

thanks an bunch

woensdag 21 januari 2009 @ 13:06:39 #254

Roy_T

Wat is het toch lekker simpel soms

zondag 25 januari 2009 @ 23:55:03 #255

Mirel

Mirel wil een bongophone.

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

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

Mirel

Mirel wil een bongophone.

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

donroyco

dus niet Donroyco

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

Mirel

Mirel wil een bongophone.

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

Mirel

Mirel wil een bongophone.

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.

maandag 26 januari 2009 @ 09:54:20 #260

Chandler

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

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...

maandag 26 januari 2009 @ 09:56:47 #261

HuHu

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.

maandag 26 januari 2009 @ 10:27:18 #262

Chandler

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...

maandag 26 januari 2009 @ 10:30:22 #263

Chandler

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

wijsneus

Radicaal Democraat

Als die plaatjes altijd dezelfde maat hebben is dat natuurlijk ook helemaal niet nodig.

Siamo Tutti Antifascisti!

maandag 26 januari 2009 @ 10:42:28 #265

Chandler

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

wijsneus

Radicaal Democraat

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

wijsneus

Radicaal Democraat

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

n8n

Pragmatisch

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

maandag 26 januari 2009 @ 13:40:21 #269

mcDavid

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

Swetsenegger

Egocentrische Narcist

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

 | FOK! Schrikkelbaasch

maandag 26 januari 2009 @ 15:41:15 #271

wijsneus

Radicaal Democraat

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!

maandag 26 januari 2009 @ 17:02:58 #272

Chandler

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...

maandag 26 januari 2009 @ 20:25:33 #273

Roy_T

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.

maandag 26 januari 2009 @ 20:43:07 #274

Chandler

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

n8n

Pragmatisch

“Specialization is for insects”.—Robert Heinlein

maandag 26 januari 2009 @ 21:04:29 #276

veldmuis

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.

maandag 26 januari 2009 @ 21:05:23 #277

veldmuis

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

maandag 26 januari 2009 @ 21:45:52 #278

Chandler

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...

maandag 26 januari 2009 @ 21:49:32 #279

veldmuis

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.

maandag 26 januari 2009 @ 21:56:12 #280

Chandler

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...

maandag 26 januari 2009 @ 22:03:29 #281

Roy_T

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.

maandag 26 januari 2009 @ 22:06:00 #282

veldmuis

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?

maandag 26 januari 2009 @ 22:13:39 #283

Roy_T

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).

maandag 26 januari 2009 @ 22:15:27 #284

veldmuis

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

Swetsenegger

Egocentrische Narcist

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

 | FOK! Schrikkelbaasch

maandag 26 januari 2009 @ 22:20:02 #286

Roy_T

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.

maandag 26 januari 2009 @ 22:21:39 #287

Roy_T

quote:
Op maandag 26 januari 2009 22:17 schreef Swetsenegger het volgende:

http://test.xploise.nl/align.html

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

Swetsenegger

Egocentrische Narcist

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! Schrikkelbaasch

FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:24:07 #289

Swetsenegger

Egocentrische Narcist

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.

 | FOK! Schrikkelbaasch

maandag 26 januari 2009 @ 22:34:29 #290

veldmuis

IE8 weigert nog wel.

Wat betreft FX heb je gelijk

.

FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:35:47 #291

Swetsenegger

Egocentrische Narcist

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.

 | FOK! Schrikkelbaasch

maandag 26 januari 2009 @ 22:36:31 #292

veldmuis

IE8 is RC

FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:38:14 #293

Swetsenegger

Egocentrische Narcist

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.

 | FOK! Schrikkelbaasch

maandag 26 januari 2009 @ 22:39:28 #294

veldmuis

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

Swetsenegger

Egocentrische Narcist

Hmz, ff via citrix getest. Op chrome doettie het ook, maar op IE7 ook niet. ff kijken wat hij met een doctype doet

 | FOK! Schrikkelbaasch

FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:44:56 #296

Swetsenegger

Egocentrische Narcist

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

 | FOK! Schrikkelbaasch

maandag 26 januari 2009 @ 22:48:13 #297

Light

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.

fokstok.nl

maandag 26 januari 2009 @ 22:49:19 #298

Light

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.

fokstok.nl

FOK!-Schrikkelbaas maandag 26 januari 2009 @ 22:50:27 #299

Swetsenegger

Egocentrische Narcist

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.

 | FOK! Schrikkelbaasch

maandag 26 januari 2009 @ 23:01:55 #300

mschol