Kleine Vragen Topic #2

Marvinguich schreef:

Hallo,

Ik ben bezig een layout responsive te maken, en dit lukt me al aardig.
Alleen krijg ik een image niet responsive, ik wil dat hij op groot scherm volledig breed is, en op klein schermpje zich aanpast aan de grootte.

Hoe doe ik dit? Met divs werkt het wel maar met images niet.

Groet Marvin

Probeer eens.

img {
    max-width: 100%;
    height: auto;
}

Kingunit schreef:

Eerdere citaten tonen

Marvinguich schreef:

Hallo,

Ik ben bezig een layout responsive te maken, en dit lukt me al aardig.
Alleen krijg ik een image niet responsive, ik wil dat hij op groot scherm volledig breed is, en op klein schermpje zich aanpast aan de grootte.

Hoe doe ik dit? Met divs werkt het wel maar met images niet.

Groet Marvin

Probeer eens.

img {
    max-width: 100%;
    height: auto;
}

Thanx! Heeft gewerkt!

Nu heb ik een vraag, ik heb een input veld met een value, alleen wanneer iemand er op klikt moet de value weggaan, heb al met onclick geprobeerd maar dan blijft het op mijn telefoon staan.. In de browser is het dan wel goed.
Maar ik wil het op de telefoon ook voor elkaar hebben. Wie kan me daarmee helpen?

Marvinguich schreef:

Eerdere citaten tonen

Kingunit schreef:

Eerdere citaten tonen

Marvinguich schreef:

Hallo,

Ik ben bezig een layout responsive te maken, en dit lukt me al aardig.
Alleen krijg ik een image niet responsive, ik wil dat hij op groot scherm volledig breed is, en op klein schermpje zich aanpast aan de grootte.

Hoe doe ik dit? Met divs werkt het wel maar met images niet.

Groet Marvin

Probeer eens.

img {
    max-width: 100%;
    height: auto;
}

Thanx! Heeft gewerkt!

Nu heb ik een vraag, ik heb een input veld met een value, alleen wanneer iemand er op klikt moet de value weggaan, heb al met onclick geprobeerd maar dan blijft het op mijn telefoon staan.. In de browser is het dan wel goed.
Maar ik wil het op de telefoon ook voor elkaar hebben. Wie kan me daarmee helpen?

Voortbordurend op de kracht van HTML5 heb je nu ook de placeholder-attribute:

<input type="text" name="naam" placeholder="Hoe heet je?">

Aarclay schreef:

Eerdere citaten tonen

Marvinguich schreef:

Eerdere citaten tonen

Kingunit schreef:

Eerdere citaten tonen

Marvinguich schreef:

Hallo,

Ik ben bezig een layout responsive te maken, en dit lukt me al aardig.
Alleen krijg ik een image niet responsive, ik wil dat hij op groot scherm volledig breed is, en op klein schermpje zich aanpast aan de grootte.

Hoe doe ik dit? Met divs werkt het wel maar met images niet.

Groet Marvin

Probeer eens.

img {
    max-width: 100%;
    height: auto;
}

Thanx! Heeft gewerkt!

Nu heb ik een vraag, ik heb een input veld met een value, alleen wanneer iemand er op klikt moet de value weggaan, heb al met onclick geprobeerd maar dan blijft het op mijn telefoon staan.. In de browser is het dan wel goed.
Maar ik wil het op de telefoon ook voor elkaar hebben. Wie kan me daarmee helpen?

Voortbordurend op de kracht van HTML5 heb je nu ook de placeholder-attribute:

<input type="text" name="naam" placeholder="Hoe heet je?">

Thanx, die kende ik nog niet.. Kwam alleen uit bij die onclick attribute, maar die werkte dus niet op mijn telefoon.

Wat trouwens waarschijnlijk wel werkt op je telefoon is onfocus.

Ik heb even zitten kloten met de CSS, maar nu heb ik het gemold http://sayitloud.nl/

Spoiler tonen

Codeblok (style.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

body {
background: #FFFFFF url(../images/bg.png) repeat;
margin: 0px;
padding: 0px;
font-family: Titillium Web, sans-serif;
font-size: 12px;
letter-spacing: 1px;
line-height: 20px;
color: #8f8e8e;
-webkit-font-smoothing: antialiased;
margin-top: 100px;
}

#container {
margin: 0 auto;
padding: 0;
width: 1200px;
}

#header {
background-image: url(../images/menu_bg.png);
background-repeat: repeat-x;
margin: 30px 0 0 0;
padding: 0;
width: 1200px;
height: 77px;
float: left;
}

#logo {
margin: -21px 0 0 110px;
padding: 0;
width: 190px;
float: left;
}

#menu {
margin: 0 5px 0 0;
padding: 0;
float: left;
width: 875px;
height: 50px;
font-size: 16px;
}

#menu ul {
margin: 11px 0 0 0;
padding: 0;
list-style: none;
float: right;
}

#menu ul li {
margin: 0;
padding: 0 0 0 10px;
float: left;
background-image: url(../images/menu_space.png);
background-repeat: no-repeat;
}

#menu ul li a {
margin: -2px 0 0 0;
padding: 0;
display: block;
color: #555454;
text-decoration: none;
line-height: 15px;
}

#menu ul li a span {
margin: 0;
padding: 0;
font-size: 11px;
float: left;
}

#slider {
margin: -27px 0 0 0;
padding: 0;
float: left;
width: 1200px;
}

#featured {
margin: 20px 0 0 0;
padding: 30px 0;
float: left;
width: 1200px;
background-image: url(../images/featured_bg.png);
background-repeat: repeat;
border-top: 1px solid #D1CFCF;
border-bottom: 4px solid #D14FC4;
}

#featured img {
margin: 0 auto 25px auto;
display: block;
}

.featured_obj {
margin: 0 57px;
padding: 0;
width: 286px;
float: left;
}

.featured_obj img {
margin: 0 auto;
display: block;
}

.featured_obj h2 {
margin: 4px 0;
padding: 0;
font-weight: normal;
font-size: 14px;
}

#newsletter {
margin: 20px 0 0 0;
padding: 0;
float: left;
width: 1200px;
text-align: center;
}

#newsletter h2 {
margin: 0 0 30px 0;
padding: 0;
font-weight: normal;
font-size: 22px;
font-style: italic;
}

#newsletter input {
background: transparent;
padding: 14px;
font-size: 18px;
font-family: Titillium Web, sans-serif;
}

#newsletter input[type=text] {
border: 1px solid #3F3E3D;
border-radius: 10px;
color: #A1A1A1;
font-style: italic;
box-shadow: inset 0px 0px 2px #FFFFFF;
}

#newsletter input[type=submit] {
background-image: url(../images/btn_go.png);
background-repeat: no-repeat;
/*background-color: #D14FC4;
box-shadow: inset 0px 0px 10px #DB5ECE;*/
color: #FFFFFF;
font-weight: 700;
text-transform: uppercase;
border: none;
width: 58px;
height: 55px;
}

#newsletter input:focus {
outline: 0;
}

#social {
margin: 30px auto 0 auto;
padding: 0;
}

#social img {
margin: 0;
padding: 0;
}

#social a {
margin: 0 5px;
padding: 0;
}

#footer_top {
margin: 20px 0 0 0;
padding: 0;
width: 1200px;
background-image: url(../images/footer_top_bg.png);
background-repeat: no-repeat;
height: 8px;
float: left;
}

#footer {
margin: 0;
padding: 15px 0;
background-image: url(../images/footer_bg.png);
float: left;
width: 1200px;
}

.footer_obj {
margin: 0 57px;
padding: 0;
width: 286px;
float: left;
}

.footer_obj img {
margin: 0 auto 10px auto;
display: block;
}

.footer_obj h2 {
margin: 4px 0 18px 0;
padding: 0 0 7px 0;
font-weight: normal;
font-size: 14px;
border-bottom: 1px solid #666666;
font-style: italic;
}

.dark_bg {
margin: 0px;
padding: 0 10px;
background-color: #272727;
border-radius: 5px;
width: 266px;
float: left;
}

.dark_bg .read_more {
margin: 0 0 0 -6px;
padding: 0;
float: left;
}

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

.footer_obj ul li {
margin: 0 0 15px 0;
padding: 0;
}

.footer_obj .testim_top {
margin: 0;
padding: 0;
height: 6px;
width: 281px;
background-image: url(../images/testim_top_bg.png);
float: left;
}

.footer_obj .testim {
margin: 0;
padding: 4px 10px;
width: 261px;
background-color: #272727;
font-size: 16px;
float: left;
}

.footer_obj .testim_bottom {
margin: 0;
padding: 0;
height: 16px;
width: 281px;
background-image: url(../images/testim_bottom_bg.png);
float: left;
}

.footer_obj .user {
margin: 50px 0 0 10px;
padding: 0 10px 0 0;
float: left;
width: 146px;
text-align: right;
font-size: 11px;
line-height: 13px;
}

.footer_obj .user h3 {
margin: 0 0 2px 0;
padding: 0;
font-size: 22px;
font-weight: normal;
font-style: italic;
}

.footer_obj .user_img {
margin: 20px 0 0 0;
padding: 0;
float: left;
width: 120px;
}

.footer_obj .user_img img {
float: right;
}

.footer_obj a, .featured_obj a {
color: #FFB8D3;
text-decoration: none;
}

#copyright {
margin: 0;
padding: 0;
background-image: url(../images/copyright_bg.png);
width: 1200px;
height: 60px;
float: left;
font-size: 14px;
}

#copyright_copy {
margin: 0 0 0 57px;
padding: 21px 0 0 0;
width: 343px;
height: 60px;
float: left;
}

#copyright_menu {
margin: 0 57px 0 0;
padding: 0;
float: left;
width: 743px;
height: 60px;
}

#copyright_menu ul {
margin: 21px 0 0 0;
padding: 0;
list-style: none;
float: right;
}

#copyright_menu ul li {
margin: 0;
padding: 0 0 0 25px;
float: left;
}

#copyright_menu ul li a {
margin: -2px 0 0 0;
padding: 0;
display: block;
color: #6C6C6C;
text-decoration: none;
}

Kan iemand mij in het nederlands en in kindertaal uitleggen hoe position:absolute; position:relative
en clear werkt?

In het engels begrijp ik het niet wat ze nou bedoelen en in het nederlands ook niet.

@hierboven zet je code in spoiler aub

position absolute haalt je div uit alle elementen waar het in zit waardoor je de posities met de css eigenschappen left en right kan veranderen.

met position relative blijft de div in zn huidige element zitten, maar je kan alsnog de css eigenschappen left en right veranderen

Raaoul schreef:

position absolute haalt je div uit alle elementen waar het in zit waardoor je de posities met de css eigenschappen left en right kan veranderen.

met position relative blijft de div in zn huidige element zitten, maar je kan alsnog de css eigenschappen left en right veranderen

Ah, oke. Ik zie wel wanneer ik het nodig heb.

Hoe krijg ik de tekst in het midden verticaal:

Dylanh schreef:

Eerdere citaten tonen

Raaoul schreef:

position absolute haalt je div uit alle elementen waar het in zit waardoor je de posities met de css eigenschappen left en right kan veranderen.

met position relative blijft de div in zn huidige element zitten, maar je kan alsnog de css eigenschappen left en right veranderen

Ah, oke. Ik zie wel wanneer ik het nodig heb.

Hoe krijg ik de tekst in het midden verticaal:
Afbeelding

line-height: getal;

Stefvdwel schreef:

Eerdere citaten tonen

Dylanh schreef:

Eerdere citaten tonen

Raaoul schreef:

position absolute haalt je div uit alle elementen waar het in zit waardoor je de posities met de css eigenschappen left en right kan veranderen.

met position relative blijft de div in zn huidige element zitten, maar je kan alsnog de css eigenschappen left en right veranderen

Ah, oke. Ik zie wel wanneer ik het nodig heb.

Hoe krijg ik de tekst in het midden verticaal:
Afbeelding

line-height: getal;

Thanks. ik keek op google naar css text center vertical en kreeg hele andere.dingen.

Codeblok (voorbeeld.php):

1

implode(, PageTag::where(page_id, =, 3)->get(array(name))->toArray());

Waarom krijg ik Array to string conversion, terwijl het Pagetag:here(... wel degelijk een array is?

Zeker weten? Wat zegt var_dump erover?

Codeblok (voorbeeld.php):

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

array (size=4)
0 =>
array (size=1)
name => string sss (length=3)
1 =>
array (size=1)
name => string ssss (length=4)
2 =>
array (size=1)
name => string shahiem (length=7)
3 =>
array (size=1)
name => string is cool (length=7)

waarom werkt dit niet:

Codeblok (voorbeeld.css):

1
2
3

.topic-post > .right {
color:white;
}