nicht angemeldet
Hallo,
ich bin gerade dabei, ein (zugegeben, ziemlich simples) Layout zu erstellen, das auf CSS formatierten div-Tags aufbaut, da mein altes Tabellenlayout sowieso keine dauerhafte Lösung war und wegen eines Problems jetzt umso schneller ersetzt werden muss.
Die div Tags dabei haben prozentuale Breiten, sollen aber auch Mindestbreiten haben. Und da fängt das Problem an, da der IE ja min-width nicht kennt. Opera und Firefox haben mit meiner jetzigen Konstruktion keine Probleme.
Da ich eine Headergrafik verwende, die genau der Mindestbreite des Layouts entspricht, bleibt diese Box auch im IE so breit, wie sie sein soll. Die Boxen darunter verschmälern sich aber natürlich trotzdem, so dass bei einem schmalen Viewport der Header die Mindestbreite hat, der restliche Inhalt aber nicht, was entsprechend dämlich aussieht.
Naja, meine Frage ist jetzt einfach, wie ich den div-Tags auch für den IE eine Mindestbreite geben kann. Sie in ein übergeordnetes div stecken und bei diesem mit einer Platzhaltergrafik eine Mindestbreite zu erzwingen habe ich schon versucht, doch der IE wehrt sich auch gegen diese vermeintliche Lösung, da er das übergeordnete div dann zwar auf "Wunschbreite" lässt, die diesem untergeordneten divs ihre prozentuale Breite aber erhalten, als wäre das übergeordnete div nicht durch die Platzhaltergrafik gestreckt.
Hier noch das nötigste an Code, mit dem ich das Beschriebene versuche:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Layout-Test</title>
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div class="header"> <!-- Steht oben mittig, enthaelt nur die Headergrafik -->
<img src="/gfx/header.gif" width="780" height="68" alt="Header">
</div>
<div class="container"> <!-- Enthaelt die drei Spalten unter dem Header -->
<img src="gfx/spacer.gif" width="780" height="1" alt="1">
<div class="navigationsbox"> <!-- Steht links oben in "container" -->
<p>Navigation...</p>
<p>Lorem ipsum qui ea platonem theophrastus concludaturque, labore expetenda conclusionemque ut vim. Nec prompta nusquam ea. Elit tritani qui ne. Dolorem principes torquatos qui in, per mutat reque constituam et. Facilisis liberavisse nec ex. Eum quis omnis doming in.<br>
Ne agam brute vis. Eos cu nisl ullum epicurei. Per sint sale possit no, in iusto referrentur mel, id pro amet aperiri. His eu nemore definiebas.</p>
</div>
<div class="inhaltsbox"> <!-- Steht mittig oben in "container" -->
<p>Inhalt...</p>
<p>Lorem ipsum qui ea platonem theophrastus concludaturque, labore expetenda conclusionemque ut vim. Nec prompta nusquam ea. Elit tritani qui ne. Dolorem principes torquatos qui in, per mutat reque constituam et. Facilisis liberavisse nec ex. Eum quis omnis doming in.<br>
Ne agam brute vis. Eos cu nisl ullum epicurei. Per sint sale possit no, in iusto referrentur mel, id pro amet aperiri. His eu nemore definiebas.</p>
</div>
<div class="buttonsbox"> <!-- Steht rechts oben in "container" -->
<p>Sonstiges...</p>
<p>Lorem ipsum qui ea platonem theophrastus concludaturque, labore expetenda conclusionemque ut vim. Nec prompta nusquam ea. Elit tritani qui ne. Dolorem principes torquatos qui in, per mutat reque constituam et. Facilisis liberavisse nec ex. Eum quis omnis doming in.<br>
Ne agam brute vis. Eos cu nisl ullum epicurei. Per sint sale possit no, in iusto referrentur mel, id pro amet aperiri. His eu nemore definiebas.</p>
</div>
</div>
</body>
</html>
Das dazu gehörende Stylesheet:
html
{
width:100%;
}
p
{
text-align:justify;
padding-left:9px;
padding-right:9px;
}
.header
{
width:80%;
min-width:780px;
position:relative;
top:0;
margin-left:auto;
margin-right:auto;
border: 1px solid black;
}
.container /* Enthaelt .mitte, .buttonsbox, .navigationsbox */
{
width:80%;
min-width:780px;
position:relative;
margin-left:auto;
margin-right:auto;
border: 1px solid red;
}
.navigationsbox
{
width:18%;
position:absolute; /* Ohne sichtbaren Effekt, doch zur Vergleichbarkeit mit .inhaltsbox und .buttonsbox */
left:0;
top:0;
border: 1px solid black;
}
.inhaltsbox
{
width:67%;
position:absolute;
left:18%; /* = width von .navigationsbox */
top:0;
border: 1px solid black;
}
.buttonsbox
{
width:15%;
position:absolute;
left:85%; /* = width von .links + .mitte */
top:0;
border: 1px solid black;
}
Ich hoffe, dass mir jemand helfen kann...