Help:Responsive web design: verschil tussen versies

Regel 20:

==Titel en ondertitel==

De titel en de ondertitel staan beide in een lettertype met schreef (serif), gelijk aan het lettertype dat voor heading 1 gebruikt wordt. Voor de titel wordt een font grootte (font-size) van 3em gebruikt en voor de ondertitel 2,1em. Ter vergelijk; heading 1 gebruikt een font grootte van 1,8em. Daarnaast staat de titel in vet (bold) en de ondertitel normaal.

De titel en de ondertitel op de hoofdpagina staan beide in een lettertype met schreef (serif), gelijk aan het lettertype dat voor heading 1 gebruikt wordt. Voor de titel wordt een font grootte (font-size) van 3em gebruikt en voor de ondertitel 2,1em. Ter vergelijk; heading 1 gebruikt een font grootte van 1,8em. Daarnaast staat de titel in vet (bold) en de ondertitel normaal.

~~Nu:~~

~~<pre>~~

~~<div style="font-size: 3em; font-family: 'Linux Libertine','Georgia','Times',serif; line-height: 1; font-weight: bold; text-align:center; border-style:none;">~~

~~Welkom op Wouda's Wiki~~

~~</div>~~

~~<p style="font-size: 2.1em; font-family: 'Linux Libertine','Georgia','Times',serif; line-height: 1; font-weight: normal; text-align:center">~~

~~De encyclopedie van het Woudagemaal~~

~~</p>~~

~~</pre>~~

Oorspronkelijk:

----

Welkom op Wouda's Wiki

Regel 38:

Regel 30:

De encyclopedie van het Woudagemaal

</p>

----

===Oplossing===

Gebruik van classes voor de opmaak van de titel en de ondertitel. In common.ccs opmaak van de classen voor de desktop versie en in mobile.css voor de mobiele versie.

----

<p class=titel style="margin: 10px 0px 5px 0px; line-height: 1.2;">Welkom op Wouda's Wiki</p>

<p class=ondertitel style="margin: 5px 0px 10px 0px; line-height: 1.2;">De encyclopedie van het Woudagemaal</p>

----

<p class=titel>Welkom op Wouda's Wiki</p>

<p class=ondertitel>De encyclopedie van het Woudagemaal</p>

----

~~===Oplossing===~~

~~Gebruik van classes voor de opmaak van de titel en de ondertitel. In common.ccs opmaak van de classen voor de desktop versie en in mobile.css voor de mobiele versie.~~

<br>

[[Category:Help]]