[css] div van 100% vullen met onbekend aantal spans

[SchizoDuckie]

Ik heb een probleempje waar ik op 't moment echt m'n hoofd over aan't breken ben:

• ik heb een div, absolute gepositioneerd op 0,10 met 100% breedte.
• daarin moeten een nu nog onbekend aantal <span>'s die die hele div op moeten vullen over 1 regel.

Hoe krijg ik dit voor elkaar?

Ik heb al ontelbare combinaties uitgeprobeerd. Theoretisch gezien zouden die <span>'s toch als ze een position relative en geen widht en height meekrijgen die div helemaal netjes op moeten vullen?

Iemand tips?

[Willem]

waar 0,10 0x en 10y is in pixels?_{doet er niet echt toe?}
Geef es wat meer info over die <span>'s? Vaste breedte? Tekst? Plaatjes?

[ Voor 25% gewijzigd door Willem op 23-10-2003 23:48 ]

[SchizoDuckie]

willem169 schreef op 23 October 2003 @ 23:47:
waar 0,10 0x en 10y is in pixels?_{doet er niet echt toe?}
Geef es wat meer info over die <span>'s? Vaste breedte? Tekst? Plaatjes?

in de spans zit alleen maar een <a>, of text. je moet het zien als een table van 100% breedte met daarin een onbekend aantal cellen in 1 tr.

[Verwijderd]

Je bedoelt dus dat met 1 span, de span 100% breed wordt, met 2 spans beide 50% worden, met 3 spans 33,3% en met 4 spans 25% etc. etc.?

[SchizoDuckie]

Verwijderd schreef op 23 October 2003 @ 23:50:
Je bedoelt dus dat met 1 span, de span 100% breed wordt, met 2 spans beide 50% worden, met 3 spans 33,3% en met 4 spans 25% etc. etc.?

juist

[ Voor 39% gewijzigd door SchizoDuckie op 24-10-2003 06:16 ]

[Dark Blue]

Kun je niet middels Javascript de volle breedte van je scherm uitlezen in pixels... en dat delen door het aantal spans wat er in de tabel komt? Je komt dan wel met halve pixels te zitten, maar met math.Floor ofzo (klok en klepel verhaal) kun je geloof ik wel afronden naar beneden.

[SchizoDuckie]

Dark Blue schreef op 23 October 2003 @ 23:58:
Kun je niet middels Javascript de volle breedte van je scherm uitlezen in pixels... en dat delen door het aantal spans wat er in de tabel komt? Je komt dan wel met halve pixels te zitten, maar met math.Floor ofzo (klok en klepel verhaal) kun je geloof ik wel afronden naar beneden.

mjah da's echt een allerlaatst plakband oplossing. imho moet het kunnen met alleen css

[Dark Blue]

Papa Eend schreef op 23 October 2003 @ 23:59:
[...]


mjah da's echt een allerlaatst plakband oplossing. imho moet het kunnen met alleen css

Dat snap ik ergens wel, omdat het ding telkens die waardes opnieuw moet laden als je de pagina resize't. Als je dat al wil iig.
Kun je niet, en nou zeg ik in principe wat fouts maar in deze context mag het) gewoon een tabel gebruiken?
Ik weet dat er de laatste dagen veel gezeurd wordt dat tabellen niet voor opmaak zijn en dat zijn ze ook niet, maar wel om... juist, tabel te zijn.

[SchizoDuckie]

Dark Blue schreef op 24 oktober 2003 @ 00:02:
[...]


Dat snap ik ergens wel, omdat het ding telkens die waardes opnieuw moet laden als je de pagina resize't. Als je dat al wil iig.
Kun je niet, en nou zeg ik in principe wat fouts maar in deze context mag het) gewoon een tabel gebruiken?
Ik weet dat er de laatste dagen veel gezeurd wordt dat tabellen niet voor opmaak zijn en dat zijn ze ook niet, maar wel om... juist, tabel te zijn.

heb jij wel eens geprobeerd dynamisch een tabel op te bouwen? dat suckt ik wil joust proberen om het nu eens echt met css te doen.

[Dark Blue]

Dynamisch of statisch maakt geen donder uit. En een dropdown erin kan ook nog prima, dus ik snap niet waar je over struikelt. Nou mag je eindelijk met recht een tabel gebruiken, test er dan ook even mee.
En de nadelen van het ding kun je inderdaad wel weer met css omzeilen.

[SchizoDuckie]

Dark Blue schreef op 24 October 2003 @ 00:06:
Dynamisch of statisch maakt geen donder uit. En een dropdown erin kan ook nog prima, dus ik snap niet waar je over struikelt. Nou mag je eindelijk met recht een tabel gebruiken, test er dan ook even mee.
En de nadelen van het ding kun je inderdaad wel weer met css omzeilen.

dat maakt dus wel uit. kijk maar eens naar de source.

[slm]

*dommeopmerkingstondhiermbtplaatsvandesource*

[ Voor 108% gewijzigd door slm op 24-10-2003 00:22 . Reden: kan iedereen voortaan verwijzingen naar sources en css files in de TS post zetten ipv een paar posts eronder? ]

[crisp]

kijk eens naar floats, een span kan je geen breedte geven omdat het een inline element is en daarom net zo breed is als z'n content

[Verwijderd]

nevermind

[ Voor 95% gewijzigd door Verwijderd op 24-10-2003 00:24 ]

[SchizoDuckie]

crisp schreef op 24 October 2003 @ 00:20:
kijk eens naar floats, een span kan je geen breedte geven omdat het een inline element is en daarom net zo breed is als z'n content

mjah maar wat voor width moet ik 'm dan meegeven als ik niet weet hoeveel er in komen te staan?

[SchizoDuckie]

Papa Eend schreef op 24 oktober 2003 @ 00:31:
[...]


mjah maar wat voor width moet ik 'm dan meegeven als ik niet weet hoeveel er in komen te staan?

Dan toch maar met script opgelost, het werkt nu \o/

[ Voor 16% gewijzigd door SchizoDuckie op 24-10-2003 06:16 ]

[Clay]

Je hebt er niet echt veel aan, want het werkt iig de komende 3 jaar nog niet in IE, maar het kan dus ook met css:

HTML:

<style type="text/css">
    #menu {
        display:table;
        width:100%;
    }

    #menu>ul {
        display:table-row;
    }

    #menu>ul>li {
        display:table-cell;
    }
</style>

...

<div id="menu">
    <ul>
        <li><a href="...">fiets</a></li>
        <li><a href="...">fiets</a></li>
        <li><a href="...">fiets</a></li>
        <li><a href="...">fiets</a></li>
        <li><a href="...">fiets</a></li>
    </ul>
</div>

[edit]

Wat natuurlijk wel kan is dat je dit met selectors doet die IE niet snapt (zoals nu), en dat je voor IE de <li>'s gewoon inline of floatend op een rijtje zet. Dan heb je bijna hetzelfde iig, allen net iets mooier op zowat alles behalve winIE.

[ Voor 63% gewijzigd door Clay op 24-10-2003 10:19 ]

[Verwijderd]

Kortom, dit is weer een duidelijk geval van iets wat niet out of the box mogelijk is (in de praktijk!) met tabeless designs.

[ Voor 8% gewijzigd door Verwijderd op 24-10-2003 11:41 ]

[Clay]

niet in IE nee. Maar je hoofdnavigatie is meestal niet zo aan verandering onderheving, het aantal items staat vaak wel vast, dus dan kan je best wat floats met % breedte naast elkaar zetten om de boel uit te laten rekken naar 100%.

Persoonlijk vind ik buttons samen naar 100% rekken onzin trouwens een horizontale balk met een bg en losse buttons links, midden of rechts uitgelijnd voldoet prima. linksrechts justify'en voegt niets wezenlijks toe.

[BetuweKees]

mooie sample clay.. die gaat het archief in