[CSS] Float meegroei probleem - Softwareontwikkeling

donderdag 25 december 2008 17:08

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ben bezig met een nieuwe lay-out voor mijn site en heb een probleem waarbij ik denk dat het ligt aan de floats die ik gebruik. Heb in het forum gekeken naar meerdere onderwerpen hierover maar de oplossingen daar helpen mij niet.

Ik wil het volgende bereiken:
Afbeeldingslocatie: http://nielsvos.ath.cx/layout.gif

Afbeeldingslocatie: http://nielsvos.ath.cx/layout.gif

Maar wat ik wil is dat de div CONTENT of PHOTOS meerekken naar rechts als er meer fotos komen (heb de fotos naast elkaar gepositioneerd middels een left float. Nu lukt het me alleen als ik de PHOTOS div een width opgeef die groot genoeg is, maar ik wil dat dit automatisch meerekt met de inhoud van de divs.

Ik heb daarbij de volgende html en css code:

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
<head>
  <title>Niels Vos Photography :: Landscape </title>

    <link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
</head>
    
<body>
    
    <div id="sitebox">
            
            <div id="left">
                <h1>Niels Vos Photography 2009</h1>
                
                <div id="menu">
                                        
                </div>
            </div>
            
            <div id="content">
                    <div id="photos">
                                <img src="work/landscape/land021.jpg" alt="" />
                                <img src="work/landscape/land014.jpg" alt="" />
                            </div>
                        </div>
</div>
</body>
</html>

Cascading Stylesheet:

* {
    margin: 0px;
    padding: 0px;
}

body    {
    background: #141414 url('../images/main-bg.gif') repeat-y;
    color: #fff;
    font-family: 'Lucida Grande', "Verdana";
}

#sitebox    {
    margin: 40px 40px 0px 40px; 
    height: 500px;
}

#left   {
    position: absolute;
    left: 40px;
    margin: 0px;
    width: 300px;
    height: 500px;
}

    h1  {
        width: 300px;
        height: 150px;
        background: url('../images/logo.gif') no-repeat;
        text-indent: -3000px;
        
    }

    #menu   {
        width: 300px;
        height: 350px;
        background: #444444 url('../images/menu-bg.gif') repeat-y;
        color: #000;
    }

    #content    {
    margin: 0px 0px 0px 300px;
    }
    
    #photos {
    padding: 15px 0px 15px 15px;
    height: 470px;
    background: #fff;
    color: #000;
    }
    
    #content img    {
        float: left;
        margin: 0px 15px 0px 0px;
    }

Iemand tips hoe ik dit probleem oplos?

donderdag 25 december 2008 17:12

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Zoekwoordje: Faux Column

Anyone who gets in between me and my morning coffee should be insecure.

donderdag 25 december 2008 17:35

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Met Faux-Colum kom ik er niet uit, het gaat niet om verticale kolommen. De hoogte van de site is gefixeerd op 500 pixels. Het enige wat moet gebeuren is dat het gele vlak in mijn voorbeeld meerekt naar rechts (de width dus) op het moment dat er meerdere plaatjes in komen te staan (welke een float: left; hebben)

Ik heb nog eens getest maar denk dat het niet aan de float ligt. Ik heb nu een testafbeelding gebruikt met een lengte van 1600 pixels. Ik heb de float: left weggehaald, maar nog steeds groeit zijn parent div (#photos en ook de parent daar weer van #content) niet mee.

Sterker nog, ik heb eens een test html-etje gemaakt:

HTML:

<HTML>
<BODY bgcolor="#444444">
<div style="padding: 15px; background: #fff;"><img src="foto.gif"></div>
</BODY>
</HTML>

Hierbij is foto.gif een plaatje van 1600x470 pixels.
En nu groeit de div ook niet mee met de afbeelding, dus ik denk dat het ergens anders aan ligt, hij wil in de breedte niet graag meegroeien.
En nog gekker, als ik hetzelfde html-etje gebruik met een afbeelding van 400x1600 pixels groeit de div vertikaal foutloos mee, maar is de width opeens 100% ook al heb ik dat nergens opgegeven

[ Voor 63% gewijzigd door Verwijderd op 25-12-2008 18:03 ]

donderdag 25 december 2008 18:39

Acties:

0 Henk 'm!

dB90

doctype toevoegen en div foto's een float left geven?

Webberry Webdevelopment

donderdag 25 december 2008 19:00

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

dB90 schreef op donderdag 25 december 2008 @ 18:39:
doctype toevoegen en div foto's een float left geven?

Hoezo doctype toevoegen? Die heeft mijn pagina overigens wel, maar heb het voor de overzichtelijkheid niet toegevoegd in mijn code hier.

De div fotos een float left geven helpt niet.
Ik heb nu uberhaupt geen float meer in mijn site staan, maar als ik de width voor #photos niet invul komen de fotos onder elkaar. als ik de width een waarde geef die in elk geval groter is dan de fotos samen komen ze naast elkaar.

En dat laatste is nou net wat ik wil, alleen wil ik niet de waarde moeten invullen want als ik dan fotos toevoeg moet ik dit elke keer veranderen. Iemand hier een oplossing voor?

donderdag 25 december 2008 22:38

Acties:

0 Henk 'm!

Borizz

Een DIV is een block level element, dit houdt onder andere in dat een DIV element de volle breedte van zijn parent overneemt. De CSS overflow property geeft aan wat er gebeurt als content over de grenzen van het element heen dreigt te gaan, standaard staat deze ingesteld op 'visible'. Maar indien de content uit verschillende elementen (bijv. tekst of afbeeldingen bestaat), zal er altijd gekozen worden om op een volgende regel verder te gaan als er horizontaal niet meer genoeg ruimte is.

Door ervoor te zorgen dat white space (spaties, newlines, scheidingen tussen elementen) anders behandeld wordt, kan je voorkomen dat er op een nieuwe regel wordt begonnen. In jou geval komt dit neer op:

Cascading Stylesheet:

1
2
3

#photos {
    white-space: nowrap;
}

Let op dat dit alleen geldt voor inline elementen in je #photos element. Een DIV is zelf geen inline element maar een SPAN of IMG element wel. Op deze manier hoef je ook niet eens floats te gebruiken.

If I can't fix it, it ain't broken.

vrijdag 26 december 2008 15:18

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Borizz schreef op donderdag 25 december 2008 @ 22:38:
Een DIV is een block level element, dit houdt onder andere in dat een DIV element de volle breedte van zijn parent overneemt. De CSS overflow property geeft aan wat er gebeurt als content over de grenzen van het element heen dreigt te gaan, standaard staat deze ingesteld op 'visible'. Maar indien de content uit verschillende elementen (bijv. tekst of afbeeldingen bestaat), zal er altijd gekozen worden om op een volgende regel verder te gaan als er horizontaal niet meer genoeg ruimte is.

Door ervoor te zorgen dat white space (spaties, newlines, scheidingen tussen elementen) anders behandeld wordt, kan je voorkomen dat er op een nieuwe regel wordt begonnen. In jou geval komt dit neer op:
Cascading Stylesheet:
1
2
3
#photos {
    white-space: nowrap;
}
Let op dat dit alleen geldt voor inline elementen in je #photos element. Een DIV is zelf geen inline element maar een SPAN of IMG element wel. Op deze manier hoef je ook niet eens floats te gebruiken.

Ja toevallig ben ik daar gisteren in de loop van de avond ook op uitgekomen! En nu staan de fotos precies hoe ik ze wil hebben, de fotos lopen gewoon in 1 horizontale lijn door naar rechts, maar de parent div groeit niet mee in grootte.

- Is het mogelijk om de div evengoed mee te laten groeien?
- Stel ik wil in de toekomst ook een div (of ander block-level element) toevoegen aan de fotos, hoe kan ik dat dan doen?