[HTML/CSS] Lege ruimte tussen floating elementen

[kingmuze]

Edit: En natuurlijk als er mensen benieuwd zijn naar de page, message me maar, dan krijg je een url

Op het moment ben ik bezig met een portal-project die, waneer hij genoeg vervorderd is, als open source projectje de lucht ingaat. Het lijkt op de google startpagina (ookal was die er nog niet toen ik er mee begon) maar dan met veel extra handige functies. Ik bouw hem voor een hoop kennissen van mij die er nu al graag gebruik van maken
Probleem?
Het probleem is dat er tussen floating (in dit geval <li>) elementen lege ruimte zit, en dat is natuurlijk zonde!:

Het doel is dat het er zo uit ziet zodat er zo veel mogelijk ruimte op het scherm gebruikt wordt:

Ik heb al een berg mogelijkheden geprobeerd met inline display e.d. De enige oplossing die nu voor de hand ligt, is twee aparte lists maken. Maar dat is niet handig (bijvoorbeeld wanneer je een style sheet voor een andere resolutie wilt coden)
HTML

code:

<div class="bookmarkcategories">
    <ul id="bookmarkcategories">
        <li id="bookmarkcategories_Security">
            <table>
                <tr>
                    <th>Security</th>
                </tr>
                <tr class="evenrow">
                    <td><a href="http://www.governmentsecurity.org">Government Security</a></td>
                </tr>
            </table>
        </li>
        <li id="bookmarkcategories_Misc">
            <table>
                <tr>
                    <th>Misc</th>
                </tr>
                <tr class="evenrow">
                    <td><a href="http://www.hi.nl/fun/sms_detail.asp">Hi SMS</a></td>
                </tr>
                <tr class="oddrow">
                    <td><a href="http://webmail.home.nl">Home Webmail</a></td>
                </tr>
        </li>
    </ul>

    <script type="text/javascript">
        Sortable.create("bookmarkcategories",{ onUpdate:updateBookmarkCategoriesOrder});
    </script>
</div>

CSS

code:

/*Bookmark categories*/
.bookmarkcategories {
    width:280px;
    float:right;
}

.bookmarkcategories table{
    border-collapse: collapse;
    width:135px;
    margin-left:2px;
    margin-top:2px;
    margin-right:2px;
    margin-bottom:2px;
}

/*Ajax Tests*/
.bookmarkcategories ul, .items ul {
    list-style-type : none;
    margin:0;
    padding:0;
}
.bookmarkcategories li, .items li {
    margin:0;
    padding:0;
    float:left;
    position:relative;
}

Wie helpt me verder

[ Voor 27% gewijzigd door kingmuze op 15-04-2006 12:47 ]

[X-Lars]

Volgens mij is de enige solide oplossing om 4 kolommen te gebruiken en daarbinnen de lists te zetten. Voor verschillende resoluties kun je dan minder of meer kolommen plaatsen.

[kingmuze]

X-Lars schreef op zaterdag 15 april 2006 @ 13:02:
Volgens mij is de enige solide oplossing om 4 kolommen te gebruiken en daarbinnen de lists te zetten. Voor verschillende resoluties kun je dan minder of meer kolommen plaatsen.

Dat is inderdaad één oplossing die ik overwogen heb, toch is het raar dat je dit probleem in de html moet oplossen terwijl je dit eigenlijk alleen in de styles wilt oplossen.

Zou het niet mogelijk zijn als ik andere tags gebruik dan lists?

[sOid]

Ik ben er wel benieuwd naar, lijkt me wel handig, alles in 1 oogopslag Kan je me url mailen? jeroen[at]berkenbosch.net

Kan je helaas niet verder helpen btw

[X-Lars]

kingmuze schreef op zondag 16 april 2006 @ 12:34:
[...]


Dat is inderdaad één oplossing die ik overwogen heb, toch is het raar dat je dit probleem in de html moet oplossen terwijl je dit eigenlijk alleen in de styles wilt oplossen.

Zou het niet mogelijk zijn als ik andere tags gebruik dan lists?

Het is natuurlijk structureel gezien wel logisch dat je <div class="column"> o.i.d. gebruikt om die kolomindeling te maken. Een division in kolommen dus. Anders zul je een javascript-oplossing moeten gebruiken om je content over kolommen te verdelen (is een recent topic over). Maar als van tevoren bekend is welke lists in welke kolommen moeten komen is het volgens mij meer dan logisch om die divs er in te gooien.

In CSS3 zit wel ondersteuning voor kolommen overigens.

[kingmuze]

X-Lars schreef op zondag 16 april 2006 @ 18:59:
[...]

Het is natuurlijk structureel gezien wel logisch dat je <div class="column"> o.i.d. gebruikt om die kolomindeling te maken. Een division in kolommen dus. Anders zul je een javascript-oplossing moeten gebruiken om je content over kolommen te verdelen (is een recent topic over). Maar als van tevoren bekend is welke lists in welke kolommen moeten komen is het volgens mij meer dan logisch om die divs er in te gooien.

In CSS3 zit wel ondersteuning voor kolommen overigens.

Ja inderdaad, maar ik wil maximaal 1 list die automatisch door middel van float en width verspreid wordt over de breette/hoogte. Het komt waarschijnlijk door die floats, maar die zijn volgens mij op deze manier onvervangbaar (als ik het goed heb).

CSS3 wordt idd beter laat t maar snel komen

Thanks voor je comments btw!

edit:
Wat wel vaag is, is dat het aan de rechterkant wel werkt, aan de linkerkant niet.

[ Voor 10% gewijzigd door kingmuze op 17-04-2006 21:16 ]

[kingmuze]

sOid schreef op zondag 16 april 2006 @ 13:42:
Ik ben er wel benieuwd naar, lijkt me wel handig, alles in 1 oogopslag Kan je me url mailen? jeroen[at]berkenbosch.net

Kan je helaas niet verder helpen btw

Link heb ik je gestuurd, als je comments heb, let me know.

[Blaise]

edit: shit, probleem verkeerd begrepen... ik vind de compacte oplossing mooier trouwens.

[ Voor 145% gewijzigd door Blaise op 18-04-2006 00:02 ]

[sOid]

kingmuze schreef op maandag 17 april 2006 @ 21:16:
[...]


Link heb ik je gestuurd, als je comments heb, let me know.

Ja ik heb je ondertussen al toegevoegt op MSN Heb wel wat comments maar dat komt nog wel

[kingmuze]

Blaise schreef op maandag 17 april 2006 @ 23:57:
edit: shit, probleem verkeerd begrepen... ik vind de compacte oplossing mooier trouwens.

Welke compacte oplossing ?

[Verwijderd]

sOid : Het lijkt mij ook wel leuk om zo'n gepersonaliseerde pagina te hebben, mag ik ook een linkje? Mijn emailadres is :

[ Voor 6% gewijzigd door Verwijderd op 18-04-2006 12:01 ]

[sOid]

Verwijderd schreef op dinsdag 18 april 2006 @ 12:00:
sOid : Het lijkt mij ook wel leuk om zo'n gepersonaliseerde pagina te hebben, mag ik ook een linkje? Mijn emailadres is : [afbeelding]

Daarvoor moet je bij de TS zijn Maar het is allemaal nog béta enzo dus gepersonaliseerd is het nog niet.

[André]

Zullen we het uitwisselen hier even bij laten, je kunt buiten het forum om contact met TS opnemen

[kingmuze]

Ik heb het volgende artikel gevonden over lists in collums:

http://www.alistapart.com/articles/multicolumnlists

Erg goed artikel, alleen het is niet geschikt voor dynamische lijsten. Iemand ervaring met soortgelijke opmaak voor dynamische sites?

Deze lijkt ook interressant, maar is natuurlijk CSS3 (alleen dan door middel van Javascript, niet bepaald cool):

http://www.csscripting.com/css-multi-column/example6.php

[ Voor 27% gewijzigd door kingmuze op 28-04-2006 09:57 ]

[kingmuze]

Schop, iemand een idee of er echte alternatieven zijn voor bovenstaande link?

[JHS]

Je zou met javascript alle listitems op kunnen halen, en deze vervolgens toevoegen op de manier die in het A List Apart artikel wordt verwacht wordt. Met behulp van een counter kan je dan voorkomen dat het te lang wordt.