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