trotz html/body{height:100%} margin:auto nicht zentriert
michaah
0 0 0 0 
Auge
1
0 Felix Riesterer
0 
MudGuard
trotz html/body{height:100%} margin:auto nicht zentriert
michaah
Taag,
warum wird das folgenden nicht zentriert dargestellt?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>404</title>
<meta name="GENERATOR" content="Quanta Plus">
<meta name="AUTHOR" content="mh">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html { height:100%; width:100%;}
body { height:100%; width:100%; background-color: #001058; color: #fff; font-size: 200%; }
p { margin:auto;}
</style>
</head>
<body>
<p>Seite derzeit nicht erreichbar<br><br><br>
site offline</p>
</body>
</html>
gruß
michaah
-
Hallo,
ich würde sagen, weil Du nicht absolut positionierst.
-Für p hilft Dir text-align.
Gruß, Ich
-
Hallo,
nochmal ich, schau mal hier http://aktuell.de.selfhtml.org/artikel/css/ausrichtung/index.htm.
-
Danke euch allen! Wirklich hinbekommen habe ich das nicht, ich verstehe es nicht.
Ich habe mit position:absolute/realtive, mit margin:25% auto; herumprobiert, habe height und width angegeben, aber es wird in der höhe immer nur so ungefähr, ich versteh dann meist nicht, warum die gesamthöhe des dokuments größer wird.
Es geht mir ja nicht um dieses dokument, aber ich irre mich eben in mehr als 50% der fälle in dem was ich glaube, das mein code bewirkt, ich komme über try and error nicht hinweg. Ich weiß wirklich nicht warum ich mit DTD "strict" antue, das ist alles so unintuitiv was in html mit align recht einfach und anschaulich sich machen läßt.
Für dieses dukoment habe ich nun etwas ohne vertikale zentrierung hingefrickelt, aber es ist eben nicht befriedigend, weil ich nicht verstanden habe, wie ich etwas vertikal zentrieren könnte.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>404</title>
<meta name="GENERATOR" content="Quanta Plus">
<meta name="AUTHOR" content="mh">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html { height:100%; width:100%;}
body { height:100%; width:100%; background-color: #001058; color: #fff; font-size: 200%; font-family:"Arial Black",Arial,sans-serif;}
#center {margin-top:25%; text-align:center;}
</style>
</head>
<body><div id="center"><p>Seite nicht mehr erreichbar</p>
<p>site offline</p></div></body>
</html>-
Hallo
Für dieses dukoment habe ich nun etwas ohne vertikale zentrierung hingefrickelt, aber es ist eben nicht befriedigend, weil ich nicht verstanden habe, wie ich etwas vertikal zentrieren könnte.
Hattest du denn eine Höhe angegeben? Hast du bedacht, dass sich der Inhalt eines <div>s oder <p>s am oberen Rand des Elements befindet? Wenn die angegebene Höhe die notwendige Höhe übersteigt, wird sich der Inhalt eben nicht genau in der Mitte befinden, sondern - mehr oder minder - leicht darüber.
Und mit einem border für #center hättest du das auch sehen können.
Tschö, Auge
--
Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
(Victor Hugo)
<dingdong /><dingdong /><toc /><toc /><toc /><shout>Florence!</shout>
Veranstaltungsdatenbank Vdb 0.1
-
-
-
Moin,
ich würde sagen, weil Du nicht absolut positionierst.
Das wäre in dem Fall kontraproduktiv. Mit position:absolute; wird das Element aus dem Fluss genommen. Welches Element soll denn dann noch als Basis zum Zentrieren gelten?
P hat als Blockelement die maximale Breite, in diesem Fall auch 100%.
Also wird mit margin:0 auto; der Paragraph 100% breit in einem 100% breitem Elternelement zentriert. Das sieht man kaum ;)
Felix Idee mit der 1px Border sollte das aufzeigen.Sofern dem Paragraphen eine Breite < 100% zugewiesen wird, wird der Paragraph auch zentriert, sofern man nicht mit IE<7 anschaut.
Näheres unter obiger URL
mit freundlichen Grüßen
Ulrich--
Teiltransparente Bereiche
selfcode: sh:| br:> ie:% mo:) va:) de:] zu:) fl:( ss:| ls:[
um-fritz.de-
Näheres unter obiger URL
Vielen Dank für diese url und dein posting. Mein glaube an die richtigkeit meiner einschätzungen kehrt zurück.
Gruß
Michael
-
-
-
Liebe(r) michaah,
p { margin:auto;}
gib doch deinem p einen border! Dann solltest Du klarer sehen...
p { margin: auto; border: 1px solid red; }Warum stellst Du den vertikalen Außenabstand auf "auto"? Soll das Ganze auch vertikal zentriert werden?
Für zentrierten Text innerhalb eines Absatzes hat man Dir ja schon etwas geraten.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:) -
Hi,
warum wird das folgenden nicht zentriert dargestellt?
p { margin:auto;}Da Block-Elemente ohne explizite Breitenangabe die volle verfügbare Breite einnehmen, ist für den margin nichts mehr übrig.
Horizontale Zentrierung kann also nicht stattfinden.Für margin-top und margin-bottom wird 'auto' als 0 interpretiert (wenn margin überhaupt zutrifft).
Vertikale Zentrierung kann also ebenfalls nicht stattfinden.cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
Lieber Andreas,
[...]Horizontale Zentrierung kann also nicht stattfinden.
[...]Vertikale Zentrierung kann also ebenfalls nicht stattfinden.und wie soll der OP jetzt vorgehen? Etwa so?
<!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>Mittige Ausrichtung</title> <style type="text/css">~~~css /* mittig ausgerichteter Bereich (horizontal und vertikal) */
#mitte {
position: absolute;
top: 25%;
bottom: 25%;
left: 25%;
right: 25%;
margin: 0px;
padding: 10px;
background: #ffc0c0;
border: 1px solid #ff0000;
}#mitte h1 {
margin: 0px;
padding: 5px;
text-align: center;
background: #c0c0ff;
border: 2px solid #0000ff;
}#mitte p {
margin: 0 20px;
padding: 20px;
text-align: center;
background: #c0ffc0;
border: 2px solid #00ff00;
}~~~html </style> </head> <body> <div id="mitte"> <h1>Mittige Ausrichtung</h1> <p>Seite derzeit nicht erreichbar.</p> <p>Seite offline.</p> </div> </body> </html>Die absolute Positionierung ist deswegen nötig, da sonst die Breite nicht anhand der left/right Werte, und die Höhe nicht anhand der top/bottom Werte ermittelt wird.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)
-