nicht angemeldet
Der Martin
Matthias Apsel
Matthias Apsel
Der Martin
Der Martin
Der Martin
Gunnar Bittersmann
Hallo,
Warum wird der Text im folgenden Beispiel nicht zentriert?
Warum rückt er dann weiter nach rechts zur Mitte, wenn ich die %-Zahl verringere?
Zentriert ist er erst dann, wenn ich width: 0 angebe.
Hi,
Warum wird der Text im folgenden Beispiel nicht zentriert?
in welchem Beispiel? ;-)
Warum rückt er dann weiter nach rechts zur Mitte, wenn ich die %-Zahl verringere?
Zentriert ist er erst dann, wenn ich width: 0 angebe.
Das klingt sehr mysteriös und schreit geradezu nach etwas HTML- und CSS-Code zur Demonstration.
Ciao,
Martin
Hallo,
Warum wird der Text im folgenden Beispiel nicht zentriert?
in welchem Beispiel? ;-)
Gute Frage, habs einfach vergessen.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
.mittig
{
margin-left: auto;
margin-right:auto;
width:90%;
}
</style>
</head>
<body>
<div class="mittig">
<div>Hallo</div>
<div>Fans</div>
</div>
</body>
</html>
(In der Realität sollen natürlich in dem div weitere Infos stehen)
Hi!
Dein Div mit der Klasse .mittig ist zentriert - sieht man, wenn man ihm einen Rahmen gibt.
Wolltest Du den Text darin zentrieren?
off:PP
Hi,
Dein Div mit der Klasse .mittig ist zentriert - sieht man, wenn man ihm einen Rahmen gibt.
Wolltest Du den Text darin zentrieren?
ja, den Text, bzw. alle divs, die innerhalb dieses äußeren divs liegen (werden).
Gruß
Jochen
Om nah hoo pez nyeetz, Jochen!
ja, den Text, bzw. alle divs, die innerhalb dieses äußeren divs liegen (werden).
Versuche, die div-Elemente durch semantisch passendere zu ersetzen. Auch für normalen Text gibt es was besseres als div: p zum Beispiel.
Matthias
Hi Matthias,>
Versuche, die div-Elemente durch semantisch passendere zu ersetzen. Auch für normalen Text gibt es was besseres als div: p zum Beispiel.
... brachte keine Änderung.
Offensichtlich hängt es damit zusammen:
I read that the <center> tag is deprecated, however I cannot find any real equivalent to it in CSS. text-align works for text but not other elements, and auto margins only work if you know the width of the container (so not a solution if you don't know the width in advance). So is there any real equivalent to this <center> tag?
Wenn ich das Ganze in <center> </center> packe oder align=center angebe, funktioniert es, aber beides ist ja wohl "depreciated".
Gruß
Jochen
Om nah hoo pez nyeetz, Jochen!
Versuche, die div-Elemente durch semantisch passendere zu ersetzen. Auch für normalen Text gibt es was besseres als div: p zum Beispiel.
... brachte keine Änderung.
text-align ist zielführend. Mein Vorschlag, semantisch korrekte Elemente zu verwenden, ist von deiner Problemstellung vollkommen unabhängig.
Matthias
Hi,
text-align ist zielführend. Mein Vorschlag, semantisch korrekte Elemente zu verwenden, ist von deiner Problemstellung vollkommen unabhängig.
text-align funktioniert im vorgestellten Beispiel, meine Aussage war aber, es sollte auch funktionieren für weitere divs, die innerhalb dieses äußeren divs liegen (werden).
Beispiel1 funktioniert nicht
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
.mittig
{
margin-left: auto;
margin-right:auto;
width:80%;
text-align:center;
}
.tc
{
display: table-cell;
}
</style>
</head>
<body>
<div class="mittig">
<div class="tc">Hallo</div>
<div class="tc"><img src="example.gif">
<div class="tc">Fans</div>
</div>
</body>
</html>
Wenn man aber ein div mit align=center (Beispiel2) oder ein <center> einfügt (Beispiel3),
dann ist es wieder richtig.
Beispiel2
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
.mittig
{
margin-left: auto;
margin-right:auto;
width:80%;
}
.tc
{
display: table-cell;
}
</style>
</head>
<body>
<div class="mittig">
<div align=center>
<div class="tc">Hallo</div>
<div class="tc"><img src="example.gif">
<div class="tc">Fans</div>
</div>
</div
</body>
</html>
Beispiel3
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
.mittig
{
margin-left: auto;
margin-right:auto;
width:80%;
}
.tc
{
display: table-cell;
}
</style>
</head>
<body>
<div class="mittig">
<center>
<div class="tc">Hallo</div>
<div class="tc"><img src="example.gif">
<div class="tc">Fans</div>
</center>
</div
</body>
</html>
Der bereits zitierte Text
"I read that the <center> tag is deprecated, however I cannot find any real equivalent to it in CSS."
scheint also zu stimmen.
Hallo,
text-align funktioniert im vorgestellten Beispiel, meine Aussage war aber, es sollte auch funktionieren für weitere divs, die innerhalb dieses äußeren divs liegen (werden).
ach so, text-align wird nicht an Kindelemente vererbt, falls du das meinst.
Beispiel1 funktioniert nicht
Einzelne Elemente als display:table-cell zu formatieren, ohne auch das dazugehörige Fundament an Elternelementen mit display:table-row und Großeltern mit display:table zu haben, ist auch recht gewagt.
Das hat nichts mit dem Thema der Zentrierung und dem text-align zu tun, ich frage mich nur, wie du auf die Idee kommst.
Wenn man aber ein div mit align=center (Beispiel2) oder ein <center> einfügt (Beispiel3), dann ist es wieder richtig.
Ja, die gelten tatsächlich auch für Nachfahrenelemente.
"I read that the <center> tag is deprecated, however I cannot find any real equivalent to it in CSS." scheint also zu stimmen.
Nicht ganz; es gibt ja ein Äquivalent. Genaugenommen zwei, eins für inline-Inhalt und eins für Blocklevel-Kindelemente. Nur die automatische Vererbung entfällt, das heißt, man muss diese Angaben für jedes Element machen, für das sie gelten sollen. Ich finde das gar nicht so dumm.
So long,
Martin
Hallo,
ach so, text-align wird nicht an Kindelemente vererbt, falls du das meinst.
D a s war wohl mein Denkfehler!
Wenn man aber ein div mit align=center (Beispiel2) oder ein <center> einfügt (Beispiel3), dann ist es wieder richtig.
Ja, die gelten tatsächlich auch für Nachfahrenelemente.
Woher weiß man, was vererbt wird und was nicht?
"I read that the <center> tag is deprecated, however I cannot find any real equivalent to it in CSS." scheint also zu stimmen.
Nicht ganz; es gibt ja ein Äquivalent. Genaugenommen zwei, eins für inline-Inhalt und eins für Blocklevel-Kindelemente.
Heißt obiges: text-align: center; für Inline- und margin: auto; für Blockelemente?
Gruß
Jochen, der jetzt parallel Fußball schauen wird.
Hi,
Wenn man aber ein div mit align=center (Beispiel2) oder ein <center> einfügt (Beispiel3), dann ist es wieder richtig.
Ja, die gelten tatsächlich auch für Nachfahrenelemente.
Woher weiß man, was vererbt wird und was nicht?
die formell korrekte Antwort wäre wohl: Das liest man in der CSS-Spezifikation nach.
Aber das werden wohl die wenigsten tun, und so bleibt es meist bei Erfahrung und ein bisschen Probieren.
Nicht ganz; es gibt ja ein Äquivalent. Genaugenommen zwei, eins für inline-Inhalt und eins für Blocklevel-Kindelemente.
Heißt obiges: text-align: center; für Inline- und margin: auto; für Blockelemente?
Genau das. Manche kritisieren, dass die Bezeichnung text-align irreführend sei, weil ja nicht nur Text, sondern auch andere inline-Inhalte wie z.B. Bilder davon betroffen sind.
Gruß
Jochen, der jetzt parallel Fußball schauen wird.
Ciao,
Martin, der im Hintergrund den Route-66-Traum auf Phoenix mitträumt ...
@@Der Martin:
nuqneH
die formell korrekte Antwort wäre wohl: Das liest man in der CSS-Spezifikation nach.
Aber das werden wohl die wenigsten tun, und so bleibt es meist bei Erfahrung und ein bisschen Probieren.
Qapla'
Hallo,
I read that the <center> tag is deprecated, however I cannot find any real equivalent to it in CSS. text-align works for text but not other elements, and auto margins only work if you know the width of the container (so not a solution if you don't know the width in advance).
die zweite Hälfte ist nicht wahr, margin:auto bringt auch dann das gewünschte Ergebnis, wenn die Breite des übergeordneten Elements ("container") nicht bekannt ist. Sie muss sich nur durch andere Bedingungen eindeutig ergeben.
So long,
Martin
Hi,
du meinst nicht zufällig text-align: center;?
Martin
Warum wird der Text im folgenden Beispiel nicht zentriert?
in welchem Beispiel? ;-)
Gute Frage, habs einfach vergessen.
ja, schien mir auch so. Kein Problem.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
.mittig
{
margin-left: auto;
margin-right:auto;
width:90%;
}</style>
</head>
<body>
<div class="mittig">
<div>Hallo</div>
<div>Fans</div>
</div>
</body>
</html>
Okay, das sieht erstmal korrekt aus. Und meiner Meinung nach müsste div.mittig auch tatsächlich zentriert sein.
> (In der Realität sollen natürlich in dem div weitere Infos stehen)
Dann frage ich mal ketzerisch: Hast du etwas weggelassen, was vielleicht für den Effekt verantwortlich ist? Irgendwelche paddings oder margins anderer Elemente vielleicht?
Oder liegt's vielleicht nur an einer Fehlinterpretation von dir? Das div.mittig ist vielleicht sogar zentriert (gib ihm mal einen Rahmen oder eine Hintergrundfarbe, dann wird's deutlich), es müsste links und rechts je 5% Abstand vom Rand haben. Genau da, 5% vom linken Rand, beginnt aber auch der Text in den beiden Kind-divs, denn der ist ja linksbündig in seinem Block (Default). Und klar, wenn du das Elternelement schmaler machst, rückt auch sein linker Rand (und damit der linke Rand seiner Kindelemente) näher zur Mitte.
Möchtest du eventuell auch den Text (genauer: Den inline-Inhalt) innerhalb der Blockelemente zentrieren? Dann ist zusätzlich text-align anzugeben.
So long,
Martin
--
Eine Nonne kommt in den Himmel. An der Pforte fragt Petrus: "Wer bist du?" - "Ich bin die Braut Jesu." Petrus stutzt einen Moment, ruft dann nach hinten: "He Freunde, habt ihr schon gehört? Der Juniorchef will heiraten!"
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
@@Jochen:
nuqneH
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
(In der Realität sollen natürlich in dem div weitere Infos stehen)
Auf Englisch? Wenn nein, dann ist die Angabe "en" falsch. Für Deutsch muss es "de" heißen.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Es ist nicht ratsam, ISO 8859-1 oder eine andere veraltete Zeichencodierung zu verwenden. Besser über einen Wechsel nachdenken und immer und überall UTF-8 verwenden.
Und warum XHTML 1und nicht HTML5?
Qapla'