HTML5 + CSS -> article

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Donny Wie weet

Donny Wie weet

31/03/2013 16:25:19
Quote Anchor link
Hoi allemaal, ik wil een artikel maken op mijn website. Daarin staat links de text, rechts een afbeelding. Helaas krijg ik mijn image niet in het article. Enig idee hoe dat komt?

Groeten donny

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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;
}
 
PHP hulp

PHP hulp

28/03/2024 20:34:47
 
Ivo Breeden

Ivo Breeden

31/03/2013 18:46:01
Quote Anchor link
Hoi Donny,
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!
 
Eddy E

Eddy E

31/03/2013 19:29:32
Quote Anchor link
http://jsbin.com/eduwob/1/

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
 
Ozzie PHP

Ozzie PHP

31/03/2013 23:53:26
Quote Anchor link
Eddy E op 31/03/2013 19:29:32:
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, dat is helemaal niet stompzinnig... lees deze post maar eens...

http://www.phphulp.nl/php/forum/topic/css-vragen/89837/
 
Joey Drieling

Joey Drieling

01/04/2013 01:11:07
Quote Anchor link
@Eddy

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
 
Eddy E

Eddy E

01/04/2013 08:57:11
Quote Anchor link
Dus PHP elk element een class die gelijk is aan het element geven laat de parser sneller werken?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<p class="p">Hier dan wat tekst
    <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)
PHP script in nieuw venster Selecteer het PHP script
1
.p .img { ... }


in plaats van

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
p img { ... }
Gewijzigd op 01/04/2013 09:07:43 door Eddy E
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.