[css] boxjes maken zoals op startpagina - Softwareontwikkeling

maandag 13 februari 2006 21:45

Acties:

Go For It!

Topicstarter

Ik wil een soort boxjes maken, zoals startpagina ze ook heeft. Met verschillende categorien.
Nu heb ik hier natuurlijk al gezocht, maar veel meer dan gesloten topics lever het mij niet op

Ik weet ook niet precies welke zoekwoorden ik anders kan gebruiken.

Wat ik wil bereiken:
Er moeten 3 "kolommen" van boxjes komen. Met daartussenin telkens een vaste ruimte (10px).
Natuurlijk is het ene boxje wat hoger dan het andere, maar dat moet niet uitmaken, er moet telkens na 10px lege ruimte het volgende boxje beginnen.

Tot dusver heb ik:

code:

.category {
float: left;
width: 100px;
margin-right: 10px;
margin-bottom: 10px;
}

Dit zet ik in een div, met een vaste breedte. Maar stel ik heb nu 4 divjes achter elkaar, dan worden ze horizontaal wel mooi naast elkaar weergegeven. Maar verticaal, komt de eerstvolgende div die er niet op past, pas 10px onder de LANGSTE kolom die erboven zit. Terwijl deze eigenlijk een stuk hoger kan zitten. Screenshot ter verduidelijking:

Afbeeldingslocatie: http://www.samenzat.nl/prtscrn.jpg

Afbeeldingslocatie: http://www.samenzat.nl/prtscrn.jpg

Weet iemand hoe ik dit kan bereiken?

tjah..

maandag 13 februari 2006 21:47

Acties:

Verwijderd

ik heb ooit zo'n layout gemaakt (ik zal even zoeken), het had geloof ik met position:absolute te maken

edit: ik kwam destijds hierop uit:

HTML:

<html>
    <head>
        <style>
        .content {
            background-color: purple;
            position: relative;
        }
        .links {
            position: absolute;
        }
        .midden {
            position: absolute;
            margin-left: 30%;
        }
        .rechts {
            position: absolute;
            margin-left: 60%;
        }
        .links {
            padding: 3px;
            margin: 10 3 10 3;
            border-style: ridge;
            border-color: blue;
            background-color: yellow;
            width: 220;
        }
        </style>
    </head>
    <body>
        <h1>HEADERHEADERHEADERHEADERHEADER</h1>
        <div class=content>
            <div class=links>
                <div class=links>HoiHoiHoi!</div>
            </div>
            <div class=midden>
                <div class=links>HoiHoiHoi!</div>
            </div>
            <div class=rechts>
                <div class=links>HoiHoiHoi!</div>
                <div class=links>HoiHoiHoi!</div>
            </div>
        </div>
    </body>
</html>

ik had destijds probleempjes met firefox compatabiliteit, misschien is dat ondertussen verholpen

iig kun je even op startpagina zelf kijken hoe ze het daar doen

(tip: eerst alle opmaak verwijderen, dat leest makkelijker)

[ Voor 88% gewijzigd door Verwijderd op 13-02-2006 21:50 ]

maandag 13 februari 2006 21:50

Acties:

Fatamorgana

Fietsen is gezond.

Maak bv eerst 3 kolommen en in die kolommen zet je de boxjes. Dan heb je dus 3 kolommen die naast elkaar staan waar de inhoud per kolom mooi onder elkaar gezet kan worden.

maandag 13 februari 2006 21:50

Acties:

Garyu

WW

Zet ze met fixed posities neer in plaats van met floats?

It's Difficult to Make Predictions - Especially About the Future

maandag 13 februari 2006 21:58

Acties:

gizmo9003

Go For It!

Topicstarter

Fatamorgana schreef op maandag 13 februari 2006 @ 21:50:
Maak bv eerst 3 kolommen en in die kolommen zet je de boxjes. Dan heb je dus 3 kolommen die naast elkaar staan waar de inhoud per kolom mooi onder elkaar gezet kan worden.

het probleem is, dat de boxjes een dynamische variabele lengte hebben (afhankelijk van de content), en dat het aantal boxjes ook variabel is. Ik kan dus van te voren nooit zeggen, welke boxjes er in een kolom moeten komen, aangezien ik de pagina mooi wil laten ogen en ervoor zorgen dat alle 3 de kolommen ongeveer even lang zijn...

Daarom dacht ik aan floats, omdat die automatisch de lengte opvullen zeg maar. Maar dat lijkt mis te gaan in mijn voorbeeld.

De code van aukecomps geeft bij mij ook een totaal andere output.

tjah..

maandag 13 februari 2006 23:18

Acties:

djluc

Bestaat er geen float: top die dit soort dingen doet?

dinsdag 14 februari 2006 06:36

Acties:

JHS

Splitting the thaum.

djluc schreef op maandag 13 februari 2006 @ 23:18:
Bestaat er geen float: top die dit soort dingen doet?

Nee?

DM!

dinsdag 14 februari 2006 09:22

Acties:

Verwijderd

ja (ok, flauw :P; dit werkt dus nog niet)

volgens mij heb ik hier wel een soort "workaround" gezien voor IE, door eerst de text richting naar tb-lr te veranderen, dan left te floaten, en dan in de boxes weer terug te draaien ofzo, is hier ooit een topic over geweest

voor firefox >1.5 kan je column layout gebruiken

en voor de rest blijft het behelpen als je het echt allemaal dynamisch met css wil doen (met js gaat het natuurlijk allemaal prime)

dinsdag 14 februari 2006 15:44

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

de beste oplossing zou volgens mij het werken met

code:

<dl> 
   <dt>Blah</dt>
   <dd>foo bar</dd>
   <dd>foo bar</dd>
   <dd>foo bar</dd>
   <dt>Blah</dt>
   <dd>foo bar</dd>
   <dd>foo bar</dd>
   <dd>foo bar</dd>
</dl>

voor meerdere kolommen kan je dan een DL per kolom gebruiken en de DL dus een float geven, om ze naast elkaar te positioneren

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

woensdag 15 februari 2006 15:01

Acties:

koekiemonster

want a cookie

RM-rf schreef op dinsdag 14 februari 2006 @ 15:44:
de beste oplossing zou volgens mij het werken met
code:
1
2
3
4
5
6
7
8
9
10
<dl> 
   <dt>Blah</dt>
   <dd>foo bar</dd>
   <dd>foo bar</dd>
   <dd>foo bar</dd>
   <dt>Blah</dt>
   <dd>foo bar</dd>
   <dd>foo bar</dd>
   <dd>foo bar</dd>
</dl>
voor meerdere kolommen kan je dan een DL per kolom gebruiken en de DL dus een float geven, om ze naast elkaar te positioneren

Dit lijkt me inderdaad de beste oplossing.
<ul>li></li></ul> kan volgens mij ook gewoon. Heb altijd moeite met het gebruik van <dl> of <ul>

[webhero.nl]

woensdag 15 februari 2006 15:12

Acties:

RM-rf

1 2 3 4 5 7 6 8 9

koekiemonster schreef op woensdag 15 februari 2006 @ 15:01:
Heb altijd moeite met het gebruik van

Het voordeel van een DL in deze is dat het de mogelijkheid biedt standaard twee verschillende list-items toe te voegen, een 'kopje' en 'blok-inhoud' ...
semantisch is het niet helemaal correct, maar toch volgens mij de meest gebruiksvriendelijke manier

Intelligente mensen zoeken in tijden van crisis naar oplossingen, Idioten zoeken dan schuldigen

donderdag 16 februari 2006 00:30

Acties:

corani

__,,,_(^_^)_,,,__

Volgens mij heeft Firefox 1.5 een (gedeeltelijke) implementatie van de CSS3-multicolumn layout. Daarmee is dit probleem volgens mij erg eenvoudig op te lossen. Maar goed, dat zijn voorlopig nog toekomst-dromen

edit:
Terwijl ik daar nog even op doorzocht kwam ik deze pagina tegen, waar een javascript op staat die cross-browser multicolumn layout mogelijk maakt. Misschien zijn het toch geen toekomst-dromen!

[ Voor 34% gewijzigd door corani op 16-02-2006 00:35 ]

Laat me nou toch eens met rust man!
Iedereen die in telekinese gelooft, steek a.u.b. mijn hand op

donderdag 16 februari 2006 03:05

Acties:

aex351

I am the one

Kijk eens aan, een kant en klare oplossing :

. Probleem wat veel mensen hebben is dat ze niet verder kijken dan het gedeelte waarin ze het probleem hebben. Dus steeds als iets niet lukt gewoon een level hoger kijken.

HTML:

<div style="clear:both; display:block;">            
    <div style="float:left; display:inline; width:100px;">  
        <ul style="margin-top:5px;"><li></li></ul>
        <ul style="margin-top:5px;"><li></li></ul>
    </div>
    <div style="float:left; display:inline; width:100px;">
        <ul style="margin-top:5px;"><li></li></ul>
        <ul style="margin-top:5px;"><li></li></ul>
    </div>
    <div style="float:left; display:inline; width:100px;">  
        <ul style="margin-top:5px;"><li></li></ul>
        <ul style="margin-top:5px;"><li></li></ul>
    </div>
</div>

[ Voor 66% gewijzigd door aex351 op 16-02-2006 03:09 ]

< dit stukje webruimte is te huur >

donderdag 16 februari 2006 12:09

Acties:

corani

__,,,_(^_^)_,,,__

aex351 schreef op donderdag 16 februari 2006 @ 03:05:
Kijk eens aan, een kant en klare oplossing : . Probleem wat veel mensen hebben is dat ze niet verder kijken dan het gedeelte waarin ze het probleem hebben. Dus steeds als iets niet lukt gewoon een level hoger kijken.

[...]

Leuk

maar volgens mij niet wat TS zoekt. Nu moet je namelijk nog steeds handmatig de verschillende boxes verdelen over de 3 kolommen omdat ze anders niet gebalanceerd zullen zijn. (De ene kolom is langer dan de andere, doordat de boxes verschillende lengtes hebben)

edit:
my bad... na de topicstart nogmaals gelezen te hebben, ben ik het met aex35 eens dat dit wel een goede oplossing is.

[ Voor 12% gewijzigd door corani op 16-02-2006 12:12 ]

Laat me nou toch eens met rust man!
Iedereen die in telekinese gelooft, steek a.u.b. mijn hand op

donderdag 16 februari 2006 14:34

Acties:

gizmo9003

Go For It!

Topicstarter

aex351 schreef op donderdag 16 februari 2006 @ 03:05:
een stukje code
[/code]

woho, geniaal. Dat doet echt exact wat ik wil ja. machtig mooi!
En eigenlijk zit het toch nog best simpel in elkaar ja...
heel hartelijk bedankt!

tjah..

donderdag 16 februari 2006 15:56

Acties:

Verwijderd

aex351 schreef op donderdag 16 februari 2006 @ 03:05:
Kijk eens aan, een kant en klare oplossing :

. Probleem wat veel mensen hebben is dat ze niet verder kijken dan het gedeelte waarin ze het probleem hebben. Dus steeds als iets niet lukt gewoon een level hoger kijken.

HTML:

<div style="clear:both; display:block;">            
    <div style="float:left; display:inline; width:100px;">  
        <ul style="margin-top:5px;"><li></li></ul>
        <ul style="margin-top:5px;"><li></li></ul>
    </div>
    <div style="float:left; display:inline; width:100px;">
        <ul style="margin-top:5px;"><li></li></ul>
        <ul style="margin-top:5px;"><li></li></ul>
    </div>
    <div style="float:left; display:inline; width:100px;">  
        <ul style="margin-top:5px;"><li></li></ul>
        <ul style="margin-top:5px;"><li></li></ul>
    </div>
</div>

ehm, width: 100px en display: inline bij elkaar? of zorgt die float: left er weer voor dat de width wel gepakt wordt?

donderdag 16 februari 2006 18:36

Acties:

Sappie

De Parasitaire Capaciteit!

Verwijderd schreef op donderdag 16 februari 2006 @ 15:56:
ehm, width: 100px en display: inline bij elkaar? of zorgt die float: left er weer voor dat de width wel gepakt wordt?

Een floating element is per definitie een block-level element.. dat display inline gaat dan ook nergens over

Verder begrijp ik niet hoe dit voorbeeld het probleem van de ts oplost, ook al issie er zelf wel tevreden mee

Specs | Audioscrobbler

donderdag 16 februari 2006 19:33

Acties:

X-Lars

Just GoT it.

Nog wat meer over dit onderwerp:
[rml][ CSS] columns[/rml]

en eventueel
[rml][ XSL(T)/XML] Transformatie naar XML[/rml]

donderdag 16 februari 2006 22:56

Acties:

gizmo9003

Go For It!

Topicstarter

Sappie schreef op donderdag 16 februari 2006 @ 18:36:
[...]
Verder begrijp ik niet hoe dit voorbeeld het probleem van de ts oplost, ook al issie er zelf wel tevreden mee

Het doet toch echt precies wat ik wil

http://members.brabant.chello.nl/~a.adriaans/kolommen.html

De kolommen kunnen verschillen in hoogte (dus de verschillende ul's),
maar tussen de categorien zit netjes 1 witregel (waar nieuwe UL begint dus).
en niet een heel wit stuk, wat je met tabellen wel zou krijgen.

Verder is dat display inline inderdaad overbodig, en dat heb ik dus ook weggelaten.

tjah..

donderdag 16 februari 2006 23:28

Acties:

Sappie

De Parasitaire Capaciteit!

Mjah je moet nog steeds de verschillende kolommen groeperen.. dus echt een perfecte oplossing is het niet lijkt me.

Specs | Audioscrobbler

vrijdag 17 februari 2006 00:01

Acties:

aex351

I am the one

Sappie schreef op donderdag 16 februari 2006 @ 23:28:
Mjah je moet nog steeds de verschillende kolommen groeperen.. dus echt een perfecte oplossing is het niet lijkt me.

Ik sta open voor verbeterings suggesties.

[ Voor 13% gewijzigd door aex351 op 17-02-2006 00:02 ]

< dit stukje webruimte is te huur >

vrijdag 17 februari 2006 00:12

Acties:

Sappie

De Parasitaire Capaciteit!

aex351 schreef op vrijdag 17 februari 2006 @ 00:01:
Ik sta open voor verbeterings suggesties.

Ik heb geen suggesties ter verbetering. Iets dergelijks is niet mogelijk met slechts 'client-side' CSS zoals dat op dit moment in de verschillende browsers is geïmplementeerd.

Specs | Audioscrobbler

vrijdag 17 februari 2006 00:13

Acties:

BasieP

Sappie schreef op vrijdag 17 februari 2006 @ 00:12:
[...]

Ik heb geen suggesties ter verbetering. Iets dergelijks is niet mogelijk met slechts client-side CSS zoals dat op dit moment in de verschillende browsers is geïmplementeerd.

suggesties naar w3 dan misschien?

This message was sent on 100% recyclable electrons.

vrijdag 17 februari 2006 00:16

Acties:

Sappie

De Parasitaire Capaciteit!

wakkere mensen nog allemaal rond dit tijdstip

maar nee.. ben nu te gaar om suggesties te doen.. bovendien verwacht ik dat er mensen zich al druk om zoiets hebben gemaakt en dat dit met float: top oid dan wel mogelijk zal zijn mbv CSS3 zoals mophor ook al aan geeft (http://www.w3.org/TR/2002/WD-css3-box-20021024/#the-float)

_{geen zin om de css3 spec door te gaan lezen verder atm.. dus mss doet het wel helemaal iets anders}

[ Voor 23% gewijzigd door Sappie op 17-02-2006 00:17 ]

Specs | Audioscrobbler