CSS Divs laten wrappen

[emkedouwe]

Hallo,

Ik ben bezig om een simpele portal te maken voor persoonlijk gebruik. Door middel van XMLHttprequests kan je snel links en categorieen toevoegen. Alles werkt nu alleen zit ik nog een beetje met de opmaak. Op dit moment word alles onder elkaar getoont, maar ik zou graag het idee van startpagina willen. Omdat je on-the-fly categorieen kan toevoegen zou ik niet weten om het in tabels op te lossen. Daarom dacht ik om gebruik te maken van een list en die met een display: inline. Dan hoef ik alleen maar om elke div <li></lil> te zetten en word het automatisch gerangschikt.
Weet iemand of het mogelijk is om dit te doen met lists en divs?

Wat ik tot nu toe heb vind je hier

[Yoozer]

Het lijkt mij dat startpagina.nl gewoon 3 'main' kolommen heeft, met wrapper divs. Daarin wordt de content dan gewoon onder elkaar getoond. Dat al eens geprobeerd, of...?

[Sappie]

Je wilt ze dus niet onderelkaar zetten maar naast elkaar?

In dit geval float je je lists (of wat je daarvoor dan ook gebruikt) gewoon. (wordt verder wel tricky wanneer je categorieën allemaal verschillende hoogtes hebben, wat waarschijnlijk zo is)

Zou je eens aan kunnen geven wat er precies moet gebeuren als je een categorie toevoegt?

[ Voor 44% gewijzigd door Sappie op 25-05-2005 12:06 ]

[emkedouwe]

Het probleem zit m een beetje in dat de categorieen on-the-fly kunnen worden aangemaakt. Als je dit doet word er een xmlhttprequest uitgevoerd welke een div terug stuurt. Via innerhtml word dit in de site geplaats. Als je nog een aanmaakt word er een nieuwe div terug gestuurd en aan de oude inhoud van die innerhtml geplakt.

De bedoeling is dat je gewoon categorieen kan aanmaken in de volgende volgorde:
1-2-3
4-5-6
7-8-9

[Zoefff]

Kan je niet alle categorieën float:left maken, een fixed breedte meegeven, en dan in een container met drie keer de breedte van 1 categorie zetten?

Cascading Stylesheet:

#container {
    width:700px;
}
#container div {
    width:200px;
    border:1px solid red;
    margin:10px;
    float:left;
}

HTML:

<div id="container">
    <div>Categorie 1</div>
    <div>Categorie 2</div>
    <div>Categorie 3</div>
    <div>Categorie 4</div>
    <div>Categorie 5</div>
    <div>Categorie 6</div>
    <div>Categorie 7</div>
    <div>Categorie 8</div>
</div>

Zoiets dus.

Hetzelfde grapje kan je natuurlijk ook met li uithalen ipv div, da's nog netter

[ Voor 35% gewijzigd door Zoefff op 25-05-2005 13:26 ]

[emkedouwe]

Ja dit is ongeveer de bedoeling, opzich werkt het wel alleen kan je af en toe nog wat raar gedrag krijgen als 1 kolom langer dan de rest word. Misschien nog ff wat tweaken dit.

[BlackBurn]

Hoe ver ben je er mee gekomen als ze onder elkaar komen?
Ik zit nml. met hetzelfde probleem.

[Verwijderd]

oeps het is niet beveiligd, ik heb mn site erin gezet... soorry...

[r0bert]

^

Maaruh

Cascading Stylesheet:

/* IE Only "oplossing" */
#container {
    width:700px;
}
#container div {
    display: inline;
    width:200px;
    border:1px solid red;
    margin:10px;
}

Zo iig misschien?

//edit:
of natuurlijk met position: absolute; en margin(-left). Maar dat is natuurlijk niet zo dynamisch.. kun je misschien nog beter na iedere 3e div een clear: both element zetten

[ Voor 36% gewijzigd door r0bert op 08-06-2005 01:02 ]