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

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

Chandler

Vorige topics:

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

En we gaan hier lekker verder

Gelijk maar even mijn 1e vraag.

Ik moet een site ook wekend krijgen onder IE6, nu heb ik een div layer die over een design heen valt, echter komen de pulldowns er gewoon doorheen, de rest niet. Wat kan ik hier tegen doen?

The people who lost my respect will never get a capital letter for their name again.
Like trump...

maandag 3 november 2008 @ 10:46:31 #2

wijsneus

Radicaal Democraat

Dit is een algemeen bekend probleem van IE.

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

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

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

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

Met javascript alle elementen die je over een select-box heen wilt tekenen in hun eigen iframe stoppen. Tenminste, dat deden wij vroeger toen we nog menuutjes deden in pure javscript.

Siamo Tutti Antifascisti!

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

Chandler

Krijg steeds minder respect voor Microsoft

wat een onzin, maar goed, een iframe zou een oplossing moeten zijn maar hoe moet ik deze dan benutten? het is namelijk erg vervelend

The people who lost my respect will never get a capital letter for their name again.
Like trump...

maandag 3 november 2008 @ 11:30:00 #4

wijsneus

Radicaal Democraat

Het is geen oplossing, het is een hack. Wij genereerden vroeger drop-down menus in javascript. De truuk was dan om in de div van het menu een iframe te genereren en daar dan weer de menuitems in te plaatsen. Dan ging ie over de drop-downs heen omdat een iframe ook een windowed control is.

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

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

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

Je zou de select kunnen vervangen door radio buttons.

Siamo Tutti Antifascisti!

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

Chandler

Helaas kan ik de selects niet vervangen, maar de iframe optie zou moeten werken, zal eens kijken hoe ik dit kan oplossen. Iig vriendelijk bedankt voor je volledige omschrijving!

The people who lost my respect will never get a capital letter for their name again.
Like trump...

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

spaceninjapirate

mhh k

Als je al jquery in je site gebruikt kun je bijv gebruik maken van:
http://plugins.jquery.com/project/bgiframe

Of anders even verder zoeken, er zijn heel wat paginas over te vinden

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

mcDavid

schopje richting MyAT.

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

Chandler

quote:
Op maandag 3 november 2008 11:49 schreef spaceninjapirate het volgende:
Als je al jquery in je site gebruikt kun je bijv gebruik maken van:
http://plugins.jquery.com/project/bgiframe

Of anders even verder zoeken, er zijn heel wat paginas over te vinden

Ik heb dus gezocht naar een simpele oplossing maar kon er helaas geen vinden, is er geen oplossing waarbij dynamisch een div een iframe kan omvatten?

Anyone? jquery kan ik niet gebruiken omdat ik te veel vergelijkbare functies in mijn scripting heb

The people who lost my respect will never get a capital letter for their name again.
Like trump...

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

Chandler

Ik heb al een fix gevonden, die zeer simpel is ;)

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

oftewel

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

<html>
<head>
<script type="text/javascript">
     // make the specified div a windowed control in IE6
     // this masks an iframe (which is a windowed control) onto the div,
     // turning the div into a windowed control itself
     function makeWindowed(p_div)
     {
        var is_ie6 =
           document.all &&
           (navigator.userAgent.toLowerCase().indexOf("msie 6.") != -1);
        if (is_ie6)
        {
           var html =
              "<iframe style=\"position: absolute; display: block; " +
              "z-index: -1; width: 100%; height: 100%; top: 0; left: 0;" +
              "filter: mask(); background-color: #ffffff; \"></iframe>";
           if (p_div) p_div.innerHTML += html;
           // force refresh of div
           var olddisplay = p_div.style.display;
           p_div.style.display = 'none';
           p_div.style.display = olddisplay;
        };
     }
</script>
</head>
<body>
<div id="test" style="position: absolute; z-index: 2;
top: 50; left: 30; width: 200px; height: 200px;
background-color: red">

</div>
<select style="position: absolute; z-index: 1; top: 50;">
<option>test</option>
</select>
<a href="javascript:makeWindowed(document.getElementById('test'));">
Make Windowed</a>
</body>
</html>

The people who lost my respect will never get a capital letter for their name again.
Like trump...

vrijdag 7 november 2008 @ 10:35:10 #10

wijsneus

Radicaal Democraat

Jeuj!

maar wel een vieze, vieze hack hoor...

Siamo Tutti Antifascisti!

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

Chandler

Haha

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

The people who lost my respect will never get a capital letter for their name again.
Like trump...

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

Tieu

Hoi, heb een css probleempje.

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

Ik vond alleen iets niet mooi wat met css te maken had maar krijg het niet opgelost.
Het gaat om het menu, is opgebouwd als een lijst. In FF werkt het prima maar IE doet gewoon erg moeilijk.
Ik heb echt voor alle lagen uit het menu gebruik gemaakt van een border-top, toch gebruikt IE kennelijk een border-bottom voor mijn hover.
http://test.scouting-olav.nl
Hier is het verschil te zien, hoop dat iemand weet of dit een vaker voorkomend probleem is en er ergens een hack bekend is.
Alvast bedankt.

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

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

mcDavid

IE6 of IE7?

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

Tieu

IE7

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

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

wijsneus

Radicaal Democraat

Even algemeen: een lijstje van bekende IE bugs en hun oplossingen en hoe je in het algemeen te werk kunt gaan om IE in het gareel te krijgen.

Verder: de manier om te zorgen dat je CSS niet vol vieze hacks komt te staan.

Siamo Tutti Antifascisti!

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

Tieu

Ik zie mijn probleem er niet echt tussen staan. Kom wel dingen over block and list tegen, maar kan niet ontdekken hoe ik mijn probleem moet oplossen.
Staat ergens dat ik layout moet toewijzen aan mijn block, maar hoe ik dat zou moeten doen: geen idee!

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

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

Tieu

Nog even de code zodat iemand misschien nog een oplossing weet.
Dit is hoe mijn menu is opgebouwd, stonden automatisch nog meerdere div's omheen maar die heb ik weggehaald om het wat overzichtelijker te maken. Denk niet dat dat voor de oplossing uitmaakt omdat aan die div's geen class was toegewezen. Zoals ik eerder al zei is er een probleem met IE7 in het submenu, waar hij de border-top als border-bottom weergeeft. Althans, dat is wat ik denk dat er gebeurd. http://test.scouting-olav.nl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

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

En dit is de bijbehorende css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402

* {
   padding: 0;
   margin: 0;
}

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

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

a img {
   border: 0px;
}

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

fieldset {
   padding:5em;
}

td {
   padding:1px;
}

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

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

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

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

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

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

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

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

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

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

.box {
   padding:10px;
}

/* --- */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.pagination span, .pagination a, .pagination strong{
   margin:0 3px;
}

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

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

mcDavid

Tering wat een lap CSS. Is dat werkelijk allemaal nodig?

overigens denk ik dat het hier fout gaat

1
2
3
4
5
6
7
8
9

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

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

nog wat tips:
- Het is niet nodig de volledige nodestructuur te gebruiken als selector. Zoals hierboven: "#current a" was genoeg geweest
- verdiep je eens in shorthand notaties
- probeer te voorkomen dat je (zoals hierboven ook) properties dubbel declareert. Anders zoek je je rot als je iets moet aanpassen.

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

hello_moto1992

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

#sidebar {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 200px;
padding-left: 550px;
margin: 0px;
float:left;
height: 0px;
}
#sidebar h1 {
display: block;
background-color:#FF9900;
font-size: 100%;
padding: 3px 0 5px 3px;
border: 1px solid #000000;
color: #333333;
margin: 0px;
width:215px;
}

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

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

:)

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

RenRen-

Beetje vaag. Heb je een linkje?

-edit-
mcD hier

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

hello_moto1992

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

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

mcDavid

Wat een heerlijke browser toch, dat IE

.

Gebruik je wel een doctype tag?

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

hello_moto1992

Jup

1
2
3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

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

mcDavid

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

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

hello_moto1992

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

+ bovenstaande CSS.

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

mcDavid

Lelijk als de hel maar ik heb het uiteindelijk zo opgelost

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

hello_moto1992

Het werkt

. Bedankt, k had hier zelf noooit op gekomen.

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

mcDavid

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

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

Light

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

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

fokstok.nl

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

Patje1987

Madre me quiero un frikandel.

TVP

Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!

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

hello_moto1992

Waar moet hij nou

?

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

mcDavid

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

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

Patje1987

Madre me quiero un frikandel.

Op verzoek, ik kreeg hem in firefox niet opgelost dat de height niet op 100% wilde. Sowieso moeten alle divs waar de div in zit op 100%, en dat was ook zo, heb ze allemaal even een standaard hoogte gegeven en het bleek dat ie vastliep op de holder (daar zitten 2 divs in). Toen heb ik de body gewoon een background-image gegeven want het menu resized toch wel mee :P.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div id="holder">
<div id="menu" runat="server" class="menu">
    <div class="header">
        <div class="version">Versie nummer</div>
        <div id="usermenu" runat="server" class="usermenu"></div>
    </div>
    <div id="menucontent" runat="server" class="menucontent"></div>
</div>
<div id="content">
    <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
    </asp:contentplaceholder>
</div>
</div>
<div id="footer">footer</div>

CSS

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

html
{
   height: 100%;
}

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

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

.menu
{
   height: 100%;
   width: 220px;
   float: left;
}

Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!

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

mcDavid

quote:
Op vrijdag 21 november 2008 @ 15:22 schreef Patje1987 het volgende:
Op verzoek, ik kreeg hem in firefox niet opgelost dat de height niet op 100% wilde. Sowieso moeten alle divs waar de div in zit op 100%, en dat was ook zo, heb ze allemaal even een standaard hoogte gegeven en het bleek dat ie vastliep op de holder (daar zitten 2 divs in). Toen heb ik de body gewoon een background-image gegeven want het menu resized toch wel mee .

HTML
[ code verwijderd ]

CSS
[ code verwijderd ]

Dat is idd een veelgebruikte oplossing voor datsoort problemen!

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

hello_moto1992

Edit: hij werkt wel in IE

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

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

Light

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

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

fokstok.nl

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

Light

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

fokstok.nl

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

hello_moto1992

De CSS is inmiddels opgelost. De rest ook een beetje. K moet er later nog mee bezig...al zie k niet echt wat er nu mis mee is

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

Light

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

fokstok.nl

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

Kerol

Coño

TVP

Bodybuilding #1
Hardlopen #2

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

hello_moto1992

quote:
Op zaterdag 22 november 2008 11:37 schreef Light het volgende:
Je hebt wel gezien dat er een linkje staat in m'n vorige post?

Jazeker! Ik gebruik het ook wel voor mijn site voor school.

Maar er waren vanmiddag nog 4 fouten over, maar k snapte niet hoe k die kon oplossen. Nu is het ineens nog maar 1 fout

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

Light

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

fokstok.nl

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

hello_moto1992

Ik heb een transparante PNG. http://hokje10.nl/img/bannergreen.png
Die wil ik in de header op een ander plaatje plakken. In de CSS heb ik dus in het ene plaatje, http://hokje10.nl/1.png , gezet. In de HTML heb ik daar de transparante PNG op gezet.

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

CSS:

1
2
3
4

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

HTML:

1
2
3

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

mcDavid

quote:
Op maandag 24 november 2008 @ 13:40 schreef hello_moto1992 het volgende:
Ik heb een transparante PNG. http://hokje10.nl/img/bannergreen.png
Die wil ik in de header op een ander plaatje plakken. In de CSS heb ik dus in het ene plaatje, http://hokje10.nl/1.png , gezet. In de HTML heb ik daar de transparante PNG op gezet.

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

CSS:
[ code verwijderd ]

HTML:
[ code verwijderd ]

IE6?
Die ondersteunt geen alpha transparency. Althans niet zonder hacks.

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

hello_moto1992

quote:
Op maandag 24 november 2008 13:56 schreef mcDavid het volgende:

[..]

IE6?
Die ondersteunt geen alpha transparency. Althans niet zonder hacks.

Nee Firefox/IE7. Kijk maar eens op www.hokje10.nl bovenaan.

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

mcDavid

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

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

RM-rf

1/998001

quote:
Op maandag 24 november 2008 13:40 schreef hello_moto1992 het volgende:
Ik heb een transparante PNG. http://hokje10.nl/img/bannergreen.png
Die wil ik in de header op een ander plaatje plakken. In de CSS heb ik dus in het ene plaatje, http://hokje10.nl/1.png , gezet. In de HTML heb ik daar de transparante PNG op gezet.

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

CSS:
[ code verwijderd ]

HTML:
[ code verwijderd ]

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

of

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

() en in het laatste geval moet het niet toevallig zo zijn dat de background-color ergens overgeerft wordt..

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

in je code staat:

1
2
3
4
5
6

img {
   border: 1px solid #f1f1f1;
   background-color: #f5f5f5;
   margin: 5px;
   padding: 5px;
   text-align: center; }

waarschijnlijk moet je afvragen waarom dat precies is (waarschijnlijk o een nette 'band' om afbeeldingen te maken)
maar dat kun je dan betere een ietwat preciesere selector geven, bv iets als DIV#contentmid IMG { foo: bar; }

"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25

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

hello_moto1992

Ok, thanx! ik heb voor het gemak die rand maar ff verwijderd. Hij doet het nu

.

edit:

1
2
3
4
5
6
7

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

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

[ Bericht 66% gewijzigd door hello_moto1992 op 24-11-2008 18:11:32 ]

FOK!-Schrikkelbaas dinsdag 25 november 2008 @ 20:56:40 #49

Swetsenegger

Egocentrische Narcist

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

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

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

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

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

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

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

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

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

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

 | FOK! Schrikkelbaasch

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

mcDavid

Dat worden ze wel, maar met die float haal je ze uit de natuurlijke float, waardoor de overige elementen geen rekening meer houden met de grootte.

Zet er een divje onder met clear:both, dan dwingt die de container om er weer omheen te gaan staan.

FOK!-Schrikkelbaas dinsdag 25 november 2008 @ 21:05:00 #51

Swetsenegger

Egocentrische Narcist

quote:
Op dinsdag 25 november 2008 21:02 schreef mcDavid het volgende:
Dat worden ze wel, maar met die float haal je ze uit de natuurlijke float, waardoor de overige elementen geen rekening meer houden met de grootte.

Zet er een divje onder met clear:both, dan dwingt die de container om er weer omheen te gaan staan.

Ik heb nu de floats in een wrap gezet met een min height en dat lijkt ook te werken... Maar vreemd dat je ook moet 'clearen' als er na je floats geen divs meer komen.

 | FOK! Schrikkelbaasch

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

mcDavid

dat werkt inderdaad, totdat de content van de div's die je gefloat hebt hoger wordt dan die minimum height. Dan zit je weer met het zelfde probleem.

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

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

Mocht er een footer onder komen, kun je die er ook voor gebruiken.

FOK!-Schrikkelbaas dinsdag 25 november 2008 @ 21:14:06 #53

Swetsenegger

Egocentrische Narcist

quote:
Op dinsdag 25 november 2008 21:09 schreef mcDavid het volgende:
dat werkt inderdaad, totdat de content van de div's die je gefloat hebt hoger wordt dan die minimum height. Dan zit je weer met het zelfde probleem.

Dat vreesde ik al...

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

Wat dan?

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

Mocht er een footer onder komen, kun je die er ook voor gebruiken.

Die komt er wellicht onder dus dat gaan we maar doen.

 | FOK! Schrikkelbaasch

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

Banzaiaap

Tony Rocky Horror

Heb weer een leuk probleem? Mja, probleem.. ik probeer mn code zo netjes mogelijk te houden, maar heb geen idee hoe.. Heb namelijk een content div die over de nav bar heen moet vallen, maar 2 verschillende achtergronden moet hebben. 1 achtergrond voor de gradient aan de bovenkant van de main-content div en eentje voor de dubbele border. (Ik weet het omslachtig, maar het MOET kunnen

)

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

Moet dus uiteindelijk zo gaan worden:

vrijdag 28 november 2008 @ 11:29:41 #55

Patje1987

Madre me quiero un frikandel.

quote:
Op donderdag 27 november 2008 20:01 schreef Banzaiaap het volgende:
Heb weer een leuk probleem? Mja, probleem.. ik probeer mn code zo netjes mogelijk te houden, maar heb geen idee hoe.. Heb namelijk een content div die over de nav bar heen moet vallen, maar 2 verschillende achtergronden moet hebben. 1 achtergrond voor de gradient aan de bovenkant van de main-content div en eentje voor de dubbele border. (Ik weet het omslachtig, maar het MOET kunnen )

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

Moet dus uiteindelijk zo gaan worden:
[ afbeelding ]

Ik zou de body een achtergrond geven, en dan repeaten natuurlijk. Daarna en wrapper maken met bovenin een header div zonder achtergrond, waar je navigatie inkomt, en dan daaronder een div met je content en die een achtergrond geven (van de content).

Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!

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

Roy_T

tvp

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

Mirel

Mirel wil een bongophone.

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

Hoe moet ik het nou opdelen dat ie wél zoals in de paint komt?

When all else fails, you always have delusion.

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

Roy_T

Je HTML en CSS posten zou handig zijn

Of liever nog: ergens online zetten.

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

Mirel

Mirel wil een bongophone.

HTML

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Matrozenkoor Apeldoorn</title>
   <link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
    <div id="header">
        <h1></h1>
           <p>slogan hier</p>
    </div> 
    <div id="inhoud">

       <div id="rij1">
            <div id="welkom">
            <h3 id="welkombalk">Welkom!</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
         Sed posuere, purus nec mollis vulputate, lacus arcu bibendum augue,
         ac blandit nunc diam ac massa. Mauris in purus at odio fringilla viverra.
         Vestibulum et tellus sed massa pellentesque laoreet. Suspendisse eget nisi
         sit amet elit semper ullamcorper.</p>
            </div>

            <div id="agenda">
            <h3 id="agendabalk">Agenda</h3>
         <p>1 december optreden
         2 december optreden
         3 december optreden</p>
            </div>
       </div> 

        <div id="rij2">
           <div id="laatstenieuws">
            <h3 id="laatstenieuwsbalk">Het laatste nieuws</h3>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
         Sed posuere, purus nec mollis vulputate, lacus arcu bibendum augue,
         ac blandit nunc diam ac massa. Mauris in purus at odio fringilla viverra.
         Vestibulum et tellus sed massa pellentesque laoreet. Suspendisse eget nisi
         sit amet elit semper ullamcorper.</p>
            </div>
       </div> 

    </div> 
</div> 
</body>
</html>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

html {

}

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

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

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

a:hover {
text-decoration: underline;
}

a img (
border: none;
}

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

.fr {
float: right;
}

.fl {
float: left;
}

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

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

#inhoud {
padding: 0 1em;
}

#inhoud div {
overflow: hidden;
}

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

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

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

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

div namen spreken voor zich

When all else fails, you always have delusion.

donderdag 4 december 2008 @ 08:34:33 #60

Jo0Lz

Lick the box!

Volgens mij moet je dat blok dat je aan de zijkant wilt hebben, buiten de "inhoud" div, maar in de "container" div zetten. Ik kan het niet zien, kun je het ergens online zetten?
(Ik heb je source wel gezien, maar mis natuurlijk de plaatjes in de opmaak.)

 Yes we can! | I didn't fail, it's just postponed success.

donderdag 4 december 2008 @ 09:12:45 #61

Mirel

Mirel wil een bongophone.

http://www.mirelmasic.nl/website/

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

Ik zal dit eens proberen

[ Bericht 55% gewijzigd door Mirel op 04-12-2008 09:30:12 ]

When all else fails, you always have delusion.

donderdag 4 december 2008 @ 10:02:53 #62

Mirel

Mirel wil een bongophone.

Ok dat is dus gelukt, maar ik heb moeite met waarop ik de float nou moet doen.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#welkom {
float: left;
width: 300px;
border: 1px solid #ababab;
}

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

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

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

Het is misschien beter als ik 2 divs heb, ín de linker div zitten laatstenieuws en welkom, en ín de rechter zit agenda.

When all else fails, you always have delusion.

donderdag 4 december 2008 @ 10:05:01 #63

Patje1987

Madre me quiero un frikandel.

quote:
Op donderdag 4 december 2008 10:02 schreef Mirel het volgende:
Ok dat is dus gelukt, maar ik heb moeite met waarop ik de float nou moet doen.

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

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

Het is misschien beter als ik 2 divs heb, ín de linker div zitten laatstenieuws en welkom, en ín de rechter zit agenda.

Je geeft zelf het antwoord al, gewoon 2 divs maken. In de linker welkom en laatste nieuws en in de rechter je agenda.

Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!

donderdag 4 december 2008 @ 10:08:13 #64

Mirel

Mirel wil een bongophone.

Jeujjjj dat werkte.

When all else fails, you always have delusion.

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

Mirel

Mirel wil een bongophone.

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

When all else fails, you always have delusion.

donderdag 4 december 2008 @ 10:16:24 #66

Patje1987

Madre me quiero un frikandel.

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

Laat eens zien wat je hebt gemaakt

Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!

donderdag 4 december 2008 @ 10:28:48 #67

Mirel

Mirel wil een bongophone.

http://www.mirelmasic.nl/website/ (IE werkt ie alleen nog) Kan iemand kijken of het in firefox ook werkt? Heb namelijk alleen Opera en IE.

When all else fails, you always have delusion.

donderdag 4 december 2008 @ 13:04:47 #68

Patje1987

Madre me quiero un frikandel.

Hij werkt totaal niet in firefox.

Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!

donderdag 4 december 2008 @ 13:25:25 #69

Mirel

Mirel wil een bongophone.

Waar kan dat aan liggen? :/

When all else fails, you always have delusion.

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

Jo0Lz

Lick the box!

quote:
Op donderdag 4 december 2008 13:25 schreef Mirel het volgende:
Waar kan dat aan liggen? :/

FireBug zegt dat je stylesheet ophoud voor het a img gedeelte.
In IE 7 en in Safari neemt hij de css wel mee, maar in opera en FF niet?
Zie niets bijzonders in de code, zou het zo niet weten...

 Yes we can! | I didn't fail, it's just postponed success.

donderdag 4 december 2008 @ 14:13:21 #71

Patje1987

Madre me quiero un frikandel.

quote:
Op donderdag 4 december 2008 13:57 schreef Jo0Lz het volgende:

[..]

FireBug zegt dat je stylesheet ophoud voor het a img gedeelte.
In IE 7 en in Safari neemt hij de css wel mee, maar in opera en FF niet?
Zie niets bijzonders in de code, zou het zo niet weten...

Hij hoeft iig niet die h3 een ID te geven omdat ie al gedefineerd wordt in de CSS zelf.

Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!

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

Light

quote:
Op donderdag 4 december 2008 13:25 schreef Mirel het volgende:
Waar kan dat aan liggen? :/

Er staat in ieder geval nog een fout in je css. Padding mag namelijk niet negatief zijn (margin mag dat wel).

fokstok.nl

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

mschol

vraagje, benieuwd of het mogelijk is:

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

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

mcDavid

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

1	textarea:focus {color:#000}

zoiets dus..

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

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

mschol

quote:
Op zaterdag 6 december 2008 11:47 schreef mcDavid het volgende:
Volgens mij kan dat met de psuedo-class ":focus"
[ code verwijderd ]

zoiets dus..

thnx

werkt weer niet in IE.. (8 in compatibilty mode), daar ga ik iig verder naar zoeken, heb nu een houvast

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

mcDavid

Probeer het toch eens met active dan?

droevig stuk software, dat IE...

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

mschol

quote:
Op zaterdag 6 december 2008 14:11 schreef mcDavid het volgende:
Probeer het toch eens met active dan?

droevig stuk software, dat IE...

IE8 in non compatibiliteits mode is errug relaxt

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

mcDavid

quote:
Op zaterdag 6 december 2008 @ 15:15 schreef mschol het volgende:

[..]

IE8 in non compatibiliteits mode is errug relaxt

Ja omdat'ie dan eindelijk een strict-modus heeft. Zoals de andere browsers al sinds 2003 ofzo.

zondag 7 december 2008 @ 23:02:39 #79

Mirel

Mirel wil een bongophone.

Kan je text links-onderaan een div zetten?
http://www.mirelmasic.nl/website/ Header en div is dan dit:

Als dit niet kan dan zal ik een andere approach moeten nemen voor de divs.

When all else fails, you always have delusion.

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

mschol

quote:
Op zaterdag 6 december 2008 16:13 schreef mcDavid het volgende:

[..]

Ja omdat'ie dan eindelijk een strict-modus heeft. Zoals de andere browsers al sinds 2003 ofzo.

maar om eerlijk te zijn: in compatibiliteits modus kom ik bij m'n eigen css bar maar dan ook echt bar weinig tegen wat niet werkt... dus ik vraag me altijd maar weer af waarom men zo loopt te zeiken als het gewoon kan (en ik het kennelijk gewoon goed genoeg doe dat: a) alle browsers het snappen, b) W3c compliant is) enige zal zijn dat het misschien niet SEO is

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

mcDavid

quote:
Op zondag 7 december 2008 @ 23:02 schreef Mirel het volgende:
Kan je text links-onderaan een div zetten?
http://www.mirelmasic.nl/website/ Header en div is dan dit:
[afbeelding]

Als dit niet kan dan zal ik een andere approach moeten nemen voor de divs.

Ik zou ze gewoon met margins uitlijnen zodat ze ongeveer onderaan staan.

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

[ Bericht 2% gewijzigd door mcDavid op 07-12-2008 23:52:55 (oeh, zin niet afgemaakt :') ]

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

mcDavid

quote:
Op zondag 7 december 2008 @ 23:15 schreef mschol het volgende:

[..]

maar om eerlijk te zijn: in compatibiliteits modus kom ik bij m'n eigen css bar maar dan ook echt bar weinig tegen wat niet werkt... dus ik vraag me altijd maar weer af waarom men zo loopt te zeiken als het gewoon kan (en ik het kennelijk gewoon goed genoeg doe dat: a) alle browsers het snappen, b) W3c compliant is) enige zal zijn dat het misschien niet SEO is

IE7 doet het al behoorlijk prima idd, maar is nog steeds niet volledig strict op sommige punten. Maar in ieder geval de búgs zijn er voor een groot deel uit.

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

ludeau

Hoi iedereen,

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

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

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

Testomgeving:
-Max OSX met FF2

Alvast tnx!

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

mcDavid

klopt, precies zoals je in de CSS aangeeft:

1
2
3
4
5
6
7
8
9
10
11

#menutext .textitem a,a:hover,a:active{
   font-family: "Trebuchet MS", Arial;
   font-size: 12px;
   padding-left: 15px; <-----------------------
   padding-right:15px; <-----------------------
   font-weight: normal;
   color: #561420;
   text-decoration:none;
   font-weight:bold;
   border:0px;
}

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

ludeau

Ja maar dat heeft toch alleen betrekking op het menu? Daar is niks mis mee, ook als ik het verwijder blijven de afbeeldingen onclick verplaatsen...

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

Light

quote:
Op dinsdag 9 december 2008 10:19 schreef ludeau het volgende:
Ja maar dat heeft toch alleen betrekking op het menu? Daar is niks mis mee, ook als ik het verwijder blijven de afbeeldingen onclick verplaatsen...

Dat heeft betrekking op alle linkjes in het menu en op alle a:hover en a:active elementen.

fokstok.nl

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

mcDavid

sowieso is je CSS een redelijk onoverzichtelijke brei geworden.

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

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

ludeau

-edit:

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

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

Intrepidity

Ik ben op dit moment een website aan het maken waarbij het veel code gaat schelen als ik gebruik kan maken van dotted notation in css en multiple classes, dus <div class="classa classb"> en vervolgens div.classa.classb {} in de sheet gebruiken. Nou weet ik dat IE6 dotted notation niet ondersteunt (multiple classes wel), en hoe erg ik die browser ook haat, ik moet hem blijven ondersteunen. Ik vroeg me af of iemand toevallig op de hoogte is van een javascriptje, of een andere methode, om die support er in te hacken?

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

Roy_T

De vraag is denk ik of je de presentatie af wilt laten hangen van het gebruik van Javascript. Dit is net iets meer dan een cosmetische verbetering m.b.v. Javascript (zoals rounded corners, etc), omdat je je hele design hiermee potentieel kan verneuken in een IE6 zonder JS. Als je dat wil gaan afvangen door netjes te "degraden" voor IE6 zonder JS dan kun je het beter meteen zonder doen

Een script ken ik niet, maar als het er is moet er makkelijk op te googlen zijn toch?

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

HuHu

Volgens mij is de enige oplossing om dit in IE6 te laten werken het maken van een nieuwe, gecombineerde class.

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

1
2
3
4
5
6
7

CSS:
div.classa { }
div.classb { }
div.classa_classb { }

HTML:
<div class="classa_classb">

Niet echt optimaal, maar voor zover ik weet de enige oplossing.

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

Intrepidity

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

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

Intrepidity

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

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

Roy_T

quote:
Op woensdag 10 december 2008 10:19 schreef Intrepidity het volgende:
De dag dat IE6 nog <5% marktaandeel heeft spring ik een gat in de lucht

Amen.

Is er niet iets als Sass voor PHP? Dat gebruik ik altijd in Rails projecten, en dan kun je simpel class1 en class2 includen in class1_class2. Overerving werkt dan gewoon, en je hebt geen duplicate code.

woensdag 10 december 2008 @ 17:41:22 #95

Mirel

Mirel wil een bongophone.

www.mirelmasic.nl/matrozenkoor
http://www.mirelmasic.nl/oude/website-oud/ (IE)

Uiteindelijk is dus zoals in 1e link geworden. Weet iemand nog ideeën om dit wat meer pro te laten ogen? Het ziet er zo amateuristisch uit

When all else fails, you always have delusion.

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

Intrepidity

Kleiner en ander font in het menu bovenaan, dit lijkt wel comic sans.. Ik kan het niet helemaal plaatsen maar de kleuren van de box aan de rechterkant kloppen niet helemaal, en daarnaast is de tekst die daarin staat slecht leesbaar.
Daarnaast:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.mirelmasic.nl%2Fmatrozenkoor%2Fcontact.html

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

mcDavid

quote:
Op woensdag 10 december 2008 @ 17:41 schreef Mirel het volgende:
www.mirelmasic.nl/matrozenkoor
http://www.mirelmasic.nl/oude/website-oud/ (IE)

Uiteindelijk is dus zoals in 1e link geworden. Weet iemand nog ideeën om dit wat meer pro te laten ogen? Het ziet er zo amateuristisch uit

Er moeten plaatjes van schelpen en aangespoelde ankers en visnetten enzo op het strand!

woensdag 10 december 2008 @ 20:03:15 #98

Mirel

Mirel wil een bongophone.

quote:
Op woensdag 10 december 2008 18:45 schreef mcDavid het volgende:

[..]

Er moeten plaatjes van schelpen en aangespoelde ankers en visnetten enzo op het strand!

Leuk dat je ziet dat het een strand en zee moet voorstellen, was precies mijn bedoeling.

Maar dat op een handige javascript manier? Lijkt me niet zo makkelijk met divs kloten eerlijk gezegd...

En nou snap ik het verschil tussen id's en classes wel.

Zal dat nog gaan veranderen
edit: da's klaar.

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

[ Bericht 18% gewijzigd door Mirel op 11-12-2008 11:38:26 ]

When all else fails, you always have delusion.

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

hello_moto1992

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

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

hello_moto1992

kerstmis dus

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

[CSS] voor dummies - deel 10

» digital corner

» development

» digital corner

» development