Warum funktioniert zentrieren (H u V) mit % nicht?
michat
0 Beat
0 michat
0 
Gunnar Bittersmann
0 
suit
0 michat
Warum funktioniert zentrieren (H u V) mit % nicht?
michat
Wenn ich, wie in den FAQ beschrieben, den Inhalt auf dem Bildschirm zentrieren will, und zwar horizontal und vertikal, dann klappt das mit Prozentangaben nicht. Zwar lässt sich die alles umschliessende Box mit negativem Margin in die Mitte rücken, bei der Höhe klapp dies jedoch nicht wie gewünscht.
Warum?
(In den CSS2.1 Specs habe ich die relevanten Seiten zum Boxmodel, und zu width und heigth durchgelesen ... aber den springen Punkt nicht entdeckt.)
<!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=UTF-8" />
<style type="text/css">
\* {margin: 0; padding: 0; background-color: black; font-family: Arial; color: white;
}
html {width: 100%; height: 100%;}
body {width: 100%; height: 100%;}
h2 {font-size: 1em;}
.center {text-align: center;}
#zentriert {
position: absolute;
/* width: 14em;
height: 8em; */
border: 1px solid white;
padding: 1em;
top: 50%;
left: 50%;
/* margin-left: -7em;
margin-top: -4em; */
width: 50%;
height: 50%;
margin-left: -25%;
margin-top: -25%;
}
</style></h2>
<title>zentrieren klappt nicht</title>
</head>
<body>
<div id="zentriert">
<h2>
Test
</h2>
</div>
</body>
</html>
bye
MH
--
war unregistriert "michaa"
war unregistriert "michaa"
-
Wenn ich, wie in den FAQ beschrieben, den Inhalt auf dem Bildschirm zentrieren will, und zwar horizontal und vertikal, dann klappt das mit Prozentangaben nicht. Zwar lässt sich die alles umschliessende Box mit negativem Margin in die Mitte rücken, bei der Höhe klapp dies jedoch nicht wie gewünscht.
Warum?Wenn du prozentual positionieren willst, solltest du diese Version verwenden:
#zentriert { position: absolute; top: 25%; left: 25%; bottom:25%; right:25%; } ~~~daraus resultiert dann eine height und width von 50% Ok. damit habe ich mich um eine Antwort gemogelt.. mfg Beat -- ><o(((°> ><o(((°> <°)))o>< ><o(((°>o Der Valigator leibt diese Fische-
Ok. damit habe ich mich um eine Antwort gemogelt..
Schon, aber einfach und hilfreich ist deine Lösung allemal ;-)
Danke dafür.bye
MH
--
war unregistriert "michaa"
-
-
@@michat:
nuqneH
(In den CSS2.1 Specs habe ich die relevanten Seiten zum Boxmodel, und zu width und heigth durchgelesen ... aber den springen Punkt nicht entdeckt.)
Da isser wohl: “The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well.” [CSS21 §8.3]
S.a. aktueller Thread Opera 10.63 Fehler bei Prozentrechnungen?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
@@michat:
nuqneH
(In den CSS2.1 Specs habe ich die relevanten Seiten zum Boxmodel, und zu width und heigth durchgelesen ... aber den springen Punkt nicht entdeckt.)
Da isser wohl: “The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well.” [CSS21 §8.3]
Ok, rein faktisch sieht das nach dem springenden Punkt aus. Das reicht aber zum Verständnis nicht. Danke natürlich für das Quoting.
Die für mich wichtigere Frage ist jedoch: Warum wurde von den "Machern" diese (zumindest für den Anfänger) verwirrende und schwer nach zu vollziehende Höhenabhängigkeit von der Breite gewählt? Ich frage mich, warum drei der vier Schlüsselwerte (top, left, margin-left) sich relativ zur entsprechenden Kante ihres übergeordneten Elements (body, nicht war?) ausrichten (lassen), beim vierten Schlüsselwert (margin-top) jedoch statt des erhoffen und naheliegenden Bezugs zur Höhe des übergeordneten Elements plötzlich ein Bezug zur generierten Box (das ist dann nicht die übergeordnete), und da dann nicht zur Höhe, sondern zur Breite. Dadurch wird die "Regel" gebrochen und damit die Anschaulichkeit zerstört.
Das wird vermutlich nicht ohne Überlegung so eingerichtet worden sein, und das ist es eigentlich was ich suche: eine Art roter Faden, ein Grundgedanke oder ein Denkmodell, welcher/s hinreichend erklären würde, welche Vorteile dieser Bruch den Anschaulichkeit mit sich bringt. Denn für mich ist das eben immer noch nicht ersichtlich.S.a. aktueller Thread Opera 10.63 Fehler bei Prozentrechnungen?
Soweit ich sehe hat das mit Opera und desen Prozentrechnungsfehler nichts zu tun, das von mir geschilderte Problem stellt sich ja im FF auch nicht anders dar.
bye
MH
--
war unregistriert "michaa"-
@@michat:
nuqneH
Das wird vermutlich nicht ohne Überlegung so eingerichtet worden sein, und das ist es eigentlich was ich suche: eine Art roter Faden, ein Grundgedanke oder ein Denkmodell, welcher/s hinreichend erklären würde, welche Vorteile dieser Bruch den Anschaulichkeit mit sich bringt. Denn für mich ist das eben immer noch nicht ersichtlich.
Diese Nachricht ist nun im Forum lesbar.
S.a. aktueller Thread Opera 10.63 Fehler bei Prozentrechnungen?
Soweit ich sehe hat das mit Opera und desen Prozentrechnungsfehler nichts zu tun, das von mir geschilderte Problem stellt sich ja im FF auch nicht anders dar.
Natürlich, Firefox macht es ja auch richtig. Opera hingegen macht es bei absoluter/fixer Positionierung falsch. War doch in dem verlinkten Thread zu lesen.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
Wenn ich, wie in den FAQ beschrieben, den Inhalt auf dem Bildschirm zentrieren will, und zwar horizontal und vertikal, dann klappt das mit Prozentangaben nicht.
Die in den FAQ beschriebene Methode ist nicht sonderlich vorteilhaft.
Guckst du hier:
Horizontal und vertikal zentrieren mit XHTML und CSSEtwas weiter unten ist beschrieben, wie es mit relativen Angaben funktioniert - z.B. mit Prozentwerten.
-
Guckst du hier:
Horizontal und vertikal zentrieren mit XHTML und CSSEtwas weiter unten ist beschrieben, wie es mit relativen Angaben funktioniert - z.B. mit Prozentwerten.
Danke, schaut interessant aus. Allerdings ist das noch recht schwer zu durchblicken (nicht wie es geht, sondern warum). Werde ich gelegentlich mal ausprobieren. Ich dachte schon mit relativen Angaben geht das überhaupt nicht und bin froh dass ich unrecht hatte.
bye
MH
--
war unregistriert "michaa"
-