[HTML + CSS] Afbeelding en tekst netjes positioneren

[-Matthijs-]

Voor school werk ik op dit moment aan een website. Inmiddels is de site nagenoeg af (met dank aan Thundercover ), maar als finishing touch wil ik een pagina nog een beetje aankleden. Op deze specifieke pagina kun je data invoeren en wanneer je submit, wordt er een pagina gegenereerd die overeenkomt met de ingevoerde waarden. De pagina kent in totaal vijf vragen, die ik wil onderverdelen in vijf stappen. In mijn hoofd ziet dat er zo uit:

En dit is waar het moet komen (onder het stukje tekst):

Hoe pak ik dit aan in CSS en HTML? Tekst en een afbeelding op de pagina zetten is natuurlijk geen probleem, maar alles juist positioneren wel. Moet ik bijvoorbeeld de afbeelding en de tekst in dezelfde div zetten? Of beide in een aparte? De website bestaat globaal gezien uit div links (het menu) en div rechts (de content).

Het antwoord zal ongetwijfeld heel simpel zijn, maar wie o wie kan me op weg helpen? Bij alles wat ik geprobeerd heb (aparte divjes, tabel) verschuift de boel helemaal of staat het niet netjes.

[MegaPilot]

Ik ben zelf geen expert in HTML/CSS, maar ken er wel wat van. Het antwoord is niet zo simpel, we kunnen je niet meteen de juiste weg opsturen, want het hangt echt af van hoe jij je site ineen gestoken hebt. Post hier eens je code? HTML én CSS, uiteraard.

[.Timothy]

Tekst en afbeeldingen kunnen gewoon in één div. De tekst hoort officieel (iets met webstandaarden) binnen een p-element. Afbeeldingen hoef je niet in een apart div-element te plaatsen. Dat laatste mag wel, maar is niet nodig tenzij je echt gekke dingen wilt maken.

Kortom, zodra jij niet vreemde fratsen uithaalt met float of absolute posities, kun je gewoon je uitslag (inclusief afbeeldingen) binnen de div laten.

Voor echt probleemspecifieke adviezen wil ik net zoals MegaPilot wel graag je code zien, aangezien ik nu echt heel erg algemeen wat uitleg geef

[Rutger.]

Aangezien je gebruik wil maken van een soort van opsomming, denk ik dat de beste optie is om een ordered list te gebruiken.

<ol>
 <li>Tekst 1</li>
 <li>Tekst 2</li>
 <li>Tekst 3</li>
</ol>

Daarna zou je met CSS de cirkels kunnen tekenen en de getallen voor de elementen in je lijstje een ander (en groter) font geven. Hierbij zijn is de volgende CSS code het belangrijkste:

ol li:before
{
   width: 60px;
   height: 60px;
   background: gray;

   -moz-border-radius: 999px;
   border-radius: 999px;
}

Zie een JSFiddle die ik even voor je heb aangemaakt: http://jsfiddle.net/5LLVr/

Gebaseerd op deze Fiddle: http://jsfiddle.net/j2gK8/

[-Matthijs-]

Dat ziet er goed uit, ZaroX! Ga ik direct even proberen, bedankt!

Het is mezelf inmiddels ook gelukt overigens (natuurlijk net nadat ik de vraag gesteld heb). Ik heb voor elke afbeelding en stukje tekst een div gemaakt, dat ziet er dan zo uit:

<div id="afbeelding">
<img src="../images/stap1.png" alt="stap 1"/>
</div>
<div id="tekst">
<p>Wdio wddowi jda jdpwj dpawidj apwh ihdw oihdwoaihd oidhw ioahd.</p>
</div>
<div id="afbeelding2">
<img src="../images/stap2.png" alt="stap 1"/>
</div>
<div id="tekst2">
<p>Wdio wddowi jda jdpwj dpawidj apwh ihdw oihdwoaihd oidhw ioahd.</p>
</div>
<div id="afbeelding3">
<img src="../images/stap3.png" alt="stap 1"/>
</div>
<div id="tekst3">
<p>Wdio wddowi jda jdpwj dpawidj apwh ihdw oihdwoaihd oidhw ioahd.</p>
</div>
<div id="afbeelding4">
<img src="../images/stap4.png" alt="stap 1"/>
</div>
<div id="tekst4">
<p>Wdio wddowi jda jdpwj dpawidj apwh ihdw oihdwoaihd oidhw ioahd.</p>
</div>

CSS:

#afbeelding {
margin-top: 30px;
margin-left: 270px;
}
#tekst {
margin-left: 75px;
margin-top: -35px;
color: #ff0000
}
#afbeelding2 {
margin-top: 60px;
margin-left: 270px;
}
#tekst2 {
margin-left: 75px;
margin-top: -30px;
color: #ff0000
}
#afbeelding3 {
margin-top: 60px;
margin-left: 270px;
}
#tekst3 {
margin-left: 75px;
margin-top: -30px;
color: #ff0000
}
#afbeelding4 {
margin-top: 60px;
margin-left: 270px;
}
#tekst4 {
margin-left: 75px;
margin-top: -30px;
color: #ff0000
}

Het werkt, maar volgens mij is dit niet echt een 'nette' manier.

[.Timothy]

Klopt, want id gebruiken is in dit geval overbodig volgens mij Je kunt namelijk ook een div toevoegen voor het getal, waar je één generieke class aan toevoegt waar je in je CSS naar verwijst. Vervolgens hoef je dan alleen een p erachter zetten die de begeleidende tekst voorziet (daar hoeft dus ook niet per se een div omheen).

Klein detail: je vergeet bij de kleur de puntkomma (semicolon).

[Rutger.]

Dat werkt inderdaad en er is op zich niet veel mis mee. Echter is het beter als de gebruiker minder plaatjes hoeft in te laden. Je zou ook een standaard cirkel zonder becijfering als background-image in kunnen stellen en daarna op de voorgrond de cijfers weer kunnen geven. Hierdoor hoef je maar een enkele afbeelding in te laden, tevens hoef je niet veel aan je bestaande oplossing aan te passen

[Big Boss]

Ik denk dat 't zelfs mogelijk is met CSS3 border-radius.

.circle {
width: 150px;
height: 150px;
border-radius: 50%;
}

Edit: Al een keer aangehaald. Beter lezen in het vervolg. :$