Zitat:
Es ist eine gute Idee, die Breite des Layots auf 760px zu begrenzen, da 1. die meissten Leute mit 800x600 surfen und 2. das Layout nicht so gestreckt wird falls mal jemand mit 1280x1024 surft.
|
Eine schlechte Idee
Generell sollte der Besucher einer Website doch selbst entscheiden in welcher Auflösung er Surft.
Sprechen wir doch von Client-Unabhänig; soweit so gut - sicher sollte man natürlich eine Mindestauflösung ( 800x600 ) berücksichtigen.
Aus diesem Grund sieht CSS2 ja auch die Werte MAX-WIDTH und MIN-WIDTH vor. Leider kann die der IE6 noch nicht.
Deshalb mein Vorschlag:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css"> <!--
html,body {
background-color: #FFFFFF; /* Hintergrungfarbe zur Kontrolle */
color: #000000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.9em;
margin: 0px;
padding: 0px;
}
#nav {
width: 195px;
background-color: #FF9900;
float: left;
}
#minimumrest { background-color: #00FF00; /* Hintergrungfarbe nur zur Kontrolle */
width: 100%; /* Prozentual vom Eltern-Element (#rest); d.h. volle verbleibende Breite; für IE */
height: 4px; /* 4px nur zur Kontrolle ; besser 1px weil sowieso nicht sichtbar */
border: 0px;
}
#rest {
background-color: #0099FF;
float: left;
max-width: 75%; /* 75% von 780px = 585px; damit wird die 800x600 ordentlich Angezeigt */
min-width: 585px;
}
.box {
border: 1px solid #000000;
margin: 5px;
padding: 8px;
}
-->
</style>
</head>
<body><div id="nav">
<div class="box">Inhalt</div>
<div class="box">Inhalt
&
&
</div>
</div><div id="rest">
<div class="box">Inhalt</div>
<div class="box">Inhalt
&
&
&
&
</div>
<div class="box">Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt Inhalt </div>
[img]x.gif[/img]</div></body></html>
Die 2 Container die das Layout in NAV und Rest unterteilen sollten in jedem Fall ohne Border, Padding und Margin definiert werden; Da ja nach dem BOX-Modell genau diese Werte zu den Width-Angaben addiert werden und dann ist Essi-sch(-g) mit 100%........