Verticaalcentreerprobleem

[MsG]

Hallo,

Ik heb voor kennissen een website voor hun omgebouwd om zo op termijn beter geïndexeerd te worden.

De oude website is: http://www.stijlvol.nu/index2.html

De door mij gemaakte is: http://www.stijlvol.nu/index.html (moet uiteindelijk de oude vervangen).

Ik heb afbeeldingen als menu vervangen door echte menu's, en het geheel van tabellen omgezet naar een wat meer reguliere structuur.

Nu loop ik alleen nog tegen 2 problemen aan: Het menu links moet eigenlijk verticaal gecentreerd evenals de contenttekst in het middengedeelte. Problemen hierbij: Een div eindigt altijd na zijn inhoud en neemt geen volledige ruimte in. En het probleem dat alles dynamisch is en er dus geen hoogte opgegeven kan worden.

Ik heb al tientallen hacks en truukjes geprobeerd. Zo even uit mijn hoofd: spelen met de display van de divs. Een tabel er omheen, etc. Maar ik krijg het maar niet werkend. Heel erg frustrerend. Weet iemand een duwtje in de juiste richting hoe dit toch een beetje normaal mogelijk is? Ik verbaas me er soms over dat relatief simpele dingen op het web zo moeilijk kunnen zijn.

[TweakBoy]

je website is niet echt benaderbaar... (2e link)

[MsG]

Wat krijg je voor melding, want werkt hier prima

[TweakBoy]

http://www.stijlvol.ophetweb.nu/ kan ik niet openen... maar goed.. terugkomend op je probleem:

helpt het niet om een container altijd 100% height+ vertical align voor zijn children content te zetten en je echte content met een margin: auto 0px?

[MsG]

Nee dat helpt helaas niet. De div is namelijk precies zo groot als het menu zelf. Terwijl als deze net zo hoog zou zijn als zijn container ik het daarbinnen kon verticaal centreren. Raar trouwens dat die link niet werkt bij jou. Nog nooit problemen gehad.

[Verwijderd]

zou je {background-color:white;} willen toevoegen an je css? anders ziet het er namelijk heel raar uit als wit niet de standaard ingestelde achtergrondkleur is.

[MsG]

Fixed. Ben eigenlijk wel benieuwd trouwens waarom je die default waarde verandert .

[Verwijderd]

dan ziet het er niet zo oogverblindend wit uit waarneer je een nieuwe tab opent.

en, niet dat he echt een probleem is, maar wat doet die vage echtergondkleurige rand om mijn scherm?

notice de scrollbalken.

niet dat mensen die hun achtergrondkleur veranderen tot de doelgroep van deze site behoren, maar toch...

[MsG]

De scrollbalken zijn omdat ik even via een iframe de nieuwe site moet tonen. Die staat nog op een tijdelijk domein. Voor de echte nieuwe website: http://www.stijlvol.ophetweb.nu/

Die rare kleur krijg ik hier niet

[ Voor 10% gewijzigd door MsG op 19-09-2010 13:17 ]

[Verwijderd]

die rare kleur is mn achtergrondkleur

bij de nieuwe website heb ik het "probleem" inderdaad niet

[mcDavid]

enige manier om dat te doen is voor zover ik weet met javascript. Hoogte van de parent opvragen, hoogte van de child opvragen, van elkaar aftrekken, delen door 2 en je weet de top-margin.

[MsG]

Ik heb nu maar even quick and dirty per pagina in de css de top-margin ingegooid. Ben een beetje zat van de hele tijd uren te slijten naar oplossingen voor het primitieve (in dergelijke dingen) web. Bedankt voor het meedenken iedereen.

[Davio]

Verticaal centreren is een heikel punt met web programming. Ik ben er ook wel eens tegenaan gelopen.
Er kwam meestal een vieze oplossing aan te pas.

Je moet je ook afvragen of je verticaal centreren echt wilt, omdat wij als mensen toch van boven naar beneden lezen en kijken en dan is het niet erg als iets meer naar boven staat in plaats van precies in het midden van het scherm.

[MsG]

Tja, het is een beetje een creatieve klant die er een precies beeld bij heeft. Misschien is het leestechnisch niet het beste ooit, maar liever een tevreden klant in dit geval. ik wacht met smart op HTML5 waar diverse dingen veel simpeler kunnen.

[mcDavid]

MsG schreef op maandag 20 september 2010 @ 11:56:
Tja, het is een beetje een creatieve klant die er een precies beeld bij heeft. Misschien is het leestechnisch niet het beste ooit, maar liever een tevreden klant in dit geval. ik wacht met smart op HTML5 waar diverse dingen veel simpeler kunnen.

Niemand weerhoudt je ervan om gewoon <!doctype html> boven je document te zetten hoor.

[Verwijderd]

Even met google gevonden, http://snipplr.com/view/12566/vertical-align-jquery-plugin/ Is met jQuery, werkt perfect.

[.oisyn]

Behalve dan dat je javascript aan moet hebben staan, en dat een resize van de browserwindow de content niet opnieuw uitlijnt.

[MsG]

Ik heb nu al een lelijke workaround. Maar dat men een scripttaal nodig heeft voor (imo) simple visuele bewerkingen op de tekst is al een beetje mijn punt over het huidige WEB.

mcDavid schreef op maandag 20 september 2010 @ 12:44:
[...]

Niemand weerhoudt je ervan om gewoon <!doctype html> boven je document te zetten hoor.

Maar als de majoriteit op dit moment nog geen HTML5-browser gebruikt is dat ook een beetje zinloos, dan moet er alsnog een fallback zijn voor reguliere browsers.

[MueR]

Verwijderd schreef op maandag 20 september 2010 @ 13:09:
Even met google gevonden, http://snipplr.com/view/12566/vertical-align-jquery-plugin/ Is met jQuery, werkt perfect.

Dit:

.oisyn schreef op maandag 20 september 2010 @ 13:33:
Behalve dan dat je javascript aan moet hebben staan, en dat een resize van de browserwindow de content niet opnieuw uitlijnt.

En natuurlijk de idioterie dat je een compleet framework moet gaan inladen voor een simpele javascript functionaliteit wat met welgeteld 6 regels te doen is.