Archiv verlassen und diese Seite im Standarddesign anzeigen : CSS Interpretation
darph
2004-04-08, 12:52:47
Es heißt ja immer wieder "jaaaaaa, wenn der IE CSS richtig lesen würde, sich an standards halten würde, scheise blah fasel"
<body style="text-align:center;">
testtext
<div class="basic">
<div style="background-color:white;vertical-align:middle;">
<h1>headline</h1>
</div>
</div>
</body>
So.
Internet Explorer:
Text: Zentriert.
Div: Zentriert.
Mozilla Firefox
Text: Zentriert.
Div: Links.
Warum ist im Mozilla der div links? Laut CSS hat alles innerhalb der Body Ebene zentriert zu sein.
Wenn der IE alles falsch macht und der Mozilla so toll ist, was ist dann hier bitte schön die Logik?
Ich will hier kein "Whä, du hast meinen heiligen Mozilla besudelt!"-Geflame provozieren, aber ich tät das jetzt gern mal erklärt haben. Sachlich, wenn's irgend geht.
Original geschrieben von darph
<body style="text-align:center;">
testtext
<div class="basic">
<div style="background-color:white;vertical-align:middle;">
<h1>headline</h1>
</div>
</div>
</body>
Beim ersten gibts ja nur den Text an, dass jener in der Mitte sein soll. Beim 2. ein "vertical-align" was wohl fuer IE funzt aber Mozilla nicht kennt (behaupte ich einfach mal).
Nutz einfach fuer nen div:
#container
{
align: center;
}
und fuern Text:
float: left;
^^meines Erachtens "guenstiger". Zum anderen, trag die stylesheet nicht in den normalen Quelltext ein, sondern extra in ner default.css (oder wie auch immer) und lad die .css mittels:
<style type="text/css">
/*<![CDATA[*/
<!--
@import url("css/default.css");
-->
/*]]>*/
</style>
in der .htm oder .php
darph
2004-04-08, 13:27:34
klar wird das in eine externe Datei ausgelagert. Zum entwickeln ist es aber so einfacher. Später wird das alles dann in klassen gepackt.
"vertical-a"lign ist seit 1.0 in CSS und ist für die vertikale Ausrichtung - oben mitte unten - ist hier also völlig ihne Belang.
Einfach nur "align:" ist afaik nicht CSS Standard. Das muß schon "text-align" heißen. Früher ging auch "alignment", das ist aber nicht mehr im Standard.
float ist für Text-umfluß. Das soll aber schon untereinander.
Wenn ich die css in w3c pruefen lasse meckert der aber nicht rum (zwecks align).
darph
2004-04-08, 13:34:01
Also die Leute vom w3c verwenden ausschließlich text-align.
http://www.w3.org/TR/1998/REC-CSS2-19980512/sample.html
Außerdem ist das ja völlig irrelevant: text-align richtet alles innerhalb einer Box aus.
die div tags liegen innerhalb der body Box. Die müssen diese Eigenschaft vom body Erben. Im IE tun sie das. Im Mozilla nicht mal, wenn ich es für jedes Element einzeln definiere.
http://www.w3.org/TR/1998/REC-CSS2-19980512/text.html
'text-align'
Applies to: block-level elements
div ist doch ein Block Level Element oder?
darph
2004-04-08, 13:51:36
übrigens funktioniert auch align nicht. :|
Aqualon
2004-04-08, 14:02:43
Original geschrieben von darph
div ist doch ein Block Level Element oder?
[...]
Aqua
Edit: Dein Code von oben funktioniert bei mir sowohl in Mozilla 1.7b als auch in Firebird 0.7 einwandfrei. Ich schätze mal das Problem liegt an der Klasse "basic", dich ich ja nicht habe. Was steht denn da drin?
Edit2: Hab das Problem gefunden. text-align:center funktioniert anscheinend mit div-Tags nicht. Dafür musst du margin:auto verwenden.
Edit3: div ist anscheinend doch ein Block Level Element.
Schau auch mal auf http://www.allmyfaqs.com/faq.pl?Center_with_CSS
Vielleicht hilft dir das weiter.
Aqualon
2004-04-08, 14:33:40
<html>
<body style="text-align:center;">
testtext
<div style="border:1px solid red; width:600px; margin:auto;">
<div style="background-color:white; vertical-align:middle;
border:1px solid blue; width:500px; margin:auto;">
<h1>headline</h1>
</div>
</div>
</body>
</html>
Damit funktioniert sowohl mit Mozilla als auch mit IE die horizontale Zentrierung. Die vertikale Zentrierung habe ich allerdings weder im IE noch in Mozilla hinbekommen.
Aqua
Binaermensch
2004-04-08, 14:45:19
text-align wirkt sich nur auf inline-Elemente aus, DIV ist jedoch ein block-Element.
Wanginator
2004-04-08, 15:29:03
Original geschrieben von Binärmensch
text-align wirkt sich nur auf inline-Elemente aus, DIV ist jedoch ein block-Element.
text-align wirkt sich auch auf block-elemente aus.
@darph: bei mir wird alles korrekt angezeigt im IE6.0 und Mozilla 1.6, sprich beide wörter sind zentriert.
Aqualon
2004-04-08, 16:53:55
Original geschrieben von Wanginator
@darph: bei mir wird alles korrekt angezeigt im IE6.0 und Mozilla 1.6, sprich beide wörter sind zentriert.
Die Wörter werden zentriert, weil die beiden div-Layer über die gesamte Bildschirmbreite gehen. Wenn du dem inneren Layer eine fester Breite gibst, ist es nicht mehr zentriert.
text-align wird von Mozilla anscheinend nur bei inline-Elementen angewandt und nicht bei Block-Level-Elementen.
Aqua
Wanginator
2004-04-08, 18:40:59
Original geschrieben von Aqualon
Die Wörter werden zentriert, weil die beiden div-Layer über die gesamte Bildschirmbreite gehen. Wenn du dem inneren Layer eine fester Breite gibst, ist es nicht mehr zentriert.
text-align wird von Mozilla anscheinend nur bei inline-Elementen angewandt und nicht bei Block-Level-Elementen.
Aqua
stimmt, bei fester breit wird nix zentriert. aber ich bezog mich auch eigentlich auf den code aus dem 1. post und da wird bei mir im mozilla der text zentriert, beim threadersteller anscheinend nicht.
das mit text-align scheint nur mit dem benutzerdefinierten DIV der fall zu sein, denn andere Blocklevel-Elemente wie P können ja damit umgehen. Nichtsdestotrotz kann man ja noch CENTER benutzen oder halt zur Not ein Inline-Tag wie SPAN.
[SIZE=1]Original geschrieben von Wanginator
text-align wirkt sich auch auf block-elemente aus.
Nun, das Attribut heißt "text-align" und soll sich eigentlich _nicht_ auf Blockelemente auswirken.
Blockelemente werden normalerweise mit margin-left:auto; margin-right:auto; zentriert, damit kann aber der IE wiederum herzlich wenig anfangen.
Schon fast üblich ist folgender Workaround:
body { text-align:center; }
div.inhalt { margin-left:auto; margin-right:auto; text-align:left; }
Das erste text-align damit auch der IE zentriert; das zweite text-align damit der Text im Div wieder linksbündig ist.
http://selfaktuell.teamone.de/tippstricks/css/ausrichtung/
imagine
2004-04-08, 19:43:10
Genau Gast, nur eine Anmerkung: Der IE kann mit margin:auto sehr wohl was anfangen, vorausgesetzt man schreibt korrektes HTML.
Hab mal schnell ne etwas primitive Seite gezüchtet die das zeigt -> http://home.arcor.de/noxestnoster/textalign.html
Der IE verarbeitet margin: 0px auto; nicht, wenn kein oder ein falscher Doctype gesetzt ist. Der Browser muss im Standard-Modus laufen. Sobald man in den Quirks-Modus wechselt, kommt nur noch Quark bei raus.
imagine
2004-04-08, 20:52:24
Ja aber da es keinen Grund gibt keinen oder einen falschen Doctype zu verwenden, kann man dieses Problem einfach umgehen :)
Mit XML-Prolog gibts auf jeden Fall Quirks-Mode. :(
Binaermensch
2004-04-09, 11:29:20
[SIZE=1]Original geschrieben von Wanginator
text-align wirkt sich auch auf block-elemente aus.
w3c:
This property describes how inline content of a block is aligned.
Original geschrieben von Nase
Der IE verarbeitet margin: 0px auto; nicht, wenn kein oder ein falscher Doctype gesetzt ist. Der Browser muss im Standard-Modus laufen. Sobald man in den Quirks-Modus wechselt, kommt nur noch Quark bei raus. Zur Verbesserung: Anscheinend ist es dem IE(6) doch egal, ob Quirks- oder Standard-Modus. Hauptsache es läuft einer der beiden Modi.
Wanginator
2004-04-09, 15:10:12
Original geschrieben von Binärmensch
w3c:
This property describes how inline content of a block is aligned.
Du hast mich dann wohl missverstanden, denn das meinte ich eigentlich. Ich meinte das "text-align" auch auf Block-Elemente anwendbar ist, da der Text innerhalb des Elementes je nach Wert ausgerichtet wird. Block-Elemente selber können damit natürlich nicht ausgerichtet werden, da es ja auch "text-align" heisst, und somit nur auf text anwendbar ist. Um Block-Elemente selber auszurichten nimmt man wie gesagt etwas wie "MARGIN" oder "CENTER"
imagine
2004-04-09, 15:58:07
Original geschrieben von Nase
Zur Verbesserung: Anscheinend ist es dem IE(6) doch egal, ob Quirks- oder Standard-Modus. Hauptsache es läuft einer der beiden Modi.
Nein, im Quirksmodus des IE6 SP1 wird margin:auto ignoriert. Ich hab das nochmal getestet, das ist ganz sicher so.
Original geschrieben von imagine
Nein, im Quirksmodus des IE6 SP1 wird margin:auto ignoriert. Ich hab das nochmal getestet, das ist ganz sicher so. Ok, hast recht. Ich hab mich mit HTML 4.01 Transitional ohne und mit URI-Angabe vertan. Wenn man die URI angibt, ist man wieder im Standard-Modus, und da funktioniert es. Und aus genau diesem Grund sollte man eh zu HTML 4.01 Strict greifen, da dieser bei allen gängigen Browsern den Standard-Modus auslöst. Wer gerne XHTML nutzen will, sollte auf Version 1.1 gehen.
vBulletin®, Copyright ©2000-2024, Jelsoft Enterprises Ltd.