Hallo lezers,

Ben een website aan het maken alleen loop ik vast op het uitlijnen van de inhoud van het content gedeelte. Zie ik een automatisch gedeclareerde waarde over het hoofd?
Het komt er op neer dat ik een stuk tekst heb met daaronder 2 plaatjes. De tekst is keurig links uitgelijnd maar de plaatjes blijven gecentreerd. Heb de wereld aan relevante topics gevonden en toch kom ik er niet uit. Heeft iemand een suggestie? een wrapper opmaken wellicht?

groet,

Steven

Standaard staat een afbeelding naast één regel en de rest van de tekst volgt eronder.
Een afbeelding is een inline object en denk je in dat een afbeelding is als een smiley in de tekst.
Die staat keurig in de regel, maar als de afbeelding groter is dan de regel schuift de volgende regel door tot onder de afbeelding.

Als je een afbeelding wilt uitlijnen maak je er een float element van.

Dat doe je als volgt:

Code:

<div class="container">
   <img src="URL" style="float:left;"> Hele lange text.
   <div style="clear:both"></div>
</div>

De "clear" div zorgt ervoor dat de container div altijd de grootte aanneemt van de afbeelding of de tekst (afhankelijk van wat groter is). Doe je dit niet dan kan de afbeelding "uitbreken" uit de container.

Nog geen resultaat. Maakt het uit of je een id of een class gebruikt?

De code is als volgt:

<div class="content">

Tekst tekst tekst

<img src=img/ssj.jpg><p>
<img src=img/ssj2.jpg><p>

</div>

style declaratie als volgt:

.content {
width: 607px;
height: 380px;
position: absolute;
top: 227px;
left: 340px;
overflow-x: hidden;
overflow-y: auto;
}

Zoals Wilbert al aangaf dien je bij de afbeelding een style="float:left;" toe te voegen. Deze mis ik nog in jou code!

Hier heb je een voorbeeld: http://jsfiddle.net/bL7wm/
Afbeelding links en een afbeelding rechts uitgelijnd.

Ja ik geef alleen even het kale stukje code aan met ruimte voor toevoegingen. Maar zowel de float:left intern als in stijlblad geeft geen resultaat.

en als je er !important achter zet?

float:left !important;

Plaats je code eens in een JSFiddle dan kunnen we er naar kijken.

Hoi,

Ik moet even uitzoeken hoe ik dat doe.

groet Steven

Waar kan ik vinden m.b.t. JSFiddle te gebruiken?

Een beetje initiatief mag wel ;-)

http://jsfiddle.net/ en als je daar je code hebt geplaatst dan klik je op "Save" waar na er een unieke url wordt aangemaakt die je hier kan plaatsen.

hoi bij deze,

http://jsfiddle.net/4q7QT/

Maar hier is het alt tekstje wel goed geordend....

Allereerst heb je een paar hele vreemde paragraaf "P" elementen.
Als je die weghaalt en de float:left op de afbeeldingen zet dan werkt het prima.

http://jsfiddle.net/4q7QT/2/

Ik heb nu de paragrafen weg ge haald. Nu komen de plaatjes gecentreerd als of die float:left niet werkt. Of ik zie iets stompzinnigs over het hoofd.

Er ontbreken sowieso een aantal aanhalingstekens in de broncode, juist bij de afbeeldingen. Tenzij dat bewust zo is. De plaatjes staan bij mij trouwens gewoon links uitgelijnd, naast elkaar (Windows 8.1, Firefox).

Als beide afbeeldingen naast elkaar passen in die div, dan komen ze naast elkaar. Als je dat niet zou willen en rond de afbeeldingen een div plaatst die net zo breed als één afbeelding is (of in ieder geval smaller dan 2 afbeeldingen naast elkaar) dan zou de 2e afbeelding er onder moeten komen.

Edit: als dit in je 'live' versie anders werkt, dan is het hoog tijd voor een reset CSS.