[CSS] voor dummies #15

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_90881278
Wat hij bedoelt is, je moet de css van de template aanpassen.

css is de stijl, php de content. Dus post even je css :).
pi_90881435
quote:
1s.gif Op woensdag 5 januari 2011 14:36 schreef Tegan het volgende:
Wat hij bedoelt is, je moet de css van de template aanpassen.

css is de stijl, php de content. Dus post even je css :).
Php genereert de content, is weer heel wat anders. No offence :D Maar voor hij denkt dat je content normaal blij kan aanpassen en hij aan de PHP gaat zitten.

PHP haalt eigenlijk je content ergens anders vandaan.
pi_90881550
quote:
1s.gif Op woensdag 5 januari 2011 14:39 schreef RenRen- het volgende:

[..]

Php genereert de content, is weer heel wat anders. No offence :D Maar voor hij denkt dat je content normaal blij kan aanpassen en hij aan de PHP gaat zitten.

PHP haalt eigenlijk je content ergens anders vandaan.
Mierenneuken :6 .
pi_90881591
quote:
1s.gif Op woensdag 5 januari 2011 14:39 schreef RenRen- het volgende:

[..]

Php genereert de content, is weer heel wat anders. No offence :D Maar voor hij denkt dat je content normaal blij kan aanpassen en hij aan de PHP gaat zitten.

PHP haalt eigenlijk je content ergens anders vandaan.
Heb ik je dat even goed uitgelegd! 8-)
zcflevo.nl
pi_90881593
quote:
10s.gif Op woensdag 5 januari 2011 14:42 schreef Tegan het volgende:

[..]

Mierenneuken :6 .
Is een heel verschil hoor :@ ;( Als ik tegen mijn leraar zei dat PHP content was, ging hij slaan.
pi_90881618
quote:
11s.gif Op woensdag 5 januari 2011 14:43 schreef KomtTijd... het volgende:

[..]

Heb ik je dat even goed uitgelegd! 8-)
:+
Maar hij doet niets hoor, die dinges. Er een tablecell van maak.
pi_90881657
quote:
1s.gif Op woensdag 5 januari 2011 14:44 schreef RenRen- het volgende:

[..]

:+
Maar hij doet niets hoor, die dinges. Er een tablecell van maak.
Ja testcases ga ik maken als ik weer thuis ben :P
zcflevo.nl
pi_90881685
quote:
1s.gif Op woensdag 5 januari 2011 14:43 schreef RenRen- het volgende:

[..]

Is een heel verschil hoor :@ ;( Als ik tegen mijn leraar zei dat PHP content was, ging hij slaan.
Ik weet echt wel wat php is, beter dan dat ik css ken :+ . Maar dat soort details hoef je een newbie niet mee te vervelen leek mij.
  woensdag 5 januari 2011 @ 14:46:01 #209
184465 Migue
Sensuele man
pi_90881689
quote:
1s.gif Op woensdag 5 januari 2011 14:36 schreef Tegan het volgende:
Wat hij bedoelt is, je moet de css van de template aanpassen.

css is de stijl, php de content. Dus post even je css :).
Ah ok, dit is de CSS, maar ik kan er geen wijs uit worden waar ik een aanpassing moet doorvoeren ;)
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		/*
Theme Name: OnTheGo
Theme URI: http://www.elegantthemes.com/gallery/onthego
Version: 1.1
Description: 2 Column theme from Elegant Themes
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
*/

/*------------------------------------------------*/
/*-----------------[BASIC STYLES]-----------------*/
/*------------------------------------------------*/
html { background: #2d3940 url(images/bg.jpg); }
body { background: url(images/top-bg.png) repeat-x top left; text-align: center; line-height: 21px; font-family: Arial, Verdana, sans-serif; font-size: 12px; color: #5c5c5c; min-height: 25px; }

a { text-decoration: none; color: #5f5f5f; }
a:hover { text-decoration: underline; }
.clear { clear: both; }
.ui-tabs-hide { display: none; }
br.clear { margin: 0px; padding: 0px; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; padding-bottom: 5px; color: #000000; letter-spacing: -1px; line-height: 1em; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #000000; }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }
p { padding-bottom: 10px; line-height: 18px; }
strong { font-weight: bold; color: #1c1c1c; }
cite, em, i { font-style: italic; }
pre, code { font-family: Courier New, monospace; margin-bottom: 10px; }
ins { text-decoration: none; }
sup, sub { height: 0; line-height: 1; position: relative; vertical-align: baseline; }
sup { bottom: 0.8em; }
sub { top: 0.3em; }
dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dd  { margin-left: 1.5em;}
blockquote  { margin: 1.5em; padding: 1em; color: #666666; background: #e6e6e6; font-style: italic; border: 1px solid #dcdcdc; }
    blockquote p { padding-bottom: 0px; }

input[type=text],input.text, input.title, textarea, select { background-color:#fff; border:1px solid #bbb; padding: 2px; color: #4e4e4e; }
input[type=text]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus { border-color:#2D3940; color: #3e3e3e; }
input[type=text], input.text, input.title, textarea, select { margin:0.5em 0; }
textarea { padding: 4px; }

img#about-image { float: left; margin: 3px 8px 8px 0px; }

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/*------------------------------------------------*/
/*---------------[MAIN LAYOUT INFO]---------------*/
/*------------------------------------------------*/

.container { text-align: left; width: 1007px; margin: 0 auto; position: relative; }

#header { background: url(images/menu-bg.png) no-repeat top left; height: 20px; padding: 3px 5px 0px 0px; }

#contentwrap { background: url(images/content-mainbg.jpg) repeat-y; position: relative; }
    #content { background: url(http://www.motorracingblog.nl/bandeau/bandeau.php) no-repeat top left; /*min-height: 1500px; */ }
        #logowrap { text-align: center; padding: 22px 0px 0px; }
        #manlayer { position: absolute; top: -5px; right: 254px; background: url(images/man.png) no-repeat; width: 169px; height: 0px; }
        
    #main-area { padding: 35px 75px 35px 61px; }
                        
        #main-content { min-height: 316px; width: 527px; float: left; padding-left: 5px; }
        body.home #main-content { background: url(images/main-content-bg.png) no-repeat; padding: 35px 0px 0px 40px; width: 506px; }
        body.home #main-content.blogstyle { padding: 0px; width: 527px; background: none; }
            #main-content h2.title, h1#post-title { font-size: 20px; margin-bottom: 6px; }
            #main-content h2.title.page { background: url(images/h2-border-bg.png) repeat-x bottom left; }
            #main-content h2.title a:hover { color:#363636; text-decoration:none; }
            a.readmore { background: url(images/readmore-bg.png) no-repeat scroll 0 0; color: #000000 !important; display: block;
font-size: 11px; font-weight: bold; height: 34px; line-height: 34px; padding-left: 27px; float: right; }
                a.readmore span { background: url(images/readmore-bg.png) no-repeat scroll right top; display:block; padding-right:11px; }
            div.entry.category { margin-bottom: 20px; }
                #main-content a { color: #000000; }
                #main-content ul { list-style-type: disc; margin: 10px 0px 10px 20px; }
                #main-content ol { list-style-type: decimal; list-style-position: inside; margin: 10px 0px 10px 2px; }
                    #main-content ul li ul, #main-content ul li ol { margin: 2px 0px 2px 20px; }
                    #main-content ol li ul, #main-content ol li ol  { margin: 2px 0px 2px 35px; }
            h1#index { background: none; padding: 0px 0px 30px; font-size: 24px; letter-spacing: 0px; font-family: Georgia, serif; font-weight: normal; }            
            
            .cat-meta-top { background:transparent url(images/cat-meta-topbg.png) no-repeat scroll 0 0; height:6px; width:527px; margin-top: 15px; }
            .cat-meta-bottom { background:transparent url(images/cat-meta-bottombg.png) no-repeat scroll 0 0; height:14px; margin-bottom:20px; width:527px; }
            p.post-meta { background:transparent url(images/cat-meta-bg.png) repeat-y scroll 0 0; line-height: 16px; padding:0 27px 2px 13px; color: #000000; }
                p.post-meta a { color: #000000; font-weight: bold; }
                p.post-meta span { background:transparent url(images/sidebar-bullet.png) no-repeat scroll left 9px; display: block; padding: 7px 0px 7px 20px; }
            img.thumbnail-post { border: 1px solid #bdbdbd; padding: 6px; background: #ededed; display:inline; float:left; margin-bottom:10px; margin-right:25px; margin-top:6px; }
                        
        
/*------------------------------------------------*/
/*---------------[DROPDOWN MENU]------------------*/
/*------------------------------------------------*/        

ul#top-menu li { margin: 0px 4px; }
    ul#top-menu > li.current_page_item, ul#top-menu > li:hover, ul#top-menu > li.current-cat { background: url(images/menu-active-sprite.png) no-repeat bottom right; }
        ul#top-menu li a { color: #FFFFFF; font-size: 15px; font-style: bold; font-weight: bold; }
        ul#top-menu > li { padding-right: 10px; }
        ul#top-menu > li > a { line-height: 33px; height: 36px; padding: 0px 0px 0px 12px; }
            ul#top-menu li a:hover { text-decoration: none; }
        ul#top-menu > li.current_page_item > a, ul#top-menu > li:hover > a, ul#top-menu > li.current-cat > a { color: #000000; background: url(images/menu-active-sprite.png) no-repeat top left; }
        
        ul#top-menu li ul { background: url(images/dropdown-top-bg.png) no-repeat; padding: 12px 0px 0px; top: 40px; display: none; }
            ul#top-menu li li ul { top: -11px; }
            ul#top-menu li ul  li { background: #ffffff url(images/dropdown-li-sep.png) no-repeat 7px 0px; margin: 0px; width: 188px; padding: 3px 7px 0px; }
                ul#top-menu li ul  li a { background: url(images/dropdown-link.png) no-repeat 12px 15px; color: #5c5c5c; font-size: 12px; display: block; width: 143px; padding: 10px 5px 10px 40px;}
                    ul#top-menu li ul  li a:hover { color: #000000; background: #efefef url(images/dropdown-link-hover.png) no-repeat 12px 15px; }
        ul#top-menu li ul li.dropdown-bottom { background: url(images/dropdown-bottom-bg.png) no-repeat; background-color: none; display: block; position: relative; left: 0px; width: 202px; height: 13px !important; }

/*------------------------------------------------*/
/*--------------[FEATURED SLIDER]-----------------*/
/*------------------------------------------------*/        
        
#featured-slider { margin: 0px 0px 33px; position: relative; }
    #buildings { background: url(images/featured-buildings.png) no-repeat; width: 300px; height: 300px; position: absolute; top: -250px; right: -40px; z-index: 2; }
    #featured-area { background: url(images/slider-bg.jpg) no-repeat; width: 769px; height: 230px; margin-left: 11px; margin-top: 0px; padding: 31px 50px 0px 40px; position: relative;  }
        .featitem { height: 267px; }
        
        #featured-area a#prevlink, #featured-area a#nextlink { position: absolute; top: 97px; text-indent: -9999px; display: block; width: 20px; height: 46px; }
        #featured-area a#prevlink { left: 1px; }
        #featured-area a#nextlink { right: 1px; }
        
    ul#slider-control { height: 15px; padding-left: 13px; z-index: 3; position:relative; }
        ul#slider-control li { background: url(images/tab-bg.png) no-repeat top right; padding-right: 5px; float: left; margin-right: 2px; }
            ul#slider-control li a { background: url(images/tab-bg.png) no-repeat top left; display: block; text-transform: uppercase; font-size: 16px; color: #b3b3b3; }
            ul#slider-control li a:hover { text-decoration: none; }
                ul#slider-control li a span { background: url(images/arrow.png) no-repeat 13px center; display: block; padding: 10px 9px 10px 44px; }
            
        ul#slider-control li.active { background: url(images/tab-bg-active.png) no-repeat bottom right; }
            ul#slider-control li.active a { background: url(images/tab-bg-active.png) no-repeat bottom left; color: #1c1c1c; height: 42px; }
                ul#slider-control li.active a span { background: url(images/arrow-active.png) no-repeat 13px center; }
        
        .featitem { width: 769px; }
            .featured-image { background: url(images/featured-image-bg.png) no-repeat; width: 333px; height: 220px; float: left; }
                .featured-image img { margin: 10px 0px 0px 9px; }
            .featitem .description { float: right; width: 385px; margin: 20px 6px 0px 0px; }
                .featitem h2 { font-size: 18px; background: url(images/h2-border.png) repeat-x bottom left; margin-bottom: 9px; }
                    
                    .featitem h2 a:hover { color: #363636; text-decoration: none; }
            .featitem a.readmore { position: right: 4px; bottom: 9px; color: #ffffff; font-size: 11px; font-weight: bold; background: url(images/more-featured-bg.png) no-repeat; display: block; height: 31px; padding-left: 27px; line-height: 31px; }
                .featitem a.readmore span { display: block; background: url(images/more-featured-bg.png) no-repeat top right; padding-right: 11px; }        
        
/*------------------------------------------------*/
/*-------------------[COMMENTS]-------------------*/
/*------------------------------------------------*/

p#comments { font-size: 30px; font-weight: bold; color: #000000; letter-spacing: -1px; line-height: 1em; background: url(images/comments_number.png) no-repeat left 6px; padding: 0px 0px 6px 32px; }
ol.commentlist { background: url(images/main-content-bg.png) no-repeat top left; margin: 0px 0px 20px -15px !important; padding: 25px 0px 0px 40px; }
ol.commentlist, ol.commentlist ul.children { list-style-position:outside !important; list-style-type:none !important; }
    ol.commentlist li ul { margin: 0px !important; }
    ol.commentlist li ul.children { margin-bottom: -13px !important; }
    
    ol.commentlist li { padding: 19px 0px 13px 100px; background: url(images/comments-border.png) no-repeat bottom left; }
        div.comment-body { position: relative; }
            img.avatar { background: url(images/avatar_border.png) no-repeat; padding: 9px; position: absolute; top: 0px; left: -100px; }
            div.comment-wrap { padding: 0px 0px 10px; }
                .comment-author { margin-bottom: 12px; }
                    span.fn, .comment-wrap span.separator { font-size: 18px; font-weight: bold; color: #1f1e1e; letter-spacing: -1px; }
                    .comment-wrap span.separator, span.commentmetadata a { color: #9c9b9b !important; margin-left: 2px; font-weight: normal; }
                        span.commentmetadata a { font-size: 14px; }
                    
                    div.reply-container { background: url(images/readmore-bg.png) no-repeat scroll 0 0; display:block; float:right; font-size:11px; font-weight:bold; height:34px; line-height:34px; padding-left:27px; }
                        div.reply-container a { background: url(images/readmore-bg.png) no-repeat scroll right top;
display:block; padding-right:11px; color:#FFFFFF !important; }
                            div.reply-container a:hover { text-decoration: none; }
                    
                    ol.commentlist ul.children li { background: none; }        
                            
    div#respond, div.navigation { margin-left: 25px; }
        div#respond a#cancel-comment-reply-link { font-size: 11px; }
    li.comment div#respond { margin: 0px 0px 0px 0px; }
        li.comment div#respond textarea { width: 97%; }
        li.comment div#respond input[type=text] { width: 70%; }
    
    div.navigation { overflow: hidden; margin-bottom: 25px; position: relative; }
    
    #page-comments { margin-top: 30px; }
        
/*------------------------------------------------*/
/*---------------------[FOOTER]-------------------*/
/*------------------------------------------------*/

#footer-widgets-wrap  { background: url(images/footer-mainbg.png) repeat-y; }
    #footer-widgets { background: url(images/footer-top.jpg) no-repeat; padding: 60px 0px 0px 60px; position: relative; }
        
        #footer-widgets .widget { background: url(images/footer-widget-mainbg.png) repeat-y; width: 269px; float: left; margin: 0px 35px 20px 0px; }
            #footer-widgets .widget  .widgettop { background: url(images/footer-widget-top.png) no-repeat; }
                #footer-widgets .widget h4 { background: url(images/fwidget-separator.png) repeat-x bottom left; letter-spacing: 0px; color: #ffffff; font-size: 18px; padding: 18px 5px 0px 16px; margin: 0px 10px 0px 3px; }
                    #footer-widgets .widget h4 span { display: block; background: url(images/footer-arrow.png) no-repeat; padding: 2px 14px 10px 30px; }
                #footer-widgets .widget-content, #footer-widgets a { color: #b3bdc3; }
                    #footer-widgets a:hover { color: #ffffff; text-decoration: none; }
                
                #footer-widgets .widget-content { padding: 12px 16px 0px 20px; }
                    #footer-widgets ul li a { display: block; }
                    #footer-widgets .widget-content ul { margin: 0px -6px 0px -17px; }
                        #footer-widgets .widget-content ul li { background: url(images/fwidget-li-separator.jpg) no-repeat bottom left; }
                        #footer-widgets .widget-content > ul > li:first-child { margin-top: -8px; }
                        #footer-widgets .widget-content > ul > li:last-child { background: none; }
                            #footer-widgets .widget-content > ul > li:last-child a { margin-bottom: -10px; }
                            #footer-widgets .widget-content ul li a { background: url(images/footer-bullet.png) no-repeat 18px center; padding: 10px 4px 10px 40px; }
                            
                        #footer-widgets .widget-content ul ul { margin: 0px 0px 0px 15px; }
                            #footer-widgets .widget-content ul ul li:first-child a { padding-top: 7px; margin-top: -7px; }
                    
                .widgetbottom { background: url(images/fwidget-bottom.png) no-repeat; height: 23px; }
                .widgetrow { padding-bottom: 20px; }
                #sidebar .widget-content ul li.recentcomments a, #footer-widgets .widget-content ul li.recentcomments a { background: none; }
    
#footer { min-height: 20px; background: url(images/footer-bottom.png) no-repeat; font-size: 11px; color: #757a7d; }
    #footer a { color: #757a7d; }
    #footer p#copyright { text-align: right; padding: 1px 39px 0 0;}

/*------------------------------------------------*/
/*--------------------[SIDEBAR]-------------------*/
/*------------------------------------------------*/

#sidebar { float: right; width: 290px; }
#sidebar a { color: #4e606c; }
    #from-blog { background: url(images/sidebar-top-bg.png) no-repeat 3px top; padding: 0px 0px 0px; width: 286px; }
        #from-blog ul.control { float: left; width: 285px; display: inline; margin-left: 2px; }
            #from-blog ul.control li { float: left; }
                ul.control li a { display: block; color: #ffffff !important; text-transform: uppercase; font-size: 14px; font-weight: bold; text-align: center; width: 95px; height: 35px; line-height: 35px; text-shadow: 1px 1px 1px #000000; }
                    ul.control li.ui-state-active a { text-decoration: none; height: 30px; margin-top: 5px; }
                    ul.control li a:hover { text-decoration: none; }
                ul.control li.recent a { background: url(images/recent-bg.png) no-repeat; }
                ul.control li.popular a { background: url(images/popular-bg.png) no-repeat; }
                ul.control li.random a { background: url(images/random-bg.png) no-repeat; }
            #from-blog div.entries { float: left; width: 286px; background: url(images/widget-main-bg.png) repeat-y; padding: 0px 4px 0px 5px; }
                div.entries h3 { background: url(images/fromblog-top-bg.png) no-repeat; font-size: 18px; }
                    div.entries h3 span { display: block; padding: 14px 30px 7px 43px; background: url(images/widget-heading.png) no-repeat 14px 14px; }
                div.entries-bottom { background: url(images/widget-bottom.png) no-repeat; height: 5px; margin-left: -7px; }
                    div.entries-bottom.usual { margin-left: -1px; }
                div.tabcontent { padding: 0px 15px 4px 5px; }
                    .tabcontent .post { padding: 9px 0px 6px 6px; background: url(images/separator.png) no-repeat; }
                        .post .post-thumb { background: url(images/img-border.png) no-repeat; float: left; margin: 0px 12px 0px 0px; }
                        .post .description { float: left; }
                            .post .post-thumb a { display: block; }
                                .post .post-thumb img { margin: 7px; }
                        .post h4 { font-size: 14px; letter-spacing: 0px; padding: 5px 0px 0px; }
                            
                        .post p.meta { background: url(images/sidebar-bullet.png) no-repeat 0px 6px; padding: 0px 0px 0px 18px; color: #4a4949; font-size: 11px; font-style: italic; }
                            .post p.meta a { color: #4a4949 !important; font-weight: bold; }
    .widget_wrap { background: url(images/widget-main-bg.png) repeat-y scroll 0 0; margin-bottom: 28px; }
        .widget_entries { background: url(images/sidebar-widget-top.png) no-repeat; padding: 30px 0px 0px; }
            .widget_entries h3 { font-size: 18px; background:transparent url(images/widget-heading.png) no-repeat scroll 14px 17px; display:block; padding:18px 30px 10px 43px; }
            #sidebar .widget-content { background: url(images/separator.png) no-repeat; margin: 0px 0px 0px 8px; width: 262px; padding: 15px 10px; }
                #sidebar .widget-content ul { margin: 0px 0px 0px -10px; }
                    #sidebar .widget-content ul li { background: url(images/separator.png) no-repeat bottom left; }
                        #sidebar .widget-content ul li a { display: block; background: url(images/sidebar-bullet.png) no-repeat scroll 13px center; padding: 8px 4px 8px 35px; }
                        #sidebar .widget-content > ul > li:first-child { margin-top: -8px; }
                        #sidebar .widget-content > ul > li:last-child { background: none; }
                            #sidebar .widget-content > ul > li:last-child a { margin-bottom: -10px; }
                                #sidebar .widget-content ul ul { margin: 0px 0px 0px 20px; }
                                    #sidebar .widget-content ul ul li:first-child a { padding-top: 7px; margin-top: -7px; }
            
/*------------------------------------------------*/
/*------------[CAPTIONS AND ALIGNMENTS]-----------*/
/*------------------------------------------------*/
div.post .new-post .aligncenter, .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin-bottom: 10px; }
.wp-caption.alignleft { margin: 0px 10px 10px 0px; }
.wp-caption.alignright { margin: 0px 0px 10px 10px; }
.wp-caption img { margin: 0; padding: 0; border: 0 none; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; }
.alignright { float: right; }
.alignleft { float: left }
img.alignleft { display:inline; float:left; margin-right:15px; }
img.alignright { display:inline; float:right; margin-left:15px; }

    
/*------------------------------------------------*/
/*---------------[DEFAULT DROPDOWN SETTINGS]---*/
/*------------------------------------------------*/

.nav ul { position:absolute; top:-999em; background-position: bottom; background-repeat: no-repeat; z-index: 10; }
.nav li { float:left; position:relative; }
.nav a { display:block; float: left; }
    .nav li:hover ul, ul.nav li.sfHover ul { left:0px; top:35px; }
    .nav li:hover li ul, .nav li.sfHover li ul { top:-999em; }
        .nav li li:hover ul, ul.nav li li.sfHover ul { left:203px; top:0px; }
    .nav li:hover ul, .nav li li:hover ul { top: -999em; }
    .nav li li {    display: block;    padding: 0px; float: left; height: auto !important; }
    .nav li ul { width: 202px; }
        .nav li li a:link, .nav li li a:visited {    display: block; height: auto; float: left; }
        .nav li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }

/*------------------------------------------------*/
/*-----------------[WP CALENDAR]-----------------*/
/*------------------------------------------------*/
#wp-calendar { empty-cells: show; margin: 10px auto 0; width: 240px;    }
    #wp-calendar a { display: block; text-decoration: none; font-weight: bold; }
        #wp-calendar a:hover { text-decoration: underline; }
    #wp-calendar caption {    text-decoration: none; font: bold 13px Arial, Sans-Serif; }
    #wp-calendar td {    padding: 3px 5px; color: #9f9f9f; }
        #wp-calendar td#today { color: #ffffff; }
    #wp-calendar th {    font-style: normal;    text-transform: capitalize;    padding: 3px 5px; }
        #wp-calendar #prev a, #wp-calendar #next a { font-size: 9pt; }
        #wp-calendar #next a { padding-right: 10px; text-align: right; }
        #wp-calendar #prev a { padding-left: 10px; text-align: left; }
        
/*------------------------------------------------*/
/*-------------------[PAGE NAVI]------------------*/
/*------------------------------------------------*/
.pagination { overflow: hidden; padding: 15px 12px 0px; }

.wp-pagenavi { position: relative; }
.wp-pagenavi a, .wp-pagenavi a:link { padding: 5px 7px !important; margin: 2px; text-decoration: none; border:1px solid #E9E9E9 !important; color: #413f36; background-color: #fff; font-weight: normal !important; }
.wp-pagenavi a:visited { padding: 5px 7px; margin: 2px; text-decoration: none; border: 1px solid #e9e9e9; color: #413f36; background-color: #fff; }
 
.wp-pagenavi span.pages { padding: 5px 7px 5px !important; margin: 2px !important ; color: #000000; border:1px solid #E9E9E9 !important; color: #413f36; background-color: #fff; }
.wp-pagenavi span.current, .wp-pagenavi span.extend, .wp-pagenavi a:active, .wp-pagenavi a:hover { padding: 5px 7px !important; margin: 2px; font-weight: bold; background-color:#7798A6 !important; border:1px solid #618391 !important; color:#FFFFFF !important; }

a.readmore:hover, #sidebar div.custom-sidebar-block ul.control li a:hover, ul#cats-menu li a:hover, ul#page-menu li a:hover, div#slider-control div.featitem h2 a  { text-decoration: none; }

.js #feat-content, .js div#from-blog div.entries {display: none;} 

.foursixeight { margin: 0px 0px 15px 84px;}
.fullwidth { width: 100% !important; } 

#buildings {display:none;}
MotorRacingblog.nl
pi_90881720
quote:
1s.gif Op woensdag 5 januari 2011 14:45 schreef KomtTijd... het volgende:

[..]

Ja testcases ga ik maken als ik weer thuis ben :P
Ja pffff :{w
:D

Ik ga wel even met de rest kloten, want dat werkt ook nog niet naar behoren. Dankje als je wil gaan kijken.
pi_90881787
quote:
1s.gif Op woensdag 5 januari 2011 14:45 schreef Tegan het volgende:

[..]

Ik weet echt wel wat php is, beter dan dat ik css ken :+ . Maar dat soort details hoef je een newbie niet mee te vervelen leek mij.
Neee, dat bedoel ik niet, maar voor iemand zegt dat hij gezellig de content aan moet gaan passen en hij denkt dat dat de PHP is en hij dat weer gaat verneuken...
quote:
1s.gif Op woensdag 5 januari 2011 14:46 schreef Migue het volgende:

[..]

Ah ok, dit is de CSS, maar ik kan er geen wijs uit worden waar ik een aanpassing moet doorvoeren ;)
[ code verwijderd ]

Er is toch een #comments? Daar moet je denk ik in gaan zoeken, gewoon proberen. Werkt het niet? Haal je het weer weg.
  woensdag 5 januari 2011 @ 14:54:59 #212
184465 Migue
Sensuele man
pi_90882055
quote:
1s.gif Op woensdag 5 januari 2011 14:48 schreef RenRen- het volgende:

[..]

Er is toch een #comments? Daar moet je denk ik in gaan zoeken, gewoon proberen. Werkt het niet? Haal je het weer weg.
Ik had verwacht dat de oplossing wat ingewikkelder zou zijn in de CSS dan dat, maar in de eerste poging al gevonden ;) Dank allen voor de hulp, het is voor elkaar!
MotorRacingblog.nl
pi_90882114
Mooi.

Heb je meteen geleerd wat er zo tof is aan css :9~ .
pi_90882354
quote:
1s.gif Op woensdag 5 januari 2011 14:54 schreef Migue het volgende:

[..]

Ik had verwacht dat de oplossing wat ingewikkelder zou zijn in de CSS dan dat, maar in de eerste poging al gevonden ;) Dank allen voor de hulp, het is voor elkaar!
Soms is het retemakkelijk en soms niet!

Ik vind het trouwens nog altijd raar dat in de css alles is "font-family" "text-align", en dat de kleur van je text opeens alleen "color" is.

Random brainfart, ik ga weer. :')
pi_90882430
quote:
1s.gif Op woensdag 5 januari 2011 15:02 schreef RenRen- het volgende:

[..]

Soms is het retemakkelijk en soms niet!

Ik vind het trouwens nog altijd raar dat in de css alles is "font-family" "text-align", en dat de kleur van je text opeens alleen "color" is.

Random brainfart, ik ga weer. :')
Klopt, ik typ in de haast nog weleens color, als ik background-color bedoel.
Maargoed text-color of color, scheelt toch weer 5 bytes :P
zcflevo.nl
pi_90891039
quote:
1s.gif Op woensdag 5 januari 2011 13:38 schreef KomtTijd... het volgende:
Zet er <font color="black"> voor en </font> achter?
Echt waar, in een CSS-topic? :D :')
Nee.
pi_90900346
quote:
1s.gif Op woensdag 5 januari 2011 17:52 schreef PimD het volgende:

[..]

Echt waar, in een CSS-topic? :D :')
Bekijk de vraag even, dan snap je het :')
zcflevo.nl
pi_90920260
Oke. Ik heb het nu getest met het alignen, en de helft werkt.
Bij de test heb ik deze code gebruikt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16		#test{
    background-color:#fff;
    font-size:12px;
    height:100px;
    width:100px;
    display:table;
    position:absolute;
    left:0;
    top:0;

}

p.testtest{
        display:table-cell;
        vertical-align:middle;
}

Dit werkt.
In mijn werkelijke project heb ik het geprobeerd erin te gooien, dit is daarvan de code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19		#contentleft{
    width:392px;
    height:307px;
    text-align:center;
    float:left;
    font-family:myriad pro;
    font-size:18px;
    display:table;
    position:absolute;
    left:0;
    top:0;
    
}
p.alignmiddle{
    display:table-cell;
    vertical-align:middle;
}
    
    

En wat er hier gebeurt, is dat al mijn text verdwenen is. Wtf? Halp?

Goed, de div met text is terecht. Hij is helemaal naar linksboven geschoven. Dit is nogal kut. Ik wil namelijk wel met margins werken, maar dat heeft geen nut als je een andere resolutie hebt lijkt me. :') Maar de text is gecentreerd

[ Bericht 2% gewijzigd door RenRen- op 06-01-2011 09:31:58 ]
pi_90920799
Waarom doe je position:absolute?
zcflevo.nl
pi_90921570
Omdat dat online stond. :')
pi_90921794
Weet je wat? Ik ben het zat met die vertical align, ik ga met tabellen werken :')
pi_90922128
Als dat werkt, moet een div met display:table-cell net zo goed werken.
zcflevo.nl
pi_90922367
quote:
2s.gif Op donderdag 6 januari 2011 10:41 schreef KomtTijd... het volgende:
Als dat werkt, moet een div met display:table-cell net zo goed werken.
Het werkt, maar ik had toen ik dat tikte ook een probleem met een paragraph die niet helemaal goed wou centreren. Dus toen was ik het zat.
pi_90922625
Weet jij toevallig waarom mijn td de hoogte lijkt te negeren? :')

1
2
3
4
5
6
7		td.logo{
    border:none;
    width:390px;
    height:200px;
    text-align:center;
    padding-top:60px;
}

Hierdoor verspringt alles continu namelijk.
pi_90924171
Misschien doordat de padding + content groter is dan de hoogte?

Tables werken compleet anders met overflow enzo.
zcflevo.nl
pi_90924390
quote:
1s.gif Op donderdag 6 januari 2011 11:44 schreef KomtTijd... het volgende:
Misschien doordat de padding + content groter is dan de hoogte?

Tables werken compleet anders met overflow enzo.
Hij verspringt altijd, alsof hij de hoogte gewoon negeert. Althans, hij staat in het midden, en de hoogte aan de bovenkant snapt hij, maar aan de onderkant niet.
Geen enkel plaatje is hoger dan 200px, dus dat zou niet mogen. Ook geen padding oid.
pi_91270364
Ik maak een gradient in de achtergrond van een site op het moment, dmv CSS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		body{
    height:auto;

        background: #008800;
    background: -moz-linear-gradient(top, #5E5E5E, #000000);
    background: -webkit-gradient(linear,
                left top, right top, from(#5E5E5E), to(#000000));
    filter: progid:DXImageTransform.Microsoft.Gradient(
                StartColorStr='#5E5E5E', EndColorStr='#000000', GradientType=1);
  }

#container{
    width:900px;
    height:200px;
    margin: 0 auto;
    margin-top:200px;
    
}

Het rare waar ik tegenaan loop is dat de gradient niet doorloopt, maar ophoudt. De hoogte wordt overgenomen door de hoogte van de container, maar de gradient bevindt zich wel in de body.

Weet iemand waar dit aan ligt?

Ik zie wel dat het op te lossen is door de body een vaste hoogte te geven. Maar dit lijkt me niet slim om te doen, omdat mensen dan onnodig zullen scrollen. Of, bij mensen met een hoger beeldscherm dan 900px, zien weer de gradient opnieuw beginnen.
pi_91270874
quote:
1s.gif Op donderdag 13 januari 2011 16:47 schreef RenRen- het volgende:

Het rare waar ik tegenaan loop is dat de gradient niet doorloopt, maar ophoudt. De hoogte wordt overgenomen door de hoogte van de container, maar de gradient bevindt zich wel in de body.

Weet iemand waar dit aan ligt?
De hoogte van de body is precies genoeg voor de site zelf. De rest van het scherm wordt opgevuld door html.

Ik gebruik meestal
1html, body { ... }
Regel 2 uit het stukje wat je gepost hebt, voegt niets toe. Die kun je beter weglaten.
fokstok.nl
pi_91270949
quote:
1s.gif Op donderdag 13 januari 2011 16:58 schreef Light het volgende:

[..]

De hoogte van de body is precies genoeg voor de site zelf. De rest van het scherm wordt opgevuld door html.

Ik gebruik meestal

[ code verwijderd ]

Regel 2 uit het stukje wat je gepost hebt, voegt niets toe. Die kun je beter weglaten.
Die heb ik toegevoegd om te kijken of het werkte. Volgens mij mis je waar het over gaat :') De gradient die ik in de body heb gestopt, neemt de hoogte van de container over. Dus elke 200 pixels begint de gradient opnieuw.
pi_91274947
quote:
1s.gif Op donderdag 13 januari 2011 17:00 schreef RenRen- het volgende:

[..]

Die heb ik toegevoegd om te kijken of het werkte. Volgens mij mis je waar het over gaat :') De gradient die ik in de body heb gestopt, neemt de hoogte van de container over. Dus elke 200 pixels begint de gradient opnieuw.
Geef je body min-height: 100%
zcflevo.nl
pi_91293920
quote:
1s.gif Op donderdag 13 januari 2011 17:00 schreef RenRen- het volgende:

[..]

Die heb ik toegevoegd om te kijken of het werkte. Volgens mij mis je waar het over gaat :') De gradient die ik in de body heb gestopt, neemt de hoogte van de container over. Dus elke 200 pixels begint de gradient opnieuw.
Nou, ik heb nooit met een gradient achtergrondkleur gewerkt maar ik heb wel vaak gezien dat de hoogte van html groter is dan die van body. Ik nam aan dat dat hier ook het probleem was. Ik had alleen geen kans om het te testen, dus ik heb als educated guess een mogelijke oplossing neergegooid. Helaas zat ik er deze keer naast :{
fokstok.nl
pi_91303329
quote:
1s.gif Op donderdag 13 januari 2011 23:34 schreef Light het volgende:

[..]

Nou, ik heb nooit met een gradient achtergrondkleur gewerkt maar ik heb wel vaak gezien dat de hoogte van html groter is dan die van body. Ik nam aan dat dat hier ook het probleem was. Ik had alleen geen kans om het te testen, dus ik heb als educated guess een mogelijke oplossing neergegooid. Helaas zat ik er deze keer naast :{
Ohh, maar ik had eerst ook geen hoogte gegeven aan de body. Leek me useless, maar als hij zo doet ga ik ook maar wat doen. Kan gebeuren joh. Waarschijnlijk was ik ook niet zo clear.
quote:
1s.gif Op donderdag 13 januari 2011 18:23 schreef KomtTijd... het volgende:

[..]

Geef je body min-height: 100%
Nop, nogsteeds doetie het verkeerd.
pi_91304692
quote:
1s.gif Op vrijdag 14 januari 2011 09:16 schreef RenRen- het volgende:

[..]

Ohh, maar ik had eerst ook geen hoogte gegeven aan de body. Leek me useless, maar als hij zo doet ga ik ook maar wat doen. Kan gebeuren joh. Waarschijnlijk was ik ook niet zo clear.

[..]

Nop, nogsteeds doetie het verkeerd.
Oplossing: kleurverloop op html, niet op body. En html ook min-height: 100% geven :)
fokstok.nl
pi_91304779
quote:
1s.gif Op vrijdag 14 januari 2011 10:01 schreef Light het volgende:

[..]

Oplossing: kleurverloop op html, niet op body. En html ook min-height: 100% geven :)
Hoe zet ik code van CSS naar HTML dan? :') Of gewoon boven de body zetten?
pi_91304936
1
2
3
4
5
6
7
8		html, body {
    margin: 0;
    padding: 0;
}
html {
    background: -moz-linear-gradient(top, #5E5E5E, #000000);
    min-height: 100%;
}
fokstok.nl
pi_91305607


;(

Ik heb nu ook die margin:0; en padding:0; erin gezet, geen effect.
Het rechter is FF.
pi_91305745
De min-height op regel 12 hoort niet bij body maar bij html.
fokstok.nl
pi_91306154
quote:
1s.gif Op vrijdag 14 januari 2011 10:35 schreef Light het volgende:
De min-height op regel 12 hoort niet bij body maar bij html.
_O_ Opgelost, dankje!
pi_91313368
ik gebruik voor een gradient achtergrond (ter vervanging van een plaatje dat geladen werd) de volgende stukje css:
1
2
3		background: -moz-linear-gradient(top, #e5e7e6, #eaeceb);
background: -webkit-gradient(linear,top,bottom,from(#e5e7e6),to(#eaeceb));
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#e5e7e6', EndColorStr='#eaeceb');
dit werkt prima in IE7/8/9 en FF3.6 (en bedankt RenRen- voor die laatste regel :D)
echter probeer ik dit nu op een stuk css dat een <a href> aanpast en daar functioneert hij niet correct onder IE7, nou is dat niet echt een probleem maar ben ik wel benieuwd of iemand weet hoe dit komt
pi_91313586
quote:
1s.gif Op vrijdag 14 januari 2011 13:38 schreef mschol het volgende:
ik gebruik voor een gradient achtergrond (ter vervanging van een plaatje dat geladen werd) de volgende stukje css:

[ code verwijderd ]

dit werkt prima in IE7/8/9 en FF3.6 (en bedankt RenRen- voor die laatste regel :D)
echter probeer ik dit nu op een stuk css dat een <a href> aanpast en daar functioneert hij niet correct onder IE7, nou is dat niet echt een probleem maar ben ik wel benieuwd of iemand weet hoe dit komt
DXImageTransform is gigantisch traag en buggy. Indien mogelijk zou ik gewoon een PNG blijven gebruiken, werkt over het algemeen stukken beter.
zcflevo.nl
pi_91315049
quote:
1s.gif Op vrijdag 14 januari 2011 13:42 schreef KomtTijd... het volgende:

[..]

DXImageTransform is gigantisch traag en buggy. Indien mogelijk zou ik gewoon een PNG blijven gebruiken, werkt over het algemeen stukken beter.
denk ik dat ik een mooi alternatief voor een plaatje heb gevonden... blijkt dat buggy te zijn ;(
maar ach, dan maar terug naar het plaatje :P

[ Bericht 9% gewijzigd door mschol op 14-01-2011 14:21:25 ]
pi_91427993
Is het handig om lappen tekst op een lay-out die je hebt gemaakt met Photoshop uit te printen? Of worden die letters dan heel lelijk?
  zondag 16 januari 2011 @ 20:34:49 #243
134533 donroyco
dus niet Donroyco
pi_91428322
quote:
1s.gif Op zondag 16 januari 2011 20:30 schreef Donnis het volgende:
Is het handig om lappen tekst op een lay-out die je hebt gemaakt met Photoshop uit te printen? Of worden die letters dan heel lelijk?
Hoe bedoel je? :)
Wat heeft dit met CSS te maken?
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_91428849
Oh faal :')
pi_91429353
Ik las CS5, en hoe je posts moet editten weet ik ook al niet meer te vinden met die nieuwe lay-out, lekker bezig.
pi_91432566
Kan gebeuren :P .
pi_91504674
Fu. Geen centraal htmltopic.

Maar misschien weten jullie wat.

Muziek op een site, is er een manier om ervoor te zorgen dat er muziek op iedere pagina is, maar dat hij niet elke keer opnieuw begint? Eén manier lijkt me om van de content een iframe te maken ofzo, en dan van een 'vast' element de muziek te maken. Maar ik weet dus niets van dat soort dingen af, vraag me af of het ook anders kan?
  dinsdag 18 januari 2011 @ 10:46:31 #248
91039 mstx
2x1/2 = 1/2 x 1/2
pi_91505243
quote:
1s.gif Op dinsdag 18 januari 2011 10:28 schreef RenRen- het volgende:
Fu. Geen centraal htmltopic.

Maar misschien weten jullie wat.

Muziek op een site, is er een manier om ervoor te zorgen dat er muziek op iedere pagina is, maar dat hij niet elke keer opnieuw begint? Eén manier lijkt me om van de content een iframe te maken ofzo, en dan van een 'vast' element de muziek te maken. Maar ik weet dus niets van dat soort dingen af, vraag me af of het ook anders kan?
Frame, popupje (met daarin de player) of alle content met AJAX laden zijn de enige oplossingen denk ik zo. Ben eigenlijk van elke methode geen voorstander...
Op donderdag 2 juli 2009 22:41 schreef RTB het volgende:
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
pi_91505475
quote:
1s.gif Op dinsdag 18 januari 2011 10:28 schreef RenRen- het volgende:
Fu. Geen centraal htmltopic.

Maar misschien weten jullie wat.

Muziek op een site, is er een manier om ervoor te zorgen dat er muziek op iedere pagina is, maar dat hij niet elke keer opnieuw begint? Eén manier lijkt me om van de content een iframe te maken ofzo, en dan van een 'vast' element de muziek te maken. Maar ik weet dus niets van dat soort dingen af, vraag me af of het ook anders kan?
Gewoon je eigen stereo op 10 zetten :) Doe ik ook met mijn stereo als ik muziek wil horen, en dan zit ik niet te wachten op een site die daar doorheen komt toeteren ;)
fokstok.nl
pi_91505633
quote:
14s.gif Op dinsdag 18 januari 2011 10:52 schreef Light het volgende:

[..]

Gewoon je eigen stereo op 10 zetten :) Doe ik ook met mijn stereo als ik muziek wil horen, en dan zit ik niet te wachten op een site die daar doorheen komt toeteren ;)
Sherlock, het is niet zo dat ik het wil, het moet :') Dus ik moet een manier vinden.
pi_91505647
quote:
1s.gif Op dinsdag 18 januari 2011 10:46 schreef mstx het volgende:

[..]

Frame, popupje (met daarin de player) of alle content met AJAX laden zijn de enige oplossingen denk ik zo. Ben eigenlijk van elke methode geen voorstander...
Frame is misschien een optie... Even op googlen, dankje
  dinsdag 18 januari 2011 @ 12:54:21 #252
134533 donroyco
dus niet Donroyco
pi_91510151
quote:
1s.gif Op dinsdag 18 januari 2011 10:28 schreef RenRen- het volgende:
Fu. Geen centraal htmltopic.

Maar misschien weten jullie wat.

Muziek op een site, is er een manier om ervoor te zorgen dat er muziek op iedere pagina is, maar dat hij niet elke keer opnieuw begint? Eén manier lijkt me om van de content een iframe te maken ofzo, en dan van een 'vast' element de muziek te maken. Maar ik weet dus niets van dat soort dingen af, vraag me af of het ook anders kan?
Content inladen dmv jQuery?
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_91510447
Mja, dan kan ik weer opnieuw beginnen met de hele site gok ik.
  dinsdag 18 januari 2011 @ 13:01:52 #254
134533 donroyco
dus niet Donroyco
pi_91510474
quote:
1s.gif Op dinsdag 18 januari 2011 13:01 schreef RenRen- het volgende:
Mja, dan kan ik weer opnieuw beginnen met de hele site gok ik.
Soms moet je van tevoren bedenken hoe het moet.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_91510496
quote:
3s.gif Op dinsdag 18 januari 2011 13:01 schreef donroyco het volgende:

[..]

Soms moet je van tevoren bedenken hoe het moet.
Soms gaat dat niet, omdat soms de klant na afloop nog even wat leuks bedenkt.

Ohja.
  dinsdag 18 januari 2011 @ 13:16:25 #256
134533 donroyco
dus niet Donroyco
pi_91510966
quote:
1s.gif Op dinsdag 18 januari 2011 13:02 schreef RenRen- het volgende:

[..]

Soms gaat dat niet, omdat soms de klant na afloop nog even wat leuks bedenkt.

Ohja.
Als je het allemaal zo goed weet, waarom kom je nog dan in dit topic?
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_91511018
quote:
7s.gif Op dinsdag 18 januari 2011 13:16 schreef donroyco het volgende:

[..]

Als je het allemaal zo goed weet, waarom kom je nog dan in dit topic?
Hahaha, wat? Je maakt het wel heel gek. Ik weet het helemaal niet heel goed, ik weet alleen wel dat mensen soms -eigenlijk best vaak- op het einde opeens nog dingen erbij willen. Hoe ik het moet oplossen weet ik dus niet. Ik zit niet te wijsneuzen over CSS. Het enige wat ik goed weet is wat ik NIET en WEL moet doen om de kosten te beperken.

Ga ergens anders zeikstralen, dit is nutteloos.
  dinsdag 18 januari 2011 @ 13:23:19 #258
134533 donroyco
dus niet Donroyco
pi_91511224
quote:
1s.gif Op dinsdag 18 januari 2011 13:17 schreef RenRen- het volgende:

[..]

Hahaha, wat? Je maakt het wel heel gek. Ik weet het helemaal niet heel goed, ik weet alleen wel dat mensen soms -eigenlijk best vaak- op het einde opeens nog dingen erbij willen. Hoe ik het moet oplossen weet ik dus niet. Ik zit niet te wijsneuzen over CSS. Het enige wat ik goed weet is wat ik NIET en WEL moet doen om de kosten te beperken.

Ga ergens anders zeikstralen, dit is nutteloos.
Ik zeikstraal niet, maar geef je alleen tips dat je op voorhand al zulke dingen in gedachten moet houden, wil je die niet aannemen, dan is dat jouw probleem.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_91511286
quote:
14s.gif Op dinsdag 18 januari 2011 13:23 schreef donroyco het volgende:

[..]

Ik zeikstraal niet, maar geef je alleen tips dat je op voorhand al zulke dingen in gedachten moet houden, wil je die niet aannemen, dan is dat jouw probleem.
Ik kan op voorhand niet zulke dingen in gedachten houden, als die dingen niet in de planning stonden, dat schrijf ik net. Anders had ik echt wel wat anders bedacht voor de content en dergelijken, ik ben toch zeker niet achterlijk. Daarom zoek ik een oplossing die niet inhoudt dat ik de site helemaal opnieuw moet bouwen. Ik ga toch niet elke site zo bouwen dat er eventueel nog een keer ooit een muziekje onder kan, dat snap jij ook wel :')

En als jij dus niet goed wilt lezen, moet je mij daar niet mee lastig vallen.
pi_91513299
quote:
1s.gif Op dinsdag 18 januari 2011 13:01 schreef RenRen- het volgende:
Mja, dan kan ik weer opnieuw beginnen met de hele site gok ik.
Gebruik je een CMS? Vaak bestaan daar AJAX-modules voor.
zcflevo.nl
pi_91513427
quote:
1s.gif Op dinsdag 18 januari 2011 14:09 schreef KomtTijd... het volgende:

[..]

Gebruik je een CMS? Vaak bestaan daar AJAX-modules voor.
Nee, het is een heel simpele site eigenlijk.
pi_91513628
quote:
14s.gif Op dinsdag 18 januari 2011 13:23 schreef donroyco het volgende:

[..]

Ik zeikstraal niet, maar geef je alleen tips dat je op voorhand al zulke dingen in gedachten moet houden, wil je die niet aannemen, dan is dat jouw probleem.
Je kunt niet alles in gedachten houden. Als je bij de buurman een vierkant terras van 4 x 4 meter gaat leggen en de buurman besluit, als je nog 3 tegels moet leggen, dat hij toch liever een rond terras met dezelfde oppervlakte heeft, kun je ook weer opnieuw beginnen. :)
fokstok.nl
pi_91736768
eens :).
Ik zou een klein (misschien zelfs leeg, maar ik zou wel ergens een uit-optie inbouwen) framepje gebruiken. Dat kan denk ik nog wel makkelijk zonder heel veel aan alle pagina's aan te moeten passen.
Finally, someone let me out of my cage
pi_91736900
Frames hiervoor sowieso niet gebruiken. Been there, done that. Werkt echt vreselijk. AJAX zou dan een 200x betere oplossing zijn. Maar ik heb de betreffende website gezien en het enige verschil in de pagina's is een aantal afbeeldingen. Daar valt dus prima een js-functie van 2 regels voor te schrijven, ipv van pagina te wisselen.
zcflevo.nl
  maandag 24 januari 2011 @ 23:12:07 #265
71610 Black-Hole
Deep in my soul
pi_91827530
Zit al de hele avond te klooien om een 3 column layout voor elkaar te krijgen met floats en het lukt maar niet om de recht kolom goed te krijgen zodat hij echt naast de middelste kolom komt in plaats van rechts ter hoogte van waar de middelste kolom is geëindigd.

Dit is de (versimpelde) HTML code die ik gebruik:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24		<div id="wrapper">

<div id="left">

<p>Lorem .....  ultrices, orci.</p>

</div> <!-- end left -->

<div id="middle">

<p>Lorem ...... placerat ultrices, orci.
</p>

</div> <!-- end middle -->

<div id="right">

<p>Lorem ....... ultrices, orci.</p>

<p>Pellentesque ...... felis.</p>

</div> <!-- end right -->

</div> <!-- end wrapper -->

en de CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		#wrapper{
width: 960px;
margin: auto;
}

#left {
float: left;
width: 260px;
background: red;
}

#middle {
margin: 0px 260px;
width: 440px;
background: green;
}

#right {
float: right;
width: 260px;
background: yellow;
}

Volgens mij is de oplossing zo simpel maar ik kom er nu echt niet uit :{
pi_91828882
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		#left {
  float: left;
  width: 260px;
  background: red;
}
#middle {
  float: left;
  width: 440px;
  background: green;
}
#right {
  float: left;
  width: 260px;
  background: yellow;
}
fokstok.nl
pi_91829178
quote:
13s.gif Op zondag 23 januari 2011 02:46 schreef KomtTijd... het volgende:
Frames hiervoor sowieso niet gebruiken. Been there, done that. Werkt echt vreselijk. AJAX zou dan een 200x betere oplossing zijn. Maar ik heb de betreffende website gezien en het enige verschil in de pagina's is een aantal afbeeldingen. Daar valt dus prima een js-functie van 2 regels voor te schrijven, ipv van pagina te wisselen.
ok misschien is ajax ook wel een optie, maar waarom werken frames vreselijk?
Finally, someone let me out of my cage
  dinsdag 25 januari 2011 @ 06:40:30 #268
71610 Black-Hole
Deep in my soul
pi_91835556
quote:
1s.gif Op maandag 24 januari 2011 23:39 schreef Light het volgende:

[ code verwijderd ]

Zo makkelijk dus :% Thanks!
pi_91861297
Ik wil 2 verschillende menu opties maken, eentje voor de actieve versie, de andere voor de niet-actieve versie.

Heb dit maar het wil niet vlotten:

1
2
3
4
5
6		    <div class="menu">
        <div class="active"><a href="index.html">Home</a></div>
        <div class="noactive"><a href="#">Over mij</a></div>
        <div class="noactive"><a href="portfolio.html">Portfolio</a></div>
        <div class="noactive"><a href="#">Contact</a></div>
    </div>

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		.menu {
float: left;
width: 100%;
height: 80px;
font: 12px Arial;
}

.active { 
font: 12px Arial; 
width: 90px; 
height: 80px;
float: left; 
color: #FFFFFF; 
background: #410400; 
text-decoration: none; 
}

.active a:link, a:active, a:visited, a:hover { color: #FFFFFF; text-decoration: none; }

.noactive { 
font: 12px Arial; 
width: 90px; 
height: 80px; 
float: left; 
color: #410400; 
background: #fff; 
text-decoration: none; 
}

.noactive a:link, a:active, a:visited, a:hover { color: #410400; background: #fff; text-decoration: none }

Kan iemand me aub helpen? ;(
pi_91861759
quote:
1s.gif Op dinsdag 25 januari 2011 19:31 schreef Nashje het volgende:
Ik wil 2 verschillende menu opties maken, eentje voor de actieve versie, de andere voor de niet-actieve versie.

Heb dit maar het wil niet vlotten:

[ code verwijderd ]

[ code verwijderd ]

Kan iemand me aub helpen? ;(
En wat gaat er dan precies mis? Zonder te testen kan ik al zeggen dat het probleem waarschijnlijk is dat je alleen onderscheid maakt in .active a:link en .noactive a:link. a:hover, a:visited en a:active worden gewoon volgens de regels van specificity gestijld.

En nog wat algemene opmerkingen:
- voor een menu gebruikt men doorgaans een unordered list (<ul>)
- een hele rij elementen dezelfde classname geven lijkt me een beetje overbodig.
zcflevo.nl
pi_91863737
Hmm okay, thanks for the advice. Dan begin ik even van vooraf aan met een unordered list.

Plaats ik de actieve link op deze manier goed?
1
2
3
4
5
6		    <ul id="menu"> 
            <li class="active"><a href="index.html">Home</a></li> 
            <li><a href="#">Over mij</a></li> 
            <li><a href="#">Portfolio</a></li> 
            <li><a href="#">Contact</a></li> 
    </ul> 

Eén menuitem is 90px breed en 80px hoog. Hoe pas ik dat toe?

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		#menu { 
    padding:0; 
    margin:0;
    list-style-type: none;
} 

#menu li { 
    width: 90px;
    height: 80px;
    color: #410400;
    background: #fff;
    display: inline;
} 

#menu li .active {
    color: #fff;
    background: #410400;
}

#menu li a:link, a:active, a:visited {
    color: #410400;
    background: #fff;
    text-decoration: none;
}

#menu li a:hover { 
    color: #fff;
    background: #410400;
    text-decoration: none;
}
pi_91870454
quote:
1s.gif Op dinsdag 25 januari 2011 20:11 schreef Nashje het volgende:
Hmm okay, thanks for the advice. Dan begin ik even van vooraf aan met een unordered list.

Plaats ik de actieve link op deze manier goed?

[ code verwijderd ]
ja dat is prima zo
quote:
Eén menuitem is 90px breed en 80px hoog. Hoe pas ik dat toe?

[ code verwijderd ]

inline-elementen vormen zich naar hun inhoud. Maak er inline-block elementen van. Of laat ze lekker block, en gebruik float:left om ze naast elkaar te krijgen.

verder snap ik nog steeds niet wat je hier mee wilt:
1
2
3
4
5		#menu li a:link, a:active, a:visited {
    color: #410400;
    background: #fff;
    text-decoration: none;
}
Maar het lijkt me gewoon een fout. Ik denk dat dat hele gedeelte eruit kan en dat je bovendien eens wat moet lezen over CSS selectors. Goeie startplaats zoals altijd: http://www.w3schools.com/css/default.asp
zcflevo.nl
pi_91895304
Even mbv van een plaatje.

De actieve pagina moet dus zichtbaar zijn en wanneer je met de cursor over de overige knoppen gaat moet deze gemarkeerd worden. Dat is wat ik met die hover wil krijgen. Met die display:inline komen ze langs elkaar, maar ik wil elke item dezelfde grootte en breedte meegeven (90x80px).

pi_91896284
Tis me voor een gedeelte gelukt!

Heb nu:
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		#menu { 
    padding:0; 
    margin:0;
    list-style-type: none;
} 

#menu li { 
    width: 90px;
    height: 80px;
    color: #410400;
    background: #fff;
    float: left;
    display: block;
} 

#menu li .active {
    color: #fff;
    background: #410400;
}

#menu li a { float: left; display: block; width: 90px; height: 80px; }

#menu li a:hover { 
    color: #fff;
    background: #410400;
    text-decoration: none;
}

Alleen die class="active" op Home pakt ie niet. Hmmz.
pi_91896476
OMG, tis me gewoon gelukt.

Had:
1
2
3
4		#menu li .active {
    color: #fff;
    background: #410400;
}

Veranderd in:
1
2
3
4		#menu .active a {
    color: #fff;
    background: #410400;
}

Voila. Bedankt :).
  woensdag 26 januari 2011 @ 15:23:09 #276
134533 donroyco
dus niet Donroyco
pi_91896499
Gebruik je Web Dev Toolbar?
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_91918019
Firebug is ook handig, naast die webdev toolbar. :)
fokstok.nl
pi_91920771
Ik zou niet meer willen/kunnen leven zonder Firebug :D
Nee.
pi_92266642
vraagje ik zit nu met
1
2
3
4
5
6
7
8
9
10		<body>
<div id='container'>
<div id='menu'>
</div>
<div id='content'>
</div>
<div id='footer'>
</div>
</div>
</body>

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		#container{
    width:1000px;    
    background: #ffffff;
    margin-left: auto;
    margin-right: auto;
}

#menu{ 
    float: left;
    width: 160px;
    height: 100%;
    font-size: 11px;
    min-height: 800px;
    padding: 5px 5px 5px 5px;
}
#content {
    float: left;
    width: 800px;
    height: 100%;
    font-size: 12px;
    padding-bottom:10px;
    padding-left:20px;
}

#footer{
    float: left;
    height: 120px;
    width: 990px;
    font-size: 11px;
    margin-left: auto;
    margin-right: auto;
}

Probleem is dat hij de container niet wil weergeven :o.
het idee is een paar Divs met een witte achtergrond en dat lukt niet echt.

[ Bericht 0% gewijzigd door cablegunmaster op 03-02-2011 11:52:51 ]
Redacted
pi_92266676
Je hebt je containerdiv niet afgesloten.
pi_92266883
quote:
1s.gif Op donderdag 3 februari 2011 11:47 schreef RenRen- het volgende:
Je hebt je containerdiv niet afgesloten.
css die klopt wat ik heb gekopieerd de html is pseudo dus ja was een klein foutje :P
alsnog geen witte achtergrond.
Redacted
pi_92266932
Het is ook background-color :Y
  donderdag 3 februari 2011 @ 11:57:39 #283
134533 donroyco
dus niet Donroyco
pi_92267014
quote:
1s.gif Op donderdag 3 februari 2011 11:55 schreef RenRen- het volgende:
Het is ook background-color :Y
background pakt ie ook :)
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_92267075
quote:
1s.gif Op donderdag 3 februari 2011 11:57 schreef donroyco het volgende:

[..]

background pakt ie ook :)
In plaats dat je die gast helpt, let je liever op mij. Top!
  donderdag 3 februari 2011 @ 12:01:17 #285
134533 donroyco
dus niet Donroyco
pi_92267157
quote:
14s.gif Op donderdag 3 februari 2011 11:59 schreef RenRen- het volgende:

[..]

In plaats dat je die gast helpt, let je liever op mij. Top!
Huilen doe je maar lekker ergens anders.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_92267484
quote:
7s.gif Op donderdag 3 februari 2011 12:01 schreef donroyco het volgende:

[..]

Huilen doe je maar lekker ergens anders.
Ja, boohoo, de grote Donroyco haat me. Boohoo.
Ga die gast helpen ipv altijd op mij te letten, je weet altijd alles toch zo goed?
pi_92267621
footer clear:both meegeven ipv float:left.
zcflevo.nl
pi_92268062
het werkt niet en de rest van de css werkt wel :o.
Redacted
pi_92268291
Dan maak je een typfout of je testcase komt niet overeen met wat je zelf probeert.
zcflevo.nl
pi_92269024
quote:
2s.gif Op donderdag 3 februari 2011 12:33 schreef KomtTijd... het volgende:
Dan maak je een typfout of je testcase komt niet overeen met wat je zelf probeert.
W3 validator fixte het dankje :). het kwam door extra scriptjes die nog niet helemaal gevalideerd waren :). Dankje voor de aandacht. en kappen met bekvechten ;) .
Redacted
  vrijdag 18 februari 2011 @ 10:43:29 #291
63192 ursel
"Het Is Hier Fantastisch!
pi_92956279
Ik heb een probleem met mijn textgrootte versus mijn achtergrond image. :P

Mijn image is op zijn smalste stuk 75px breed. Het is de bedoeling dat een aantal keywords verdeeld worden bovenop deze image. So fa so good. Alleen zijn sommige keywords een beetje lang, of meerdere worden. Meerdere worden gaat meestal nog wel goed gelukkig.

Ik heb mijn keywords div nu een breedte gegeven van 75 px. Het geheel staat aan de rechterkant van de site en heb er een float right en een textalign right aan meegegeven. Probleem is alleen dat mijn tekst als die groter is dan 75px, aan de rechterkant uit mijn div loopt.

Wat kan ik het beste doen? Links uit de div laten lopen (en hoe doe ik dat:P), Of zijn er mogelijkheden om worden af te kappen en de regel eronder verder te gaan?
  vrijdag 18 februari 2011 @ 11:33:37 #293
63192 ursel
"Het Is Hier Fantastisch!
pi_92957952
quote:
1s.gif Op vrijdag 18 februari 2011 10:51 schreef KomtTijd... het volgende:
http://www.css3.info/preview/word-wrap/
Hmm, natuurlijk. Mja, niet zo heel erg tevree mee eigenlijk. :{
Krijg je van die rare woorden weer van.

Heb je ook nog een optie voor het aan de linkerkant uitlopen van een div? :7
pi_92958959
text-allign:right wellicht?
zcflevo.nl
  vrijdag 18 februari 2011 @ 12:11:31 #295
63192 ursel
"Het Is Hier Fantastisch!
pi_92959166
quote:
2s.gif Op vrijdag 18 februari 2011 12:04 schreef KomtTijd... het volgende:
text-allign:right wellicht?
Staat al zo
quote:
1s.gif Op vrijdag 18 februari 2011 10:43 schreef ursel het volgende:

Het geheel staat aan de rechterkant van de site en heb er een float right en een textalign right aan meegegeven.

pi_92959304
direction: rtl;
Maar ik denk dat die niet doet wat je wilt ;)
fokstok.nl
pi_92959356
quote:
1s.gif Op vrijdag 18 februari 2011 12:16 schreef Light het volgende:
direction: rtl;
Maar ik denk dat die niet doet wat je wilt ;)
naalspo nerovetsrethca nedroow ej la nad ne heheW
zcflevo.nl
pi_92960523
Ik loop zelf ook tegen een probleem aan.

In een site heb ik een div, bovenin, die heeft een achtergrondkleur. Die hebben we een position:absolute mee moeten geven, omdat anders de achtergrondkleur maar een klein stukje opvult.

Hierdoor heb ik problemen met andere divs, die gaan erachter zitten. Geen idee hoe ik het op kan lossen.
Help?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18		#imageheader {
    width:878px;
    height:auto;
    max-height:291px;
    background-color:#e8ded2;
    margin: 10px 0px 20px -5px;
    padding: 11px 11px 11px 11px;
    position:absolute;
}

#left {
    min-width:210px;
    max-width:210px;
    height:auto;
    float:left;
    background-color:#CCC;
    margin-left:6px;
}

pi_92962601
quote:
14s.gif Op vrijdag 18 februari 2011 13:42 schreef KomtTijd... het volgende:
[Geen search nodig!] De oplossing voor alle problemen!
Wat ik wil is dat die left onder de imageheader komt :')
pi_92962714
Nee het probleem is dat #imageheader iets niet goed doet met de achtergrond, en je workaround daarvoor zorgt voor een nieuw probleem. Kortom, bij de bron aanpakken. Wat gaat er mis met die achtergrond?
zcflevo.nl
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies #15
Index

» digital corner

» development

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