Werken met procenten

Werken in percentages

Er zijn tegenwoordig meer mobiele telefoon met internet verbinding dan computers. Nog even en er zullen ook meer page views zijn vanaf een mobiele telefoon dan vanaf een gewone computer. Tijd dus om te leren hoe je je site voor mobiel geschikt maakt. Tijdens de module MOBI of tijdens je project zul je hiermee aan de slag gaan. Je leert omgaan met mediaqueries en maakt kennis met responsive en fluid websites.

Wat is het verschil tussen responsive en fluid?

  • Responsive lay-out: je site ‘springt’ naar een andere vormgeving bij een bepaald aantal pixels. Bijvoorbeeld: voor mobiel staan je div-elementenĀ  onder elkaar, voor desktop naast elkaar. Er is dan sprake van een omslagpunt (breakpoint genoemd) bij een bepaalde schermbreedte, dit geef je op in je code. Eventueel neem je een aantal breakpoints op in je code zodat je site op meerdere punten zich aanpast. Meestal bedoelen we hier mediaqueries mee.
  • Fluid lay-out: je site is een percentage van de schermbreedte waardoor elementen breder en smaller wanneer je het scherm uitrekt of op een ander formaat scherm bekijkt. Hiermee bedoelen we werken in percentages.

Je combineert dus mediaqueries met percentages.

 

Fluid opzet van je site

Ik heb onderstaand voorbeeld gemaakt. Site op full screen:

opzet-fluid-site-1

Site bij een minder hoog screen. Je ziet dat de header ook minder hoog wordt.

opzet-fluid-site-2

De bijbehorende HTML:

<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Werken in percentages</title>
</head>
<link href=”normalize.min.css” rel=”stylesheet” type=”text/css”>
<link href=”percentages.css” rel=”stylesheet” type=”text/css”>

<body>
<div id=”container”>
<div id=”header”>Header (rood) in container (bruin)</div>
<div id=”content”>Content (blauw)</div>
</div>
</body>
</html>

Met de CSS:

@charset “UTF-8”;
/* CSS Document */
*{
box-sizing:border-box;
}
html,body{
width:100%;
height:100%;
background: url(images/bgHome.jpg) bottom center no-repeat;
}
#container{
width:90%;
height:100%;
background-color:rgba(255, 255, 255, 0.3);
margin:0 auto;
padding: 0 5%;
}
#header{
width:100%;
height:20%;
background-color:rgba(255, 255, 255, 0.5);
color:#4C0406;
}

Even een aantal zaken aanstippen:

  1. Zet je html en body op 100% hoogte en 100% breedte in je CSS.
  2. Werk je met een container? Zet die hoogte dan ook op 100%.
  3. Voeg een reset toe om de scrollbalken te vermijden die je anders krijgt wanneer je je html en body op 100% zet.
  4. In dit voorbeeld heb ik niet de oude vertrouwde reset van Eric Meyer maar normalize.css welke in de praktijk meer gebruikt wordt dan de reset.css van Eric Meyer.
  5. Normalize heb ik in de minified versie opgenomen. Dit houdt in dat alle overbodig spaties en returns uit het document gehaald zijn. Dit levert snelheidswinst op voor je site en daar houden zoekmachines van.
  6. Ik zet de box-sizing op border-box zodat bij het berekenen van de hoogte en breedte van je site width, padding, border en margin samen worden gerekend in plaats van dat jij alles bij elkaar moet optellen.
  7. Hiervoor gebruik ik de wildcard (het * teken) in mijn stylesheet.

 

Overerving en percentages

CSS beteket Cascading wat overerving inhoudt. Dit betekent dat elementen dingen overnemen van hun parent (het element waar ze in staan). Stel dat een body 50% hoog is, dan zal een container van 100% hoogte voor ons op het scherm ook maar tot de helft van je beeldscherm komen. Immers: de container gebruikt 100% van de 50% beschikbare ruimte. Visueel levert dit 50% op.

Vandaar dat je eerst moet aangeven dat de html-tag 100% hoog is, vervolgens dat de body-tag 100% hoog is en dan dat de container-div 100% hoog is.

 

Het contentvlak en het probleem van Liza

Ik kies er voor om een aparte div voor de content te maken in plaats van dat ik alle foto’s los in mijn container zet. Ik vind dat dit mij meer gemak geeft voor het positioneren van elementen.

Mijn header was 20% hoog, dus ik hou 80% over voor de hoogte van mijn content. Ik wil 5% margin boven en onder zodat er wat witruimte zit. Maar… dit werkt niet!

margin-probleem-perc

Ik krijg een scrollbalk enĀ  mijn contentvlak valt buiten de container. Het lijkt welk alsof in mijn website de margins niet meetellen. Dit wil ik niet!

Een oplossing kan zijn om in mijn contentvlak aan te geven dat ik 5% padding wil en dan in mijn contentvlak een nieuw div-element te maken wat 100% hoog en 100% breed is zodat ik visueel krijg wat ik wil:

Content vlak valt nu binnen de container

De bijbehorende HTML is nu:

<!doctype html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Werken in percentages</title>
</head>
<link href=”normalize.min.css” rel=”stylesheet” type=”text/css”>
<link href=”percentages.css” rel=”stylesheet” type=”text/css”>

<body>
<div id=”container”>
<div id=”header”>Header in container</div>
<div id=”content”><div id=”innerContent”>innerContent</div></div>
</div>
</body>
</html>

En de CSS:

@charset “UTF-8”;
/* CSS Document */
*{
box-sizing:border-box;
}

html,body{
width:100%;
height:100%;
background: url(images/bgHome.jpg) bottom center no-repeat;
color:#FFF;
}
#container{
width:90%;
height:100%;
background-color:rgba(255, 255, 255, 0.3);
margin:0 auto;
padding: 0 5%;
}
#header{
width:100%;
height:20%;
background-color:rgba(255, 255, 255, 0.5);
color:#4C0406;
}
#content{
height:80%;
padding:5% 0; /* wijzig in margin om verschil te zien*/

}
#innerContent{
width:100%;
height:100%;
background-color:white;
}

Het probleem met witruimtes in sites met percentages

En tevens blijkt dat de hoogte van mijn witruimte NIET verandert als ik de hoogte van mijn browsersscherm aanpas:

Margin height verandert niet bij wijziging van de schermhoogte

Maar wel wanneer ik de breedte van mijn browserscherm aanpas:

margin wijzigt wel bij breedte van scherm

 

De hoogte van de witruimte is afhankelijk van de breedte van het parent element!

Waarom dit zo is, is wat onduidelijk. Wij zullen dit niet kunnen oplossen want het ligt besloten in de specificaties van W3org, de organisatie verantwoordelijk voor HTML en CSS. Waarschijnlijk zit het als volgt (ik probeer duidelijk te blijven maar het is een breinbreker). Zie http://stackoverflow.com/questions/11003911/why-are-margin-padding-percentages-in-css-always-calculated-against-width:

  1. Als de margin / padding van een child element in hoogte kan wijzigen dan zal het parent element ook in hoogte wijzigen.
  2. Aangezien child elementen hun hoogte via de parent krijgen loop je het risico dat je site in een oneindige loop komt of een foutmelding genereerd (immers: parent wijzigt child maar child wijzigt tegelijkertijd de parent).
  3. Een ander antwoord wat ik via internet vind is dat margin nu eenmaal rondom vanuit dezelfde bron berekend moet zijn, als de margin boven en onder anders is dan links en rechts wordt het niet meer consistent.
  4. Ik kan geen reden vinden waarom er uitgerekend naar de breedte is gekeken. Ik kan hoogstens zelf verzinnen dat dit dan mooier werkt voor verschillende schermbreedtes. En dat dan inderdaad de margin overal dezelfde basis gebruikt als berekening (en dus naar de breedte kijkt).

 

Maar hoe kunnen we Liza’s probleem nu oplossen?

Gebruik padding in een parent element om te voorkomen dat een element buiten de container valt.

Met betrekking tot het niet lekker werken van de witruimte: niet.