nicht angemeldet
Spaltenbreite in Proportion zur Schriftgröße (em)
Guten Abend liebe Selfgemeinde!
Nachdem ich jetzt schon den ganzen Tag an dem Layout rumtüfftele, blicke ich langsam aber sicher nicht mehr durch...!
Angeregt durch den Artikel (und das Layout) von Roger Johansson - 456 Berea Street, möchte ich gerne ein 2-Spalten Layout, in Abhängigkeit von der Schriftgröße, erstellen.
Dabei soll die Spaltenbreite zunächst größer werden, wenn man den Schriftgrad erhöht. Sie soll aber ab Fenstergrößen von >=900px nicht breiter als das Fenster werden.
Der nachfolgende Ansatz funktioniert in Gecko basierten Browsern, aber Opera spielt nicht mit (die IE's fallen raus, da sie ja kein min- & max-width kennen).
Die Zoomfunktion von Opera hat scheinbar keine Auswirkungen auf die (interne) Größe von Elementen, somit greift auch max-width nicht.
Laut der JS-Meldung hat das Wrapper-DIV im Firefox keine Breite!?
Bin für alle Tipps, Ideen, Ratschläge, etc. dankbar.
Hier aber zunächst einmal der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testseite 1</title>
<style type="text/css">
html {height: 100.014%; font: 62.5% normal "Lucida Grande",Geneva,Verdana,Arial,Helvetica,sans-serif;}
body {padding: 0;font-size: 1em;}
#wrapper {width: 86em;max-width: 988px;margin: 20px auto;background: #fef;line-height: 1.5em;}
#maincol {float: left;width: 60em;max-width: 69.8%;margin: 0 0 0 0;background: #efefef;}
#rightcol {float: right; width: 26em;max-width: 30.2%;margin: 0 0 0 0;background: #ddd;}
p {padding: 10px;}
#maincol p {font-size: 1.2em;}
#rightcol p {font-size: 1em;}
</style>
</head>
<body id="bod">
<div id="wrapper">
<div id="maincol">
<p>first paragraph ­ main col</p>
</div>
<div id="rightcol">
<p>first paragraph ­ right col</p>
</div>
<div style="clear: both;"></div>
</div>
<script type="text/javascript">
alert(document.getElementById("wrapper").offsetWidth);
alert(document.getElementById("maincol").offsetWidth);
</script>
</body>
</html>
Gruß Gunther
--
c't Wettbewerb: SEO «» Search Engine Optimization «» Suchmaschinenoptimierung
c't Wettbewerb: SEO «» Search Engine Optimization «» Suchmaschinenoptimierung
-
Hi,
Die Zoomfunktion von Opera hat scheinbar keine Auswirkungen auf die (interne) Größe von Elementen, somit greift auch max-width nicht.
Ja. Opera ändert weder Schriftgröße noch Dimensionen, sondern stellt die Seite als Ganzes einfach nur größer (gezoomt) dar; genau wie die zoom-Funktion im IE.
Ich würde grundsätzlich auch anders vorgehen und keine width angeben, sondern nur max-width und das in em. Warum sollte man in einem zu kleinen Fenster scrollen müssen?Und übrigens: Dein Forellenlink ist an dieser Stelle nutzlos.
freundliche Grüße
Ingo-
Hi Ingo,
Ich würde grundsätzlich auch anders vorgehen und keine width angeben,
sorry, aber wie soll das gehen, wenn ich für die Spalten und den Wrapper keine width angebe (oder stehe ich gerade mal wieder auf der Leitung?)
sondern nur max-width und das in em.
für das Wrapper-DIV meinst du, oder?
Warum sollte man in einem zu kleinen Fenster scrollen müssen?
Ich gehe von einer "Mindestbreite" von ca. 900px aus. In kleineren Fenstern (also bspw. bei einer Auflösung von 800x600) kann man dann die Schriftgröße um einen Schritt verkleinern und der Scrollbalken ist weg. Ab einer gewissen Größe, ist das Scrollen eh unvermeidlich. Die Frage ist halt bloß ab welcher Größe.
Und übrigens: Dein Forellenlink ist an dieser Stelle nutzlos.
Warum - hast du etwa nicht draufgeklickt? ;-)
freundliche Grüße
IngoDank & Gruß zurück
Gunther--
c't Wettbewerb: SEO «» Search Engine Optimization «» Suchmaschinenoptimierung-
Hi,
Ich würde grundsätzlich auch anders vorgehen und keine width angeben,
sorry, aber wie soll das gehen, wenn ich für die Spalten und den Wrapper keine width angebe (oder stehe ich gerade mal wieder auf der Leitung?)
für alle Spalten mit schmalerem, berechenbaren Inhalt natrlich, nur nicht für den Inhaltsbereich.
sondern nur max-width und das in em.
für das Wrapper-DIV meinst du, oder?
Genau.
Warum sollte man in einem zu kleinen Fenster scrollen müssen?
Ich gehe von einer "Mindestbreite" von ca. 900px aus. In kleineren Fenstern (also bspw. bei einer Auflösung von 800x600) kann man dann die Schriftgröße um einen Schritt verkleinern und der Scrollbalken ist weg. Ab einer gewissen Größe, ist das Scrollen eh unvermeidlich. Die Frage ist halt bloß ab welcher Größe.
Nö, die Frage stellt sich nicht, wenn nur dann gescrollt werden muß, wenn der Anzeigebereich nicht mehr ausreicht. Ein Untereinanderschieben von floatenden Elementen ließe sich in modernen Browsern durch min-width vermeiden - wenn das überhaupt gewünscht ist.
Und übrigens: Dein Forellenlink ist an dieser Stelle nutzlos.
Warum - hast du etwa nicht draufgeklickt? ;-)
doch, hab ich. Ich meinte für Suchmaschinen.
freundliche Grüße
Ingo
-
-