Content centreren

isylvio · 24 okt 2011

Hallo allemaal,

Ik ben bezig met mijn website en nu wil ik dat mijn content, aangemaakt met DRAW AP Div, precies in het midden van het beeldscherm komt te staan of het nou een 17" of 21" inch beeldscherm is..

HTML:

<div id="content" >
    	    <p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
      <h4 class="current2">xxxxxxxxxxxxxxxxxxxxxxxxxx.  				</h4>
      <h4 class="current2">xxxxxxxxxxxxxxxxxxxxxxxxxx</h4>
  </div>

Alvast bedankt!

royb3 · 24 okt 2011

maak een div genaamt container of wrapper en stop daar je gehele website in(header de colommen en de footer);
geef de div in de css een breedte(width: 960px; is het meestal beste).
positioneer deze relatief, in css(position: relative; ).
en geef mee: margin: 0 auto; dit zet de container netjes in het midden.

isylvio · 24 okt 2011

Hoi Roy,

Ik zal het gehele stukje html van de body laten zien.

HTML:

<body>
<div id="container" > 
	<div id="content" >
    	    <p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
      <h4 class="current2">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.  				</h4>
      <h4 class="current2">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx)</h4>
  </div>
	<div id="logo" ><img src="Images/logo.png" alt="logo" class="LogoImage" />
</div>
	<h4 id="content" >&nbsp;</h4>
	<div id="menu" >
	   <ul>
       	<li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
		<li>&nbsp;</li>
  		<li>&nbsp;</li>
  		<li>&nbsp;</li>
		<li><a href="creative.html" target="_parent" >Creative</a></li>
		<li><a href="portraits.html" target="_parent" >Portraits</a></li>
		<li><a href="stills.html" target="_parent" >Stills</a></li>
  		<li>&nbsp;</li>
  		<li>&nbsp;</li>
  		<li><span class="current" >About</span></li>
		<li><a href="exhibitions.html" target="_parent" >Exhibitions</a></li>
        <li><a href="contact.html" target="_parent" >Contact</a></li>
        <li>&nbsp;</li>
      </ul>
	</div>
</div>


</body>
</html>

Nu is dus de bedoeling, dat alleen de content altijd gecentreerd is, menu en logo moeten altijd links blijven staan

royb3 · 24 okt 2011

je mag een ID maar een keer aanroepen in een pagina.
zet je menu en logo in een andere div welke je header noemt.
deze positioneer je vanuit vast oogpunt dus geef je: position: fixed;

Code:

<body>
<div id="header">
	<div id="logo" ><img src="Images/logo.png" alt="logo" class="LogoImage" /></div>
<div id="menu" >
	<h4>Menu</h4>
    	<ul>
     		<li>&nbsp;</li>
     	   	<li>&nbsp;</li>
     	   	<li>&nbsp;</li>
      	  	<li>&nbsp;</li>
      	  	<li>&nbsp;</li>
      	  	<li>&nbsp;</li>
    		<li>&nbsp;</li>
    		<li><a href="creative.html" target="_parent" >Creative</a></li>
        	<li><a href="portraits.html" target="_parent" >Portraits</a></li>
        	<li><a href="stills.html" target="_parent" >Stills</a></li>
        	<li>&nbsp;</li>
        	<li>&nbsp;</li>
        	<li><span class="current" >About</span></li>
        	<li><a href="exhibitions.html" target="_parent" >Exhibitions</a></li>
        	<li><a href="contact.html" target="_parent" >Contact</a></li>
        	<li>&nbsp;</li>
      	</ul>
    </div>
</div>
	<div id="container" >
		<div id="content" >
        	    		<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
            			<p>&nbsp;</p>
			<h4 class="current2">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</h4>
			<h4 class="current2">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx)</h4>
  		</div>
	</div>
</div>

</body>
</html>

trouwens, probeer wat geordend te werken

isylvio · 24 okt 2011

Hoi Roy,

Heel heel erg bedankt,
En je hebt helemaal gelijk, dat ik meer geordend moet werken...

Ik loop nu alleen tegen nog een probleempje op, want nu krijg ik mijn index-pagina niet gecentreerd, zoals de andere pagina's...

Zeer waarschijnlijk is dat ook een mess,

HTML:

<body>
<div id="container" >
	<div id="wrapper" > 
	<div id="content" >

		<div id="menu2" >
    	    <p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
    		<p>&nbsp;</p>
           	<ul>
            	<li><span class="current" >Home</span></li>
        		<li><a href="creative.html" target="_parent" >Creative</a></li>
        		<li><a href="portraits.html" target="_parent" >Portraits</a></li>
        		<li><a href="stills.html" target="_parent" >Stills</a></li>
        		<li><a href="about.html" target="_parent" >About</a></li>
        		<li><a href="exhibitions.html" target="_parent" >Exhibitions</a></li>
        		<li><a href="contact.html" target="_parent" >Contact</a></li>
    		</ul>
        </div>
	</div>
	</div>
	<div id="logo" ><img src="Images/logo.png" alt="logo" class="LogoImage" />
	</div>

</div>


</body>
</html>

op deze pagina wil ik dus ook het logo weer links boven hebben en de links nu in het midden gecentreerd.

Hopelijk kan je me hier ook mee helpen of op weg helpen

royb3 · 24 okt 2011

waarom heb je hier een container en een wrapper? bijde zijn hetzelfde...
maak alleen een container en stoop daare je gecentreerde content in, maak een header div voor je menu en logo en zet deze buiten je container(dat is wat je wilde toch? ze moesten links bovenin de bagina blijven...)
position: fixed; meegeven dan telt het 0 punt vanaf de linker bovenhoek.
margin: 0;
padding: 0;
top:0;
left:0; zijn ook aan te raden, omdat sommige browsers eigenwijs zijn met positioneren als je je pagina niet semantisch genoeg schrijft.

isylvio · 24 okt 2011

Hoi Rob,

Bedankt voor jouw geduld

Ik heb mijn index pagina nu alsvolgt;

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" ><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Eye M Lucien Photography - About</title>
<link rel="stylesheet" type="text/css" href="CSS/home.css" />

</head>

<body>
<div id="header">
	<div id="logo" ><img src="Images/logo.png" alt="logo" class="LogoImage" /></div>
</div>
<div id="container_index" >
	<div id="content_index" >
        <div id="menu_index" >
        	<ul>
            		<p>&nbsp;</p>
            		<li><span class="current" >Home</span></li>
        			<li><a href="creative.html" target="_parent" >Creative</a></li>
        			<li><a href="portraits.html" target="_parent" >Portraits</a></li>
        			<li><a href="stills.html" target="_parent" >Stills</a></li>
        			<li><a href="about.html" target="_parent" >About</a></li>
        			<li><a href="exhibitions.html" target="_parent" >Exhibitions</a></li>
        			<li><a href="contact.html" target="_parent" >Contact</a></li>
            </ul>
  		</div>
	</div>
</div>

Code:

@charset "UTF-8";
/* CSS Document */

#container_index{
	position:relative;
	width:960px;
	margin:0 auto;
}

#header{
	position:fixed;
	width:960px;
}

.LogoImage {
	padding-top: 5px;
	padding-left: 20px;
}

#logo {
	position:fixed;
	left:20px;
	top:25px;
	width:580px;
	height:95px;
	z-index:2;
}

body {
	background-color: #eaeaea;
	font-family: myFirstFont;
	font-size: 96px;
	background-attachment: fixed;
	}
	
body,td,th {
	background-color: #eaeaea;
	font-family: myFirstFont;
	font-size: 72px;
}

#background {
	background-size: 100% 100%;
	background-color: transparent;
	position:relative;
	left:0px;
	top:0px;
	width:auto;
	height:auto;
	max-width:100%;
	margin:0;
}

#menu_index {
	position:relative;
	width: 960px;
	margin:0 auto;
	background: #EAEAEA;
}
#menu_index ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 96px;
	}
#menu_index li {
	margin: 0;
	padding: 0;
	display: inline;
	font-weight: bold;
	line-height: 80%;
}
#menu_index a {
	padding: 0 1px;
	color: #808080;
	text-decoration: none;
	}
#menu_index a:hover {
	color: #F90;
}

#menu_index a:focus {
	text-decoration: none;
	color: ##999;
}
	
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
    ,url('Sansation_Light.eot'); /* IE */
}

#content_index {
	position:relative;
	top:-118px;
	width:960px;
	height:auto;
	padding: 0px;
	margin:0 auto;
	margin-top: 250px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-position: center center;
	
}
	
.current{
	color:#f90;
	text-decoration: none;
	font-size: 96px;
	font-style: normal;
	font-weight: bold;
}

En krijg ik de pagina, voor mijn gevoel, op een 21 inch scherm wel goed gecentreerd te zien, maar op een 19 inch scherm, staat de tekst weer iets onder het midden..

Wat doe ik fout???

royb3 · 24 okt 2011

is de browser hetzelfde?
zo net doe je een meyers reset

maak even een nieuw css bestand aan, zet het volgende er in, sla dat op als reset.css en link dat in je head, BOVEN de home.css;

HTML:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

isylvio · 24 okt 2011

Thanks!

maar zag dit er wel goed uit??

www.eyemlucien.com

royb3 · 24 okt 2011

ooh op de hoogte wil je ook centreren?
wat doet margin:auto auto; ?

isylvio · 24 okt 2011

royb3 zei:
ooh op de hoogte wil je ook centreren?
wat doet margin:auto auto; ?

Ik wil de tekst dus in het midden hebben, vandaar dat ik ook de hoogte had opgegeven...
Waar zie je dat staan, margin:auto auto; ?? Want dat moet waarschijnlijk margin:0 auto; zijn.

Kwam mijn index-pagina bij jou goed gecentreerd in beeld?

royb3 · 24 okt 2011

als je verticaal wilt gaan centereren is margin auto auto een beter idee. want dan wordt er berekend hoeveel ruimte vanaf boven en onder tussen de div moet zitten om deze in het midden te zetten.

csshunter · 25 okt 2011

Hoi isylvio,
Naar aanleiding van je andere vraag van hier op het forum was ik je site al eerder aan het bekijken, en had al een paar testpagina's van de homepage gemaakt (er alleen nog niet aan toegekomen er een reactie erbij te pennen), en nu zie ik deze vraag die dit nogal overlapt.

Mijn analyse was: de site gaat/ging gebukt onder onder de vele AP's (absolute posities), en was daardoor niet bij alle resoluties goed op scherm te krijgen.

Testpagina met correcte positionering: eyeMhome-nw.htm
Ter snelle vergelijking had ik er een link ingebouwd naar een kopie-pagina van het origineel, maar die werkt niet meer goed omdat je stylesheet (waarnaar ik doorlinkte) intussen compleet veranderd is.
En intussen zie ik dat de indeling van de homepage óók is gewijzigd ...

In elk geval:

Bij vergelijking van mijn versie en het oude origineel op 1280*1024px resolutie was er geen enkel verschil te zien.
Maar wel op 1024*768: dan vloog jouw versie uit de bocht door niet meer horizontaal te centreren, en mijn pagina bleef o.k.
Je kan dit ook nu nog testen: je scherm op een op resolutie van 1280*1024px of groter zetten, en dan het window van de pagina verkleinen. Vervolgens dat verster aan de rechterkjant vastpakken, en links-rechts heen en weer slepen.
Het tekst-blokje rangeert dan mee, steeds in het midden, met de breedte van het venster.

Maar, hm, intussen doet je nieuwe homepage dat ook. Alleen heeft deze nu zulke grote letters gekregen, dat die er bij 1024*768px niet meer op passen:

Ik zat er trouwens ook op te filosoferen of er niet toch iets van de foto's getoond zou moeten worden op de homepage. Een strakke en minimalistische pagina heeft zeker z'n charme. Maar als ik naar de site van een fotograaf ga, ben ik op de eerste plaats benieuwd naar wat die beeldend te bieden heeft; en daar zie ik niets van op de o zo belangrijke startpagina.
Een manier zou bijvoorbeeld een strookje mini-foto's kunnen zijn, met nog eens herhaling van het menu.

Test 2: eyeMhome-nw2.htm
Het lijkt alsof er 7 images in zitten + nog eens 7 voor de hover-toestanden (=14 stuks), maar in werkelijkheid is het maar één image: een zogenaamde "css-sprite", waarvan via de eigenschap "background-position" telkens een deel wordt gebruikt.
Het logo is nu ook hoverbaar en klikbaar gemaakt: naar de homepage, waarvoor geen speciale knop in de fotostrook zit.

Met vriendelijke groet,
CSShunter
____
O ja, het eot-webfont doet het niet in IE7: die geeft bij mij gewoon de Times New Roman. Volgens de Netrenderer doen IE8 en IE9 het ook niet. Altijd dezelfde!

Een schrale troost: het origineel op w3schools.com doet het ook niet in IE7 en IE8 (wel in IE9).
Maar toch moet het op een of andere manier kunnen, want hier (helemaal onderaan de pagina) werkt een eot voor IE wel: zelfs voor IE6.

Zou er een kromme bit in die Sansation_Light.eot zitten?

isylvio · 25 okt 2011

Hoi CSShunter,

Een hele goedemorgen!

Ik moet zeggen, dat ik jouw test 2 er erg goed uit vind zien en ik ook heel erg benieuwd ben, hoe je dat precies gedaan hebt, want zo zou ik het wel willen.

Je hebt helemaal gelijk, dat de mensen meteen een beeld van de fotograaf willen zien, maar ik wilde niet een standaard pagina, met maar 1 beeld in het midden van de pagina en zoals jij dat opgelost hebt, vind ik wel meer bij mezelf passen.

Ik wil ook wel weten hoe je dat precies met het logo hebt gedaan???

Met vriendelijke groet,
iSylvio

csshunter · 25 okt 2011

Hoi isylvio,

test 2 ... heel erg benieuwd hoe je dat precies gedaan hebt

De css staat in de broncode, want internetpagina's kunnen geen geheimen hebben.

Toen ik test 2 nog eens bekeek, zag ik er nog wat restanten in staan van een vorige versie, en nog een paar onvolkomenheden in de details.
Dit is een betere:

Test 3: eyeMhome-nw3.htm

Toelichting:

Ik begin altijd te ontwerpen met m'n beeldscherm op 1024*768px. Dan past het er altijd op. Vervolgens kijk ik of het op 1280*1024px ook nog goed oogt. Zo niet dan pas ik wat aan (vaak met ergens percentages in te frommelen ipv vaste px). Dat werkt beter dan andersom: van groot naar klein.
Ik volg de Golden Rules of CSS: niet verschillende dingen tegelijk aanpakken, maar per element zorgen dat alles ok is.
Tijdelijke randjes en achtergrond-kleuren voor <div>'s willen wel eens erg handig zijn om te zien waar je zit.
Het linkerdeel met logo en fotostrook is een eigen <div>, die gewoon zonder toestanden in de html staat.
Het menublok voor het letter-menu niet! Dat heeft wel een absolute positie en is over de linkerkolom heen geplakt, maar op zo'n manier dat het geen kwaad kan.

Dit menublok moet gecentreerd komen, wat gedaan is door er een gelijke afstand van de linker- en rechter-zijkant in te zetten: met {left:140px;} en {right:140px;}.
Nu staat het menublok horizontaal in het midden, bij alle resoluties.
Omdat het menublok geïsoleerd is van de rest, kan je nog steeds klikken op de items in de linkerkolom.
De boven-afstand van het menublok kan er niet vast in gezet worden, want bij een grotere resolutie moet het blok kunnen zakken. Daarom ingesteld op {top: 33.5%;}, dan staat het hele blok er ook nog op bij 1024*768, zij het niet zo verticaal gecentreerd als bij hogere resoluties, maar wel met nog wat ruimte eronder.

Dan het binnenwerk van het menublok. Het geheel van het rijtje menu-items moet een "vastgestelde breedte" krijgen om naar een volgende regel te gaan. Die "vastgestelde breedte" is niet in pixels, dat zou problemen opleveren als een bezoeker met de lettergrootte gaat variëren. Vandaar is de maximale breedte afhankelijk gemaakt van de lettergrootte: net als het letterformaat in de relatieve em-eenheid #menu ul {width: 8.7em;}.
Nu het lijstje een vastgestelde breedte heeft, kan het zelf binnen het menublok horizontaal gecentreerd worden met {margin: 0 auto;}.
Maar op deze manier staan de gezamenlijke menu-items exact in het horizontale midden van de pagina, en dat is voor het oog uit balans in de vlakverdeling. Door de linkerkolom en door het links uitlijnen van de items (met woorden van verschillende breedte) lijkt het alsof het menublok dan teveel naar links staat. Bij een lage resolutie schuift de linkerkant van het menublok zelfs onder het logo, wat al helemaal niet mooi is.
Dus ietsje naar rechts opschuiven om alles weer in proportie te krijgen. Dat kan geregeld worden door de <ul> van de items wat padding te geven aan de linkerkant. Maar die padding moet afhankelijk zijn van de schermbreedte, anders gaat het weer mis bij grotere schermbreedtes.
Vandaar moet hiervoor weer een relatieve maat genomen worden. Met wat trial-and-error proberen kwam ik uit op het percentage 22%, dat goed werkt bij alle resoluties (steeds even kijken! ).

Zo, dan kunnen de tijdelijke randjes en bg-kleuren er weer uit en is het middenblok geregeld.

CSS is soms net toveren!

In het resultaat dan, want in de code volgt het een strikte meetkundige logica.

Het lastige is alleen dat er veel van die logica-regels in css zitten, en dat die logica soms ook redelijk ingewikkeld is, als je de css-specificatie er op na slaat (alleen al die inhoudsopgave!).
Maar bv. w3schools.com weet het aardig uit te leggen in hun CSS Tutorial, met voorbeelden om zelf online uit te proberen.

Wordt vervolgd voor de linkerkolom!

Om de tijd te doden, zou je een verhaaltje kunnen lezen over absoluut en relatief:
The Graphical Designer and the CSS Zen Guru - a small story about perception

Met vriendelijke groet,
CSShunter

isylvio · 25 okt 2011

Heel erg bedankt voor jouw hele goede uitleg!

Ik ga het CSS- en HTML-gedeelte rustig op mijn gemak doorlezen, zodat ik de pagina krijg zoals ik het willen heb...
Want ik snap nog niet alles, ondanks jouw goede uitleg...

Want hoe heb jij dat precies gedaan met het logo (het bewegend maken met mouse-over) en met de css-spry?? En hoe groot moeten de images daar voor zijn? Want die zie ik niet in beeld.

csshunter · 28 okt 2011

Hoi isylvio,
Hier is het vervolg, over de hover over het logo en de opschuivertje in het menu van de linkerkolom van de voorbeeldpagina..

Logo: het voorbereidend werk
Nodig zijn twee vrijwel identieke afbeeldingen: 1 voor de gewone toestand, en 1 voor de hover-toestand.

Ik ben ervan uitgegaan dat de lichtgrijze achtergrondkleur van de pagina gehandhaafd blijft.
Daarom niet de originele transparante www.eyemlucien.com/Images/logo.png gedownload en als basis gebruikt, maar even een screenshotje gemaakt met achtergrond en al.
Dan komt het Photoshoppen (in mijn geval: Paintshoppen, want ik bewerk afbeeldingen met Paint Shop Pro; daarin kan je op een vergelijkbare manier met laagjes werken).
Ik vond het formaat van het logo iets aan de kleine kant, en de belettering erg weinig contrast hebben.
De Color Contrast Analyser zegt:
- Foreground: #7A7A7A, Background: #BABABA.
- Colour difference:192, Brightness difference: 64.
- The difference in brightness between the two colours is not sufficient. The threshold is 125, and the result of the foreground and background colours is 64.
- The difference in colour between the two colours is not sufficient. The threshold is 500, and the result of the foreground and background colours is 192.
Dit voldoet dus op geen stukken na aan de standaarden. - Bv. bij een monitor die in tegenlicht staat of die opvallend licht krijgt, kan de tekst in de blokjes onleesbaar worden (zeker als de monitor niet geijkt is op z'n helderheid- en contrast-instellingen, of als een bezoeker daar voor de bruikbaarheid aan gesleuteld heeft).
Dan hebben we het nog niet over de toegankelijkheid voor mensen met een niet optimaal gezichtsvermogen (ken je deze? daar schrok ik van, toen ik die afbeelding voor het eerst zag: de hoeveelheid licht die het oog van een gemiddelde 60-jarige bereikt is nog maar 1/3 van de hoeveelheid van een 20 jarige).
Daarnaast waren de blokjes en de letters niet echt gestoken scherp, maar droegen de sporen van verkleining van een groter logo. Nagetekend en in plaats van de blokjes van 19*19px hiervoor 20*20px genomen: dat kan de letters mooier centreren.
De letters met zwarte kleur opgezet, en vervolgens met de schuifregelaar van de laagjes-doorzichtigheid teruggebracht tot een donkergrijswaarde die voor mijn oog nog duidelijk genoeg is zonder aan het idee afbreuk te doen. (Eigenlijk nog steeds te lage waarden: Colour difference: 342, Brightness difference: 114; maar het komt een stuk dichter bij de drempelwaarden).

(2x uitvergroot)

Op dezelfde manier de hover-variant ingeregeld met iets meer zwart in "lucien" en "Photography", en het M-blokje teruggekanteld.

(ware grootte)

Er bleken maar 186 kleurtinten in de twee varianten samen te zitten, dus de afbeelding teruggebracht tot 256 kleuren en opgeslagen als niet-transparante png (waardoor een extra "alpha-kanaal" voor transparantie in de afbeelding niet opgeslagen hoeft te worden).
Het origineel (met 1 variant) was 66kB - samen zijn deze twee nu minder dan 3,5kB, oftewel nu maar 5% van de bestandsgrootte, en 20 keer zo snel gedownload.

Logo-hover: het uitvoerend werk
Nu moeten deze twee elkaar afwisselen als je er met de muis overheen hovert.

Daarvoor wordt nog vaak javascript gebruikt, waarmee je een functie "swapImage()" kan maken, en ook "imageRestore()" (als de hover verlaten wordt). In Dreamweaver kan dat op de automatische piloot, dan heb je er geen omkijken naar. Er is ook nog een extra functie "imgPreload()" nodig, anders staan de wissel-afbeeldingen niet klaar als je ze nodig hebt.
Maar ik vind het code-vervuiling, want javascript is hier helemaal niet voor nodig. Het kan veel beter, mooier en makkelijker met css!
Het recept is globaal als volgt. Waar op de pagina het aanklikbare logo moet komen (om naar Home te gaan), zet je wel de link, maar zonder iets er in. Deze link geef je met css precies de juiste breedte en hoogte, en je vertelt erbij: {display: block;} zodat je overal in dit gebied kunt hoveren en klikken.
Maar nu hebben we in feite nog alleen maar een transparant hoverbaar en klikbaar gebiedje van 234*44px: dat is ons kijkvenstertje (de "viewport") om naar een achtergrond-afbeelding te kunnen kijken.

Hoe zit dat? Lees hiervoor het artikeltje

De Patrijspoort Theorie - plaatsing van achtergrond-figuren in css !

In onze patrijspoort zetten we nu met css het logo voor de normale toestand.
Maar met css kan je ook regelen dat er bij een hover over iets ook wat gebeurt: dan wordt de gewone afbeelding vervangen door de hover-afbeelding. Terug hoeft niet: want je hovert of je hovert niet, en standaard staat er al de gewone in!
Zo kan het met twee afbeeldingen, maar het kan ook met één gecombineerde afbeelding: een css-sprite.
Dan maak je gebruik van de css-eigenschap background-position: je schuift het te gebruiken gedeelte van de combi op de goede plaats achter de patrijspoort.

Uitgebreider artikeltje hierover: Een blokje knoppen.

Uiteindelijk komt er in de html te staan:

HTML:

...
<h1><a href="#"><span>Eye M Lucien - Photography</span></a></h1>
...

En in de css:

Code:

h1 a {
	width: 234px;
	height: 44px;
	display: block;
	background: url(images/eyeM-sprite.png);
	}
h1 a:hover,
h1 a:focus {
	background-position: 0 -44px ;
	}

Hiermee is de hele hover-wisseling geregeld!

NB-1: Er hoeft nu niet ge-preload te worden: als de gewone toestand geshowd word, is de sprite-afbeelding al binnen, en daar staat meteen de hover-variant in!

NB-2: je zal opmerken dat er toch tekst in de link staat. Dat klopt! Deze is ingepakt in een <span>...</span> (een overspanning). Vervolgens heeft deze <span> via de css opdracht gekregen om buiten het beeldscherm te gaan staan:

Code:

h1 span {
	position: absolute;
	left: 0;
	margin-left: -9999px;
	}

Dat is zo'n kleine 10.000 pixels links van de linkerrand van het scherm.
Dat zit je zo ongeveer in de keuken in plaats van in de woonkamer.

Het nut hiervan is 2-ledig: (1) mensen met een voorleesbrowser kunnen nu horen waar de link over gaat (voorleesbrowsers kennen geen css, dus ook het buiten boord zetten gebeurt daar niet), en (2) Google kent ook alleen maar de platte tekst van de html-code, en kan deze woorden wel lezen. En aan de woorden in de <h1>-tag geeft Google extra waarde. Dat is temeer belangrijk, omdat op je hele homepagina geen één woord tekst staat, en ook niet de naam van de site: het zijn alleen maar links naar vervolgpagina's.

=====
Fotomenu-strook: het voorbereidend werk
Ook hier is het vooral weer rekenen en tekenen.

Een screenshot op 1024*768px leert dat als de onderkant van de fotostrook ongeveer op gelijke komt als de onderkant van het lettermenu, er dan zo'n 400px beschikbaar zijn voor de hoogte van de strook fotootjes.
Er zijn er 6 nodig, en met wat tussenruimte kom je dan uit op 60*60px voor vierkante fotootjes.
Een keus gemaakt uit de beschikbare grote foto's, via de site van de galerie een plattegrondje gesignaleerd, spiegelbeeld-dame voor de contact-link toegevoegd. Vierkante uitsnedes maken, verkleinen tot 60x60. Scherpte, helderheid, contrast en verzadiging aanpassen aan de noden van zulke kleintjes.
Belettering toevoegen, met schaduwlettertjes er onder, voor de gewone en de hover-toestand.
Ze kunnen weer strak naast elkaar komen in een css-sprite, samen met de 2 stuks van het logo: dan is alles in 1 sprite geregeld, snel te downloaden.
Uit de laagjes-werktekening in PaintShopPro:

Fotomenu-strook: het uitvoerend werk
In feite dezelfde werkwijze als bij het logo: nu staan er 6 patrijspoortjes onder elkaar!
Elk is 77*60px groot, om L/R ook ruimte te hebben voor het opschuiven in de hover-toestand.
In de css komt de sprite er nu voor alle links uit de strook weer in als achtergrond-afbeelding:

Code:

#linkerkolom li a {
	width:  77px;
	height: 60px;
	display: block;
	background: url(images/eyeM-sprite.png);
	}

Waarna het schuiven per foto kan beginnen:

Code:

#linkerkolom li #creative    { background-position: -77px -88px }
#linkerkolom li #portraits   { background-position: -77px -148px }
#linkerkolom li #stills      { background-position: -77px -208px }
#linkerkolom li #about       { background-position: -77px -268px }
#linkerkolom li #exhibitions { background-position: -77px -328px }
#linkerkolom li #contact     { background-position: -77px -388px }

#linkerkolom li a#creative:hover    { background-position: 0 -88px }
#linkerkolom li a#portraits:hover   { background-position: 0 -148px }
#linkerkolom li a#stills:hover      { background-position: 0 -208px }
#linkerkolom li a#about:hover       { background-position: 0 -268px }
#linkerkolom li a#exhibitions:hover { background-position: 0 -328px }
#linkerkolom li a#contact:hover     { background-position: 0 -388px }

De eerste serie zijn de normale toestanden, de tweede is voor de hovers.

Bij de normale wordt de sprite steeds 77px naar links getrokken, dan wordt het hover-gedeelte in de sprite (dat links staat) buiten de patrijspoort getrokken.
De eerste link moet 2x 44px van het logo omhoog getrokken worden om goed uit te komen, vervolgens schuiven ze verder steeds een stukje meer omhoog.
Bij de hover-serie hoeft er horizontaal niet te gebeuren: ze staan al aan de linkerkant. De gewone-toestand-variant die er rechts naast staat zie je niet, want die valt buiten de viewport!
Dus de hovers moeten alleen per stuk het goede aantal px naar omhoog.

Als gezegd: tekenen en rekenen!

Maar je hebt gelijk: in de html is geen image te bekennen.

HTML:

...
<div id="linkerkolom">
	<h1><a href="#"><span>Eye M Lucien - Photography</span></a></h1>
	<ul>
		<li><a id="creative" href="creative.html"></a></li>
		<li><a id="portraits" href="portraits.html"></a></li>
		<li><a id="stills" href="stills.html"></a></li>
		<li><a id="about" href="about.html"></a></li>
		<li><a id="exhibitions" href="exhibitions.html"></a></li>

		<li><a id="contact" href="contact.html"></a></li>
	</ul>
</div>

Twee keer de eyeM-sprite.png aanroepen in de css is voldoende voor alle afbeeldingen op de voorbeeldpagina.
De sprite is 69kB groot geworden, maar dan heb je ook in één klap alles binnen.

En voor de prijs van het oude logo heb je nu alle foto's en hun hovers er gratis bij.

Met vriendelijke groet,
CSShunter

isylvio · 28 okt 2011

Hallo CSShunter,

Weer heel erg bedankt voor jouw zeer uitgebreide uitleg.

Ik loop nu tegen het volgende aan...heb nu geprobeerd om de Fotomenu-strook op mijn index-pagina te krijgen, maar ik krijg de png niet te zien, ik zie wel dat er gehoverd wordt...

csshunter · 29 okt 2011

Aha, mogelijk is dat een hoofdletterkwestie.
In Windows maakt het geen verschil of je een map of bestand met kleine of hoofdletters schrijft, op een server wel!
Op de site zie ik dat er een map Images/ is.
Als on de css nu naar de map images/ wordt verwezen als pad naar de fotostrook-sprite, dan wordt er niets gevonden.

Het handigste is om gewoon nooit hoofdletters in mapnamen en bestandsnamen te gebruiken: dan kan je je ook nooit vergissen.

Als dit het niet is, kan je dan een testpagina online zetten en hier de link geven?
Want uit het blote hoofd valt niet te zien waar het in kan zitten.

Met vriendelijke groet,
CSShunter

isylvio · 29 okt 2011

Mijn testpagina is te zien op http://www.eyemlucien.com/test/index_sprite.html

ik heb de mappen nu ook gewoon met kleine letters aangemaakt en volgens mij staan de url's gewoon goed...

Met vriendelijke groet,
iSylvio

Content centreren

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Gebruiker

Terugkerende gebruiker

Meubilair

Gebruiker

Meubilair

Gebruiker

Meubilair

Gebruiker

Meubilair

Gebruiker

Wij waarderen jouw privacy