nicht angemeldet
<DIV> mit Zentrierung IE und Firefox kompatibel.
0 0 0 0 0 0 
Kai345
0 0
<DIV> mit Zentrierung IE und Firefox kompatibel.
Hallo,
ich möchte für das Layout einer Seite Divs verwenden.
Es sind mehrere ineinander Verschachtelte, was aber kein Problem darstellt, da die inneren schon so funktionieren wie sie sollen.
Ich habe also einen Container-Div innerhalb dessen schon alles tut.
Nur will ich diesen Container-Div nun so platzieren, dass er eine feste Breite hat, dass er mittig vom Browserfenster ist, und oben und unten einen festen Rand hat, solange er nicht unter eine gewisse Höhe kommt.
Nun die Frage: Wie bekomme ich dass so hin, dass es mit Internet-Explorer und Firefox funktioniert.
In Firefox funktioniert es ganz einfach mit einem
<body style="margin-top:20px; margin-bottom:20px;">
<div style="background-color:#FF0000; min-height: 500px; width:500px; margin-left:auto; margin-right:auto; height:100%; margin-top:20px; margin-bottom:20px;">Test</div>
Dies ergibt im FF genau das, was ich will.
Allerdings gibt es beim IE das Problem, dass er z.B. die zentrierung mit margin-left:auto; margin-right:auto; nicht macht. Ein <center> um den div herum behebt dieses Problem zwar, allerdings ignoriert er dann das height-attribut und macht das div nurnoch eine zeile hoch.
Außerdem kennt IE dass min-width nicht. Mir ist eine Umgehung mit Javascript bekannt, jedoch funktioniert die Seite dann mit FF nicht mehr.
Gibt es für diesen Fall eine Möglichkeit FF und IE mit dem gleichen Code das gleiche Anzeigen zu lassen? Also ohne einen Browser-Switch?
-
Entschuldigung,
das "margin-top:20px; margin-bottom:20px;" der oberen Beschreibung
gehört natürlich nicht in den Div-Style. Der war aus versehen, von
einem Test drinne. -
Hi,
Gibt es für diesen Fall eine Möglichkeit FF und IE mit dem gleichen Code das gleiche Anzeigen zu lassen? Also ohne einen Browser-Switch?
natürlich - wenn Du mit IE den IE ab Version 6 meinst: gebe einen DOCTYPE für den standardkonformen Modus an.
freundliche Grüße
Ingo-
Danke für die Antwort.
natürlich - wenn Du mit IE den IE ab Version 6 meinst: gebe einen DOCTYPE für den standardkonformen Modus an.
Interessant, ich habe mich bisher nicht mit der auswirkung der DocTypes auseinander gesezt.
Mit Html 4.01 funktioniert es in beiden browsern. Aber wenn ich schon eine neue Seite mache, und die nach einem standard konform sein soll, habe ich mir überlegt gleich den XHTML Standard zu nutzen. Mit diesem funktioniert aber in beiden Browsern nicht richtig.<?xml version="1.0" encoding="iso-8859-1" ?>
<!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" xml:lang="de">
<head>
<title>Beispiel</title>
</head>
<body style="margin-top:20px; margin-bottom:20px;">
<div style="background-color:#FF0000; min-height: 500px; width:500px; margin-left:auto; margin-right:auto; height:100%;">Test</div>
</body>
</html>Dieser Code ist laut W3C-Prüfung XHTML 1.0 konform.
Was muss ich in diesem Code ändern, dass es wieder die gewünschte Funktion bringt? Ist es sinnvoll gleich XHTML-konform zu arbeiten oder ist es sogar besser bei html 4.01 zu bleiben?-
Hi,
natürlich - wenn Du mit IE den IE ab Version 6 meinst: gebe einen DOCTYPE für den standardkonformen Modus an.
Interessant, ich habe mich bisher nicht mit der auswirkung der DocTypes auseinander gesezt.
Mit Html 4.01 funktioniert es in beiden browsern. Aber wenn ich schon eine neue Seite mache, und die nach einem standard konform sein soll, habe ich mir überlegt gleich den XHTML Standard zu nutzen. Mit diesem funktioniert aber in beiden Browsern nicht richtig.<?xml version="1.0" encoding="iso-8859-1" ?>
dieser xml-Prolog versetzt den IE6 in den quirks mode. Bei XHTML 1.0 ist er optional, also lasse ihn weg.
freundliche Grüße
Ingo-
Danke,
<?xml version="1.0" encoding="iso-8859-1" ?>
dieser xml-Prolog versetzt den IE6 in den quirks mode. Bei XHTML 1.0 ist er optional, also lasse ihn weg.Habe ich gemacht. Hat aber trotzdem nicht funktioniert. Kann aber auch daran liegen, dass ich es jetzt auch nicht mehr mit html 4.01 hinbekomme.
Ich habe vorher einmal eine funktionierende Version gehabt, habe sie aber leider danach verändert und weiss nicht mehr wie sie war.
Jedenfalls probiere ich nun seit über einer Stunde verschiedenste DocTypes(http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html) aus, auch mit änderungen in den styles.
Ich weiss, dass die meisten Leute hier nicht gerne "fertige Lösungen" abgeben, aber da ich es schon so lange ohne Erfolg versucht habe, würde ich dich bitten mir einen Code zu geben (inkl. docytype) der für beide Browser das gleiche ergebnis bringt wie folgender code unter Firefox, ohne doctype:<html>
<body style="margin-top:20px; margin-bottom:20px;">
<div style="background-color:#FF0000; min-height: 500px; width:500px; margin-left:auto; margin-right:auto; height:100%;">Test</div>
</body>
</html>Ich habe herausgefunden dass es manchmal nahe an das ergebnis rankommt, wenn ich dem body-tag den style height:100% verpasse. Allerdings hat der div dann übergröße. Außerdem war das bei meiner kurzzeitig funktionierenden Version auch nicht nötig. Mit dieser Methode würde ich auch nicht den schönen gleichmäßigen abstand zu den rändern bekommen, da ich die größe des bodys in prozent begrenzen müsste.
Danke für jede Hilfe.
-
Grütze .. äh ... Grüße!
<html>
<body style="margin-top:20px; margin-bottom:20px;">
<div style="background-color:#FF0000; min-height: 500px; width:500px; margin-left:auto; margin-right:auto; height:100%;">Test</div>
</body>
</html>Hast du da nicht etwas wichtiges vergessen?
Cü
Kai--
What is the difference between Scientology and Microsoft? One is an
evil cult bent on world domination and the other was begun by L. Ron
Hubbard.
ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:| -
Mach ich doch glatt!
HTML<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <body style="margin-top:20px; margin-bottom:20px;"> <div style="background-color:#FF0000; min-height: 500px; width:500px; margin-left:auto; margin-right:auto; height:100%;">Test</div> </body> </html>oder XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <body style="margin-top:20px; margin-bottom:20px;"> <div style="background-color:#FF0000; min-height: 500px; width:500px; margin-left:auto; margin-right:auto; height:100%;">Test</div> </body> </html>Geht auch mit Transitional.
Merkst Du was?
-
Hi,
Merkst Du was?
Ja, ich merke dass du genau die gleichen DocTypes verwendest, die ich auch schon probiert habe :)
Allerdings zeigt mein IE bei diesem Code nur einen schmalen Streifen an. Ignoriert also das height:100%;
Oder besser gesagt, ich glaube er macht es mit 100% der Größe des Bodys, denn wenn ich den auf 100% setzte bekommt der Streifen plötzlich eine Höhe, die dann aber zu groß ist. Wenn ich einen Body mit 80% nehme sieht es halbwegs ok aus, aber der Abstand von unten ist dann fenstergößen-abhängig.Außerdem funktioniert das min-width nicht.
Vieleicht hast du ja IE 7. Ich habe wie so viele noch den 6er und möchte es eigentlich auch gerne dafür entwickeln, da meines Wissens nach diese Version auch noch um einiges mehr Verbreitet ist als die 7er.
-
-
Hi,
Jedenfalls probiere ich nun seit über einer Stunde verschiedenste DocTypes(http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html) aus
warum nicht einfach den _zu Deinem Quelltext_ passenden hier heraussuchen?
<div style="background-color:#FF0000; min-height: 500px; width:500px; margin-left:auto; margin-right:auto; height:100%;">Test</div>
Du solltest wissen, dass der IE min-height erst ab Verion 7 kennt - auch wenn das schon seit 9 Jahren im Standard definiert ist. ;-)
Ich habe herausgefunden dass es manchmal nahe an das ergebnis rankommt, wenn ich dem body-tag den style height:100% verpasse.
Es ist durchaus legitim, dem IE6 unpassende CSS-Regeln zu geben, um dessen Mankos zu kompensieren, z.B. setzt html body div#ID { height:500px } eine Mindesthöhe für ein div#ID in diesem Browser. Bei prozentualen Angaben musst Du für standardkonforme Browser alle Elemente berücksichtigen - bis hin zu html.
freundliche Grüße
Ingo-
warum nicht einfach den _zu Deinem Quelltext_ passenden hier heraussuchen?
Weil ich die Seite noch nicht kannte, und die andere bei google weiter oben war :)
Du solltest wissen, dass der IE min-height erst ab Verion 7 kennt - auch wenn das schon seit 9 Jahren im Standard definiert ist. ;-)
Auf gut Deutsch: Wenn ich ohne "Tricks" arbeiten will muss ich für IE7 entwickeln.
Es ist durchaus legitim, dem IE6 unpassende CSS-Regeln zu geben, um dessen Mankos zu kompensieren, z.B. setzt html body div#ID { height:500px } eine Mindesthöhe für ein div#ID in diesem Browser. Bei prozentualen Angaben musst Du für standardkonforme Browser alle Elemente berücksichtigen - bis hin zu html.
Das habe ich ausprobiert. Es hält zwar seine Mindestgröße, aber wenn ich das Fenster größer mache wird das Div nicht auch größer.
D.h. im Grunde habe ich nur eine feste Höhe, aber mir geht es ja darum, dass die Größe normalerweise ans Fenster angepasst ist, und nur eben einen Mindestwert hat.-
Hi,
Auf gut Deutsch: Wenn ich ohne "Tricks" arbeiten will muss ich für IE7 entwickeln.
wenn Du CSS-Eigenschaften wie min-width nutzen willst, ja.
D.h. im Grunde habe ich nur eine feste Höhe, aber mir geht es ja darum, dass die Größe normalerweise ans Fenster angepasst ist, und nur eben einen Mindestwert hat.
dazu müsstest Du dann eine prozentuale Höhe und zusätzlich min-width angeben, aber das geht im IE6 nicht.
freundliche Grüße
Ingo-
wenn Du CSS-Eigenschaften wie min-width nutzen willst, ja.
dazu müsstest Du dann eine prozentuale Höhe und zusätzlich min-width angeben, aber das geht im IE6 nicht.
Damit wäre der IE6 tot für mich.
Andere Lösung: Tabellen!Ich habe schon oft gehört dass man Tabellen möglichst nicht mehr einsetzten soll. Ist es denn wirklich so verpöhnt, und wenn ja, wiso?
Was sind die Nachteile von Tabellen gegenüber divs?
Ist eine Mischung Ratsam? Also eine Table um einen Rahmen mittig zur Seite zu bekommen und dann darin die verschachtelten divs für Menu etc. ?
Gibt es noch Möglichkeiten außer divs und Tables um mein Ziel zu erreichen? Sind die uralten Framesets zu gebrauchen?
Wie sieht es mit Javascript aus? Ich habe sowieso vor es zu benutzen. Kann man damit z.B. Bilder Laden und an eine Stelle setzten, praktisch komplett ohne html dafür zu benutzen?
-
Hi,
Ich habe schon oft gehört dass man Tabellen möglichst nicht mehr einsetzten soll. Ist es denn wirklich so verpöhnt, und wenn ja, wiso?
Weil Tabellen zur Auszeichnung von tabellarischen Inhalten vorgesehen sind. Außerdem bstimmen Layout-Tabellen die Struktur der Seite, so dass das Layout nur noch sehr beschränkt über CSS zu ändern ist. Wenn Du Dich z.B. mal entschließen solltest, die Navigation von links nach rechts oder oben zu versetzen, müsstest Du alle HTML-Dateien hierzu ändern anstatt nur ein paar CSS-Regeln.
Ist eine Mischung Ratsam? Also eine Table um einen Rahmen mittig zur Seite zu bekommen und dann darin die verschachtelten divs für Menu etc. ?
Ich will mal so sagen: eine einzellige Tabelle erfüllt ihren Zweck, aber ich würde sie nur im Notfall verwenden. Meist läßt sich das Layout etwas vereinfachen, so dass es auch im IE6 über CSS umgesetzt werden kann.
Gibt es noch Möglichkeiten außer divs und Tables um mein Ziel zu erreichen? Sind die uralten Framesets zu gebrauchen?
Sicher gibt es auch heute noch sinnvolle Anwendungen dafür - die Umsetzung eines Layouts gehört aber nicht dazu.
Wie sieht es mit Javascript aus? Ich habe sowieso vor es zu benutzen. Kann man damit z.B. Bilder Laden und an eine Stelle setzten, praktisch komplett ohne html dafür zu benutzen?
Ja. Javascript kann natürlich auch HTML-Elemente generieren. Allerdings machst Du damit die Funktionalität unnötig von Javascript abhängig.
freundliche Grüße
Ingo
-
-
-
-
-
-
-
-