Probleempje met layout (CSS/HTML vraagje)

Status
Niet open voor verdere reacties.
gertdejong

gertdejong

Gebruiker
Lid geworden
20 jul 2007
Berichten
27
Goedemiddag,

Ik wil graag een layout met 3 divs waarbij div1 boven in beeld gecentreerd zichtbaar is, div2 horizontaal en verticaal gecentreerd en div3 gecentreerd onderaan in het scherm. De layout zorgt er dus voor dat div1 en div3 sowieso zichtbaar zijn (in het slechtste geval met een lage resolutie vallen ze over div2 heen). Hier een schetsje:
schetsje.gif
(met dank csshunter)

Hoe kan ik dit het beste aanpakken met HTML/CSS? Ik kom er niet uit...

BVD,

Gert de Jong
 
Laatst bewerkt:
Hoi Gert,
Geen oplossing, maar wel even een betere versie van het schetsje (met heel veel pijn en moeite kon ik dat tevoorschijn krijgen, waarschijnlijk vanwege een foutje in de png; bij eerste keer bekijken van deze pagina was er alleen oningevulde ruimte, na pagina-refresh was ook de ruimte weg, en bij rechtstreeks oproepen van het img kwam deze ontstellend langzaam binnen). Hier als gif:

schetsje.gif

Nu kunnen we zien wat de bedoeling is! ;)
 
Hoi Gert,
Ik kom er niet uit...
Klik om te vergroten...
Tja, verticaal centreren is één van de lastigste dingen, want daar zijn browsers niet erg op gebouwd. Doorgaans is juist de hoogte van een container variabel, zodat de bezoeker bv. de lettergrootte kan aanpassen zonder dat de tekst uit de container loopt. En zelfs met tabellen is het nogal ondoenlijk om iets precies op de schermhoogte verticaal te centreren...

Tenminste, als je dat puur met css wilt doen, en als alle containers niet met hoogtes in % (van de beeldschermhoogte) kunnen worden opgegeven.
Bij vaste maten van de containers kan het weer wel, maar daarmee leg je je vast op een bepaald beeldschermformaat.
En dat is ook niet echt jofel, zwak uitgedrukt. :confused:

Blijft over: onze vriend Javascript (in combi met vriendin Css; ze hadden een heel aardige Valentijnsdag).
Onze vriend kan gewoon uitrekenen op hoeveel pixels van boven een gecentreerde midden-container moet komen. En niet alleen uitrekenen, ook toepassen. :)

Blijft over: de voorzieningen die je moet treffen als iemand Javascript uit heeft staan: dan moet de pagina toch toonbaar zijn.
Maar het moet wel kunnen:

midden-midden.gif

Waarschijnlijk kom je dan uit bij een model als dit:
Met veel content (bij dezelfde styles en hetzelfde script) wordt de pagina dan:
Achter beide pagina's zit een "Script Stapsgewijs" pagina, waarin de berekening op de voet wordt gevolgd.

Verder aan jou en eenieder die dit leest: de schone taak om te proberen dit model kapot te krijgen bij een bepaalde venstergrootte/resolutie, of in een bepaalde browser. ;)

Met vriendelijke groet,
CSShunter
__________
PS: Er zijn natuurlijk ook varianten mogelijk, al naar gelang van wat er verder op de pagina moet gebeuren: het model is ook een schets! :)
 
Hoi,


@csshunter: vanwaar de Javascript? Net eventjes getest, maar zonder werkt het ook (FF) prima! Of is IE weer een spelbreker?


:thumb:
 
csshunter zei:
(...)
__________
PS: Er zijn natuurlijk ook varianten mogelijk, al naar gelang van wat er verder op de pagina moet gebeuren: het model is ook een schets! :)
Klik om te vergroten...

Ehm, de contentdiv heeft een fixed size in mijn geval, dat maakt het verticaal centreren een stuk makkelijker toch? (sterker nog: alle divs hebben een fixed size)

En o ja, dank natuurlijk voor zover!!
 
@ That Guy:
Hé, dan heb ik een héél andere Firefox dan jij! :D

Dit is 'm met javascript aan:

midden-midden-script.png
en
midden-midden-scriptloos.png

Zo ziet ie er bij mij in FF3.5 *) scriptloos uit: het middenblok staat wel altijd tussen de header en de footer, maar ook als ik mijn bril afzet zweeft het roze blok niet verticaal gecentreerd tussen de twee groene.
Alleen als het middenblok flink gevuld is met content (test b) dan maakt het niet uit.

@ Gert:
Ik kom daar nog op terug!
O, wat zijn de aantallen px van die fixed sizes? Komen misschien nog van pas.

Met vriendelijke groet,
CSShunter
__________
*) En in IE7 en in Chrome en in Opera en in Safari.
 
Hey, dat's raar. Dat deet ie gisteren toch mooi niet. :confused:

In ieder geval, hier is nog een mogelijkheid. Een beetje valsspelen met de display property:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- http://www.helpmij.nl/forum/showthread.php/605575-Probleempje-met-layout-%28CSS-HTML-vraagje%29? -->
<title>midden-midden (a)</title>

<style type="text/css">
html {
	height: 100%;
	}
body {
	width: 780px;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	font-family: arial, helvetica, verdana, sans-serif;
	}
#header {
	height: 100px;
	border: 1px dotted blue;
	}
#footer {
	position: absolute;
	width: 780px;
	height: 50px;
	bottom: 0;
	border: 1px dotted blue;
	}

h1 {
	margin: 0;
	padding: 0;
	text-align: center;
	}	
p {
	margin: .7em 0 0 0;
	padding: 0;
	}	
.last {
	border-bottom: 1px dashed red;
	}


#wrapper
{
   display:table;
   height: 100%;
   position:absolute;
   top: 0px;
   width: 780px;
}

#cell{
   display:table-cell;
   vertical-align:middle;
}

#content
{
   /* hier iets */
}


</style>

</head>

<body>

<div id="header">
	header

</div>


<div id="wrapper">
	<div id="cell">
		<div class="content">
			Zo! In het midden!
		</div>
	</div>
</div>


<div id="footer">
	footer
</div>

</body> 
</html>
Dit idee komt bijvoorbeeld vanaf hier, maar je kan het verder zelf op google vinden: css vertical center table oid.

Overgens schijnt het niet (goed) te werken in IE, maar dat kan ik niet testen: zit op het moment op een linux-machine.



:thumb:
 
Was ook al hevig aan de knutsel geweest met de {display:table;} en {display:table-cell;}, maar dat was me op die manier niet gelukt!
Dus wie schetst mijn verbazing bij zo'n simpele oplossing? ;)

Fase 2
Zien! Ingemonteerd tot www.developerscorner.nl/csshunter/tests/middenmidden_tg.htm.
Ach! Toettutniet...
Wel bij benadering: d.w.z. hij zit wel keurig op het screenhoogte-midden, edoch nog niet in het midden tussen header en footer.

midden-midden-tg.png

Maar misschien valt daar nog iets aan te verhapstukken (ook nog even de opgegeven literatuur lezen).

Overgens schijnt het niet (goed) te werken in IE, maar dat kan ik niet testen
Klik om te vergroten...
IE7:
midden-midden-ie.png

Pfff!
 
Tsja. IE7 - dat's alweer 2 versies geleden (nouwja, bijna dan)!

Mischien met wat cc-magie: een conditional comment om een scriptje aan te roepen welk voor IE7 en lager de benodigde Javascript-magie uitvoert!



:thumb:
 
Indendraad, dat moet dan wel weer een CC worden.
't Zal mij trouwens benieuwen bij welke IE-versie Microsoft die CC's zal gaan uitzetten, omdat ze gewoon niet meer nodig zijn.

[ot]
Maar over IE7 gesproken, ik zou niet graag de kost geven aan de kantoren waar nog een woeste variëteit aan IE's in gebruik is (zoals bij mijn club, waar pas vorige maand de IE6'en en IE7's zijn vervangen)...
Om nog maar te zwijgen van de intranets die in elkaar vallen als ze van IE6 afstappen; daar hoor je ook leuke verhalen over. :d
[/ot]
 
csshunter zei:
Hoi Gert,

(...)

Waarschijnlijk kom je dan uit bij een model als dit:
Met veel content (bij dezelfde styles en hetzelfde script) wordt de pagina dan:
Achter beide pagina's zit een "Script Stapsgewijs" pagina, waarin de berekening op de voet wordt gevolgd.

(...)
Klik om te vergroten...

Ik heb het hiermee gedaan en ik ben zeer tevreden over het resultaat! Hartelijk dank allen voor het meedenken/helpen!
 
Helaas!

gertdejong zei:
Ik heb het hiermee gedaan en ik ben zeer tevreden over het resultaat! Hartelijk dank allen voor het meedenken/helpen!
Klik om te vergroten...

Ai, beetje jammer. Bij sommige mensen met IE8 (o.a.) flipt de site en gaat hij flikkeren. Heb je hier een oplossing voor? Hartelijk dank alvast!
 
Dat is wel jammer. Maar m'n testpagina deed het bij mijn weten goed in alle browsers... :rolleyes:

=====
"Bij sommige mensen met IE8 (o.a.) flipt de site"
Klik om te vergroten...
1. Betekent dit dat ook op andere browsers de site flipt? Of alleen IE-versies?

=====
... flipt de site en gaat hij flikkeren.
Klik om te vergroten...
2. Waar bestaat dat flikkeren precies uit? Is het echt permanent flikkeren, of is het alleen een flits bij een pagina-wissel?

=====
Heb je hier een oplossing voor?
Klik om te vergroten...
Nop, want de probleem-pagina heeft zich nog niet gemeld, en waar het aan ligt is wat moeilijk te raden zonder het verschijnsel (en de html/css/js-codes) te zien.
3. Heb je een link?

Met vriendelijke groet,
CSShunter
 
filmpje

Ik heb een filmpje ervan, moet ik even opzoeken. Sowieso alleen bij IE-versies van de site. Het probleem doet zich voor op de website www.triplepoint.nl (ik zie het niet maar anderen geven aan dat het probleem er wel degelijk is, van hen heb ik het filmpje gekregen).

Het filmpje komt eraan maar misschien heb je vast wat aan het bovenstaande. Ontzettend bedankt alvast!
 
Hoi Gert,

1. Achtergrond
Wat me alvast opvalt: de achtergrond-afbeelding www.triplepoint.nl/images/background.png is pittig groot: 560kB. Bovendien is het een semi-transparante png (met verlooptinten aan de randen in een alphakanaal), en IE is van oudsher geen held in het renderen van png's. Maar de pagina-achtergrond is puur wit, en de transparantie is niet nodig: het verloop naar wit kan ook rechtstreeks in de afbeelding. Verder is het img opgeslagen met 16M kleuren, terwijl er "maar" 4.877 kleuren in zitten. - Maar dat zie je er niet aan af! Zonder kwaliteitsverlies kan je die terugbrengen tot 256 kleuren.
Al met al levert dit als nieuwe versie:
Dat is in elk geval sneller inladen van de pagina.

2. Embedded css
De css-styles zitten er per pagina steeds opnieuw in (in de <head>). Met een los .css stylesheet boek je snelheidswinst op de vervolgpagina's, want dan zijn de styles al gedownload bij de bezoeker.

3. Eigen font
Er zit het te downloaden speciale lettertype "Myriad Pro Regular" in (in FF en Chrome is die overigens bij mij erg schraal). Ik weet niet of dit voor complicaties zorgt, maar het speciale ervan was me eerlijk gezegd niet opgevallen. Ik denk dat dit niet echt nodig is: met de Arial met wat extra letter-spacing kom je waarschijnlijk ook al een heel eind.

4. Embedded script
Ook het stukje javascript voor het centreren zit er bij elke pagina opnieuw in. Met een separaat .js bestandje win je weer een paar milliseconden.

5. Traagheid
Niet alleen IE geeft even een flikkering te zien. Ook andere browsers (FF, Chrome) geven bij inladen even een verspringer te zien. Dat komt omdat de pagina eerst gerenderd wordt, en daarna het javascript losbarst om het midden te berekenen en alles op z'n plaats te zetten. Om dat te vermijden, zou het middengedeelte eerst onzichtbaar gemaakt kunnen worden, om pas aan het eind van het javascript de instructie te krijgen zichtbaar te worden.

Tot zover,
Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan