nicht angemeldet
Browserverhalten
0 0 0 
Auge
0
0
Browserverhalten
Hallo und guten Morgen. Ich versuche gerade, mich etwas in HTML und CSS einzufummeln. Da ich selbst nicht mehr der Jüngste bin, fände ich es ganz gut, Webseiten bauen zu können, die man zoomen kann, ohne dass mein mein mühselig aufgebautes Layout zerschossen wird. Als Versuch habe ich mal etwas "quergestreiftes" gebastelt und dabei festgestellt, dass im Internet-Explorer und Opera bei Erhöhung des Schriftgrades die div's in der Höhe mitwachsen, beim FF und Mozilla und so aber nicht, sodass das dann nicht mehr sehr schön ist. So habe ich es gemacht: <pre> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html> <head> <meta name="generator" content="Scribe! 2 [http://scribe.de]"> <title>Horizontale Aufteilung der Seite mit DIV'S</title> <style type="text/css"> <!-- #nav {float:left;top:13.01%; height:100.1%; width:20%; background: maroon; color: #ffffe0;}
html body {margin: 0; padding: 0; font: normal 99.99% Ariale, Verdana, sans-serif;} .quer1 {float: left;height: 10%; width: 100%; background: #ffffe0; color:maroon;} .quer2 {float: left;height: 3%; width: 100%; background: #aaaaaa; color: #ffffe0;} #content {float: left; height:74%; width: 100%; background: maroon; color: #ffffe0; }
.innen {float:left; width:78%; margin:0.1%; background-color: maroon; }
- html .innen {height: 30em;}
.innen img {float:right; width:40%; margin-top:2%; margin-right: 2%;}
//--> </style> </head>
<div class="quer1">Platz für Banner, Logos, Text oder Hinweise</div>
<div class="quer2">Navigation oder Krümelspur</div>
<div id="content"> <div id="nav"> <ul> <li>Seite 1</li> <li>Seite 2</li> <li>Seite 3</li> <li>Seite 4</li> <li>Seite 5</li>
<li>Seite 6</li> <li>Seite 6</li> </ul> </div> <div class="innen"><img src="platzhalter.jpg" alt="Platzhalter fr Grafik" /> <h2>Innerer Contentbereich</h2> <p>Gegebenenfalls kann mit float: right; auf der rechten Seite ein Bild eingebaut werden. Der Text würde das Bild umfließen</p> <p>Entsprechende Innen- und Außenabstände müssen in CSS noch definiert werden</p>
#<p>Gegebenenfalls kann mit float: right; auf der rechten Seite ein Bild eingebaut werden. Der Text würde das Bild umfließen</p> <p>Entsprechende Innen- und Außenabstände müssen in CSS noch definiert werden</p> </div> </div> <div class="quer2"> Fritz Sanne, Adelebsen, </div> <div class="quer1"> Raum für anderen Quatsch</div>
</body> </html> </pre>
Kann mir jemand einen Tipp geben, wie ich wo was machen kann, um diese Browser zu zwingen zu machen, was ich will? Das wäre nett. Grüße, Fritz
-
Hallo Fritz
... und dabei festgestellt, dass im Internet-Explorer und Opera bei Erhöhung des Schriftgrades die div's in der Höhe mitwachsen, beim FF und Mozilla und so aber nicht, sodass das dann nicht mehr sehr schön ist.
Habs getestet und auch im FF werden die Div's höher.
Wie soll es auch anders sein, irgendwo muss der Platz
ja herkommen. Oder habe ich dich falsch verstanden?J.P.
-
Erstmal danke für die schnellen Antworten.
Also, wenn ich beim FF z.B. auf Strg + klicke, wird die Schrift so groß, dass sie nicht mehr in die grauen Streifen passt. Ich glaube das war class="quer2". Die habe ich im CSS mit height:3%; definiert - glaube ich. Und die wachsen bei der Erhöhung des Schriftgrades nicht mit. Im IE und Opera tun sie das. Wenn ich noch zwei bis drei mal auf Strg + (im FF) klicke, zieht sich auch der innere Bereich im content-Teil über die unten liegenden Div's hinaus. Jedenfalls wird's zerschossen. Ich habe auf Profiseiten gesehen, dass man sicher nicht die Schriftgöße bis ins Unendliche vergrößern kann, aber etwas mehr als zweimal klicken auf Strg + wäre schon schön.
Sollte ich das besser mit "em" statt mit "%" machen? Das kapiere ich alles noch nicht so richtig.
Übrigens - Feinarbeiten habe ich da noch nicht gemacht, weil ich mit dem Groben schon nicht klar komme ;-)
Grüße,
FritzHallo Fritz
... und dabei festgestellt, dass im Internet-Explorer und Opera bei Erhöhung des Schriftgrades die div's in der Höhe mitwachsen, beim FF und Mozilla und so aber nicht, sodass das dann nicht mehr sehr schön ist.
Habs getestet und auch im FF werden die Div's höher.
Wie soll es auch anders sein, irgendwo muss der Platz
ja herkommen. Oder habe ich dich falsch verstanden?J.P.
-
Hallo
Also, wenn ich beim FF z.B. auf Strg + klicke, wird die Schrift so groß, dass sie nicht mehr in die grauen Streifen passt. Ich glaube das war class="quer2". Die habe ich im CSS mit height:3%; definiert - glaube ich. Und die wachsen bei der Erhöhung des Schriftgrades nicht mit.
Du hast eine _feste_ Höhe von 3% der Höhe des Browserfensters (genauer der Höhe des Anzeigebereichs: Viewport) vergeben. daran hält sich der Firefox. Wenn der Inhalt dort nicht hinein passt, und du nichts zu overflow angegeben hast, ragt er halt über den Rand hinaus.
Im IE und Opera tun sie das.
Der IE ignoriert die Höhenangabe, wenn zuviel des Inhalts da ist. Er erweitert dann die Box, so dass alles hinein passt. Dazu stellt CSS eigentlich eine andere Eigenschaft, nämlich min-height, bereit. Die kennt der IE nicht, Firefox und Opera hingegen schon. Allerdings kennt der Opera, für bestimmte Dinge, auch einen "MSIE-Kompatibilitätsmodus", den er hier offensichtlich anwendet.
Wenn du, wie Ingo schon ansprach, die Höhenangaben weglässt, wird den Boxen immer so viel Höhe gegeben, dass alles reinpasst. Und das in jedem Browser.
Wenn ich noch zwei bis drei mal auf Strg + (im FF) klicke, zieht sich auch der innere Bereich im content-Teil über die unten liegenden Div's hinaus. Jedenfalls wird's zerschossen.
Da das oben gesagte (feste Höhe) für alle deine Elemente gilt, gilt auch die Konsequenz (Inhalt ragt aus der Box) für alle Elemente.
Sollte ich das besser mit "em" statt mit "%" machen? Das kapiere ich alles noch nicht so richtig.
Für Elemente, deren Proportionen immer gleich sein sollen, bietet sich em als Maßeinheit an. Allerdings würde ich Höhenangaben sehr sparsam setzen. Wie gesagt, ohne Höhenangabe wird jedem Element die für seinen Inhalt notwendige Höhe zugestanden.
Übrigens - Feinarbeiten habe ich da noch nicht gemacht, weil ich mit dem Groben schon nicht klar komme ;-)
Eins nach dem anderen. :-)
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
Veranstaltungsdatenbank Vdb 0.1-
Hallo Auge, Danke, das bringt mich - glaube ich - weiter. Vergessen, dass es sowas wie overflow gibt. Das mit der Nichtangabe der Höhen der einzelnen DIV's verstehe ich noch nicht ganz. Es soll doch gerade so sein, dass die einzelnen Div's in relativer Größe zueinander stehen. aber ich lese mir das heute morgen noch mal beim Busfahren zur Arbeit aus Stefan Münz "seine Bibel" durch, vielleicht kriege ich es ja durch Deine Hilfe und Anregungen selbst gebacken. Ansonsten, bis denne. Danke,Gute Nacht Fritz
Hallo
Also, wenn ich beim FF z.B. auf Strg + klicke, wird die Schrift so groß, dass sie nicht mehr in die grauen Streifen passt. Ich glaube das war class="quer2". Die habe ich im CSS mit height:3%; definiert - glaube ich. Und die wachsen bei der Erhöhung des Schriftgrades nicht mit.
Du hast eine feste Höhe von 3% der Höhe des Browserfensters (genauer der Höhe des Anzeigebereichs: Viewport) vergeben. daran hält sich der Firefox. Wenn der Inhalt dort nicht hinein passt, und du nichts zu overflow angegeben hast, ragt er halt über den Rand hinaus.
Im IE und Opera tun sie das.
Der IE ignoriert die Höhenangabe, wenn zuviel des Inhalts da ist. Er erweitert dann die Box, so dass alles hinein passt. Dazu stellt CSS eigentlich eine andere Eigenschaft, nämlich min-height, bereit. Die kennt der IE nicht, Firefox und Opera hingegen schon. Allerdings kennt der Opera, für bestimmte Dinge, auch einen "MSIE-Kompatibilitätsmodus", den er hier offensichtlich anwendet.
Wenn du, wie Ingo schon ansprach, die Höhenangaben weglässt, wird den Boxen immer so viel Höhe gegeben, dass alles reinpasst. Und das in jedem Browser.
Wenn ich noch zwei bis drei mal auf Strg + (im FF) klicke, zieht sich auch der innere Bereich im content-Teil über die unten liegenden Div's hinaus. Jedenfalls wird's zerschossen.
Da das oben gesagte (feste Höhe) für alle deine Elemente gilt, gilt auch die Konsequenz (Inhalt ragt aus der Box) für alle Elemente.
Sollte ich das besser mit "em" statt mit "%" machen? Das kapiere ich alles noch nicht so richtig.
Für Elemente, deren Proportionen immer gleich sein sollen, bietet sich em als Maßeinheit an. Allerdings würde ich Höhenangaben sehr sparsam setzen. Wie gesagt, ohne Höhenangabe wird jedem Element die für seinen Inhalt notwendige Höhe zugestanden.
Übrigens - Feinarbeiten habe ich da noch nicht gemacht, weil ich mit dem Groben schon nicht klar komme ;-)
Eins nach dem anderen. :-)
Tschö, Auge
-
-
Hi,
Sollte ich das besser mit "em" statt mit "%" machen? Das kapiere ich alles noch nicht so richtig.
em richtet sich nach der Schriftgröße und % nach der Fenstergröße. Beides kann sinnvoll, aber auch unpassend sein. Die Breite einer Navigation würde och von der Schriftgröße, die generelle Seitenaufteilung hingegen meist von der Fenstergröße abhängig machen. Höhenangaben in % sind selten sinnvoll, in em aber auch nur bedingt.
freundliche Grüße
Ingo
-
-
-
Hi,
Kann mir jemand einen Tipp geben, wie ich wo was machen kann, um diese Browser zu zwingen zu machen, was ich will?
Du denkst verkehrt herum. Zwinge den Browser nicht dazu, eine Box in einer bestimmten Höhe anzuzeigen, dann wird er die Höhe so setzen, dass der Inhalt stets hinein passt. Nur der IE ist da etwas eigen und läßt sich eben nicht zwingen, eine vorgegebene Höhe einzuhalten.
freundliche Grüße
Ingo