Alternative zu min-width für IE?
El Supremo
0 0 El Supremo
0 0 El Supremo
0 El Supremo
0 0 Patrick Andrieu
0
0 Jonathan
Alternative zu min-width für IE?
El Supremo
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...
-
Ohne deinen Text zu lesen:
Wenn du einen 1 Pixel hohe und x Pixel breiten div-Container in deiner sonst durch min-width definierten Box unterbringst ist sie mindestens so breit.
Genauso verhält es sich mit der Höhe.Viel Erfolg beim umsetzen.
Grüße.-
Hallo,
Ohne deinen Text zu lesen:
Macht nichts, du hast das Problem glaube ich genau erkannt...
Wenn du einen 1 Pixel hohe und x Pixel breiten div-Container in deiner sonst durch min-width definierten Box unterbringst ist sie mindestens so breit.
Sehr interessante Idee, aber leider im IE nicht funktionstüchtig. Es führt zum gleichen Ergebnis, wie wenn ich ein Bild einsetze, um auf Mindestbreite zu strecken: Der IE macht die Box, in der sich das Bild/die Platzhalterbox befindet, dann zwar so breit, wie das Bild/die Platzhalterbox verlangt - was bleibt ihm auch schon übrig - aber die "Kindboxen", deren prozentuale Breite ja relativ zur "Elternbox" ist, bekommen ihre Breite berechnet, als würde die "Elternbox" garnicht duch die Platzhaltergrafik/Platzhalterbox gestreckt. Dies führt dann absurderweise dazu, dass die drei Boxen mit 18, 67 und 15 Prozent Breite nicht die "Elternbox" ausfüllen.
Ich habe leider das Gefühl, das Problem noch nicht so richtig beschrieben zu haben, aber besser wills mir gerade einfach nicht gelingen. Ich hoffe, ihr versteht mich auch so und könnt mir helfen.Viel Erfolg beim umsetzen.
Danke, auch wenns ja leider nichts geworden ist...
Grüße.
Gruß
-
Hi,
Ich habe leider das Gefühl, das Problem noch nicht so richtig beschrieben zu haben, aber besser wills mir gerade einfach nicht gelingen. Ich hoffe, ihr versteht mich auch so und könnt mir helfen.
doch, die Schilderung war schon deutlich genug und das Problem sollte ja auch den meisten bekannt sein. Da es aber nur den IE bis zur Version 6 betrifft, nutze ich min-width und ignoriere die mögliche Fehldarstellung inzwischen oder gebe für die alten IEs eine feste Breite an und/oder eine berechnete Breite über Javascript.
freundliche Grüße
Ingo-
Hallo,
doch, die Schilderung war schon deutlich genug und das Problem sollte ja auch den meisten bekannt sein.
Da bin ich ja beruhigt...;)
Da es aber nur den IE bis zur Version 6 betrifft, nutze ich min-width und ignoriere die mögliche Fehldarstellung inzwischen oder gebe für die alten IEs eine feste Breite an und/oder eine berechnete Breite über Javascript.
Meinst du, dass er IE6 inzwischen nur noch so wenig verbreitet ist, dass man ihn ignorieren bzw. mit einer JS-Notlösung abspeisen kann?
Dass der IE7 mit min-width umgehen kann, wusste ich bisher noch nicht.
Ich habe inzwischen Rafaels Vorschlag ein wenig weiter ausgearbeitet, allerdings auch nicht ganz mit dem gewünschten Ergebnis.
Da es wie oben schon beschrieben nichts genutzt hat, für die übergeordnete Box eine Mindestbreite zu erzwingen, habe ich zusätzlich einfach in jede untergeordnete Box ein div gesteckt, welches für diese Box eine Mindestbreite erzwingt.
Ein paar Momente bin ich über meinem Schreibtischstuhl geschwebt, vor Glück, dass es funktioniert, doch dann ist mir leider der Haken aufgefallen, den _diese_ Konstruktion hat: Die Boxen selbst bleiben zwar so breit, wie sie sein sollen, doch diesen Boxen wiederum untergeornete Elemente erhalten - hätte ich mir ja eigentlich schon denken können, da war ich viel zu optimistisch/irrational - ihre Breiten, als hätte ihr Elternelement nicht die erzwungene Breite.
Das führt dann zum Beispiel dazu, dass ein Textabsazt in einem der div-Tags nur einen Teil des div-Tags ausfüllt (natürlich ohne margin/padding).Ich bin also immernoch auf Lösungssuch
-
Ich bin also immernoch auf Lösungssuch
Entschuldigt das bitte; da bin ich versehentlich auf den "Absenden" anstatt dem "Vorschau" Button gekommen. Es sollte heißen:
Ich bin also immernoch auf Lösungssuche...
Grüße
-
Hi,
Meinst du, dass er IE6 inzwischen nur noch so wenig verbreitet ist, dass man ihn ignorieren bzw. mit einer JS-Notlösung abspeisen kann?
ja. Die IEs sind generell auf dem absteigenden Ast und der IE6 wird zumindest auf meinen Seiten schon seltener genutzt als der IE7. Unter'm Strich gibt es zwar noch relativ viele IE6-User, aber geringfügige Anzeigefehler (die nicht zur Unbenutzbarkeit führen) müssen mMn nicht mehr ausgebügelt werden.
freundliche Grüße
Ingo-
Hallo Ingo!
ja. Die IEs sind generell auf dem absteigenden Ast
Das kann ich bestätigen - wenn auch nur langsam absteigend...
und der IE6 wird zumindest auf meinen Seiten schon seltener genutzt als der IE7.
Das leider noch nicht... so dass
aber geringfügige Anzeigefehler (die nicht zur Unbenutzbarkeit führen) müssen mMn nicht mehr ausgebügelt werden.
ich mich damit leider noch ein bisschen zurückhalte.
Viele Grüße aus Frankfurt/Main,
Patrick--
_ - jenseits vom delirium - _
[link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
Nichts ist unmöglich? Doch!
Heute schon gegökt? -
Hi,
Unter'm Strich gibt es zwar noch relativ viele IE6-User, aber geringfügige Anzeigefehler (die nicht zur Unbenutzbarkeit führen) müssen mMn nicht mehr ausgebügelt werden.
IMHO sind Anzeigefehler unter IE6 zumindest im der professionellen Webentwicklung nicht tolerierbar - selbst wenn es nicht massig Firmen gäbe, für die der IE6, wg. Windows 2000, das Ende der Fahnenstange ist (von einem Wechsel des Browsers einmal abgesehen).
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
-
-
-
-
-
-
Hallo,
Position:absolute ist einfach keine gute Idee, wenn du damit größere Seitenbereiche ausrichten willst. Meiner Meinung nach taugt das nur für pseudo-poups wie Layer-Ads, kleinere Navigationselemente und Hacks, wenn es keine andere Möglichkeit gibt. Ansonsten halte ich den Einsatz für zu problematich weil es keine Ausrichtung ab Elternelement gibt und weil damit Fluides Design ziemlich unmöglich ist.
Versuche dein Problem lieber mit floats zu lösen.
Jonathan
-
Hallo,
Ansonsten halte ich den Einsatz [von position:absolute] für zu problematich weil es keine Ausrichtung ab Elternelement gibt und weil damit Fluides Design ziemlich unmöglich ist.
Kannst du mir das etwas genauer erklären? Eine direkte Ausrichtung zum Elternelement ist zwar nicht unbedingt gegeben, aber ja zum nächsthöheren Element mit einer anderen Angabe als
positon:static. Wie meinst du, dass fluides Design dadurch unmöglich wird?Versuche dein Problem lieber mit floats zu lösen.
Auch wenn ich wie oben beschrieben das Problem mit absoluter Positionierung nicht so ganz verstehe, eine interessante Möglichkeit. Allerdings ist mein aktuelles Problem mit der Breite ja davon unabhängig.
-