Als ich angefangen habe mit "em" statt "px" zu arbeiten, fiel es mir auch nicht gerade leicht. Aber mittlerweile verwende ich eigentlich garnichtmehr "px" und ich weiß auch immer mehr wieviel das ganze von "em" in "px" umgerechnet wäre. ^^
Im Prinzip geh ich immer davon aus:
css:
Code:
body { font:100.01%/1.4em Arial; color:#000; background:#FFF; }
#over { width: 56.25em; height:100%; margin: 0em auto; font-size: 1em; }
(56.25em entsprechen hier 900px)
html
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title> Titel </title>
<!--META-->
<link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
</head><body>
<div id="over">
</div>
</body></html>
Das ist eigentlich von jeder meiner Seiten das Grundgerüst. Somit hab ich umgerechnet 16px Schriftgröße und das wars.
Ich gebe dann auch nicht den Eltern-Elementen die Schriftgröße sondern direkt den Elementen die das Textliche enthalten. Sprich wenn ich eine Navigation habe, geb ich nicht mit <ul> eine Schriftgröße, sondern dem <li>. Somit kann ich beim rechnen der Größe des <ul> mit 16px als Umrechnungen nehmen.
Das ist deutlich einfacher, wie wenn man dem <ul> ein 0.75em gibt und dann plötzlich bei "width" und "height" nichtmehr mit Faktor 16 rechnet, sondern mit Faktor 12 (1em = 16px | 0.75em = 12px).
Somit sieht eigentlich jedes CSS-Grundgerüst erweitert so aus:
Code:
* { margin:0; padding:0; }
body { font:100.01%/1.4em Arial; color:#000; background:#FFF; }
#over { width: 56.25em; height: 100%; margin: 0em auto; font-size: 1em; }
a { }
a:hover { }
a:visited { }
a:activ { }
address { font-style: normal; }
img { border: 0; display:block; }
table { border:0; }
ul,ol,dl { list-style: none; }
address,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,... { padding:[I]xx[/I]em; font-size:1em; }
h1 { font-size:1em; }
h2 { font-size:..; }
h3 { font-size:..; }
h4 { font-size:..; }
h5 { font-size:..; }
h6 { font-size:..; }
Meisten habe ich beim Header ein Bild mit drin, das ich natürlich gezoomt haben möchte. Dann schreibe ich (deswegen auch Schriftgröße 1em bei h1 (umrechnung 16px)):
Code:
h1 { font-size:1em; }
h1 img { width: [I]xx[/I]em; height: [I]xx[/I]em; }
h1 span { visibility:hidden; }
html:
Code:
<h1><img src="#" width="" height="" alt="" /><span></span></h1>
Innerhalb des <span></span> nocheinmal der Titel der Seite.
Meisten gebe ich dem <p> noch ein font-size:1em; und gruppiere über den Überschriften alles was gleiches padding hat. Ich mag es nicht so wenn ich 100 verschiedene margin- und padding-werte bei den Elementen habe. Deshalb vesuche ich soviel wie möglich einheitlich und gruppiert zu notieren.
Yoah..das wars eigentlich.. Der Rest ist eigentlich dann recht schnell gemacht, egal ob es Content, Footer oder sonst was ist. Letzenendes ist ja das ganze dann mit PHP noch "ausgefüllt" womit ich das HTML-Grundgerüst von oben eigentlich in jeder Seite verwenden kann und auch tue. Der Rest ist ausgelagert und/oder wird dynamisch geladen. Meisten stehen in der Grunddatei dann "nurnoch" ein <div id="main"> </div> und, wenn nötig / gewünscht, eine "sidebar".
Aber ich mag jetzt nicht zu weit abschweifen und alle "Arbeitsweisen" von mir hier reinschreiben, denn jeder hat eine Andere und jeder Arbeitet mit anderen Methoden und Strukturen.
Im Endeffekt sollte das Ganze eigentlich kein Problem sein von wegen "umrechnen".
16px = 1em
12px = 0.75em
50px = 3.125em
100px = 6.25em (200 -> 12.5, 300 -> 18.75, ... )
900px = 56.25em
fertig ^^
Gruß
Loon3y
Edit: Nicht wundern, dass gruppiert die Überschriften alle mit nen font-size dort stehen und unten nochmal einzeln. Das sollte endweder nur ein "Beispiel" sein das ich mehreren Elementen den padding-wert gebe, oder mehreren Elementen eine font-size gebe.
