[css] plaatje in content, zonder aparte div class

zondag 22 november 2009 15:56

Acties:

0 Henk 'm!

Topicstarter

Voor school ben ik bezig met informatica. Nu is dit mijn eerste jaar en zijn we allemaal nog érg noob, maar vinden het wel interessant. Ik ben nu bezig met CSS + HTML.

Ik heb een pagina gemaakt met de volgende HTML-code:

code:

<html>
<head>
<title>HTML 4</title>
<link href="opmaak.css" rel="stylesheet" type="text/css"> 
</head>
<body>
<h1>Cursus HTML, opdracht 4</h1>

<br>
<div class="menu">
<a href="pagina1.htm">Home</a><br>
<a href="pagina2.htm">Foto's</a><br>
<a href="pagina3.htm">Over mij</a><br>
<a href="pagina4.htm">Contact</a><br>
</div>

<div class="content">
<center><p><b>Foto's</b></p></center>
<p>tekst</p>
</div>

<div class="plaatje1">
<img src="xbox360.jpg" alt="">
</div>

</body>
</html>

Zoals te zien in de code heb ik een aparte stylesheet: opmaak.css.

Nu wil ik graag "plaatje1" in de content krijgen, zodat het naast de tekst komt te staan. Ik heb al het één en ander gezien op internet, maar dan wordt er constant gepraat over backgrounds. Een background heb ik al in de content staan, en dat zorgt misschien voor verwarring?

(deel van) CSS-code:

code:

.content 
{
border: 1px solid #000000;
margin-left: 100px;
padding: 0px;
margin-right: 15px;
background-image:url('achtergrond.gif')
}

.plaatje1
{ 
position: absolute;
top: 100px;
margin-left: 600px;
}

Nu heb ik

code:

1	<img src="xbox360.jpg" alt="">

eens in de content div gezet, en dan komt hij daar inderdaad te staan. Maar hoe kan ik nu dat plaatje afzonderlijk een goede plaats geven binnen in de content?

Ik zou het erg fijn vinden als iemand zou kunnen helpen met het invoegen van plaatje1 in "content". Het lijkt me dat het moet kunnen. Bedankt.

[ Voor 6% gewijzigd door Kn4kw0r5t op 22-11-2009 15:58 ]

zondag 22 november 2009 16:00

Acties:

0 Henk 'm!

HuHu

HTML:

1	<img class="plaatje1" src="xbox360.jpg" alt="">

zondag 22 november 2009 16:29

Acties:

0 Henk 'm!

mocean

Of je werkt met id="plaatje1" omdat de css voor díe afbeeelding uniek is.
Verder is trouwens gebruik van <center> nogal ouderwets, en kan je menu beter in een <ul> i.p.v. <div>. Oftewel: gebruik de tags die wat betekenen (Semantiek)

Koop of verkoop je webshop: ecquisition.com

zondag 22 november 2009 16:53

Acties:

0 Henk 'm!

Cartman!

Paar tips vooraf:
- gebruik een doctype
- gebruik ipv. 
- gebruik geen <center></center> maar doe de uitlijning met CSS

Voor je probleem, je kunt de afbeelding binnen je paragraaf floaten met CSS, dan zal deze naast de tekst komen. Absoluut positioneren is bij dit voorbeeld niet de manier.

dinsdag 24 november 2009 07:02

Acties:

0 Henk 'm!

Sebazztiaan

sebas!

plaatje links bovenin:

xxx Hoi dit is mijn
xxx tekst, en ik laat
xxx hier zien dat ik
een inzet plaatje kan maken

x = plaatje, maar dat had je al door

code:

<div class="content">
  <p><img src="plaatje.jpg" />Hoi dit is mijn tekst, en ik laat hier zien dat ik een inzet plaatje kan maken.</p>
</div>

CSS

.content img {
  float:left;
  margin:0 10px 10px 0;
}

En zoals een vorige poster al vertelde, gebruik een doctype, bij voorkeur 1.0 strict http://www.w3.org/TR/xhtml1/. In die def zie je dat de tags <center> en niet meer bestaan!

Het gebruik van een doctype forceert dat IE6 niet naar quircksmode mag gaan!

[ Voor 25% gewijzigd door Sebazztiaan op 24-11-2009 07:04 ]

Onderwerpen