Druckbare Version
Hallo,
ich möchte gerne ein linksbündiges Layout mit einem dynamischen Abstand nach links erstellen. Soll heissen das der Abstand nur dann vorkommen soll wenn die Mindestbreite vorhanden ist. Dadurch soll verhindern werden das bei Auflösungen um oder kleiner 1024px ein Scrollbalken entsteht.
Ich hoffe die Skizze kann das Ganze noch ein wenig verdeutlichen.
Wenn ihr wisst wie man das hinbekommt würde ich mich über ein Beispiel freuen.
Viele Grüße
Sabri
Hallo Sabri,
das geht eigentlich recht simpel. Zur Veranschaulichung einer kurzer Testcase:
Ich sollte allerdings dazu sagen, dass die Eigenschaften min-width und max-width nicht vom IE6 unterstützt werden.HTML-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" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Testcase</title>
</head>
<body>
<div style="min-width:960px; max-width:1040px; height:100px; background-color:#f00">
<div style="width:960px; height:100px; background-color:#ccc; float:right;">container</div>
</div>
</body>
</html>
Beim kleiner Auflösung bleibt ein 80x1 großer Bereich ober über dem Contentbereich. Vielleicht kann man diesen vertuschen ;)Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">
/* <![CDATA[ */
#leftx {
float:left;
width:80px;
height:1px;
background-color:red;
}
#content {
float:left;
width:960px;
height:100%;
background-color:blue;
}
/* ]]> */
</style>
</head>
<body>
<div id="leftx">
</div
<div id="content">
</div>
</body>
</html>
Vielen Dank für die beiden Vorschläge, ich werde es mal probieren!
Zu beachten ist ev. noch dass der IE6 die min-width ignoriert...