CSS vraagje

Gestart doorJordyvc10 reacties32 weergaven

11 berichten · pagina 1 van 1

Jordyvc

Lid · Topicstarter

Berichten
6.037
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Hey

Ik ben bezig met een layout te coderen. Maar ik heb zon 4 afbeeldingen onder elkaar staan. Hoe kan ik naast elke afbeelding tekst neerzetten? Zodat de tekst er mooi naast staat, per afbeelding?

Mvg,
Jordyvc
0
Berichten
93.699
Reputatie
0
Punten
1,27
Lid sinds
Laatst gezien
<div class="box">
    <div class="image">
        <img src="" />
    </div>
    <div class="text">
        <p>tekst</p>
    </div>
</div>
<div style="clear: both;"></div>

<div class="box">
    <div class="image">
        <img src="" />
    </div>
    <div class="text">
        <p>tekst</p>
    </div>
</div>
<div style="clear: both;"></div>

<div class="box">
    <div class="image">
        <img src="" />
    </div>
    <div class="text">
        <p>tekst</p>
    </div>
</div>
<div style="clear: both;"></div>


.box {
    witdh: xxx px;
    margin-bottom: xx px;
}
.box .image {
    float: left;
    margin-right: 10px;
}
.box .text {
    float: left;
}


Zo kom je al een heel eind denk ik?
0
Jordyvc

Lid · Topicstarter

Berichten
6.037
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Spoiler tonen
Xjessex (link):

<div class="box">
    <div class="image">
        <img src="" />
    </div>
    <div class="text">
        <p>tekst</p>
    </div>
</div>
<div style="clear: both;"></div>

<div class="box">
    <div class="image">
        <img src="" />
    </div>
    <div class="text">
        <p>tekst</p>
    </div>
</div>
<div style="clear: both;"></div>

<div class="box">
    <div class="image">
        <img src="" />
    </div>
    <div class="text">
        <p>tekst</p>
    </div>
</div>
<div style="clear: both;"></div>
.box {
    witdh: xxx px;
    margin-bottom: xx px;
}
.box .image {
    float: left;
    margin-right: 10px;
}
.box .text {
    float: left;
}


Zo kom je al een heel eind denk ik?

En dat is voor 1 afbeelding? of voor alle vier?
0
Berichten
93.699
Reputatie
0
Punten
1,27
Lid sinds
Laatst gezien
In elke div class box kan je een image zetten en tekst smile
Btw doe die code blokken van mijn quote in jou bericht even in spoiler tags biggrin.
0
Jordyvc

Lid · Topicstarter

Berichten
6.037
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Juist getest, en werkt niet. Ik bedoel echt dat de tekst naast de afbeelding staat. Nu staat hij gewoon eronder.
0
Berichten
93.699
Reputatie
0
Punten
1,27
Lid sinds
Laatst gezien
Sorry mijn fout, bij .box .image en bij .box .text moet je nog een width mee geven, gewoon ze alle 2 eens width: 40%; mee, en daarna kan je er zelf wel beetje mee spelen biggrin.
0
Jordyvc

Lid · Topicstarter

Berichten
6.037
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Xjessex schreef:
Sorry mijn fout, bij .box .image en bij .box .text moet je nog een width mee geven, gewoon ze alle 2 eens width: 40%; mee, en daarna kan je er zelf wel beetje mee spelen biggrin.
Ah oke bedankt, ff testen smile
toevoeging op 3 april 2012, 14:28:21:
Afbeelding
Dit is nu wat ik krijg? En eigenlijk moet het naast die afbeelding komen te staan?
0
Berichten
93.699
Reputatie
0
Punten
1,27
Lid sinds
Laatst gezien
Heb je een live demo?
Kan ik even in mn console kloten yummie
0
Berichten
15.446
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Doe gewoon:

<div id="jouwdivwaarindeplaatjeskomen"><img src="plaatje.ext" style="float:left; margin-right:10px;" alt="" />Tekst bla bla</div>


@Xjessex : waar dient die margin-bottom: xx px; in .box in hemelsnaam voor?
0
Jordyvc

Lid · Topicstarter

Berichten
6.037
Reputatie
0
Punten
0,00
Lid sinds
Laatst gezien
Bedankt, dat werkt! smile
0
Berichten
93.699
Reputatie
0
Punten
1,27
Lid sinds
Laatst gezien
Marjolein schreef:
Doe gewoon:

<div id="jouwdivwaarindeplaatjeskomen"><img src="plaatje.ext" style="float:left; margin-right:10px;" alt="" />Tekst bla bla</div>
@Xjessex : waar dient die margin-bottom: xx px; in .box in hemelsnaam voor?

Omdat die plaatjes anders onder elkaar staan, maar wel tegen elkaar?
0

Jouw reactie

Deel je idee, stel een vraag of help een ander verder.

Editor laden…

Praat mee met de One2xs-community.

Inloggen om te reageren