nicht angemeldet
Probleme mit div-Layout
Hallo!
Ich hab mir schnell ein Seitenlayout mit div-Containern gebastelt und hab aber ein Problem beim Zoomen. Wenn ich relativ weit herauszoome, wird der Inhaltscontainer mit dem blauen Hintergrund plötzlich in einer neuen Zeile angezeigt. Außerdem ist eben dieser Container bei manchen Zoom-Stufen am rechten Rand nicht ganz bündig. Das Problem tritt mit mehreren Browsern auf (Firefox, Chrome, IE). Ich hab schon ein paar mal nachgerechnet, im CSS ergibt die Breite von Menü und Inhalt insgesamt genau 900 Pixel, Padding und Border eingerechnet. Ich kann mir wirklich nicht erklären, woran das liegen könnte. Kann ich das irgendwie abstellen oder liegts einfach am Rendering-Verfahren des Browsers? Wär super wenn das jemand testen könnte :-)
mfg
index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>
</title>
</head>
<body>
<div id="page">
<div id="banner">
Banner
</div>
<div id="wrapper">
<div id="menu">
Menü <br>
<br>
</div>
<div id="content">
<h1>Meine Überschrift</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div style="clear:both;"></div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
stylesheet.css
body {text-align:center; margin:0px;padding:0; border:0}
#page {width:900px; margin:auto; text-align:left;}
#banner {background-color:red; height:400px;}
#wrapper {background-color:yellow}
#menu {padding: 5px; background-color: green; width: 193px;float:left}
#content {width:675px; border-left: 2px solid black; background-color: blue; padding: 10px; float:left}
#footer {width:900px; background-color:black; height: 200px}
-
Hi there,
Ich hab mir schnell ein Seitenlayout mit div-Containern gebastelt und hab aber ein Problem beim Zoomen.
Hat mit Deinem Problem nichts zu tun aber:
Wenn Du ohnehin den HTML5-Doctype verwendest, dann kannst Du "div-Container" auch auszeichnen, als das was sie sind. Also nicht div id="menu" sondern <nav>, das gleiche beim Footer etc...Wenn ich relativ weit herauszoome, wird der Inhaltscontainer mit dem blauen Hintergrund plötzlich in einer neuen Zeile angezeigt.
Ich halte das für ein klassisches Scheinproblem. Oder glaubst Du, daß sich jemand bei Dir beschwert, daß Dein geniales Design ein bisschen durcheinandergerät, wenn er die Seite auf ein Viertel eindampft?
Außerdem ist eben dieser Container bei manchen Zoom-Stufen am rechten Rand nicht ganz bündig.
Du hast die Breite der einzelnen Elemente inkl. des linken Randes für 100% genau ausgerechnet. Bei 90% zB gibts da halt ein Problem für den Browser, weil das meist keine ganzzahligen Werte ergibt. Ich würde mir da auch keine grauen Haare darüber wachsen lassen - wer ständig am Browserzoom herumfuchtelt, der ist auch auf vielen anderen Seiten Kummer gewöhnt.
(Alternative: Du verwendest statt px-Angaben prozentuelle Angaben; könnt' mir vorstellen, daß sich der Browser dann beim Skalieren leichter tut, hab das aber mangels Interesse und aus meiner Sicht kompletten Sinnlosigkeit noch nie ausprobiert...)-
Hat mit Deinem Problem nichts zu tun aber:
Wenn Du ohnehin den HTML5-Doctype verwendest, dann kannst Du "div-Container" auch auszeichnen, als das was sie sind. Also nicht div id="menu" sondern <nav>, das gleiche beim Footer etc...Wie sieht das dann mit älteren Browsern aus? Unterstüzen die sowas überhaupt?
Ich halte das für ein klassisches Scheinproblem. Oder glaubst Du, daß sich jemand bei Dir beschwert, daß Dein geniales Design ein bisschen durcheinandergerät, wenn er die Seite auf ein Viertel eindampft?
Nein, du hast recht :-)
Du hast die Breite der einzelnen Elemente inkl. des linken Randes für 100% genau ausgerechnet. Bei 90% zB gibts da halt ein Problem für den Browser, weil das meist keine ganzzahligen Werte ergibt.
Hab ich mir schon gedacht.
Ich würde mir da auch keine grauen Haare darüber wachsen lassen - wer ständig am Browserzoom herumfuchtelt, der ist auch auf vielen anderen Seiten Kummer gewöhnt.
Das stimmt allerdings, siehe z.b. gamestar.de, beim Rauszoomen verschwindet da die rechte Spalte, ist mir vorher noch nie aufgefallen.
-
Moin!
Wenn Du ohnehin den HTML5-Doctype verwendest, dann kannst Du "div-Container" auch auszeichnen, als das was sie sind. Also nicht div id="menu" sondern <nav>, das gleiche beim Footer etc...
Wie sieht das dann mit älteren Browsern aus? Unterstüzen die sowas überhaupt?
Berechtigte Frage.
Definiere aeltere Browser und deinen Willen diese noch zu unterstuetzen. Die, die schon mit dem Doctype Probleme haben, werden sicher nicht mehr mit den neuen Elementen anfangen koennen.
--
Signaturen sind bloed.-
Moin!
Wie sieht das dann mit älteren Browsern aus? Unterstüzen die sowas überhaupt?
Berechtigte Frage.
Eigentlich gibt es aktuell nur noch den IE 8 als ggf. zu unterstützenden Browser, der von Hause aus kein HTML5 "kann".
Wenn man gewillt ist, auf eine Javascript-Lösung zu setzen, ist aber auch das kein Problem. Es gibt eine ganze Reihe sehr kleiner Polyfills, die dem IE 8 die ihm unbekannten neuen HTML5 Elemente "verständlich" machen.
Gruß Gunther
-
-
-