donderdag 8 november 2012

Testen website voor wide screen en aanpassen achtergrond afbeelding

Bij het maken van een website moet de website getest worden in meerdere browsers maar ook binnen meerdere schermresoluties. Nu heeft de ontwikkelaar niet altijd de beschikking over een rij computers of monitoren en dat is natuurlijk ook geen makkelijk optie. Wat betreft het testen binnen verschillende monitoren zijn de volgende mogelijkheden beschikbaar:

  1. Firefox addon "Firesizer": Niet handig omdat de computer monitor een limiet heeft (bijvoorbeeld 1280px) en testen in widescreen daarmee onmogelijk is.

  2. De webdeveloper extensie "resize" van Firefox: zelfde probleem als onder 1

  3. De Ctrl + en Ctrl - knoppen: simpele en meest effectieve optie wat mij betreft. Zo vergroot ik de monitor weergave niet maar verklein ik de website weergave en daardoor krijg ik de website toch te zien zoals hij op een wide screen getoond wordt.


Vervolgens kan ik de grootte van de background image aanpassen en testen. Natuurlijk wil ik een dynamische grootte. Oftewel: grootte wordt gepaald door de monitor waarmee de bezoeker de website bezoekt. Achtergrond afbeelding moet getoond worden over hele scherm. Of dit scherm nu 800px x 600px of 2400px breed is. Uitgangspunt is gebruikte css. De nieuwe standaard laat volgende code toe:
background-size: cover;

Maar helaas, als ik die vermelding plaats binnen huidige css file dan werkt dat niet. Wat wel werkt:
Website openen in Firefox en element inspecteren met Firebug. [background-size: cover;] toevoegen aan css binnen Firefox en resultaat bekijken via Ctrl+. Als het goed is werkt het nu wel. Vervolgens kopieer is de gehele achtergrond vermelding naar de vermelding binnen originele css file:
#footer {
background-attachment: scroll;
background-clip: border-box;
background-color: #0A546B;
background-image: url("../images/footer.jpg");
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
clear: both;
color: #FFFFFF;
margin: -50px 0 0;
min-width: 1200px;
overflow: hidden;
padding: 80px 0 0}

Firefox heeft de hele achtergrond / background css vermeldingen voor de positie #footer aangepast aan de browserstandaard en daarmee is volgens mij Firefox / Firebug de beste (en gratis) html editor die er bestaat. Toch?
Wilt u de layout van uw website laten aanpassen? dewebmeester.nl rekent per "tweak" 10 Euro maar soms kunt u gebruik maken van speciale acties waardoor "tweaks" te koop zijn vanaf 5 Euro. Volg dewebmeester.nl om op de hoogte te blijven:

Ir. Meindert A. Jorna (Msc.)

Savornin Lohmanstraat 45

6702BN Wageningen

☎ 0317 795149

Mob. 06 412 86716

☒ info: www.dewebmeester.nl

My profiles: facebook.png Facebook linkedin.png LinkedIn flickr.png Flickr twitter.png Twitter

pixel.png?p=mozilla&v=3.11.21&t=1352372387225&u=dbb866711fc9370a

Geen opmerkingen:

Een reactie posten