Marc: Float-Probleme mit IE + richtige Maßeinheit

Beitrag lesen

Moin moin

Bei allem, was direkt oder indirekt von der Schrift abhängt. Es macht beispielsweise wenig Sinn, ein Foto mit em-Größen zu versehen. Überlege Dir also, ob die Länge irgendeinen Zusammenhang zur Schrift besitzt.

Also kann man theoretisch beinahe alles mit em auszeichnen, weil sowohl Breite, Höhe, padding u. margin-Werte von Schriftgröße abhängen. Während

border:1em solid blue;

demnach wohl wenig Sinn machen würde, weil der Rand nicht von der Schrift abhängig ist.

Ist das alles soweit korrekt?

Jein - auch bei Abständen macht es IMHO wenig Sinn - hier setze ich in der Regel auf Prozent-Angaben.

1 em ist die Größe des Buchstabens "M" - d. h., wenn Du die Schrift vergrößerst (Strg und + im Mozilla), dann werden auch die Abstände größer. Das ist ein Problem, weil dann weniger Platz für die größere Schrift bleibt.

Breiten vom Menü sollten in em sein, da sonst die Schrift schnell aus dem Menü herauswächst, der (in der normal-Einstellung meistens) recht große Inhaltsbereich sollte dann schrumpfen - erreicht man dadurch, dass man einen entsprechenden Rand (margin) mittels em definiert.

Ein ganz einfaches Beispiel:

div#menu {
  position:absolute;
  top:0;
  left:0;
  width:10em;
}

div#main {
  position:absolute;
  top:0;
  left:10em;
  margin-left:5%;
}

So erhält man ein Menü, das mit der Schrift wächst, einen Hauptbereich, der entsprechend schrumpft und man hat einen Abstand zwischen beiden von 5% der Fensterbreite - d. h. einen kleinen Abstand bei Leuten die wenig Platz, weil ein schmales Fenster haben und einen etwas größeren Abstand bei Leuten, die ein entsprechend breites Fenster öffnen.

Diesen Abstand könnte man vielleicht auch absolut angeben (also px) würde ich aber nicht machen...

Am besten mal ausprobieren!

Gruß,
Marc.

--
sh:( fo:| ch:? rl:? br:> n4:& ie:% mo:} va:} de:] zu:) fl:( ss:| ls: js:(
http://www.peter.in-berlin.de/projekte/selfcode/?code=sh%3A%28+fo%3A%7C+ch%3A%3F+rl%3A%3F+br%3A%3E+n4%3A%26+ie%3A%25+mo%3A%7D+va%3A%7D+de%3A%5D+zu%3A%29+fl%3A%28+ss%3A%7C+ls%3A+js%3A%28