Zwevende Elementen , 3 div's naast elkaar lukt niet.

[KREEFTMEIJER]

Probeer meerdere div, naast elkaar te krijgen de code CSS is

div.bord {
background: red;
float: left;
margin: 13px;
padding: 13px;
width: 130px;
text-align: center;
height: 200px;
}

div.bord p {
margin: o;
padding: 0;




}

HTML

<div class="bord">


<img class="bord" src="images/page-img04.jpg" alt=>
<p>&nbsp;</p>
<p align="center" class="style6"> DE BAAS </p>
<p align="center" class="style7">Waarom is de baas boos. Dat weet niemand. Waarom weet niemand dat.</p>
<p align="center" class="style7">&nbsp; </p>


<img class="bord" src="images/page-img04.jpg" alt="verkeersbord">
<p>VERKEER</p>


<p>&nbsp;</p>


Er staat een duidelijke float maar de afbeelding kruipt er toch onder.

Vraag 2 : Ik wil een absolute hoogte.


staat op

www.cinemashop.nl/kennet.html

 

[csshunter]

Hoi Henk,
Je hebt in de css de class="bord" alléén vastgeknoopt aan div's die een class="bord" hebben, en aan de p's die daarbinnen zitten:

div.bord {
   ...
   }
div.bord p {
   ...
   }

De images reageren dan helemaal niet op de class="bord" !
Dus krijgen de images ook niet de float.
Het kan opgelost worden door er .bord {...} van te maken, dan reageren de images met die class er wel op. Maar dan reageren ze op alles van die class, dus bv. ook op de opgegeven breedte en hoogte. Dan zou er weer .bord img {...} bij moeten om dat te corrigeren.

Maar het makkelijkst lijkt me om de div een andere class of id te geven dan de images, dan kan je goed alles apart regelen.

=======
Bij vraag 2:
Wat moet een absolute hoogte krijgen?

 

[KREEFTMEIJER]

Hoi csshunter,

Tot heden heb ik altijd werkende stukken css/html gekopieerd, dit is mijn eerste poging zelf de code te schrijven.
Het voorbeeld wat ik gebruik heb ik keurig overgeklopt uit het boek Css, als je snel resultaat wilt, maar helaas.
Ik begrijp niet helemaal wat je bedoelt met

de div een andere class of id te geven dan de images,

Kan je hier een voorbeeldje van geven.
Wat ik wil bereiken dat ik vier of vijf afbeelding zoals voorbeeld BAAS krijg. naast elkaar en daaronder weer vier.

Groet,
Henk

 

[KREEFTMEIJER]

Ik heb nu wel vier vakken naast elkaar gekregen, maar hoe krijg ik daar een image in ??

Henk

 

[KREEFTMEIJER]

Het is gelukt, code gebruikt van zwevende elementen, http://www.handleidinghtml.nl/css/css-elementen/css-elementen06.html
HTML maar wat geknutseld.

Hartelijk dank.

Henk

 

[csshunter]

Ja, ik zie op je experimenteerpagina dat het aan het lukken is met de floats.
Spannend hè, zelf uitvinden?! Mijn ervaring: het gaat soms langzamer dan je wilt, maar op deze manier vergeet je het nooit meer!

Nog wat tips:

• Je weet dat een padding altijd opgeteld wordt bij de breedte en/of hoogte van een element? (daarom zijn de rode en blauwe div3 en div4 kleiner dan hun buren).
• Het gebruiken van een <p> met daarin alleen een &nbsp; om afstand te creëren, is meestal geen goed idee. Bij een andere lettergrootte kunnen ze rare dingen gaan doen, en ook als je ze gaat invullen met echte tekst.
• Afstanden maken gaat meestal goed met een margin (margin-top bijvoorbeeld).
• Om te zien waar die <p>'s met &nbsp; uithangen, en wat ze eigenlijk doen, kan je er in plaats van <p>&nbsp;</p> bv. in zetten: <p>leeg1</p>, <p>leeg2</p> enz.
  - Als je de <div>'s goed hebt opgebouwd, zijn ze vaak overbodig.
• Als je een float ergens hebt, komt het volgende element zonder float er naast te staan, als (en voor zover) daar ruimte voor is.
• Wil je dat een volgend element onder de float begint, dan moet er een clear gegeven worden; staat ook in het andere float-hoofdstukje van de handleidinghtml.nl.