[CSS] voor dummies

FOK!forum / Digital Corner / [CSS] voor dummies - deel 10

Chandler

maandag 3 november 2008 @ 10:16

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?

wijsneus

maandag 3 november 2008 @ 10:46

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.

Chandler

maandag 3 november 2008 @ 11:12

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

wijsneus

maandag 3 november 2008 @ 11:30

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.

Chandler

maandag 3 november 2008 @ 11:47

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!

spaceninjapirate

maandag 3 november 2008 @ 11:49

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

mcDavid

dinsdag 4 november 2008 @ 20:43

schopje richting MyAT.

Chandler

donderdag 6 november 2008 @ 10:06

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

Chandler

vrijdag 7 november 2008 @ 10:19

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>

wijsneus

vrijdag 7 november 2008 @ 10:35

Jeuj!

maar wel een vieze, vieze hack hoor...

Chandler

vrijdag 7 november 2008 @ 13:14

Haha

beter vies dan geen toch? tis sowiezo al jammer dat ik gebruik moet maken van een hack

Tieu

zaterdag 8 november 2008 @ 18:04

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.

mcDavid

zaterdag 8 november 2008 @ 18:11

IE6 of IE7?

Tieu

zaterdag 8 november 2008 @ 18:36

IE7

wijsneus

zaterdag 8 november 2008 @ 20:26

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.

Tieu

zaterdag 8 november 2008 @ 21:29

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!

Tieu

zondag 9 november 2008 @ 14:06

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

mcDavid

maandag 10 november 2008 @ 00:26

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.

hello_moto1992

woensdag 19 november 2008 @ 19:26

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

RenRen-

woensdag 19 november 2008 @ 19:57

Beetje vaag. Heb je een linkje?

-edit-
mcD hier

hello_moto1992

donderdag 20 november 2008 @ 13:10

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

mcDavid

donderdag 20 november 2008 @ 13:57

Wat een heerlijke browser toch, dat IE

.

Gebruik je wel een doctype tag?

hello_moto1992

donderdag 20 november 2008 @ 16:12

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

mcDavid

donderdag 20 november 2008 @ 16:20

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

hello_moto1992

donderdag 20 november 2008 @ 16:28

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

+ bovenstaande CSS.

mcDavid

donderdag 20 november 2008 @ 17:08

Lelijk als de hel maar ik heb het uiteindelijk zo opgelost

hello_moto1992

donderdag 20 november 2008 @ 17:30

Het werkt

. Bedankt, k had hier zelf noooit op gekomen.

mcDavid

vrijdag 21 november 2008 @ 01:36

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

Light

vrijdag 21 november 2008 @ 07:15

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.

Patje1987

vrijdag 21 november 2008 @ 11:30

TVP

hello_moto1992

vrijdag 21 november 2008 @ 14:21

Waar moet hij nou

mcDavid

vrijdag 21 november 2008 @ 14:53

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

Patje1987

vrijdag 21 november 2008 @ 15:22

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

mcDavid

vrijdag 21 november 2008 @ 15:33

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!

hello_moto1992

vrijdag 21 november 2008 @ 18:02

Edit: hij werkt wel in IE

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

Light

vrijdag 21 november 2008 @ 18:15

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.

Light

vrijdag 21 november 2008 @ 18:18

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

hello_moto1992

zaterdag 22 november 2008 @ 11:30

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

Light

zaterdag 22 november 2008 @ 11:37

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

Kerol

zaterdag 22 november 2008 @ 14:57

TVP

hello_moto1992

zaterdag 22 november 2008 @ 17:00

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

Light

zaterdag 22 november 2008 @ 23:03

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>

hello_moto1992

maandag 24 november 2008 @ 13:40

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

mcDavid

maandag 24 november 2008 @ 13:56

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.

hello_moto1992

maandag 24 november 2008 @ 13:59

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.

mcDavid

maandag 24 november 2008 @ 14:04

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

RM-rf

maandag 24 november 2008 @ 14:08

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;

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

hello_moto1992

maandag 24 november 2008 @ 15:27

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 ]

Swetsenegger

dinsdag 25 november 2008 @ 20:56

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

mcDavid

dinsdag 25 november 2008 @ 21:02

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.

Swetsenegger

dinsdag 25 november 2008 @ 21:05

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.

mcDavid

dinsdag 25 november 2008 @ 21:09

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.

Swetsenegger

dinsdag 25 november 2008 @ 21:14

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.

Banzaiaap

donderdag 27 november 2008 @ 20:01

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:

Patje1987

vrijdag 28 november 2008 @ 11:29

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

Roy_T

vrijdag 28 november 2008 @ 19:15

tvp

Mirel

woensdag 3 december 2008 @ 23:23

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?

Roy_T

donderdag 4 december 2008 @ 00:01

Je HTML en CSS posten zou handig zijn

Of liever nog: ergens online zetten.

Mirel

donderdag 4 december 2008 @ 00:09

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:

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

Jo0Lz

donderdag 4 december 2008 @ 08:34

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

Mirel

donderdag 4 december 2008 @ 09:12

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 ]

Mirel

donderdag 4 december 2008 @ 10:02

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.

Patje1987

donderdag 4 december 2008 @ 10:05

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.

Mirel

donderdag 4 december 2008 @ 10:08

Jeujjjj dat werkte.

Mirel

donderdag 4 december 2008 @ 10:13

Nou snap ik dus �cht hoe je met divs moet werken.

Patje1987

donderdag 4 december 2008 @ 10:16

quote:
Op donderdag 4 december 2008 10:08 schreef Mirel het volgende:
Jeujjjj dat werkte.

Laat eens zien wat je hebt gemaakt

Mirel

donderdag 4 december 2008 @ 10:28

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.

Patje1987

donderdag 4 december 2008 @ 13:04

Hij werkt totaal niet in firefox.

Mirel

donderdag 4 december 2008 @ 13:25

Waar kan dat aan liggen? :/

Jo0Lz

donderdag 4 december 2008 @ 13:57

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

Patje1987

donderdag 4 december 2008 @ 14:13

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.

Light

vrijdag 5 december 2008 @ 07:12

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

mschol

zaterdag 6 december 2008 @ 11:44

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?

mcDavid

zaterdag 6 december 2008 @ 11:47

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

mschol

zaterdag 6 december 2008 @ 11:57

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

mcDavid

zaterdag 6 december 2008 @ 14:11

Probeer het toch eens met active dan?

droevig stuk software, dat IE...

mschol

zaterdag 6 december 2008 @ 15:15

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

mcDavid

zaterdag 6 december 2008 @ 16:13

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.

Mirel

zondag 7 december 2008 @ 23:02

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.

mschol

zondag 7 december 2008 @ 23:15

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

mcDavid

zondag 7 december 2008 @ 23:23

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

mcDavid

zondag 7 december 2008 @ 23:48

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.

ludeau

dinsdag 9 december 2008 @ 00:02

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!

mcDavid

dinsdag 9 december 2008 @ 00:13

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

ludeau

dinsdag 9 december 2008 @ 10:19

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

Light

dinsdag 9 december 2008 @ 12:27

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.

mcDavid

dinsdag 9 december 2008 @ 13:02

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.

ludeau

dinsdag 9 december 2008 @ 13:43

-edit:

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

Intrepidity

woensdag 10 december 2008 @ 09:50

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?

Roy_T

woensdag 10 december 2008 @ 10:05

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?

HuHu

woensdag 10 december 2008 @ 10:06

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.

Intrepidity

woensdag 10 december 2008 @ 10:15

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

Intrepidity

woensdag 10 december 2008 @ 10:19

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

Roy_T

woensdag 10 december 2008 @ 11:29

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.

Mirel

woensdag 10 december 2008 @ 17:41

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

Intrepidity

woensdag 10 december 2008 @ 17:44

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

mcDavid

woensdag 10 december 2008 @ 18:45

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!

Mirel

woensdag 10 december 2008 @ 20:03

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 ]

hello_moto1992

zondag 21 december 2008 @ 09:47

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

hello_moto1992

zondag 21 december 2008 @ 11:09

kerstmis dus

Roy_T

zondag 21 december 2008 @ 11:16

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

mschol

zondag 21 december 2008 @ 11:42

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/

hello_moto1992

zondag 21 december 2008 @ 13:17

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

donroyco

zondag 21 december 2008 @ 17:46

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!

Mindstate

maandag 22 december 2008 @ 22:47

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

mcDavid

maandag 22 december 2008 @ 23:01

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

mcDavid

maandag 22 december 2008 @ 23:06

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

donroyco

maandag 22 december 2008 @ 23:09

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

Mindstate

maandag 22 december 2008 @ 23:24

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

Light

dinsdag 23 december 2008 @ 04:01

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

Mindstate

dinsdag 23 december 2008 @ 12:44

Oh, het lag dus aan die ;, bedankt.

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

RenRen-

dinsdag 23 december 2008 @ 14:27

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

Roy_T

dinsdag 23 december 2008 @ 15:00

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

RenRen-

dinsdag 23 december 2008 @ 15:48

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

hello_moto1992

dinsdag 23 december 2008 @ 18:13

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

Mindstate

dinsdag 23 december 2008 @ 18:16

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?

mcDavid

dinsdag 23 december 2008 @ 18:20

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?

Light

dinsdag 23 december 2008 @ 18:26

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.

hello_moto1992

dinsdag 23 december 2008 @ 18:29

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 ]

donroyco

dinsdag 23 december 2008 @ 18:30

@mcDavid

"position: relative" weghalen heeft geholpen

Dank!

Mindstate

dinsdag 23 december 2008 @ 18:44

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 ]

mcDavid

dinsdag 23 december 2008 @ 19:34

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

Spike1506

dinsdag 23 december 2008 @ 23:14

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.

Light

dinsdag 23 december 2008 @ 23:17

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.

mcDavid

dinsdag 23 december 2008 @ 23:20

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.

Spike1506

dinsdag 23 december 2008 @ 23:20

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?

Light

dinsdag 23 december 2008 @ 23:32

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.

Mindstate

dinsdag 23 december 2008 @ 23:34

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)

mcDavid

dinsdag 23 december 2008 @ 23:39

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.

Mirel

woensdag 24 december 2008 @ 12:57

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 ]

donroyco

woensdag 24 december 2008 @ 13:03

Wat dacht je van Joomla, Mirel? Het is misschien niet duidelijk in het begin, maar bij elk CMS-systeem is dat lastig

mcDavid

woensdag 24 december 2008 @ 13:10

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

Mindstate

woensdag 24 december 2008 @ 18:53

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.

mcDavid

woensdag 24 december 2008 @ 20:54

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.

hello_moto1992

dinsdag 30 december 2008 @ 19:17

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

mcDavid

dinsdag 30 december 2008 @ 19:28

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.

mcDavid

dinsdag 30 december 2008 @ 19:29

enneuh, sja wat dacht je van er�n?

hello_moto1992

dinsdag 30 december 2008 @ 19:39

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 ]

mcDavid

dinsdag 30 december 2008 @ 20:29

hoe bedoel je dat?

hello_moto1992

dinsdag 30 december 2008 @ 20:45

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

veldmuis

woensdag 31 december 2008 @ 13:08

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

Swetsenegger

woensdag 31 december 2008 @ 13:15

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

veldmuis

woensdag 31 december 2008 @ 13:27

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.

Roy_T

woensdag 31 december 2008 @ 13:44

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

mcDavid

woensdag 31 december 2008 @ 14:14

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?

veldmuis

woensdag 31 december 2008 @ 14:22

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.

Swetsenegger

woensdag 31 december 2008 @ 14:26

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

veldmuis

woensdag 31 december 2008 @ 14:41

Elke milliseconde is meegenomen.

Swetsenegger

woensdag 31 december 2008 @ 14:42

Nou..!

Roy_T

woensdag 31 december 2008 @ 14:44

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/

Swetsenegger

woensdag 31 december 2008 @ 14:48

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.

Roy_T

woensdag 31 december 2008 @ 14:55

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/

RenRen-

woensdag 31 december 2008 @ 15:04

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.

Roy_T

woensdag 31 december 2008 @ 15:07

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

Swetsenegger

woensdag 31 december 2008 @ 17:27

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.

Roy_T

vrijdag 2 januari 2009 @ 14:11

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.

Mirel

maandag 5 januari 2009 @ 20:30

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

mcDavid

maandag 5 januari 2009 @ 21:05

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.

Puala

dinsdag 6 januari 2009 @ 11:16

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

Roy_T

dinsdag 6 januari 2009 @ 11:24

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

Chandler

donderdag 8 januari 2009 @ 13:52

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

mcDavid

donderdag 8 januari 2009 @ 13:57

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.

Chandler

donderdag 8 januari 2009 @ 14:24

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?

mcDavid

donderdag 8 januari 2009 @ 14:44

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 ]

Chandler

donderdag 8 januari 2009 @ 14:56

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

mcDavid

donderdag 8 januari 2009 @ 15:20

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.

HuHu

donderdag 8 januari 2009 @ 15:24

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.

mcDavid

donderdag 8 januari 2009 @ 15:31

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.

mcDavid

donderdag 8 januari 2009 @ 15:43

Nieuwe sig.

donroyco

donderdag 8 januari 2009 @ 17:37

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

veldmuis

donderdag 8 januari 2009 @ 18:45

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

donroyco

donderdag 8 januari 2009 @ 18:46

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

veldmuis

donderdag 8 januari 2009 @ 18:49

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.

donroyco

donderdag 8 januari 2009 @ 19:23

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

mcDavid

donderdag 8 januari 2009 @ 20:23

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

Roy_T

donderdag 8 januari 2009 @ 23:48

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.

Chandler

vrijdag 9 januari 2009 @ 10:00

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

donroyco

vrijdag 9 januari 2009 @ 10:04

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

mcDavid

vrijdag 9 januari 2009 @ 11:37

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

Chandler

vrijdag 9 januari 2009 @ 11:53

Tja terwijl meer dan de helft van de wereld deze ook gebruikt

mcDavid

vrijdag 9 januari 2009 @ 14:14

Dat kan kloppen want meer dan de helft van de mensen zijn idioten.

-edit-
op fok minder trouwens.

Patje1987

vrijdag 9 januari 2009 @ 14:30

Zo ik ben aan mijn portfolio site begonnen, en het begin is gemaakt.

http://www.patrickvd.com/

HuHu

vrijdag 9 januari 2009 @ 14:32

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

mcDavid

vrijdag 9 januari 2009 @ 14:49

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.

Chandler

vrijdag 9 januari 2009 @ 15:02

Maar goed, een oplossing voor alle browsers is er niet?

mcDavid

vrijdag 9 januari 2009 @ 15:07

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

Chandler

vrijdag 9 januari 2009 @ 15:33

ok tnx, ik ga even verder stoeien met dit geheel!

Light

vrijdag 9 januari 2009 @ 16:54

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

veldmuis

vrijdag 9 januari 2009 @ 18:44

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.

Patje1987

vrijdag 9 januari 2009 @ 18:49

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

mcDavid

vrijdag 9 januari 2009 @ 19:33

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?

Roy_T

vrijdag 9 januari 2009 @ 20:10

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?

Mirel

vrijdag 9 januari 2009 @ 20:34

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

Chandler

zaterdag 10 januari 2009 @ 10:12

quote:
Op vrijdag 9 januari 2009 20:10 schreef Roy_T het volgende:

[..]

Omdat je dan JS nodig hebt, en anders niet?

Idd

Roy_T

zondag 11 januari 2009 @ 18:00

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

Mailbox

zondag 11 januari 2009 @ 21:33

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

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

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

veldmuis

zondag 11 januari 2009 @ 21:37

Begin eens met

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

donroyco

zondag 11 januari 2009 @ 21:39

en geef je images een border="0" mee..

Mailbox

zondag 11 januari 2009 @ 21:40

Oeh gelijk even proberen

Mailbox

zondag 11 januari 2009 @ 21:40

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

Light

zondag 11 januari 2009 @ 21:43

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.

veldmuis

zondag 11 januari 2009 @ 21:44

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

Mailbox

zondag 11 januari 2009 @ 21:50

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

[..]

dan wel

img {
border: none;
}

dat geeft al enig effect

veldmuis

zondag 11 januari 2009 @ 21:55

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

Mailbox

zondag 11 januari 2009 @ 22:04

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

Mirel

zondag 11 januari 2009 @ 22:08

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.

veldmuis

zondag 11 januari 2009 @ 22:09

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.

Mirel

zondag 11 januari 2009 @ 22:12

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?

veldmuis

zondag 11 januari 2009 @ 22:17

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.

Roy_T

zondag 11 januari 2009 @ 22:36

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.

Mailbox

dinsdag 13 januari 2009 @ 17:53

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

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

mcDavid

dinsdag 13 januari 2009 @ 19:09

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?

veldmuis

dinsdag 13 januari 2009 @ 19:38

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.

Veeltje

dinsdag 13 januari 2009 @ 19:44

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

mcDavid

dinsdag 13 januari 2009 @ 19:59

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?

n8n

dinsdag 13 januari 2009 @ 20:01

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 ]

Veeltje

dinsdag 13 januari 2009 @ 20:16

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

veldmuis

dinsdag 13 januari 2009 @ 20:20

Waarom zit die redirect in je link?

Veeltje

dinsdag 13 januari 2009 @ 20:21

Hoe bedoel je?

Light

dinsdag 13 januari 2009 @ 20:36

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.

n8n

dinsdag 13 januari 2009 @ 20:40

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.

Veeltje

dinsdag 13 januari 2009 @ 20:47

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

mcDavid

dinsdag 13 januari 2009 @ 20:51

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.

Veeltje

dinsdag 13 januari 2009 @ 20:58

Heel erg bedankt, ik heb nu alleen bovenkant die position relavtive gegeven en het werkt nu perfect

Mirel

woensdag 14 januari 2009 @ 12:42

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.

RM-rf

woensdag 14 januari 2009 @ 12:49

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>

klusmeister

woensdag 14 januari 2009 @ 16:40

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!

mcDavid

woensdag 14 januari 2009 @ 16:50

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

Roy_T

woensdag 14 januari 2009 @ 16:57

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

klusmeister

woensdag 14 januari 2009 @ 16:58

bedankt!

Mirel

zondag 18 januari 2009 @ 23:40

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

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.

n8n

zondag 18 januari 2009 @ 23:51

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

Mirel

zondag 18 januari 2009 @ 23:58

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

veldmuis

maandag 19 januari 2009 @ 18:59

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.

n8n

maandag 19 januari 2009 @ 19:13

text-indent vereist geen span

veldmuis

maandag 19 januari 2009 @ 19:27

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

Roy_T

maandag 19 januari 2009 @ 19:27

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

veldmuis

maandag 19 januari 2009 @ 19:29

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.

Mirel

dinsdag 20 januari 2009 @ 22:22

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.

veldmuis

dinsdag 20 januari 2009 @ 22:23

url?

Mirel

dinsdag 20 januari 2009 @ 22:25

editje, heb ik niet.

veldmuis

dinsdag 20 januari 2009 @ 22:43

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

Mirel

dinsdag 20 januari 2009 @ 22:47

Wat wil je dan precies zien op de site wat ik je niet kan beschrijven?

Mirel

dinsdag 20 januari 2009 @ 23:01

Oh het ligt geeneens aan de youtube player of aan foto's. Een willekeurig berichtje gaat gewoon heel leuk naar rechts.

Light

woensdag 21 januari 2009 @ 00:00

Wat is dan de bedoeling als je drie nieuwsberichten hebt?

Roy_T

woensdag 21 januari 2009 @ 00:14

Beetje lastig analyseren zonder enige code he

Educated guess: floats.

wc-eend

woensdag 21 januari 2009 @ 07:28

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

Roy_T

woensdag 21 januari 2009 @ 09:07

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

wc-eend

woensdag 21 januari 2009 @ 09:51

uhhhhhh

even google opstarten

Light

woensdag 21 januari 2009 @ 09:57

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.

wc-eend

woensdag 21 januari 2009 @ 10:01

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

mcDavid

woensdag 21 januari 2009 @ 10:16

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

wc-eend

woensdag 21 januari 2009 @ 10:42

Dat werkt

thanks an bunch

Roy_T

woensdag 21 januari 2009 @ 13:06

Wat is het toch lekker simpel soms

Mirel

zondag 25 januari 2009 @ 23:55

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)

Mirel

maandag 26 januari 2009 @ 00:04

Goh, je moet het in de code w�l dezelfde naam geven, ofzo. Jezus wat is joomla soms raar.

donroyco

maandag 26 januari 2009 @ 00:05

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

Mirel

maandag 26 januari 2009 @ 07:27

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

Mirel

maandag 26 januari 2009 @ 07:30

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

Chandler

maandag 26 januari 2009 @ 09:54

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?

HuHu

maandag 26 januari 2009 @ 09:56

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.

Chandler

maandag 26 januari 2009 @ 10:27

Zou idd op die manier kunnen werken als alle plaatjes even groot zouden zijn maar dat is helaas het geval niet

Chandler

maandag 26 januari 2009 @ 10:30

Of ik moet gaan werken met tabellen maar dat vind ik weer vies

wijsneus

maandag 26 januari 2009 @ 10:38

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

Chandler

maandag 26 januari 2009 @ 10:42

Dat is dus niet het geval, 90% van alle plaatjes hebben afwijkende maten!

wijsneus

maandag 26 januari 2009 @ 10:49

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

wijsneus

maandag 26 januari 2009 @ 10:53

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.

n8n

maandag 26 januari 2009 @ 11:20

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 ]

mcDavid

maandag 26 januari 2009 @ 13:40

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.

Swetsenegger

maandag 26 januari 2009 @ 14:01

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

wijsneus

maandag 26 januari 2009 @ 15:41

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.

Chandler

maandag 26 januari 2009 @ 17:02

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?

Roy_T

maandag 26 januari 2009 @ 20:25

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.

Chandler

maandag 26 januari 2009 @ 20:43

Wat moet ik dan gebruiken volgens jullie? toch gewoon mijn divjes?

n8n

maandag 26 januari 2009 @ 20:44

veldmuis

maandag 26 januari 2009 @ 21:04

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.

veldmuis

maandag 26 januari 2009 @ 21:05

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

Chandler

maandag 26 januari 2009 @ 21:45

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?

veldmuis

maandag 26 januari 2009 @ 21:49

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.

Chandler

maandag 26 januari 2009 @ 21:56

Nou eens zien of het werkt, zal het morgen even proberen en de resultaten posten!.

/meld af

Roy_T

maandag 26 januari 2009 @ 22:03

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.

veldmuis

maandag 26 januari 2009 @ 22:06

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?

Roy_T

maandag 26 januari 2009 @ 22:13

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

veldmuis

maandag 26 januari 2009 @ 22:15

Klopt. Maar gaat netheid dan boven ontwerp? Stel je dan niet een beetje verkeerde prioriteiten?

Swetsenegger

maandag 26 januari 2009 @ 22:17

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

Roy_T

maandag 26 januari 2009 @ 22:20

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.

Roy_T

maandag 26 januari 2009 @ 22:21

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

Swetsenegger

maandag 26 januari 2009 @ 22:23

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

Swetsenegger

maandag 26 januari 2009 @ 22:24

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.

veldmuis

maandag 26 januari 2009 @ 22:34

IE8 weigert nog wel.

Wat betreft FX heb je gelijk

Swetsenegger

maandag 26 januari 2009 @ 22:35

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.

veldmuis

maandag 26 januari 2009 @ 22:36

IE8 is RC

Swetsenegger

maandag 26 januari 2009 @ 22:38

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.

veldmuis

maandag 26 januari 2009 @ 22:39

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.

Swetsenegger

maandag 26 januari 2009 @ 22:42

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

Swetsenegger

maandag 26 januari 2009 @ 22:44

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

Light

maandag 26 januari 2009 @ 22:48

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.

Light

maandag 26 januari 2009 @ 22:49

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.

Swetsenegger

maandag 26 januari 2009 @ 22:50

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.

mschol

maandag 26 januari 2009 @ 23:01

quote:
Op maandag 26 januari 2009 22:36 schreef veldmuis het volgende:
IE8 is RC

en hier geinstalleerd, nu hopen dat de JS enigne wat stabieler is

Light

maandag 26 januari 2009 @ 23:08

Vol

[CSS] voor dummies - deel 11