[css] hele hoop div's naast elkaar binnen containing block - Softwareontwikkeling

vrijdag 10 januari 2003 13:19

Acties:

Verwijderd

Topicstarter

Ik heb een hele rij plaatjes, elk plaatje zit in een div.
Zo:
<div class="hoofdstuk">
<div class="inhoud">
<div class="fotocontainer"></div>
<div class="fotocontainer"></div>
<div class="fotocontainer"></div>
<div class="fotocontainer"></div>
<div class="fotocontainer"></div>
<div class="fotocontainer"></div>
<div class="fotocontainer"></div>
<div class="fotocontainer"></div>
<div class="fotocontainer"></div>
<div class="fotocontainer"></div>
<div class="fotocontainer"></div>
<div class="fotocontainer"></div>
</div></div>

De buitenste box zorgt voor een leuk randje.
Ik wil dat de div naast elkaar zitten totdat er geen plek is en dan moeten ze beginnen aan de volgende rij.

Float:left zorgt daar wel voor, maar de buitenste box (class="hoofdstuk") wordt niet mee uitgerekt, waardoor de binnenste divjes over de rand schieten
Hoe krijg ik het voor elkaar dat deze ook wordt uitgerekt?]
Of moet ik een andere methode gebruiken? (iets met de display property van div class="fotocontainer")

vrijdag 10 januari 2003 13:22

Acties:

Clay

cookie erbij?

display:table-cell (of inline. moz)
float:left (ie)
of gewoon geen div gebruiken om de images heen, maar een inline element, span oid

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

vrijdag 10 januari 2003 13:46

Acties:

Verwijderd

Topicstarter

Bedankt, maar als ik table-cell gebruik dan vliegen ze recht uit de bocht (en uit mijn scherm)
Hoe krijg ik dat dan gefixed?

Float:left, dat zal in ie wel werken, maar kan momenteel alleen Mozilla testen. Deze heeft betere css-support, en ik vind het belangrijk dat ik daar naar luister.

Als ik display:inline gebruik, krijg ik gekke dingen die erg moeilijk zijn te beschrijven. De plaatjes komen iig niet naast elkaar te staan. Ze komen toch min of meer onder elkaar te staan.
Als ik dit doe:
.fotocontainer {display:inline}
.fotocontainer img{display:block;float:left} dan komen de plaatjes wel naast elkaar, maar nog niet helemaal goed. Elk opeenvolgende plaatje komt net iets lager. Waar ligt dat nou weer aan?

vrijdag 10 januari 2003 14:42

Acties:

Clay

cookie erbij?

HTML:

<html>
<head>
<style type="text/css">
.blok {
    width:100px;
    height:100px;
    
    background:silver;
    padding:2px;
    margin:1px;
    border:1px solid gray;
    float:left;
    display:table-cell;
}
</style>
</head>

<body >

<div>
    <div class="blok">hoi</div>
    <div class="blok">hoi</div>
    <div class="blok">hoi</div>
    <div class="blok">hoi</div>
    <div class="blok">hoi</div>
    <div class="blok">hoi</div>
</div>

</body>
</html>

dit werkt bij mij in ie en moz. ie laat de margin zien (hoewel dat volgens mij niet moet bij floatende elementen) en moz niet.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

vrijdag 10 januari 2003 15:24

Acties:

Verwijderd

Topicstarter

Ik heb aan de hand van dat voorbeeldje dit gemaakt:

HTML:

<html><head><style type="text/css">
#tt{
width:600px;
background-color:blue;
}
.blok {
    width:100px;
    height:100px;
    
    background:silver;
    padding:2px;
    margin:1px;
    border:1px solid gray;
    float:left;
    display:table-cell;
}</style>
</head>
<body >
<div id="tt">
    <div class="blok">hoi</div>
    <div class="blok">hoi</div>
    <div class="blok">hoi</div>
    <div class="blok">hoi</div>
    <div class="blok">hoi</div>
    <div class="blok">hoi</div>
</div></body></html>

In IE doet het goed, het laatste blokje gaat naar beneden, in Mozilla gaat die gewoon door. Ik wil dat Mozilla hetzelfde doet als IE. Kan dat?

edit:had ik moeten doen, voorbeeldje maken, sorry.

[ Voor 22% gewijzigd door Verwijderd op 10-01-2003 15:26 ]

vrijdag 10 januari 2003 16:12

Acties:

Clay

cookie erbij?

je hebt nu 6 vakjes van 100 breed, met een margin van 1, = 102 * 6 = 612, dat past inderdaad niet in de opgegeven 600. Mozilla neemt de margin niet mee, dus dat past dan net wel.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

vrijdag 10 januari 2003 18:12

Acties:

Verwijderd

Topicstarter

Stom van mij om net zo'n voorbeeld te pakken wat net goed past, maar als ik de breedte aanpas van de #tt div naar 400 px, dan versmallen de .blok divjes tot ze passen in de 400px. Dit is volgens mij wel goed, omdat ze display: table-cell hebben, maar dat is niet wat ik wil.
Ik wil eigenlijk dat gedrag wat IE (wat hij eigenlijk in dit voorbeeld al foutief doet) doet.

Ik zat ook zo naar die display properties te kijken, en toen dacht ik, ik moet display:inline-table hebben, maar Mozilla ondersteunt deze (nog) niet. Is er nog een andere manier om hetzelfde gedrag (wat ik in voorgaande post al heb beschreven) als IE te krijgen?

vrijdag 10 januari 2003 18:20

Acties:

Verwijderd

zijn die divs eromheen echt nodig? als je ze gewoon weglaat, is dat geen oplossing, plaatjes zin gewoon inline elementen die wel drijven

vrijdag 10 januari 2003 21:37

Acties:

Verwijderd

Topicstarter

Ja die divs zijn echt nodig. Op die plekken zet ik dynamisch de plaatjes erin.
Maar ik zit me net te bedenken dat ik een sukkel

ben, want ik bedenk me net dat ik behalve dat plaatje ook een br er neerzet met een stuk tekst.
Dus als ik de fotocontainer div op display inline zet, dan zorgt die br er natuurlijk voor dat die dingen onder elkaar komen te liggen. Gewoon iets anders verzinnen voor die br dus.

zaterdag 11 januari 2003 11:48

Acties:

UltraNerd

Ik vermoed dat je op zoek bent naar iets als op deze pagina.
http://www.realworldstyle.com/thumbs_3.html

Als je de pagina resized worden de thumbs automatisch ingedeeld.

zaterdag 11 januari 2003 13:02

Acties:

Verwijderd

Topicstarter

Hey, bedankt UltraNerd!
Dat is precies wat ik zoek. De methode is dus toch float:left voor de divs die plaatjes bevateen en voor de div die alle plaatjes bevat moet ik aan het begin en eind een div zetten met div.spacer { clear: both; } en <div> </div>
Dit is eigenlijk wel een beetje een vervuilende code, maar er is geen andere manier om dit op te lossen. Toch wel gek eigenlijk dat je tot dat soort hacks moet wenden, terwijl de browser in kwestie volgens de w3c specs werkt.

zaterdag 11 januari 2003 14:23

Acties:

UltraNerd

Ik ben het niet helemaal eens met je opmerking over de 'hack' (ik ben het wel een beetje met je eens). De auteur van die pagina legt het zelf heel goed uit:

However when we do this we run into a problem. When you float an element with CSS, it no longer takes up any "space" and the background and border show up above the images instead of surrounding them.

Dus als je die spacers niet opneemt dan blijft het container block leeg en loopt de rendering niet zoals je zou willen. Maar met die spacers, waarvan je opgeeft dat er niets naast mag komen, forceer je het gewenste gedrag. Omdat het gedefinieerd gedrag is zou ik het geen hack, maar meer een truuk willen noemen... Wat maakt het eigenlijk uit...