[CSS] Waarom bepaalt de inline flow niet de parent size? - Softwareontwikkeling

donderdag 29 oktober 2009 13:44

Acties:

0 Henk 'm!

Topicstarter

Ik heb een divje en daarin een formulier met enkele inline inputs, het form element heeft een block display en de input elementen hebben een inline display. Waarom stretched het form element (of bovenliggende div) dan niet normaal mee met de inline elementen, terwijl dit normaal (zonder een display aan te geven) wel gebeurt?

Ik kan natuurlijk een harde hoogte/breedte aan de parent meegeven, maar ik wil juist dat het niet uitmaakt of alles op 1 of 2 regels past en dat de gehele pagina inclusief de parent gewoon meestretched. Ik weet dus gewoon niet van tevoren hoe hoog dit moet zijn. Is dit op een of andere generieke manier op te lossen?

voorbeeldje:

HTML:

<body>
    <div>
        <form>
            <input type="text" id="" size="10" />
            <input type="text" id="" size="5" />
            <input type="text" id="" size="9" />
            <input type="text" id="" size="6" />
            <input type="text" id="" size="7" />
            <input type="text" id="" size="8" />
            <a href=""><img src="img/noimage.png" width="22" height="22" alt="" /></a>
            <input type="submit" />
        </form>
    </div>
</body>

Cascading Stylesheet:

body {
    width:200px;
}

div {
    background:red;
}

input {
    display:inline;
    float:left;
}

img {
    display:inline;
    float:left;
}

En je krijgt dus nergens een rode div te zien, omdat deze niet meeschaalt.

Nu kan ik wel de inlines weglaten zodat de browser het zelf uitzoekt en de parents weer vrolijk mee schalen, maar dan krijg ik de img op geen enkele manier uitgelijnd met de inputs. De img lijkt er altijd wat boven te zweven en dit krijg ik met geen mogelijkheid anders (dit was eigenlijk het onderliggende probleem).

Maar wat als je dit met standaard block elementen (div oid.) wilt doen? Zelfs als je de inline elementen een width en height meegeeft schaalt hij niet mee en dat snap ik gewoon niet. Het is totaal niet intuitief.

donderdag 29 oktober 2009 13:51

Acties:

0 Henk 'm!

HuHu

Post eens je volledige HTML inclusief DOCTYPE.

donderdag 29 oktober 2009 13:52

Acties:

0 Henk 'm!

.oisyn

Moderator Devschuur®

Demotivational Speaker

En wat als je een position:relative instelt op de div?

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.

donderdag 29 oktober 2009 13:53

Acties:

0 Henk 'm!

Verwijderd

Als je float:left toevoegt op de div werkt het wel gok ik zo..

donderdag 29 oktober 2009 13:56

Acties:

0 Henk 'm!

HuHu

Het toevoegen van float:left; aan de stijl van je div is overigens genoeg om het te laten werken.

donderdag 29 oktober 2009 14:03

Acties:

0 Henk 'm!

Shagura

Topicstarter

Verwijderd schreef op donderdag 29 oktober 2009 @ 13:53:
Als je float:left toevoegt op de div werkt het wel gok ik zo..

Wow het werkt, bedankt! (position:relative werkt niet trouwens

). Hier was ik dus nooit opgekomen. Weet iemand misschien waarom dit werkt, want ik zie zo niet waar het op slaat eigenlijk.

donderdag 29 oktober 2009 14:17

Acties:

0 Henk 'm!

Verwijderd

Shagura schreef op donderdag 29 oktober 2009 @ 14:03:
Wow het werkt, bedankt! (position:relative werkt niet trouwens ). Hier was ik dus nooit opgekomen. Weet iemand misschien waarom dit werkt, want ik zie zo niet waar het op slaat eigenlijk.

Dit komt omdat je gebruik maakt van display: inline op de elementen input en image.
Een andere oplossing is de container/wrapper block + inline te maken.

Cascading Stylesheet:

body {
    width:200px;
}

div {
    display: inline-block;
    background:red;
}

input {
    float:left;
}

img {
    float:left;
}

donderdag 29 oktober 2009 23:58

Acties:

0 Henk 'm!

Verwijderd

Shagura schreef op donderdag 29 oktober 2009 @ 14:03:
[...]

Wow het werkt, bedankt! (position:relative werkt niet trouwens ). Hier was ik dus nooit opgekomen. Weet iemand misschien waarom dit werkt, want ik zie zo niet waar het op slaat eigenlijk.

Floatende elementen maken geen onderdeel uit van "de flow" en hebben dus ook geen hoogte. Parent-elementen gedragen zich dan ook alsof er geen child-elementen in zitten. Ergo, geen hoogte, ergo geen achtergrondkleur.

vrijdag 30 oktober 2009 08:03

Acties:

0 Henk 'm!

Verwijderd

Wat je ook kunt doen is als laatste element in de <div> een <div> (of iets anders) met clear: both; te zetten, zodat als het ware het eind van de floats daar wordt aangegeven. Dan heeft de eerste <div> dus wel ont-float-e children, en zie je de rode achtergrond weer.

vrijdag 30 oktober 2009 08:52

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Verwijderd schreef op vrijdag 30 oktober 2009 @ 08:03:
Wat je ook kunt doen is als laatste element in de <div> een <div> (of iets anders) met clear: both; te zetten, zodat als het ware het eind van de floats daar wordt aangegeven. Dan heeft de eerste <div> dus wel ont-float-e children, en zie je de rode achtergrond weer.

Beter en netter is gewoon om de parent van je floatende elementen een overflow waarde te geven anders dan de default waarde 'visible'. Gebruik maken van een extra element om te clearen is in veel gevallen onnodig.

Verder staan er een hoop rare 'oplossingen' in dit topic zeg. De omliggende div laten floaten

position:relative gebruiken

De div inline-block maken

Allemaal dingen die hooguit symptoombestrijding zijn en zelf weer andere problemen kunnen veroorzaken. Blues was de eerste die correct de oorzaak wist te vermelden...

[ Voor 21% gewijzigd door crisp op 30-10-2009 08:57 ]

Intentionally left blank

vrijdag 30 oktober 2009 10:28

Acties:

0 Henk 'm!

.oisyn

Moderator Devschuur®

Demotivational Speaker

crisp schreef op vrijdag 30 oktober 2009 @ 08:52:
position:relative gebruiken

Ik stelde een vraag, ik suggereerde geen oplossing

. Overigens was ik in de war met containing boxes e.d.

Give a man a game and he'll have fun for a day. Teach a man to make games and he'll never have fun again.