[HTML/CSS] Semantische portalblokken

[Verwijderd]

Ik kan maar geen goede uitleg vinden over het semantisch bouwen van portal blokken.

Het probleem ligt in de eis van het overzicht.
Je hebt een portalpagina van het alfabet met bv 6 blokken (A-F)
Er worden steeds 3 blokken naast elkaar getoond en als de content van blok2 groter wordt moet ook blok 1 en 3 op die regel 'meegroeien'.
Edit: de blokken krijgen ook een procentuele breedte: ze moeten meegroeien als de pagina breder wordt (resolutie bv) of als font-size groter wordt.
Je zou nu zeggen 'faux columns', echter gaat dit niet omdat je ook tussen blokken een scheidingslijn moet hebben (en stel blok1 is het langste dan is er geen goede scheidingslijn tussen blok2 en 3 mogelijk).

Heeft iemand hier een goede url voor me waar dit staat uitgelegd, of een andere tip voor me?

Voorbeeldje:

[ Voor 10% gewijzigd door Verwijderd op 15-11-2006 20:33 ]

[aegis]

mischien ff googlen op HTML Semantische tabel opmaak

[Verwijderd]

halo schreef op woensdag 15 november 2006 @ 16:55:
mischien ff googlen op HTML Semantische tabel opmaak

mwah, als ik er een tabel voor gebruik, zou dit puur voor layout zijn, dat is niet de bedoeling. Semantisch een tabel opmaken lukt me wel

[Verwijderd]

Nou, in ieder geval aan de gang met Definition Lists wat structuur betreft. En over de gelijke hoogte denk ik toch dat je het bij een Javascript scriptje moet gaan zoeken.

(en stel blok1 is het langste dan is er geen goede scheidingslijn tussen blok2 en 3 mogelijk)

Dit snap ik niet helemaal. De horizontale of verticale scheidingslijn(en)?

[Rowanov]

Je kan het wel met faux-collumns oplossen, maar het gaat iig wat dieper dan een standaard faux-collumns oplossing. Allereerst moet je nagaan welke elementen je moet gebruiken; het lijkt me geen tabulaire data, omdat het gewoon gelijk is aan een alfabetische woordenlijst of trefwoordenregister. Dat je het vervolgens in rijen weer wil geven staat daar totaal los van, dus de reply van halo is een beetje loos. Het is in feite niets meer dan een opsomming (unordered-list), gegroepeerd per letter.

Persoonlijk zou ik het zo oplossen:

HTML:

<div class="portalrow">

  <div id="a">
    <hx>A</hx>
    <ul class="category">
      <li>A- item 1</li>
      <li>A- item 2</li>
    </ul>
  </div>

   <div id="b">
    <hx>B</hx>
    <ul class="category">
      <li>B- item 1</li>
      <li>B- item 2</li>
    </ul>
  </div>

  <div id="c">
    <hx>C</hx>
    <ul class="category">
      <li>C- item 1</li>
      <li>C- item 2</li>
    </ul>
  </div>

</div>

Waarbij je de divs om de categorien echt nodig hebt als extra hanger voor je css; je kan ze daarmee laten floaten. Als je vervolgens de row-container een overflow: auto geeft, dan clear je de floats. Dan kom je aan bij de achtergrond, waarbij je de row-container een herhalende achtergrond geeft en de hx de bovenste afronding. Dan houd je de ul over voor de onderste afronding. Hier zijn wel wat variaties op mogelijk, maar dit is een globale aanpak waar je wel uit moet komen.

[Verwijderd]

Rowanov schreef op woensdag 15 november 2006 @ 17:15:

Ik heb dit ook zo bekeken, maar kom er niet uit ivm die 'verticale scheidingslijnen'. Ieder blok (vergeten te melden, zal t erbij zetten) heeft een procentuele breedte, want als de pagina groter qua breedte wordt of groter wordt qua fontsize zoom, moeten de blokken meegroeien...
Zomaar een repeating background op de omvattende container gaat dus niet lukken...

Vind het vreemd dat ik er weinig/niets over vind (wellicht foute zoekwoorden), dit zal toch zeker al veel voor moeten zijn gekomen...

[ Voor 25% gewijzigd door Verwijderd op 15-11-2006 20:35 ]

[Rowanov]

Dat is wel een vrij essentieel onderdeel wat je vergeten was, dan gaat mijn hele uitleg niet meer op

Voor zover ik weet is er dan geen simpele oplossing en zal je of een heleboel extra elementen, of een ingewikkeld javascript nodig hebben.

Edit: de zoekwoorden zijn "liquid rounded corners" icm. "css".
Dit is wel een methode, maar hoe dan ook levert het je een hele rans aan extra divs en dergelijke op.

[ Voor 34% gewijzigd door Rowanov op 15-11-2006 21:20 ]

[Blackbird-ce]

Niet geprobeerd met procentuele waarden, maar met absolute breedtes werkte het aardig voor mij: One True Layout

[Verwijderd]

Blackbird-ce schreef op donderdag 16 november 2006 @ 00:35:
Niet geprobeerd met procentuele waarden, maar met absolute breedtes werkte het aardig voor mij: One True Layout

it worked! zie hier. De rondingen in de binnenste blokken lukt weliswaar niet (de bovenste rondingen wel, maar onderste niet), maar ik denk dat dit ook al mooi genoeg uitziet

[moozzuzz]

Ik zie vaak dat voor de onderste blokken rondingen een extra (leeg) element gebruikt wordt... Misschien een mogelijkheid? (niet ideaal ik weet het ;^)

[ Voor 6% gewijzigd door moozzuzz op 17-11-2006 01:50 ]

[Verwijderd]

Wellicht dat je 't met nifty corners op kan lossen: http://www.html.it/articoli/niftycube/index.html

[Blaise]

Als je talloze CSS hacks nodig hebt en je HTML er zo uitziet:

HTML:

                <div class="section_wegwijzer">
                    <div class="wrapper_extra_niet_gebruikt">
                        <div class="wrapper">
                            <div class="block_1">
                                <div class="item">
                                    <div class="item2">

...heb ik het idee dat je beter een tabel kan gebruiken als wrapper. Er is toch geen semantisch correcte oplossing mogelijk voor wat je wil bereiken. Dan kan je mijns inziens beter kiezen voor een stabiele tabel, zonder fragiele CSS hacks en zonder al die niet-semantische div wrappers.

Edit: die javascript oplossing hierboven is prachtig!

[ Voor 4% gewijzigd door Blaise op 17-11-2006 02:20 ]

[Fuzzillogic]

Je hebt per rij (even los van de items erin) 3 divs nodig. Een header, voor de bovenkant van de blokjes, een content-div met daarin de items, en een footer voor de onderkant/scheidingslijn. De header en footer zijn qua content leeg. Dat valt toch wel mee dan?

HTML:

<div class="rij">
  <div class="header" />
  <div class="content"> 
     <div class="blokje1"><ul /></div>
     ... 
   </div>
  <div class="footer" />
</div>

En als je gezegend bent om archaïsche renderengines zoals die van IE6/7 niet te hoeven ondersteunen dan kun je de header en footer gewoon met :before en :after vullen. Doe ik zelf ook op m'n site.

[edit]
Bweh, come to think of it, de afbeelding voor de header kun je inbouwen in de class rij, en de footer kun je inbouwen in de class content. Dan kun je die 2 divs ook nog achterwege laten.

[ Voor 17% gewijzigd door Fuzzillogic op 17-11-2006 02:54 ]

[Verwijderd]

Ik heb ooit eens het voorbeeld gebruikt zoals te zien is op http://www.vertexwerks.com/tests/sidebox/
Dit heb ik gebruikt voor een dynamische gegenereerde site waarbij een productcatalogus getoond werd. Ik heb het volledig met CSS gedaan. Zie hieronder een screenshot. Ik weet alleen niet meer in hoeverre dit flexibel was, maar het was voor een CMS. Was ook mijn eerste site volledig met CSS.

[faabman]

Ik zou één wrapper aanmaken voor al je blocks. Je weet hoeveel blocks je per regel hebt, dus je kunt met een scriptje eenvoudig per regel het hoogste block bepalen om vervolgens de andere blocks op die regels dezelfde hoogte mee te geven.

Die ronde hoeken kun je op je "block"-div, je hx en je ul toepassen. Eventueel zet je in je hx een em, strong of span, dan heb je voldoende elementen om al je ronde hoekjes te maken...

Scheidingslijnen kun je realiseren met een border

[ Voor 5% gewijzigd door faabman op 17-11-2006 08:19 ]

[Boelie-Boelie]

SmileyCat.com heeft een Rounded corners roundup, een verzameling van tientallen rounded cornerartikelen.. Misschien daar even kijken? Als tip wordt daar meegegeven die link van elguapo en de rounded cornerartikelen op 456 Berea Street.