nicht angemeldet
2 Boxen nebeneinander IE vs. Konqueror
Hallo,
ich möchte in einer mittig platzierten Box fester Größe (blau umrandet) u.aa. 2 Boxen fester Breite (rot umd grün) mit einem bestimmten Abstand nebeneinander platzieren.
#bb {
width:242px;
float:left;
....
}
#tt{
width:409px;
position:relative;
left:-91px;
top:20px;
float:right;
.....
}
Diese Variante klappt für IE >= 4.0, Mozilla, Opera - aber nicht im Konqueror (und vermutlich damit nicht auf Mac-Browsern, die ich leider nicht selbst testen kann):
http://mirakulum.com/test/bad_ko.html
Für den Konqueror wiederum funktioniert
#tt{
width:409px;
margin-right:91px;
margin-top:20px;
float:right;
...
}
was sowohl im IE 5.5 als auch 6.0 zu Unsinn führt:
http://mirakulum.com/test/bad_ie.html
Das der IE 5 das Boxmodell falsch verarbeitet, weiß ich - aber hier geht es um die Verwendung von margin und außerdem der IE 6 (nicht im Quirks-Mode)?????
Und wieso wird beim IE die einhüllende blau umrandete Box um den margin-right-Betrag größer, der textblock tt aber um das Doppelte (!) dieses Betrages nach links verschoben?
Wie also ist das was passiert zu verstehen und gibt es eine Lösung für beide Browser (ohne Hacks, zur Not mit validen Hacks) ?
Gespannt auf Eure Antworten
Michael
-
Nochmal die Aufgabe mit Links:
In mittig platzierter Box fester Größe (797px breit) sollen nebeneinander die Box #bb (242px) und #tt (409px) stehen, so daß tt 91 px vom rechten Rand entfernt ist, d.h. der Abstand der beiden 51px beträgt (4px gehen noch für den Rahmen drauf).Bei der 1. Umsetzung: http://mirakulum.com/test/bad_ko.html
spinnt der Konqueror, bei der 2. Variante: http://mirakulum.com/test/bad_ie.html der IE 5.5 und 6.Weiß denn keiner einen Weg oder drücke ich mich unklar aus??
Ich bin gespannt - Michael
-
Hi,
Du verwendest hier eigentlich völlig unnötig negative margins und position:absolute würde ich auch nicht zusammen mit float einsetzen. Da Du feste Dimensionen sowohl für den Rahmen als auch üner die Bilder für die Positionierung der Willkommen-Box hast, wäre es doch ein leichtes, alle Elemente absolut zu positionieren. Damit sollte dann sogar der NN4 klarkommen.
Übrigens:
<div id="t2">Willkommen</div>
</div>
</div>
</div>
</div>
</div>
tolle Div-Suppe, die Du da fabriziert hast;-)freundliche Grüße
Ingo-
Hi Ingo,
danke für deine Antwort.
ich habe die Dateien noch etwas verknappt - fürs Wesentliche:
http://mirakulum.com/test/bad_ko.html und http://mirakulum.com/test/bad_ie.html.Hi,
Du verwendest hier eigentlich völlig unnötig negative margins und position:absolute
Die divs #horizon und #content brauchen das, um den Inhalt vertikal und horizontal zentriert zu platzieren.
würde ich auch nicht zusammen mit float einsetzen.
floaten sollen doch die Elemente innerhalb der absolut positionierten Box - das geht doch. Der Ärger kommt ja erst, da ich einen Abstand zwischen dem rechten Element und dem rechten äußeren Rand haben will.
Da Du feste Dimensionen sowohl für den Rahmen als auch üner die Bilder für die Positionierung der Willkommen-Box hast, wäre es doch ein leichtes, alle Elemente absolut zu positionieren. Damit sollte dann sogar der NN4 klarkommen.
Das überdenke ich noch mal, allerdings habe ich vor, das bei Vergößerung der Schriftgröße sich die Box nach unten ausdehnt (dann natürlich nicht mehr so ganz zentriert ist - leider) , folgende Boxen nach unten verschiebt - das widerspricht absoluter Positionierung.
Übrigens:
<div id="t2">Willkommen</div>
</div>
</div>
</div>
</div>
</div>
tolle Div-Suppe, die Du da fabriziert hast;-)Ist jetzt schon etwas weniger - s.o. ;-)
freundliche Grüße
IngoWie schon gefragt - ich glaube der CSS-Theorie zufolge müßten beide Varianten korrekt sein - oder? - nur wie sag ich das den Browsern??
Freundliche Grüße zurück
Michael-
Hi,
Du verwendest hier eigentlich völlig unnötig negative margins und position:absolute
Die divs #horizon und #content brauchen das, um den Inhalt vertikal und horizontal zentriert zu platzieren.
das DIV #horizon benötigst Du doch garnicht dafür.
würde ich auch nicht zusammen mit float einsetzen.
floaten sollen doch die Elemente innerhalb der absolut positionierten Box
Aber das tun sie doch garnicht. Du hast die Breiten so angegeben, daß ein wirkliches floaten, d.h. Umbrechen bei kleinerem Fenster, nicht stattfindet.
Das überdenke ich noch mal, allerdings habe ich vor, das bei Vergößerung der Schriftgröße sich die Box nach unten ausdehnt (dann natürlich nicht mehr so ganz zentriert ist - leider)
wieso nicht? Die zentrierte Box hat feste Dimensionen und bleibt auch im IE zentriert, wenn die Inhalte der darin enthaltenen Boxen in diese passen. Das funktioniert in der Breite dann, wenn der Text umbrechen kann. In der Höhe hast Du freilich ein Problem, da sich die Höhe des umschließenden DIVs in standardkonformen Brosern nicht vergrößert. Wenn Du das flexibel willst, solltest Du vielleicht doch auf eine fste Höhe und vertikale Zentrierung vrzichten.
Wie schon gefragt - ich glaube der CSS-Theorie zufolge müßten beide Varianten korrekt sein - oder? - nur wie sag ich das den Browsern??
zumindest Mozilla stellt beide Versionen gleich dar.
Aber ich zeige Dir einmal eine Änderung der Version bad_ie.html, in der ich das DIV #horizon gelöscht und auf float verzichtet habe:
html, body {
width:100%; height:100%;
padding:0; margin:0;
font-family: Verdena, Helvetica, Arial, sans-serif;
}
#content {
width:799px; height: 480px;
position:absolute; top:50%; left:50%;
margin: -240px 0 0 -399px;
border: 1px solid #085194;
}
#bb {
width:242px;
position: absolute; top:0; left:0;
border:solid 1px red;
}
#tt{
width:409px;
position:absolute; top:20px; right:91px;
border:solid 1px green;
}
...freundliche Grüße
Ingo-
Hi Ingo,
mit der von Dir vorgeschlagenen mittigen Platzierung kommt der Konqueror (3.1) nicht zurecht (und irgendwo las ich, daß zumindest einer der Mac-Browser die gleiche Engine hat wie der K.) - genau gesagt er versteht es nicht das Objekt auf der Hälfte der Seitenhöhe zu platzieren, er setzt es an den oberen Rand, so daß nur ein Teil zu sehen ist.
Die Variante mit #horizon funktioniert dagegen in IE >= 4, Moz, Netscape >= 6, Opera (7) und eben auch Konqueror. Ich habe sie von
http://www.wpdfd.com/editorial/thebox/deadcentre3.htmlZum Floaten: Die Breite soll bei der äußeren wie bei den inneren Boxen fest bleiben. Die Höhe der inneren Boxen dachte ich mit min-height festzulegen, so daß bei Textvergößerung sich im Notfall (!) die Box nach unten ausdehnt - die darauffolgenden Boxen also nach unten verschiebt. Das geht nicht mit absoluter Positionierung.
Also:
| Box1 - Breite 100 % , min-height: 20 px mit Text1 |
| Box2 - Breite 242px | Abstand 51px | Box3 409 px | Abstand 91px |Das läuft auf ein etwas flexibles pixelgenaues Layout hinaus, wo eine Änderung der Schriftgröße nicht das Layout sprengt. Das dann die Gesamtbox nicht mehr genau vertikal zentriert ist, muß ich wohl verschmerzen, zumindest kenne ich noch keine Möglichkeit, eine solche Vergößerung ohne Tabellen abzufangen.
Also - vielleicht hast du ja noch eine Idee?
Es grüßt ganz herzlich
Michael-
Hi,
Also - vielleicht hast du ja noch eine Idee?
Da die Höhe der Box und die vertikale Zentrierung problematisch ist und die Seite ohne diese Festlegungen bestimmt auch nicht viel schlechter aussieht, würde ich eine Javascript-Lösung in Erwägung ziehen.
freundliche Grüße
Ingo
-
-
-
-
-