twee plaatjes naast elkaar in een div verschuiven

Status
Niet open voor verdere reacties.
O

Orcaa

Gebruiker
Lid geworden
1 nov 2010
Berichten
125
heb in een div wee plaatjes die naast elkaar moeten komen staan. Dit is gelukt door ze in een span te zetten.

<body>
<div id="header">
<span>
<img src="G:\data\2010\sites\testsite divs\mes.jpg">
<img src="G:\data\2010\sites\testsite divs\Reptielen_710x161_tekst.jpg"><
</span>
</div>

Maar nu het probleem. Als je de browser window kleiner maakt dan verschuift het tweede plaatje naar de volgende regel en ik wil dat ze naast elkaar blijven staan.

Hoe kan ik dit met css aangeven zodat plaatjes naast elkaar blijven
 
Hoi Orcaa,
Als je de <body> een breedte geeft van de breedte van de twee plaatjes samen, ben je ervan af. Met {margin: 0 auto;} kan je tegelijkertijd de pagina mooi centreren. Mocht dan het scherm te klein zijn om de twee plaatjes te tonen, dan komt er onderin een horizontale schuifbalk. *)
Code: 
body {
    width: ...px;
    margin: 0 auto;
    }
De huidige <span> is in dit geval niet nodig: images zijn uit zichzelf inline elementen, en komen naast elkaar als er ruimte genoeg is.
Mocht je in de body en/of de #header nog een padding hebben staan, dan moet je eventueel nog wat vlooien met de breedte.
O ja, om de images precies aansluitend te maken (er komt nu een spatie-ruimte'tje tussen), moet je in de html zetten:
HTML: 
<div id="header">
    <img src="G:\data\2010\sites\testsite divs\mes.jpg"><img 
    src="G:\data\2010\sites\testsite divs\Reptielen_710x161_tekst.jpg"><
</div>
... dus met de afbreking binnen de tweede img-tag. Of het met css regelen via:
Code: 
#header img {
    margin: 0;
    }

Met vriendelijke groet,
CSShunter

*)
Ik zou ernaar streven om de plaatjes samen niet breder dan ca. 980px te maken, dan past de site er nog mooi op bij een resolutie van 1024*768px.
 
Dank je wel CSHunter

met de aanpassingen van je in de body staan nu de plaatjes netjes naast elkaar ook bij het verkleinen van de window
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan