HTML5 + CSS -> article
Groeten donny
Code (php)
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
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
<article class="project_article">
<h3 class="project_title">Hier kop</h3>
<p class="project_text">Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla </p>
<img src="#" class="project_img">
</article>
.project_article {
width: 900px;
border-style: solid;
border-width: 1px;
border-color: green;
}
.project_img {
width: 100px;
float: left;
display: inline;
}
.project_title {
background-color: red;
display: inline;
}
.project_text {
width: 550px;
border-color: blue;
border-style: solid;
border-width: 1px;
}
<h3 class="project_title">Hier kop</h3>
<p class="project_text">Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla </p>
<img src="#" class="project_img">
</article>
.project_article {
width: 900px;
border-style: solid;
border-width: 1px;
border-color: green;
}
.project_img {
width: 100px;
float: left;
display: inline;
}
.project_title {
background-color: red;
display: inline;
}
.project_text {
width: 550px;
border-color: blue;
border-style: solid;
border-width: 1px;
}
Ja ik kan me daar ook groen en geel aan ergeren. CSS herkent nauwelijks block elementen. Eigenlijk blijkt de inhoud van de block elementen leidend te zijn. Je hebt zelf al zitten knoeien door diverse block elementen als inline te bestempelen, maar dat heeft ook niet het gewenste resultaat.
Overigens is het wel op te lossen door het plaatje omhoog te schuiven, na de <H3>, en die <H3> niet als inline te bestempelen. De image moet ook block zijn; niet inline. Maar dat soort adviezen had je waarschijnlijk zelf ook al bedacht.
Kunnen we niet eens protesteren bij w3.org dat CSS verbeterd wordt? Zodat het gewoon doet wat je wilt!
Kortom: gewoon de <img> in de <p> zetten (dat mag!) en rechts floaten.
Dan krijg je wat je (denk ik) wilt.
Nog een opmerking: al die class-namen doen niet.
Een class="article_h3" op een <h3> in een <article> is een beetje stomzinnig.
Spreek hem dan gewoon correct aan in je CSS: article h3
Eddy E op 31/03/2013 19:29:32:
Eddy, dat is helemaal niet stompzinnig... lees deze post maar eens...Nog een opmerking: al die class-namen doen niet.
Een class="article_h3" op een <h3> in een <article> is een beetje stomzinnig.
Spreek hem dan gewoon correct aan in je CSS: article h3
Een class="article_h3" op een <h3> in een <article> is een beetje stomzinnig.
Spreek hem dan gewoon correct aan in je CSS: article h3
http://www.phphulp.nl/php/forum/topic/css-vragen/89837/
Eddy het klopt wat Ozzie zecht class is sneller dan de tag selectors. Maar dat is niet het aller snelste dat is de id selector. Zie ook: http://css-tricks.com/efficiently-rendering-css/
Maar ik denk dat er meerdere artikelen komen op de pagina, dus dan is hij niet uniek en dan is class de tweede snelste optie.
Gewijzigd op 01/04/2013 01:32:32 door Joey Drieling
Code (php)
1
2
3
2
3
<p class="p">Hier dan wat tekst
<img class="img">
</p>
<img class="img">
</p>
En dan alles met .p en .img aanspreken?
Of ziet dit er niet wat stompzinnig uit?
Je kan ze dan aanroepen met
Code (php)
1
.p .img { ... }
in plaats van
Code (php)
1
p img { ... }
Gewijzigd op 01/04/2013 09:07:43 door Eddy E