tekst naast afbeelding

[merlijn16]

Ik weet niet hoe ik tekst naast een afbeelding kan krijgen. De tekst komt nu boven en onder de afbeelding te staan.

Deze code heb ik staan in de css:

#picture1{
	margin-left: 400px;
        margin-top:  35px;
	height: 186px;
	width: 240px;
	background-image: url(images/c_aat.jpg);
        border: 5px solid #cccccc;

en deze staat in de XHTML pagina:

<div id="picture1"></div>

Ik hoop dat iemand me hiermee kan helpen.

 

[Frats]

Daarvoor moet je Float gebruiken.

Zie hier:
http://www.w3schools.com/css/pr_class_float.asp

En een voorbeeld:
http://www.w3schools.com/css/tryit.asp?filename=trycss_float

 

[merlijn16]

bedankt voor je reactie.
ik was al aan het puzzelen geweest met float. Maar werkte niet.

deze had ik in de ccs staan

img.floatlinks{
float: left;
margin: 4px;
}
img.floatrechts {
float: right;
margin: 4px;
}

en de in de xhtml pagina

<img src="images/c_aat.jpg" height="186" class=”floatlinks” />

er gebeurt dan niks

 

[Frats]

Heb je je DIV ook floatright gegeven? Dat zou nog wel eens kunnen helpen.

En heb je die aanhalingstekens gebruikt die in je post staan? Want dat zijn volgensmij niet de goeie, dat kan het ook nog zijn.

 

[merlijn16]

:thumb: dat was het probleem, die aanhalingstekens. Thanks!
Weet je misschien ook nog hoe ik een grijze border om het plaatje kan maken? Hoe ik dit in de html pagina moet zetten. Niet elk plaatje moet deze border hebben.

 

[Frats]

Ja hoor, je hebt een CSS property border die je kunt gebruiken:

http://www.w3schools.com/css/css_border.asp

http://www.w3schools.com/css/tryit.asp?filename=trycss_border-width

 

[merlijn16]

het lukt me wel om een border om tekst te krijgen met behulp van codes uit jouw link. Echter als ik code met plaatje gebruik, krijg ik 1 lijn boven het plaatje over de gehele paginabreedte.
Dit had ik van de code gemaakt met plaatje

<p class="one"><img src="images/c_aat.jpg" alt="" class="floatrechts" /></p>

Ik heb iets fout maar weet niet wat.

 

[merlijn16]

dit is de css code

img.floatlinks{
float: left;
margin-top:4px;
margin-right:15px;
}
img.floatrechts{
float: right;
margin-top:4px;
margin-left:15px;
}
p.one
{
border-style:solid;
border-color:ff0000;
}
p.two
{
border-style:solid;
border-color:#cccccc;
}

 

[Frats]

Je hebt de border nu om de paragraaf gedaan, maar een paragraaf gaat over de hele breedte van de pagina.

Als je hem alleen om het plaatje wilt, moet je die opmaak aan het plaatje zelf geven. Je kunt die class verplaatsen naar de image, dan ziet het er ws uit zoals jij wilt.

 

[merlijn16]

je bedoelt, ik moet de codes in de css zetten? Ik begrijp je niet.
ik wil niet elk plaatje een border geven.

 

[Frats]

Je moet het stijl element aan dat plaatje hangen, niet de paragraaf waar het plaatje instaat:

<p><img src="images/c_aat.jpg" alt="" class="floatrechts heeftrand" /></p>

.heeftrand{
  border-style:solid;
  border-color:ff0000;
}

 

[merlijn16]

wil niet echt lukken. Heb het anders opgelost. Ging maar om 2 plaatjes. Heb ze in tabel gezet. Dan krijg ik wel een border er omheen.
Bedankt voor je hulp.