[CSS] probleem met gefloate div's

[Verwijderd]

Hoi,

ik heb een probleem met div's. Ik heb een hoofddiv met een bepaalde width en daarbinnen bevinden zich een aantal div's die left gefloat zijn. ff om gemakkelijk te maken inline css he:

<div style='width:400px;'>
<div style='float:left;'>
<div>image</div>
<div>omschrijving</div>
</div>
<div style='float:left;'>
<div>image</div>
<div>omschrijving</div>
</div>
<div style='float:left;'>
<div>image</div>
<div>omschrijving</div>
</div>
</div>


Nu, hoe groter de foto (height), hoe groter de div. De div's die niet meer in de width kunnen van de hoofddiv springen automatisch naar beneden. De DIV springt wel naar beneden maar hij gaat meteen onder de kleinste div staan. Hij zou dus eigenlijk helemaal links moeten uitgelijnd staan onder de vorige div's maar dat doet ie niet. Zie voorbeeld:
voorbeeld

kan iemand me even helpen, kheb serieus gezocht

[ Voor 88% gewijzigd door Verwijderd op 04-07-2005 16:12 ]

[Verwijderd]

Probeer de drie bovenste divjes in een andere div te zetten met een float: left.

Lijkt me de oplossing..

[disjfa]

Hij float de div gewoon left waar je dit vraagt. Aangezien hij daar nog een stukje heeft om neer te zetten zal hij deze niet op de volgende regel zetten maar precies zoals in jouw voorbeeld.

Lost je op door een clear:left of een vaste hoogte aan de imagedivs te geven.

[Verwijderd]

disjfa schreef op maandag 04 juli 2005 @ 16:20:
Hij float de div gewoon left waar je dit vraagt. Aangezien hij daar nog een stukje heeft om neer te zetten zal hij deze niet op de volgende regel zetten maar precies zoals in jouw voorbeeld.

Lost je op door een clear:left of een vaste hoogte aan de imagedivs te geven.

Lijkt me een betere oplossing

[Zoefff]

Hetzelfde probleem als wat ik een tijdje geleden had, zie [rml][ css] List stylen als "tabel", in een raster[/rml] .

Ik heb het uiteindelijk opgelost door de items een vaste hoogte te geven. Een andere oplossing is om het 3*n^e item clear:left mee te geven

[Verwijderd]

Het zou idd goed zijn het derde een float left mee te geven maar het probleem is dat de fotos uit een databank komen en de breedte en de grootte van de foto kan altijd verschillend zijn... er kunnen dus ook bijvoorbeeld ooit 5 fotos op een rij staan of 3....

[Zoefff]

Tsja, dat heb ik opgelost door een thumnailscript te maken dat vierkante plaatjes uitpoept met boven/onder of links/rechts een opvulling om ze vierkant te maken. Is dat geen optie? Sowieso oogt het wel rustiger dan wanneer je op de 1e rij 5 foto's hebt staan, dan 3, en dan weer 4 (met ook nog eens verschillende hoogtes)

[Verwijderd]

Zoefff schreef op dinsdag 05 juli 2005 @ 17:04:
Tsja, dat heb ik opgelost door een thumnailscript te maken dat vierkante plaatjes uitpoept met boven/onder of links/rechts een opvulling om ze vierkant te maken. Is dat geen optie? Sowieso oogt het wel rustiger dan wanneer je op de 1e rij 5 foto's hebt staan, dan 3, en dan weer 4 (met ook nog eens verschillende hoogtes)

Ik denk dat ik gewoon in php ga kijken hoe breed de fotos is die ik oproep en als het totaal bijvoorbeeld 500 pixels overschrijd ga ik left clearen. thx

[Zoefff]

Dat is ook een oplossing idd

Ik maak die thumbs iig op deze manier:

PHP:

    // Maak nieuwe thumbnail aan van afbeelding $path, en sla 'm op in $path/thumbs_generated/ als $filename
    // Thumbnail is vierkant, 120px. Restruimte word opgevuld met zwart, en foto in het midden gepositioneerd
    function CreateThumb($path, $filename)
    {
        $orig_img = imagecreatefromjpeg($path . "/" . $filename);
        $orig_w = imagesx($orig_img);
        $orig_h = imagesy($orig_img);
        
        if($orig_w > $orig_h) {
            $diff = $orig_w/$orig_h;
            $new_w = 120;
            $new_h = $new_w/$diff;
            $dest_x = 0;
            $dest_y = 60-($new_h/2);
        }
        elseif($orig_w < $orig_h) {
            $diff = $orig_h/$orig_w;
            $new_h = 120;
            $new_w = $new_h/$diff;
            $dest_x = 60-($new_w/2);
            $dest_y = 0;
        }
            
        $new_img = imagecreatetruecolor(120,120);
        imageantialias($new_img, TRUE);
        imagecopyresized($new_img,$orig_img,$dest_x,$dest_y,0,0,$new_w,$new_h,imagesx($orig_img),imagesy($orig_img));
    
        if(!file_exists($path . "/thumbs_generated")) {
            mkdir($path . "/thumbs_generated");
            chmod($path . "/thumbs_generated", 0777);
        }
        
        if(imagejpeg($new_img, $path . "/thumbs_generated/" . $filename, 90)) {     
            return true; 
        }
        else {
            return false;
        }
    }

[Verwijderd]

volgens mij is je eerste opzet gewoon goed, alleen vergeet je width aan de 'ge-floate-divs' mee te geven ... zonder width is een div volgens mij altijd width:100%.