Absolut zentrierte Seite unter HTML 4.01 strict

[DeadDreamer]

Hallo ;)

Habe grade ein Problem mit meinem Seitendesign, ich bin irgendwie nicht in der Lage, die Seite nach wie vor komplett zentriert auf den Bildschirm zu zauben, wie ich es vorher (vor dem Umstieg auf strict wg dem Box-Modell-Fehler des IE und genereller Einsicht ;) mit der Hilfe einer 100%-Tabelle mit per HTML entsprechend ausgerichteten unter-Zeile getan habe...

Meine Seite besteht aus colored boxes, also divs die per css formatiert sind, und ich benutzte diese Tabelle nur für die absolut zentrale positionierung, das wurde aber durch den Umstieg auf strict ruiniert, ich kann auch durch Positionierungsangaben per css a la style="width:100%(...);vertical-align:center(...);" passiert da leider nichts.

Nun gibt es ja hier auf selfhtml einen Tip wie man das mit negativen margins per css realisieren kann, nur bringt das das Problem mit sich, dass die Seite nicht mehr scrollbar ist bei Auflösungen unter 1024x768...

Nun will ich ja kein Accessibility-Guru sein, ich habe nur den Anspruch, eine kleine Seite für meine Freunde online zu stellen, und für den einen, der mal zufällig 800x600 drin hat, sollte die Seite eben auch zu betrachten sein...

Für Lösungsansätze oder Verlinkungen wäre ich dankbar, ich kann auf Anfrage auch mal die Vorab-Seite auf meinen Webspace laden und drauflinken...

Danke ;)

[Siechfred]

Hell-O!

Nun gibt es ja hier auf selfhtml einen Tip wie man das mit negativen margins per css realisieren kann, nur bringt das das Problem mit sich, dass die Seite nicht mehr scrollbar ist bei Auflösungen unter 1024x768...

Dann nimm den Tabellen-Workaround, der CSS-Workaround ist m.E. fast immer die schlechtere Wahl.

Siechfred

[DeadDreamer]

Dann nimm den Tabellen-Workaround, der CSS-Workaround ist m.E.
fast immer die schlechtere Wahl.

Naja, das Problem hierbei ist, dass der IE bei colored boxes in den Quirks-Modus geht, und das Problem dabei ist dass die width von css-elementen im Zusammenspiel mit padding misinterpretiert wird... also hab ich dann entweder eine auf dem IE schick anzuschauende Seite und auf anderen Browsern Murks, oder umgekehrt...

Ich hab ja nun auf HTML 4.01 >STRICT< umgestellt und aus oben genannten Gründen sowie einem Bedürfnis nach saubereren Code die Transitional-Doctype verbannt, und unter Strict kann ich die Werte align und valign nicht benutzen. Ein Ersatz durch style="text-align:center;vertical-align:middle;" produziert aber leider nur eine horizontal zentrierte Seite...

Da liegt mein Problem ;) Wäre für eventuelle weitere Lösungsvorschläge natürlich nach wie vor sehr dankbar ;)

DeadDreamer

[Harlequin]

Hi,

Ich hab ja nun auf HTML 4.01 >STRICT< umgestellt und aus oben genannten Gründen sowie einem Bedürfnis nach saubereren Code die Transitional-Doctype verbannt, und unter Strict kann ich die Werte align und valign nicht benutzen. Ein Ersatz durch style="text-align:center;vertical-align:middle;" produziert aber leider nur eine horizontal zentrierte Seite...

Das liegt daran, dass 'text-align:center' wie der Name schon sagt nur Text zentriert und keine Blöcke (wie z.B. DIV). Gib den Divs doch mal ein 'margin:auto'.

Gruß,

Harlequin

[DeadDreamer]

Das liegt daran, dass 'text-align:center' wie der Name schon sagt nur Text zentriert und keine Blöcke (wie z.B. DIV). Gib den Divs doch mal ein 'margin:auto'.

Um genau zu sein, ist meine Seite mit text-align:center in der Mitte... bin zwar nicht so der Profi, aber es scheint auf divs zu wirken...

Naja, das Problem hierbei ist vielmehr die vertikale Zentrierung, weil vertical-align auf das Div nicht greift... oder besteht die Möglichkeit display:block drauf anzuwenden? (Ist wahrscheinlich Unsinn aber nun ja ;)

DeadDreamer

[Harlequin]

Das liegt daran, dass 'text-align:center' wie der Name schon sagt nur Text zentriert und keine Blöcke (wie z.B. DIV). Gib den Divs doch mal ein 'margin:auto'.

Um genau zu sein, ist meine Seite mit text-align:center in der Mitte... bin zwar nicht so der Profi, aber es scheint auf divs zu wirken...

ich glaub das geht nur im IE, weil der es falsch macht...

Naja, das Problem hierbei ist vielmehr die vertikale Zentrierung, weil vertical-align auf das Div nicht greift... oder besteht die Möglichkeit display:block drauf anzuwenden? (Ist wahrscheinlich Unsinn aber nun ja ;)

Ah, ok. display:block dürfte nichts bringen, ein DIV ist ja schon ein Block. Evtl. liegt das ganze daran, das die Höhe nicht stimmt. Gib mal allen Elternelementen die Höhe 100% (auch HTML und BODY).

Gruß,

Harlequin

[DeadDreamer]

Ah, ok. display:block dürfte nichts bringen, ein DIV ist ja schon ein Block. Evtl. liegt das ganze daran, das die Höhe nicht stimmt. Gib mal allen Elternelementen die Höhe 100% (auch HTML und BODY).

Ah, vielen Dank für den Hinweis wg text-align, sitz hier leider auf Arbeit und hab nur IE da ;) Werd zuhause mal Opera benutzen...

das mit body height&width:100% hab ich grade probiert, das scheint eine zentrierung zu bewirken, allerdings habe ich nun "Übergröße"; kann das an margin:5px; im body liegen? [EDIT: mit margin:0px hab ich ne perfekt zentrierte Seite ;)] Hätte aber gerne ein wenig Rand damit man bei 800x600 den header nich an der Symbolleiste kleben hat ;)

Aber vielen Dank ;)

DeadDreamer

[Harlequin]

Hi,

das mit body height&width:100% hab ich grade probiert, das scheint eine zentrierung zu bewirken, allerdings habe ich nun "Übergröße"; kann das an margin:5px; im body liegen? [EDIT: mit margin:0px hab ich ne perfekt zentrierte Seite ;)] Hätte aber gerne ein wenig Rand damit man bei 800x600 den header nich an der Symbolleiste kleben hat ;)

Das liegt an der *tollen* Eigenschaft von CSS zur Höhe noch Margin, Padding und Border zu addieren... Evtl. lässt sich ja ein 95% hoher Body innerhalb von HTML zentrieren...

Gruß,

Harlequin

[DeadDreamer]

Das liegt an der *tollen* Eigenschaft von CSS zur Höhe noch Margin, Padding und Border zu addieren... Evtl. lässt sich ja ein 95% hoher Body innerhalb von HTML zentrieren...

Eine Idee wäre das allerdings, wenn es nicht 100% zentriert ist sieht das auch niemand direkt... ich muss halt denke ich bei margin ne absolute Zahl haben, da es bei 800x600 sonst vermutlich Probleme geben wird... ich teste das mal eben... nein... wenn ich margin prozentual angebe passiert dieselbe verschiebung, zur Not ein "blindes" Div (im stillen Gedenken an blinde Tabellen) drumrumspannen mit dem angedachten margin bzw padding... muss das mal testen, ergebnisse gibts später... ;)

Vielen Dank hast mir sehr geholfen ;)

DeadDreamer

[DeadDreamer -> Code inside]

So, hab mal eben was ich bisher hab hochgeladen... inklusive benutzung des von harlequin vorgeschlagenen 100% für width und height beim body...

http://home.arcor.de/deaddreamer/test/css_test.html
http://home.arcor.de/deaddreamer/test/test.css

Der untere Link ist für die externe css-datei...

DeadDreamer ;)

P.S: Bringe die links nicht dazu anklickbar zu sein, sorry ;)

[Harlequin]

So, hab mal eben was ich bisher hab hochgeladen... inklusive benutzung des von harlequin vorgeschlagenen 100% für width und height beim body...

Im IE siehts bei mir gut aus, der Firefox zentriert allerdings nicht. Hmm, mal anschauen...

Ich denke, dass du auch für <HTML> ein 'height:100%' brauchst.

Außerdem meint mein Tidy folgendes:

Zeile 9 Zeichen 5 - Warnung: <meta> element not empty or not closed
Zeile 11 Zeichen 5 - Warnung: <link> element not empty or not closed
Zeile 31 Zeichen 7 - Warnung: <table> proprietary attribute "height"
Zeile 53 Zeichen 22 - Warnung: trimming empty <p>

Sollte man evtl. noch beheben. Bei den ersten zwei muss der Tag korrekt für XML abgeschlossen werden (<meta ... />). Die "height" muss als Style rein. Ok, das letzte ist harmlos.

[DeadDreamer]

Außerdem meint mein Tidy folgendes:

Zeile 9 Zeichen 5 - Warnung: <meta> element not empty or not closed
Zeile 11 Zeichen 5 - Warnung: <link> element not empty or not closed
Zeile 31 Zeichen 7 - Warnung: <table> proprietary attribute "height"
Zeile 53 Zeichen 22 - Warnung: trimming empty <p>

Hmmm, was zentriert der Feuerfuchs nicht? Die Fehler die du oben nennst sind mir bekannt, das mit dem height fliegt eh demnächst raus, und da ich kein xhtml nutze hab ich auch die /> noch ned drin... das letzte sagt mir allerdings nichts ;)

Fahre jetzt erstmal heimwärts, ich meld mich später wieder ;) Was meinst zum Design? Prinzipiell? Und ja, es soll dunkel sein ;)

DeadDreamer

[Harlequin]

Hi,

Hmmm, was zentriert der Feuerfuchs nicht?

Die Box klebt beim Firefox am oberen Rand, das liegt immernoch an dem Höhenproblem. Für den HTML-Tag muss auch eine Höhe von 100% angegeben werden.

Die Fehler die du oben nennst sind mir bekannt, das mit dem height fliegt eh demnächst raus, und da ich kein xhtml nutze hab ich auch die /> noch ned drin... das letzte sagt mir allerdings nichts ;)

Als Doctype ist aber XHTML angegeben. Das letzte ist nur ein '<p></p>'... ansich kein Fehler aber der Tidy meckert drüber, weil es keine Auswirkung hat und entfallen kann.

Fahre jetzt erstmal heimwärts, ich meld mich später wieder ;) Was meinst zum Design? Prinzipiell? Und ja, es soll dunkel sein ;)

Ich sollte auch langsam heim, mich ärgert hier der Firefox ganz schön mit meiner Tabelle und dem Umsortieren der Spalten...

Was das Design angeht... ist immer Geschmackssache, aber an sich ganz nett.

Gruß,

Harlequin

[Ashura]

Hallo DeadDreamer.

Um genau zu sein, ist meine Seite mit text-align:center in der Mitte... bin zwar nicht so der Profi, aber es scheint auf divs zu wirken...

Nur, wenn du dich im http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch@title=Quirksmodus befindest.

Naja, das Problem hierbei ist vielmehr die vertikale Zentrierung, weil vertical-align auf das Div nicht greift...

Die vertikale Zentrierung mit CSS ist nach wie vor nicht trivial und kann nur mit einigen Workarounds (passende Werte für margin und padding, display:table*, was der IE jedoch nicht unterstützt) mehr oder weniger zufrieden stellend bewerkstelligt werden.

oder besteht die Möglichkeit display:block drauf anzuwenden? (Ist wahrscheinlich Unsinn aber nun ja ;)

Der Ausgangswert der display-Eigenschaft ist bei div-Elementen bereits „block“.

Einen schönen Mittwoch noch.

Gruß, Ashura

[DeadDreamer]

Nur, wenn du dich im http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch@title=Quirksmodus befindest.

Ich bin im Quirks? Nach Lektüre des Obigen hab ich ja erst in HTML 4.01 strict gewechselt, inklusive der url dahin... Nachmessungen haben ausserdem ergeben, dass ich nicht im quirks bin, da alle css-angaben bwzüglich paddings und width korrekt umgesetzt werden...

Bitte um Aufklärung? =) Danke für die Antwort und ebenso einen schönen Tag ;)!

DeadDreamer

[Ashura]

Hallo DeadDreamer.

Ich bin im Quirks? Nach Lektüre des Obigen hab ich ja erst in HTML 4.01 strict gewechselt, inklusive der url dahin...

Wenn text-align:center Blockelemente zentriert, befindest du dich entweder im Quirksmodus, oder nutzt einen IE < Version 6.

Nachmessungen haben ausserdem ergeben, dass ich nicht im quirks bin, da alle css-angaben bwzüglich paddings und width korrekt umgesetzt werden...

Was ergibt folgendes, in die Adresszeile eingegeben und bestätigt?

javascript:alert(document.compatMode);

Einen schönen Mittwoch noch.

Gruß, Ashura

[Harlequin]

Hi,

Wenn text-align:center Blockelemente zentriert, befindest du dich entweder im Quirksmodus, oder nutzt einen IE < Version 6.

Wieso hat das keiner meinem IE 6 (6.0.2800.1106) gesagt? Ich habe hier keinen Quirks-Mode und bei mir zentriert er auch mit dieser Angabe. Allerdings benutze ich HTML 4.01 Transitional mit DTD-Angabe.

Nachmessungen haben ausserdem ergeben, dass ich nicht im quirks bin, da alle css-angaben bwzüglich paddings und width korrekt umgesetzt werden...

Was ergibt folgendes, in die Adresszeile eingegeben und bestätigt?
javascript:alert(document.compatMode);

Bei mir kommt da 'CSS1Compat'

Gruß,

Harlequin

[Ashura]

Hallo Harlequin.

Wieso hat das keiner meinem IE 6 (6.0.2800.1106) gesagt? Ich habe hier keinen Quirks-Mode und bei mir zentriert er auch mit dieser Angabe. Allerdings benutze ich HTML 4.01 Transitional mit DTD-Angabe.

Ja, mein Fehler.

Der Unterschied vom Quirksmodus zum standardkonformen Modus ist nicht, dass der IE per text-align:center formatierte Blockelemente nicht mehr zentriert, sondern dass er die korrekte Vorgehensweise, margin:auto ebenfalls umsetzt, was er im Quirksmodus nicht tut.

Einen schönen Mittwoch noch.

Gruß, Ashura

[DeadDreamer]

Was ergibt folgendes, in die Adresszeile eingegeben und bestätigt?

javascript:alert(document.compatMode);

Das ergibt CSS1compat... Frage mich was das nun für mich bedeutet, ist mein style sheet also CSS 1 kompatibel? Gut oder Schlecht? =)

DeadDreamer

[Ashura]

Hallo DeadDreamer.

Das ergibt CSS1compat... Frage mich was das nun für mich bedeutet, ist mein style sheet also CSS 1 kompatibel? Gut oder Schlecht? =)

Nein, das heißt einfach nur, dass sich der Browser in standardkonformen Modus befindet.

Einen schönen Mittwoch noch.

Gruß, Ashura

[wahsaga]

hi,

Naja, das Problem hierbei ist, dass der IE bei colored boxes in den Quirks-Modus geht,

Könntest du das bitte so formulieren, dass es außerhalb deines  - mit dem Problem vertrauten - Kopfes auch einen Sinn ergibt?

gruß,
wahsaga

[DeadDreamer]

Könntest du das bitte so formulieren, dass es außerhalb deines  - mit dem Problem vertrauten - Kopfes auch einen Sinn ergibt?

Hm sorry, mein Fehler dann, dachte colored boxes sei der allgemeine begriff für formatierte Divs zu layoutzwecken ;)

DeadDreamer

[DeadDreamer -> Code inside]

So, hab mal eben was ich bisher hab hochgeladen... inklusive benutzung des von harlequin vorgeschlagenen 100% für width und height beim body...

http://home.arcor.de/deaddreamer/test/css_test.html
http://home.arcor.de/deaddreamer/test/test.css

Der untere Link ist für die externe css-datei...

DeadDreamer ;)

P.S: Bringe die links nicht dazu anklickbar zu sein, sorry ;)

[Detlef G.]

Hallo DeadDreamer

http://home.arcor.de/deaddreamer/test/css_test.html

Schau dir die Seite unbedingt im Firefox an und vergrößere dann die Schrift
ein wenig.

Schau Zentrieren mit nur einem Element _und_ die dort verlinkten Seiten an.
(besonders natürlich das CSS in den Quelltexten)

P.S: Bringe die links nicht dazu anklickbar zu sein, sorry ;)

Verweise einbinden

Auf Wiederlesen
Detlef