[css] boxjes maken zoals op startpagina

Pagina: 1
Acties:

  • gizmo9003
  • Registratie: November 2000
  • Laatst online: 06-04 21:07

gizmo9003

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:
1
2
3
4
5
6
.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

Weet iemand hoe ik dit kan bereiken?

tjah..


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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<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 ]


  • Fatamorgana
  • Registratie: Augustus 2001
  • Laatst online: 21-07-2025

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.

  • Garyu
  • Registratie: Mei 2003
  • Laatst online: 08-04 15:10

Garyu

WW

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

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


  • gizmo9003
  • Registratie: November 2000
  • Laatst online: 06-04 21:07

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..


  • djluc
  • Registratie: Oktober 2002
  • Laatst online: 21:36
Bestaat er geen float: top die dit soort dingen doet?

  • JHS
  • Registratie: Augustus 2003
  • Laatst online: 04-01 15:49

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!


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)

  • RM-rf
  • Registratie: September 2000
  • Laatst online: 00:03

RM-rf

1 2 3 4 5 7 6 8 9

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

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


  • koekiemonster
  • Registratie: Maart 2001
  • Laatst online: 18-02 11:17

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]


  • RM-rf
  • Registratie: September 2000
  • Laatst online: 00:03

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


  • corani
  • Registratie: December 2000
  • Laatst online: 05-10-2017

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


  • aex351
  • Registratie: Juni 2005
  • Laatst online: 04:54

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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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 >


  • corani
  • Registratie: December 2000
  • Laatst online: 05-10-2017

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


  • gizmo9003
  • Registratie: November 2000
  • Laatst online: 06-04 21:07

gizmo9003

Go For It!

Topicstarter
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..


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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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?

  • Sappie
  • Registratie: September 2000
  • Laatst online: 08-04 10:58

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


  • X-Lars
  • Registratie: Januari 2004
  • Niet online

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]

  • gizmo9003
  • Registratie: November 2000
  • Laatst online: 06-04 21:07

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..


  • Sappie
  • Registratie: September 2000
  • Laatst online: 08-04 10:58

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


  • aex351
  • Registratie: Juni 2005
  • Laatst online: 04:54

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 >


  • Sappie
  • Registratie: September 2000
  • Laatst online: 08-04 10:58

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


  • BasieP
  • Registratie: Oktober 2000
  • Laatst online: 19-10-2025
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? :P

This message was sent on 100% recyclable electrons.


  • Sappie
  • Registratie: September 2000
  • Laatst online: 08-04 10:58

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

Pagina: 1