Website horizontaal en verticaal centreren in de browser

Standaard wordt de html van een website van boven naar beneden in de browser geplaatst. Afhankelijk natuurlijk van de marges start de browser bovenaan en gaat zo ver naar onderen door als nodig is. Maar wat doe je als je de ruimte boven en onder de bladspiegel wilt laten afhangen van de hoogte van het browservenster? Hier volgt een oplossing die werkt in IE5, 6 en 7, Firefox, Safari en Opera.

Links/rechts centreren
Het links/rechts centreren binnen het browservenster is makkelijk. Je geeft een width op voor de webbladspiegel (de container-div) en zet de margins hiervan op: 0 auto. De marges boven en onder zijn nul en de margins links en rechts worden automatisch gegenereerd afhankelijk van de breedte van het browservenster.

Centreren binnen de beschikbare vensterhoogte
Dat doe je op de volgende manier. Je container-div omsluit je met 3 div's. Voor de laatste div-afsluiting plaats je een span. In code ziet het er als volgt uit:

‹body›
 ‹div class="wrapper1"›
  ‹div class="wrapper2"›
   ‹div class="wrapper3"›

   ‹div id="container"›
   ...pagina-inhoud...
   ‹/div›

   ‹/div›
  ‹/div›
 ‹/div›
‹/body›

Bijbehorende CSS
De extra div's geef je de volgende eigenschappen mee in het CSS:

.wrapper1 {
display:table;
margin:0px auto;
}

.wrapper2 {
display:table-cell;
vertical-align:middle;
}

.wrapper3 {
background-color:#eee;
border:1px solid #333;
padding: 3px 5px;
}

Het idee is eigenlijk dat je wrapper1 zich laat gedragen als een tabel en wrapper2 als een tabelcel. De inhoud van een tabelcel kun je vertical binnen die cel centreren. Dat is alles!

De werkwijze voor IE8 is wat anders. Daar komt nog een span bij kijken, maar die behandel ik een andere keer. Als voorbereiding daarop is hier wel al een derde wrapper toegevoegd. Deze is voor de andere browsers niet nodig omdat er al een container-div is waar de CSS-eigenschappen aan meegegeven kunnen worden.

Wordt vervolgd!

Photoshop-effect o.b.v. Luminosity

Op de website http://www.planetphotoshop.com/ heb ik een paar hele leuke video-tutorials gevonden. Leuke trucjes die ook zeker goed toe te passen zijn. Een ervan wil ik hier kort noemen. Het is een effect waarmee images te maken zijn zoals de afbeelding bij dit bericht
(Overigens raad ik je aan om de video te bekijken, maar omdat ik natuurlijk niet zeker ben dat hij altijd te vinden zal blijven, geef ik hier verkort te werkwijze weer:

Leuk effect door gebruikt te maken van Luminositeit
Hier vindt je heel beknopt de verschillende stappen:

• Je opent een foto
• Daarvan laadt je de luminositeit door in het Channels-palet op de combi-channel RGB te klikken met de Ctrl-toets ingedrukt.
• Maak nu een nieuwe channel aan. Terwijl de selctie nog actief is vul je deze met wit.
• Dan inverteer je de selectie en vult deze vervolgens met zwart.
  Inverteer de selectie weer en vul hem drie keer achtereenvolgens met wit.
• Dan kun je de Levels aanpassen. In de tutorial worden de donkere delen iets donkerder gemaakt door de linker schuif iets naar rechts te slepen.
• Vervolgens worden de delen die je niet wilt gebruiken met een zachte brusch weggehaald.
• Dan wordt de nieuwe channel geïnverteerd. Dat doe je met Ctrl+Alt+i. De channel lijkt nu op een negatief.
• Ga nu naar het Lagen-palet en maak een nieuwe laag. Deze vul je met wit. De laag moet bovenaan liggen.
  Maak weer een nieuwe laag en open de selectie van het nieuwe alpha-channel door in het menu Select te kiezen voor Load selection. Kies in het dialoogvenster de optie Alpha 1.
• Vul deze selectie met een solide kleur.
• Nu kun je deze laag vullen met een gradient. Klik dan eerst op het blokje Lock Transparent Pixels in het Lagen-palet. Daarmee voorkom je dat de transparante delen ook gevuld worden.
• De gradienten zijn gemaakt door in de gradient-editor bij het type gradient te kiezen voor noise. Dan kun je random gradienten aan laten maken. Kies steeds een andere totdat een je bevalt.

De video-tutorial vindt je op www.planetphotoshop.com/design-effects.html. Ga ook eerst op zoek naar andere interessante video's. Erg leerzaam.

Mijn website is life!!!

Op 14 mei 2008 is het dan toch eindelijk zover gekomen...
Mijn website is geboren.

www.sbddesign.nl

Nieuwe kook-blog
Meteen op donderdag de 15e maar een nieuwe blog gestart. Het werkt verslavend. Bezoek dus ook even mijn recepten-blog: Koken Online:

kokenonline.blogspot.com

Uitbreiding van deze blog
Ook meteen deze blog maar aangepast en uitgebreid. Ik heb een nieuwe header gemaakt. De naam verwijst nu ook naar mijn bedrijfsnaam. En het belangrijkste: ik heb een index toegevoegd. Nu lukt het me nog wel om de onderwerpen uit alle artikelen terug te vinden. Maar er komt natuurlijk een dag dat het zoeken op datum, zoals een blog nu eenmaal in elkaar zit, niet meer handig is.
Daarom heb ik een index op onderwerp toegevoegd. In de rechterkolom is de link standaard opgenomen.

Wat handige Javascriptjes

Mijn eigen website vordert. Mag ook wel eens. Ik loop ook er steeds meer tegen aan. Iedereen wil altijd als eerste je website zien. Zeker als je zegt webdesigner te zijn. En dan zelf geen website hebben. Beetje stom.

Maar nu wat anders. Voor mijn website heb ik wat javascript gebruikt. Voor het copyrightjaartal en de copyright-houder. Het is namelijk de bedoeling dat in een nieuw jaar het copyrightjaartal opgehoogt wordt. Met dit scriptje hoef je dan niet meer iederjaar al je websites en al je pagina's handmatig aan te passen. Dat gebeurt hiermee automatisch. Geweldig!

Het scriptje dat ik ervoor gebruik, is het volgende:

<script type="text/javascript">
var url = document.URL;
var author = document.getElementById('author')
           .getAttribute('content');
var now = new Date();
var year = now.getFullYear();

document.write("© "+year+", "+author +
          ". All rights reserved.");
</script>

De regels "var author" en "document.write" zijn hier in tweeën gesplitst, omdat ze niet op de regel pasten. Ze moeten natuurlijk op één regel komen. De output wordt dan:

©, ['author'-naam uit de head]. All rights reserved.

Als je ook de naam van de copyright-houder automatisch wilt vermelden, moet je in de head-sectie de volgende regel opnemen:

<meta id="author" name="author" content="Sandra
          Berends digital design">

Ook natuurlijk op 1 regel getypt. Vooral het id-deel moet erbij staan. Daar maakt het javascript gebruik van met getElementById. Het content-deel wordt uitgeschreven. Je kunt natuurlijk ook de regel: var author... weglaten als je alleen het jaartal wilt gebruiken.

Hack voor Safari 3.0 (en Opera 9.0)

www.sbddesign.nl (Bezoek ook mijn bedrijfswebsite)

Al eerder heb ik hacks voor IE6 en Firefox beschreven. Omdat ik laatst versie 3.1 van Safari heb geïnstalleerd en erachter kwam dat sommige onderdelen van door mij gemaakte websites niet goed in Safari getoond werden, ben ik mij gaan verdiepen in hacks speciaal voor deze browser.
Ik heb het volgende gevonden:

Er is een hack voor Safari, maar deze werkt tot Safari versie 3.0.
Het werkt als volgt:

<body>
  <div id="test">Testtekst. Wat zal de kleur
  van de achtergrond zijn?
  </div>
</body>

Dit was de html.
Nu maken we de css-code:

#test {
  background: #c00;
  }

/*--hack voor Safari versies eerder dan 3.0--*/
#test {
  background: yellow;
  #
  }

Nu zal de achtergrond van #test rood zijn in Safari, en yellow in andere browsers. Safari kan door de #-teken alle eigenschappen tussen de haakjes waar # instaat (de gehele declaratie) niet lezen, en naar wat ik begrijp alle regels erna ook niet!. Ik weet niet of dat voor de rest van het stylesheet geldt (alle regels die volgen) of alleen alle declaraties na het #. (Kan het ook niet testen, want ik ga geen eerdere versie van Safari installeren.) Maar ik laat het hier maar bij.

Voor mij interessanter is wat er gebeurt vanaf versie 3.0. Dan werkt deze hack namelijk niet meer. Gelukkig is er ook nu weer een oplossing gevonden, namelijk de volgende (deze hack is ook bruikbaar voor Opera 9.0):

#test {
  background: #c00;
  }

body {background-color: yellow;}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  body {background-color: blue;}
}

Safari 3.0 (en ook Opera 9.0!) lezen de regels @media screen and (-webkit-min-device-pixel-ratio:0) { ... }. Andere browsers slaan dit deel over.

PNG-transparantie in IE6

Het mag duidelijk zijn. PNG is een geweldig formaat voor afbeeldingen. Het maakt gebruik van een apart alfa-kanaal voor transparantie, waardoor het mogelijk is de afbeeldingen ook over meerkleurige achtergronden te plaatsen. Zie bijvoorbeeld de afbeelding hierboven. Dit een een deel van een screendump van een website, waar de image van het houten beeld (een png) over verschillende kleurvlakken (met gradiënten) is geplaatst. De achtergronden lopen prachtig achter de afbeelding door. Vooral als er transparante schaduwen voorkomen en bij afbeeldingsranden zijn de voordelen duidelijk.

Er is zoals bijna altijd heeft zoiets moois ook een nadeel: in dit geval de bestandsgrootte. Een png-afbeelding is veel groter dan een gif. Daarom blijft het aan te bevelen op internet altijd een gif te gebruiken als dat mogelijk is. Belangrijk is het om dan de juiste ‘matte’ in te stellen, zodat de overgang van de afbeelding naar de achtergrond mooi is. Maar een juiste matte in stellen zou in het voorbeeld hierboven niet mogelijk zijn. Dus moeten we hier wel voor png kiezen.

En dan nu de browsers. Hoe gaan die om met png's met transparantie. Internet Explorer 7 en Firefox kunnen het prima behappen. Internet Explorer 6 en eerder helaas niet. Daar wordt de transparantie omgezet naar een blauwig vlak. Tijd om weer wat te verzinnen. Maar een oplossing is er. Microsoft heeft zelf een filter ontwikkeld waarmee in IE6 en eerder de transparantie ook werkelijk transparant wordt weergegeven. Dat filter is de AlphaImageLoader.

Er zijn verschillende manieren om deze Loader te gebruiken. De handigste manier is gebruikmaken van achtergrond-images in css en dit zal ik hier uitleggen. Hier werken we dus niet met het html-element <img>. Het probleem daarvan is dat de <img> het plaatje zonder AlphaImageLoader altijd bovenop het plaatje met zal plaatsen en dat is juist niet de bedoeling. Dat is wel weer met Javascript op te lossen, maar dat is vrij ingewikkeld. Voer voor gevorderden. Daar ga ik later wel eens mijn tanden inzetten.

AlphaImageLoader in gebruik!
Hoe ik het heb opgelost, is als volgt:
Ik maak een div. Deze krijgt als achtergrond-image het bewuste png-plaatje. Voor IE7 en Firefox is dit voldoende. En voor IE6 maak ik een aparte hack waarin ik de AlphaImageLoader gebruik.

Het nadeel van deze methode is dat de images altijd achtergrond-images zijn van een div. Als je voor elke webpagina een andere afbeelding wilt gebruiken, moet je voor elke pagina een andere div id gebruiken. Voor een grote website is dat natuurlijk niet handig, maar goed.

De code in het html-bestand is dan dit (in dit geval een lege div, maar er kan natuurlijk ook van alles in staan):

<div id="transparante_png">
</div>

In de style sheet komt dan het volgende te staan:

#transparante_png {
 background: url(image.png);
 height: 225px; /* afmetingen png */
 width: 300px;
 }

/* hack voor IE6 */
* html #transparante_png {
 background: none;
 filter:progid:DXImageTransform.Microsoft.
   AlphaImageLoader (sizingMethod='scale',
   src='image.png');
 }

Let op: "AlphaImageLoader" komt direct (zonder spatie) achter "Microsoft." en "scr=.." direct achter "'scale',". Volgens mij mag hier een spatie tussen staan, maar het hoeft niet. Belangrijk is wel dat alles op dezelfde regel staat!

(Waar ik in mijn geval nog een tijdje op gepuzzled heb, is het volgende. Ik had mijn css-bestand in een subdirectory /css staan en de images in de subdirectory /img. Mijn background-regel was dan:

background: url(../img/image.png);

Vanuit de css-directory ga je eerst een stap omhoog (..), en dan naar de subdirectory /img om de image te kunnen vinden.
Maar bij gebruik van de AlphaImageLoader bleek ik het volgende te moeten gebruiken:

filter:progid:DXImageTransform.Microsoft.
  AlphaImageLoader (sizingMethod='scale',
  src='img/image.png');

Blijkbaar hoef ik nu niet eerst een directory naar boven.
Het is maar een weetje!)

Preloader-image met CSS

Ik heb pasgeleden een hele leuke tutorial gelezen, die wel eens nuttig kan zijn, en ook heel eenvoudig is. Ik denk dat er zich zeker eens een gelegenheid zal voordoen, dat ik het ga gebruiken. Het is een super-simpele oplossing voor een relatief klein ongemakje, maar het kan je website net gebruikersvriendelijker doen overkomen.

Internet kan traag zijn. Niet voor iedereen, maar een grote groep internetgebruikers heeft niet de luxe van supersnelle verbindingen. Deze mensen wil je natuurlijk ook van je website laten genieten. Daar probeer je al zoveel mogelijk rekening mee te houden door de bestanden zo min mogelijk kB's groot te laten zijn. Maar soms kom je er niet onderuit. Bijvoorbeeld als je een grote afbeelding wilt gebruiken als header, of een nogal fors Flash-filmpje wilt vertonen. De bezoeker van je site moet dan vrij lang wachten tot er iets getoond wordt. Soms zal hij of zij niet eens doorhebben dat er nog iets aan het laden is en al wegklikken voor al het fraais op het beeldscherm staat. Dat is natuurlijk niet wat je wilt.

Een pre-loader als uitkomst
Een website waar ik veel leuke tutorials vanaf haal is www.webdesign.org. Hier zijn leuke tips e.d. te vinden. Veel over Photoshop en Illustrator, maar ook over webdesign, html en css. Deze site is ook leuk voor gratis fonts, geluiden en foto's en zo. Leuk om af en toe te bezoeken!

Ook het idee dat ik hier noem, komt daarvandaan (http://www.webdesign.org/article.php?id=13539).

Het idee op zich is kinderlijk eenvoudig. Om de div met de grote image wordt een andere div geplaatst met daarin een achtergrondplaatje of leuker nog een gif-animatie met 'Loading...' of iets dergelijks.

In het html-bestand zet je het volgende in het body-gedeelte:

<body>
<div id="container">
  <div id="loader">
    <div id="top"></div>
  </div>
  <div id="content"></div>
</div>
</body>

En het bijbehorende style sheet bevat:

* {
 margin:0;
 padding:0;
 }

div#container {
 width:770px;  /* container-deel is 770px breed */
 margin:0 auto;  /* container-deel gecenteerd */
 }

div#loader {
 background:url(loader.gif) center no-repeat;
            /* preloader: (animated-)gif */
 }

div#top {
 height:250px;  /* hoogte headerplaatje */
 background:url(top.jpg) no-repeat;
 }

div#content {
 height:550px;
 background-color:#3300FF;
 }

Een groot deel van de charme zit juist in het feit dat er een animated-gif gebruikt kan worden. En die kun je zo profie maken als je wilt!