Werken met float

[Johnvans]

Hallo daar.

Ben bezig met een site. Ik wil de tekst in div text laten uitlijnen en links van het plaaytje (div picture) laten lopen. Nu weet ik dat de code css code float daarvoor gebruikt moet worden. Het lukt me echter niet om dat voor elkaar te krijgen. Dit zijn de css codes. Kan iemand me helpen? Dank alvast.

div#text {
position: absolute;
top: 179px;
left: 204px;
width: 446px;
height: 680px;
z-index: 10;
text-align: justify;
}

div#picture1 {
position: absolute;
top: 601px;
left: 207px;
width: 408px;
height: 188px;
text-align:center;

 

[gast0231]

Waarom gebruikt je voor een afbeelding DIV's als hier al gewoon elementen vorr geïntegreerd zijn...? Kijk hier maar eens naar...

 

[Naarling]

Zonder de volledige code en een goede beschrijving van wat het probleem is blijft dit natuurlijk een gok maar ik denk dat het ligt aan het feit dat je position:absolute; gebruikt voor plaatje en tekst. Overigens heeft gast0231 gelijk dat het geen zin heeft een enkel plaatje in een div te stoppen.

 

[Johnvans]

Re:

Hoi Naarling,

Je hebt het over het verschil tussen absolute en relative. Ik gebruik tot op heden steeds het commando absolute. Kun je aangeven wat precies het verschil is? Dat heb ik nog steeds niet begrepen.

Groet,
John

 

[Johnvans]

Re:

Hoi daar...

Ik heb de div picture 1 verwijder en in de tekst rechtstreeks het plaatje geplakt.

<img src="img/home.jpg" align="right" width="166" height="155" hspace="10" border="0" />

Probleem is nu alleen dat de hspace niets doet. De tekst staat pal tegen het plaatje aan. Doe ik iets fout?

Groet
John

 

[Naarling]

Probleem is nu alleen dat de hspace niets doet. De tekst staat pal tegen het plaatje aan. Doe ik iets fout?

Zeker doe je iets fout. Je hoort dat soort dingen via CSS op te lossen niet in de html. Als je in de CSS iets als
img{
margin:5px;
}
zet dan krijgen alle plaatjes een marge van 5px om zich heen. Het hspace element is verouderd en werkt niet meer in html 4.01 strict en nieuwe.

Je hebt het over het verschil tussen absolute en relative. Ik gebruik tot op heden steeds het commando absolute. Kun je aangeven wat precies het verschil is? Dat heb ik nog steeds niet begrepen.

Kort gezegd, een element met position:relative; plaats je een element relatief ten opzichte van de elementen er omheen. Als je het element vervolgens verteld om, zeg, tien pixels naar rechts te gaan dan gaat het tien pixels naar rechts ten opzichte van het element waar het naast staat. Een element met position:absolute; wordt uit deze stroom gerukt en geplaatst ten opzichte van de hele pagina. Het element tien pixels naar rechts verschuiven houdt dan in dat het tien pixels bij de rand van de site vandaan gaat. Een bijkomend effect is dat een element met position:absolute; zonder problemen boven of onder andere elementen kan schuiven.

Ik denk trouwens dat je je, voordat je verder gaat met het bouwen van je site, even in moet lezen. Dit kan, onder andere, op http://dev.opera.com/articles/view/1-introduction-to-the-web-standards-cur/ en http://www.web-garden.be/ De informatie daar is redelijk bij de tijd.