Centreren en Floaten

[ErikBooy007]

Ik zou graag willen weten wat de beste manier is om een div te centreren, en er links én rechts een div tegenaan te 'hangen'.

Ik heb namelijk een div met content (variabele breedte) met een achtergrond afbeelding en ik wil aan beide kante een divje met een afbeelding van de kopse kanten zeg maar er tegenaan zetten.

Bij een vaste breedte zou me dit geen problemen opleveren, maar nu lukt het even niet.

 

[csshunter]

Hoi,
ik heb deze even gefabriekt, en positief getest in FF en IE7.

• IE6 zou eventueel kunnen protesteren, dan moet opgesnord worden hoe dat ook alweer te verhelpen is. Bv. even het Grote Modellenboek van css-discuss raadplegen.

De kopse kanten hebben hier dezelfde achtergrondkleur (via de #wrapper).
Als ze een verschillende kleur moeten krijgen, zal er een faux-column oplossing aan te pas moeten komen zodat de kortste kolom ook over de volle hoogte zijn kleur krijgt.
Via de #wrapper kan dan de linkerkolom weer zijn kleur krijgen. Om de #content en de #right goed te bedienen zal een extra wrapper-div om (#content + #right) gezet moeten worden, zodat onder dat samenstel een clear gegeven kan worden.

Is dit iets?
CSS-hunter

 

[Goeroeboeroe]

Dat voorbeeld van csshunter werkt ook in IE 6 en Opera, dus gewoon overal.

@csshunter: ik weet waarvoor dat text-align: center in de body en het bijbehorende text-align: left in #wrapper is. Maar persoonlijk ben ik inmiddels de ondersteuning voor IE 6 langzaam aan het afbouwen, zoals heel veel sitebouwers en grote sites.
Oudere browsers dan IE 6 worden nog nauwelijks gebruikt. Is het onderhand geen tijd om de ondersteuning van IE 5.5 en eerder te stoppen? Of heb je er speciale redenen voor die ik niet ken?

 

[csshunter]

@Goeroeboeroe:
Waarom ik ook nog wat voor oude IE's laat staan (als het geen kwaad kan) en als ik tijd heb ook nog voor IE6 test? "Uit gewoonte":

• Omdat ik regelmatig met websites voor de doelgroep "ouderen" doende ben, en mijn ervaring leert dat senioren vaak in het bezit zijn van wat verouderde "afdankertjes"-computers van hun kinderen (met wat daarop staat), en/of niet om de paar jaar een verse computer aanschaffen (met automatisch een nieuwere versie browser); en/of zij zelf niet weten hoe ze een nieuwe browserversie moeten binnenhalen/installeren (omdat niemand ze dat verteld heeft), en/of het niet durven ("veel te eng; hij doet het nu, en je hoort zulke vreemde verhalen als je iets download") en/of niet weten dat er überhaupt een nieuwe versie is (auto-update uitgeschakeld), en/of omdat er niemand is die voor hen de updates/defragmentatie/enz. verzorgt.
• Omdat ik in "kantooromgevingen" van vrijwilligersorganisaties en non-profit organisaties nogal eens tegenkom dat er geen professionele beheerders van het computerpark zijn, en/of de gebruikers in een netwerk zitten waarop zij het zelf niet kunnen doen (en afhankelijk zijn van een kosten met zich mee brengend bedrijf, dat bij voorkeur alleen in noodgevallen wordt ingeschakeld; en zij geen ondershoudsabonnement voor dit soort updates hebben), en/of waar de gebruikers nog in het noob-stadium zitten en veiligheidshalve overal van af blijven.
• Wel maak ik de IE-gebruikers (de hoofdmoot in deze doelgroepen) er dan via een cc'tje in de homepage op attent, dat ze echt een heel oude (oude/niet de laatste) versie hebben, dat dat veiligheidsrisico's geeft, en dat ze de laatste versie moeten installeren, of daar hulp voor moeten zoeken bij familie, vrienden of goede buur.

Ik ijl dus min of meer moedwillig na op het afstoten van oude versies. Vandaar!

Met vriendelijke groet,
CSS-hunter.

PS: wel jammer dat de met veel knarsentandingen verzamelde trukendoos aan de meest vreemde hacks voor lte IE6 zo langzamerhand naar zolder kan.

 

[Goeroeboeroe]

Hmmm, om deze tijd in de nacht mag 't even off topic. Hoop ik
Ah, dus 't is geen grote truc die ik gewoon niet kende.
IE 6 ondersteun ik trouwens nog voor 95% of zo. Alleen dingen die echt niet kunnen laat ik lopen. Maar ik zal de dag zegenen als Microsoft IE even fanatiek gaat pushen als de updates voor z'n verificatie.
Nou, voor mij is 't nu bedtijd.

 

[ErikBooy007]

Dit werkt inderdaad mooi zo, maar er is wel een klein verschil met wat ik bedoelde. Bij mij wordt de breedte niet bepaald door de grote van de viewport (width: 80%), maar door de inhoud.

Daar zit in het midden een div ( ik heb 'm nu een vaste breedte gegeven, met de iconen erin ) en er zit aan allebeide kanten een divje van 30 px tegenaan, de 'kopse kanten'.

Als ik nu niet die ronding erin zou hebben, was het waarschijnlijk makkelijker geweest, maar ja

Maar ik kom er nog niet helemaal uit hoe ik jouw code nu in mijn geval gebruiken kan

 

[csshunter]

Aha, het gaat hier dus niet om een 3-koloms pagina-opzet, maar om een menudock met ronde hoekjes op de kopse kanten, waar een onbekend/wijzigbaar aantal images flexibel in moet passen. Dan kunnen we op een heel andere manier gaan denken.
- Eh, ronde hoekjes?! Dan gaan we even op jacht in de Liquid Corners Playgarden!

• Voorbeeld nummertje 9 ("The image inside", "without the width and height of the img in the css)" zou het moeten zijn.

Daarop gebaseerd:

• Deze menudock-pagina, uitgaande van een vaste hoogte van het dock. Keurige html en css, draait als een tierelier in Firefox, Opera, Safari en IE8, maar ja: IE7...
• Dus als universele oplossing dit alternatief gebakken, met een ééncellig wezen er in, om IE7 en IE6 tevreden te houden.

Komt dat beter in de buurt?
CSS-hunter

PS: nu nog mooie css-rollovers er in, en prachtig!

 

[ErikBooy007]

Nice, ik ga eens even kijken of ik er uit kom! Zo niet, dan hoor je het wel weer!

Bedankt!

 

[ErikBooy007]

Ik heb even wat online geplaatst (mede naar aanleiding van een vraag van me in het PHP forum).

Ik ben namelijk bezig met een soort online-desktopje (totaal niet functioneel, maar puur om eens met wat andere technieken te experimenteren die je normaal in een website nooit gebruikt, het komt waarschijnlijk ook nooit af, want ik werk er aan wanneer ik zin heb of iets wil proberen, ik werk niet naar een deadline toe. En ik moet eigenlijk meer punten in de vorige zin zetten ).

Je kunt het vinden op www.erikbooy.nl/EBOS en de PHP vraag waar het om ging is deze: http://www.helpmij.nl/forum/showthread.php?t=446853

Anyway, dacht dat je het wel leuk vond om even te zien wat je hulp me heeft opgeleverd. Ik geloof dat ik het nog niet exáct zo heb gedaan als jouw voorbeeld, maar zo werkte het in ieder geval voor mij

Nogmaals bedankt!

 

[csshunter]

I like experiments!
En: hele mooie toepassing van de css-hover bg-img in het menu; en dito idem van de css-hover tooltip! :thumb: (een beetje stomme smiley, maar je begrijpt de bedoeling).

... maar zo werkt het in ieder geval voor mij.

Als iets werkt, is het goed!

Toch wil ik hier nog even een pleidooi houden om rijtjes met links (in een menu of elders) zo veel mogelijk in lijstjes te zetten: <UL><LI>'s zijn drastisch beter dan als ze gewoon achter elkaar staan in de html: voor de toegankelijkheid.

• Ik dacht dat het regelmatig toegepaste SpryMenu van Dreamweaver de items ook recht achter elkaar zet in de html... bah!

Met een scherm-voorleespapparaat ben je bijvoorbeeld in de aap gelogeerd als je niet over een lijstje heen kan springen dat je op dat moment toch niet nodig hebt. Of als je niet weet hoe lang de opsomming is: dan moet je alles laten voorlezen om er van af te komen.

Helaas hebben (veel te) veel websites een ellenlang menu zonder "Skip menu" bovenin hangen, en dat moet je dan als blinde bij elke pagina opnieuw eerst helemaal aanhoren om bij de content te mogen komen. Soms wel 60 links in allerlei menu's en submenu's! :shocked:
Geeft dus veel afhakers, en sluit dus hele categorieën uit van het gebruik van een website, terwijl dat helemaal niet hoeft!

Ik heb ter illustratie nog even mijn lijstjes-oplossing verder ge-optimaliseerd voor toegankelijkheid, en dat geeft dit resultaat. Zie aldaar voor wat een voorleesapparaat zegt.

Met groetjes,
CSShunter

PS: is het nou toeval, dat bij mij zowel FF als IE steeds crashen als de EB OS pagina open staat?

 

[ErikBooy007]

Foa, bedankt voor je complimenten

Ik had de items eerst ook in een lijst staan, maar op één of andere manier deed IE toen moeilijk. Ik ga er wel nog eens naar kijken hoe ik het toch in een <UL> netjes voor elkaar krijg. Uiteraard is daar dit "experiment" voor.

Nou is het in dit geval geen probleem als blinden het niet lezen kunnen, aangezien de hele pagina draait om het grafische gebeuren zeg maar. Er staat geen nuttige content op, maar toch wil ik m'n best doen om die technieken te implementeren alsof het wel een "echte website" was.

Enne, het is geen toeval dat je browsers crashen, dat probleem had ik ook. En het was nogal een domme fout.

Ik had een stuk javascript dat er schematisch zo uit ziet:

[JS]

function foo () {

setInterval('foo()', 1000);

}

[/JS]

Dus elke seconde wordt de functie aangeroepen en wordt er ook een interval toegevoegd. Ik had setInterval buiten de functie moeten halen of er setTimeout van moeten maken. Ik moet de nieuwe versie overigens nog uploaden.

 

[csshunter]

Nou is het in dit geval geen probleem als blinden het niet lezen kunnen

Ach, de gelegenheid schept de dief.
Kon ik (net niet off-topic) weer eens een toegankelijkheids-eitje kwijt.

 

[ErikBooy007]

Ja, daar heb je gelijk in. En ik waardeer het ook zeer, want hoeveel ik de laatste dagen / weken wel niet over toegankelijkheid heb geleerd van jou :shocked: Neem als voorbeeld de uitgebreide beoordeling van m'n site

Heb je iets in deze richting gestudeerd, als ik vragen mag?

 

[csshunter]

Nee en ja: paar jaartjes zelfstudie en experimenteren in de vrije (en vaak kleine) uurtjes.
En: geheel gratis, op een paar harde schijven na.
Want geen boek over gekocht: alles wat ik weet van internet geplukt, met dank aan de talloze goede websites, webpublicaties, tips, trucs, enz. die over accessibility in omloop zijn (en ook met dank aan Google). En niet te vergeten de WCAG-guidelines met hun uitleg, en de uitleg bij het Kwaliteitsmodel Websites, de Web Accessibility Toolbar, en nog zo wat. O ja, ook heel leerzaam was het deelnemen aan het internationale css-discuss (veel breder dan alleen accessibility). Helaas te verslavend, en na een paar jaar uitgestapt.

CSShunter

 

[ErikBooy007]

Ah kijk, ik heb het met ook met zelfstudie aangeleerd, maar veel verder dan de basis ben ik (nog) niet gekomen.

Dat komt waarschijnlijk ook omdat je op een gegeven moment een leuke website kunt maken, hij valideert zelfs en dan vond ik het wel goed. Ik ben niet echt blijven zoeken naar dé meest efficiënte code, of hoe kan ik m'n website toegankelijker maken.

Wanneer de website goed te bekijken was voor niet audio-/visueel beperkten, was ik tevreden. Mijn redenering was dan eigenlijk (niet goed, i know), ik kan er wel achter de schermen nog heel veel aan gaan doen, maar dat heeft toch niemand door.

Daar ben ik inmiddels wel vanaf gestapt en nu staat degelijkheid ook wat hoger in het vaandel.

 

[Goeroeboeroe]

En als je vanaf 't begin op toegankelijkheid let, is het eigenlijk nauwelijks extra werk.
Wat ik vaak als argument gebruik en wat (helaas) vaak beter werkt dan 'n beroep op sociaal gevoel of zo: 'n spider van 'n zoekmachine is redelijk goed te vergelijken met 'n blinde. Dus als je 't niet voor de blinde doet, doe 't dan voor de zoekmachine.
En dan is 't meestal ook gelijk redelijk goed toegankelijk voor andere gehandicapten, zoals mensen die geen muis kunnen gebruiken.
Wat ik trouwens heel erg kan aanraden zijn de webrichtlijnen. Daar moeten binnenkort alle overheidssites aan voldoen. Heel leesbaar geschreven, Nederlands, en gewoon heel erg goed en uitgebreid:
http://www.webrichtlijnen.nl/

 

[ErikBooy007]

Ah, das wel leuk leesvoer voor in de vrije tijd ja! Thx

 

[csshunter]

Ja, het Kwaliteitsmodel Webrichtlijnen van www.webrichtlijnen.nl zou voor elke webbouwer verplichte kost moeten zijn. Vooral ook het hoofdstuk over "gelaagd bouwen" (vanaf het begin, Goeroeboeroe!) is erg de moeite waard.
Dit "Kwaliteitsmodel Webrichtlijnen" loopt gelijk op met het alias "Kwaliteitsmodel Websites" op www.kwaliteitsmodel.nl.
De laatste site is iets minder uitgebreid (m.n. de Quickscan Toets ontbreekt), en vooral in het leven geroepen om naast de overheid ook het bedrijfsleven over te halen om meer aan webtoegankelijkheid en gebruikersvriendelijkheid te gaan doen. En het particulier initiatief, zeg ik er maar even bij: ook bv. alle dienstverlenende organisaties in zorg en welzijn zouden zich er meer aan gelegen moeten laten liggen.

• Nootje 1
  Inderdaad moeten alle overheidswebsites binnenkort aan de webrichtlijnen voldoen. "Bestaande websites van de rijksoverheid voldoen uiterlijk 31 december 2010 aan de webrichtlijnen", terwijl nieuwe rijksoverheidssites vanaf september 2006 er ook aan horen te voldoen, aldus het "Besluit Kwaliteit Rijksoverheidswebsites".
  Attentie: dit geldt dus alléén voor rijksoverheidssites! De websites van lagere overheden zoals gemeenten hoeven er niet wettelijk aan te voldoen. Wel hebben die een "inspanningsverplichting" (zonder deadline), zoals met close reading te halen valt uit een gemeenschappelijke verklaring van het Rijk, het IPO (provincies), de VNG (gemeenten) en de UVW (Unie van Waterschappen).
• Nootje 2
  Het gebruiksvriendelijk en toegankelijk krijgen van websites is een zaak van (heel) lange adem. Dat blijkt bijvoorbeeld uit de "good practice" voorbeelden die bij het Kwaliteitsmodel trots worden genoemd. Bovenaan in het rijtje praktijkvoorbeelden staat de Rabobank. Maar ga je daar kijken bij de pagina over toegankelijkheid, dan lees je dat ze de zestien richtlijnen van de Stichting Waarmerk drempelvrij.nl hanteren.
  Maar dat zijn alléén de 16 eisen van prioriteit 1 van de WCAG, en die vormen maar een klein deel van de webrichtlijnen kwaliteitsmodel. Drempelvrij.nl (van het logo met het groene stoplicht-mannetje) zegt daar zelf over: "Dit zijn de 16 belangrijkste ijkpunten, die zorgen voor een minimale toegankelijkheid van websites."
  En ook lezen we bij de rabobank-toegankelijkheid: "Inmiddels voldoet het informatieve deel van onze site aan negen van de zestien richtlijnen." Het houdt dus nog niet over! Als we daar een voorbeeld aan moeten nemen...

Gelukkig kunnen webbouwers uit zichzelf toegankelijke websites bouwen: niemand die ze tegenhoudt.
En voor de belangenbehartigers valt er ook nog iets te doen.

Maar al met al (hand in eigen boezem) zijn we aardig weggekabbeld van het topic "Centreren en Floaten". Zou het niet eens tijd worden voor een groen vlaggetje "Vraag beantwoord"?

Gegroet,
CSShunter

 

[ErikBooy007]

I totally agree!

En ik heb de status van de vraag aangepast

 

[Goeroeboeroe]

Ik denk dat 't ook niet helpt dat de goedkoopste keuring van Drempelvrij 824 euro (!) per jaar (!) is. En hun normdocument is in doc-formaat. Ja, sorry, dan is bij mij gelijk elk vertrouwen weg. Ik heb hun lang geleden al 'ns gemaild en gevraagd waarom ze geen open formaat gebruikten (naast doc). Nooit antwoord gehad.
100 euro korting als je je site bij 'n beperkte groep sitebouwers laat bouwen. Kortom: 't riekt allemaal zeer commercieel.
En dan werken ook nog 'ns 'n hoop van hun spullen alleen op Windows.
Ik heb wat dat betreft in NOIV en de webrichtlijnen bepaald meer vertrouwen.
Edit: ja, 't is off-topic geworden. Aan de andere kant zou eigenlijk bij élk onderwerp op toegankelijkheid gehamerd moeten worden, want Nederland loopt hier gruwelijk in achter.
En weggekabbeld? Ja, natuurlijk. Als je in 't onderwerp floaten zet...