meerdere kolommen met CSS

ik heb echt al de hele avond het web af lopen struinen naar een site waar ze duidelijk meerdere (meer dan 2) kolommen gebruiken zodat ik die ook in mijn site kan implementeren.

hier staat het gedeelte van de website waar het om gaat
ik heb hem zover gekregen, maar ik krijg de kolommen niet allemaal opdezelfde hoogte…
oh en ff niet op de rotzooi in mijn css letten… die moet ik nog even goed gaan ordenen.
hier staat mijn CSS

ik hoop dat iemand een idee heeft. :slight_smile:

In feite geef je zelf aan dat je elk stukje tekst een regel lager wil plaatsen. [code:1:a710ac2ae6]<div id="port1">1</div> <div id="port2">2</div> <div id="port3">3</div> <div id="port4">4</div>[/code:1:a710ac2ae6]

Je moet iets met position doen (relative, of juist absolute) en misschien iets met een margin-top.

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html geeft aardig wat CSS voorbeelden die je kan uitbreiden.

Zijn de 4 kolommen met een vaste breedte? Loopt de achtergrond daar helemaal achter door? Of is die per kolom verschillende?

Ik denk dat de beste aanpak is om elke div te floaten: op http://www.xs4all.nl/~mosm/testsite/4kolomtest.html staat een voorbeeld

Welk effect wil je precies bereiken? Ik heb de CSS niet bekeken, maar ik weet niet dat hetgeen ik nu in Safari zie datgene is dat jij wilt. Het is mij nog onduidelijk. Kun je omschrijven wat je wilt hoe het er uiteindelijk uitziet?

heb hem al aangepast zodat de kolommen kloppen... :)

Dit is wel een hele rare oplossing om een nummertje naast een foto te zetten :)

Ik zou zelf voor een tweekolomsoptie gegaan zijn, waarbij ik de images laat floaten: zelfde effect met veel minder code; ik denk dat de CSS met de helft teruggebracht kan worden.

[quote:36b539ba9e="tennapel"]Dit is wel een hele rare oplossing om een nummertje naast een foto te zetten :)

Ik zou zelf voor een tweekolomsoptie gegaan zijn, waarbij ik de images laat floaten: zelfde effect met veel minder code; ik denk dat de CSS met de helft teruggebracht kan worden.[/quote:36b539ba9e]

heheh… dit is ook alleen maar een schets om te kijken hoe ik het ga oplossen… :slight_smile:
dus niet de images in een div zetten, maar laten floaten… heb je daar toevallig een voorbeeldje van liggen? ik ga ook wel ff zoeken.

grtz HS-L

Voorbeeld vind je hier: http://www.xs4all.nl/~mosm/testsite/2column.html

Ik ben lui geweest en heb alleen op Safari en Firefox getest, maar ik vemoed dat je voor IE5 en IE/Win geen correcties hoeft te maken. Ik heb het niet getest, dus wel even zelf nog doen :wink:

Zoals je ziet: weinig code, maximaal effect en ook zonder CSS is de boel uitstekend leesbaar voor oudere browsers en op mobiele browsers,

heheh.. nah zo bedoelde ik het niet.. op de plek van de nummertjes komt tekst te staan.. maar ik denk dat het een enekele kolom gaat worden.. :)

[quote:fd752fee13="HS-L"]heheh.. nah zo bedoelde ik het niet.. op de plek van de nummertjes komt tekst te staan.. maar ik denk dat het een enekele kolom gaat worden.. :)[/quote:fd752fee13]

Ik snap het niet. Zijn het bijschriften bij de foto’s of niet? Of komt er een lap tekst langs de foto’s te staan?

In het laatste geval is het simpel: sloop alle <div class=“photo”> eruit en zet de tekst onderaan de fotoreeks neer binnen <div class=“kolom”>, dan wordt het 1 lange kolom naast de foto’s.

bij schriften.

[quote:e77ca15472="HS-L"]bij schriften.[/quote:e77ca15472]

Als je tekst zet op de plaatsen waar nu cijfertjes staan, wat is dan het probleem?

ehm,... geen... dat is namelijk precies wat ik al van plan was.. alleen ga ik er straks een enkele kolom van maken met tekst ernaast...

HS-L

Het verhaal van 'plaatjes met bij/onderschriften' is hier al beschreven met oplossing: http://www.alistapart.com/articles/practicalcss/

Hier wordt gefloat, maar zit eigenlijk weinig controle over de uitlijning. De vraag is en blijft dus voor mij: wat wil je precies bereiken? Wil je:

  • een gallery van thumbs tonen?
  • met bij/onderschriften bij de thumbs?
  • heb je voorwaarden aan de uitlijning van de thumbs en bij/onderschriften, verticaal en/of horizontaal?

Zijn er daarnaast nog aanvullende wensen/eisen?
Gaat het nog breder dan deze thumb-gallery? Heb je bijvoorbeeld nog wensen/eisen voor de rest van de pagina?

als je http://test.hslmedia.nl bekijkt dan snap je misschien wat ik precies wil gaan doen :) (bij [b:6a74993947]wat[/b:6a74993947] klik je dan op portfolio) maar ik heb nog geen goeie oplossing voor de portfolio gevonden.. en heb de komende dagen ff geen tijd meer,.. denk dat ik hem na het weekend er verder mee ga.

Hs-L

Als ik op portfolio klik (nogal verborgen trouwens voor een vrij essentieel onderdeel?), dan zie ik in het linkerblok de afbeeldingen verschijnen met daarnaast de nummers die bijschriften moeten worden. Daarmee zie ik wat je al toonde.

Waar ik naar vraag is of je kunt beschrijven wat je wilt. Dus niet visualiseren wat je nu hebt. Wat is je functionele wens? Wat moet het doen en kunnen?

Als ik dan kijk, dan zie ik een aantal foto’s met daarnaast een bijschrift. Als ik kijk naar de verdeling, dan zie ik dat de bijschriften ongeveer net zoveel ruimte hebben als de afbeeldingen. Ik verwacht (mijn mening, dus stoor je er niet aan) dat dit met echte bijschriften een sub-optimale oplossing biedt. De ruimte voor de bijschriften is zo smal dat je nauwelijks meer dan twee woorden naast elkaar zal zien.

Mijn voorstel zou zijn om of maar één afbeelding per ‘regel’ te nemen met de rest van de breedte voor het bijschrift, of de bijschriften onderschriften te maken, dus onder de afbeelding te zetten. Dat breekt alleen de ‘kolom van afbeeldingen’ die je nu hebt.

Klinkt dat logisch?

[quote:5038dba2b4="Aglaea"]Mijn voorstel zou zijn om of maar één afbeelding per 'regel' te nemen met de rest van de breedte voor het bijschrift, of de bijschriften onderschriften te maken, dus onder de afbeelding te zetten. Dat breekt alleen de 'kolom van afbeeldingen' die je nu hebt.

Klinkt dat logisch?[/quote:5038dba2b4]

[quote:5038dba2b4=“HS-L”]op de plek van de nummertjes komt tekst te staan… maar ik denk dat het een enekele kolom gaat worden… :)[/quote:5038dba2b4]

hihi… idd dat wilde ik ook al gaan doen… en die portfolio wordt gelijk geopend als je op wat drukt,… alleen ben ik pas een paar dagen met die website bezig dus heb dat soort dingen er nog niet in kunnen bouwen…

maar bedankt voor het advies!

[quote:9a410069d6="HS-L"] hihi.. idd dat wilde ik ook al gaan doen.. en die portfolio wordt gelijk geopend als je op wat drukt,.. alleen ben ik pas een paar dagen met die website bezig dus heb dat soort dingen er nog niet in kunnen bouwen...

maar bedankt voor het advies![/quote:9a410069d6]

De CSS van de twee-koloms oplossing die ik je gaf kan ook voor 1 kolom gebruikt worden. De belangrijkste truc is dat je image EN onder- of bijschrift in een div bij elkaar zet (of in een dl-dt-dd constructie als je het semantisch perfect wil oplossen), want dan kan je alle kanten op en weet je zeker dat je niet afhankelijk bent van de breedte van scherm of tekst of image om alles netjes uit te lijnen en je foto en tekst staat bij elkaar. Niet onbelangrijk.

Suc6 :wink:

Even dit draadje terug laten bovendrijven...

Mijn probleem: ik gebruik 2 kolommen, 1 voor het menu en de andere voor de rest van de pagina.
Nu zou ik die kolom 2 in het midden van mijn pagina willen laten komen, zodat de pagina er assymetrisch uitziet.
Dit is me gelukt: kijk maar (let niet op de tabel die wordt gerbuikt, die wordt nog vervangen!)
Nu heb ik één probleem, nl. het menu is onbruikbaar geworden (in Safari, de andere browsers heb ik nog niet getest), je kan niet meer klikken! hoe los ik dit op? De CSS vind je hier.

Alvast bedankt!

Dit is een dermate standaard layout dat ik je wil aanraden de code te gebruiken van de verschillende voorbeeldsites die er zijn. Hier een link naar een site: http://intensivstation.ch/templates/