nicht angemeldet
Elemente in <div> lassen sich nicht zentrieren
0 0 0 0 
MudGuard
Elemente in <div> lassen sich nicht zentrieren
Hi(gh)!
Und wieder bin ich an einem Punkt, wo ich nicht mehr weiter weiß (das kommt davon, wenn man sich nicht jeden Tag 12 Stunden mit Webprogrammierung beschäftigt) und hier um Hilfe flennen muss (ist das eigentlich normal, dass die Lernkurve so steil ist?):
Wieso wird mit diesem Code:
<style>
p, h1 { text-align:center; }
</style>
<div style="position:absolute; top:0px; left:120px; margin-right:120px" >
<h1>Yadgars Tor zum Khyberspace</h1>
</div>
die Überschrift nicht horizontal mittig dargestellt, sondern bleibt am linken Rand des <div>-Bereiches?
Die Variante mit margin-left:auto; margin-right:auto aus den FAQs habe ich ausprobiert, funktioniert auch nicht...
-
<style type="text/css">
<!--
p, h1 { text-align: center;}
-->
</style><div style="position:absolute; top:0px; left:120px; margin-right:120px; width: 100%; background-color: red;">
<h1>Yadgars Tor zum Khyberspace</h1>
</div>geht bei mir musst halt breite vom container vll angeben damit du es siehst (habs probeweise auf 100% gesetzt und background auf red)
-
Hi(gh)!
geht bei mir musst halt breite vom container vll angeben damit du es siehst (habs probeweise auf 100% gesetzt und background auf red)
Bei mir nicht... vielleicht tauge ich gar nicht zum Programmierer und sollte besser Hunde ausführen, Schnee schippen oder Klos putzen! Oder mit einem Kasten Bier vor der Glotze versumpfen, wie all die anderen Hartzer!
Bis bald im Khyberspace!
Yadgar
-
-
Wieso wird mit diesem Code:
<style>
p, h1 { text-align:center; }
</style>
<div style="position:absolute; top:0px; left:120px; margin-right:120px" >
<h1>Yadgars Tor zum Khyberspace</h1>
</div>> > die Überschrift nicht horizontal mittig dargestellt, sondern bleibt am linken Rand des <div>-Bereiches? Der Eindruck trügt, die Überschrift \_ist\_ mittig dargestellt. Schau dir mal mit [Firebug](http://getfirebug.com/) die Abmessungen des umgebenden <div>-Elements an (zur schnellen Erleuchtung reicht auch ein zusätzliches 'border:1px solid red'). Des Rätsels Lösung findest du in deiner position-Angabe.-
Hi(gh)!
Der Eindruck trügt, die Überschrift _ist_ mittig dargestellt. Schau dir mal mit Firebug die Abmessungen des umgebenden <div>-Elements an (zur schnellen Erleuchtung reicht auch ein zusätzliches 'border:1px solid red').
Das <div> ist identisch mit dem <h1>! Wie kann das sein?
Des Rätsels Lösung findest du in deiner position-Angabe.
Auch mit "relative" oder "static" rückt die Überschrift nicht in die Mitte des <div>-Bereiches!
Bis bald im Khyberspace!
Yadgar
-
Hi,
Das <div> ist identisch mit dem <h1>! Wie kann das sein?
Stichwort: shrink-to-fit
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-widthMfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Stichwort: shrink-to-fit
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-widthDas ist ziemlich abstrakt (und für dümmliche Durchschnittsmenschen wie mich kaum zu verstehen)... aber ich habe es mal mit einem zusätzlichen <p>-Absatz versucht, der die ganze Breite des <div> (abzüglich padding-left und -right) nutzt - und plötzlich sitzt die Überschrift tatsächlich in der Mitte!
Aber was, wenn man nur zentrierte Elemente hat, von denen keines die ganze Breite füllt? Kann man dieses "shrink to fit" irgendwie deaktivieren, so dass das <div> auch leer tatsächlich den ganzen zur Verfügung stehenden Raum füllt?
Der "zur Verfügung stehende Raum" ist hier allerdings durch zwei <div>s am linken und rechten Rand begrenzt - mit width:100% müsste man folglich horizontal scrollen, das ist nicht das, was ich will... width:auto?Bis bald im Khyberspace!
Yadgar
-
Der "zur Verfügung stehende Raum" ist hier allerdings durch zwei <div>s am linken und rechten Rand begrenzt - mit width:100% müsste man folglich horizontal scrollen, das ist nicht das, was ich will... width:auto?
Du musst nur nen margin-left und margin-right angebenin der Breite der divs.
Die Layoutvorschläge bei Selfhtml schin angesehen? Da gibts ein dynamisches Dreispaltenlayout
-
-
-
Der Eindruck trügt, die Überschrift _ist_ mittig dargestellt. Schau dir mal mit Firebug die Abmessungen des umgebenden <div>-Elements an (zur schnellen Erleuchtung reicht auch ein zusätzliches 'border:1px solid red').
Das <div> ist identisch mit dem <h1>! Wie kann das sein?
Das ist so bei position:absolute. Solche Elemente fallen komplett aus dem Seitengerüst raus; sie haben keinen Einfluss auf umgebende Elemente und umgebende Elemente haben keinen Einfluss auf sie.
Ihre Breite ist daher meist jene, in die ihr Inhalt gerade bequem reinpasst; in deinem Fall also die Breite des Überschrifttextes "Yadgars Tor zum Khyberspace".Des Rätsels Lösung findest du in deiner position-Angabe.
Auch mit "relative" oder "static" rückt die Überschrift nicht in die Mitte des <div>-Bereiches!
Das kann ich nun jedoch nicht glauben, denn in diesen Fällen entspricht die Breite des Elements der seines Elternelements (abzüglich seiner Außen- und Innenabstände), siehe http://www.w3.org/TR/CSS21/visudet.html#blockwidth.
Möglicherweise hast du noch etwas anderes auf der betreffenden Seite, was sich hier aber nicht nachvollziehen lässt, da du nur ein Codefragment angegeben hast (was für das ursprüngliche Problem auch grundsätzlich richtig war).
-
Hi(gh)!
Das kann ich nun jedoch nicht glauben, denn in diesen Fällen entspricht die Breite des Elements der seines Elternelements (abzüglich seiner Außen- und Innenabstände), siehe http://www.w3.org/TR/CSS21/visudet.html#blockwidth.
Es lag wohl an einem vergessenen " im <div>-Tag... aber auch nach der Korrektur dieses Fehlers: tatsächlich wird bei "static" und "relative" die Überschrift im Zentrum des <div>-Bereichs angezeigt - allerdings beginnt das <div> bei "static" schon am linken Fensterrand und reicht bis zum linken Rand des rechten <div>-Bereichs (der Navigationsleiste). Bei "relative" beginnt das <div> am rechten Rand des linken <div>-Bereichs (der Zierleiste), reicht aber leider rechts trotz margin-right:120px bis zum Fensterrand! Wieso?
Bis bald im Khyberspace!
Yadgar
-
allerdings beginnt das <div> bei "static" schon am linken Fensterrand und reicht bis zum linken Rand des rechten <div>-Bereichs (der Navigationsleiste). Bei "relative" beginnt das <div> am rechten Rand des linken <div>-Bereichs (der Zierleiste), reicht aber leider rechts trotz margin-right:120px bis zum Fensterrand! Wieso?
Vorweg:
Auch hier täuscht dich wieder die Anzeige. Das fragliche Element grenzt nicht an andere Elemente, es beginnt und endet da, wo du es haben wolltest - was in dem einen oder anderen Fall mit den Grenzen der anderen Elemente übereinstimmt (und du sicher auch genau so haben wolltest). Das ist ein kleiner, aber feiner Unterschied.Zur Frage:
Schaue dir nochmal deine style-Eigenschaften an:top:0px; left:120px; margin-right:120px
Du hast mit left die linke Seite des Elements 120 Pixel nach rechts versetzt. top und left, bottom und right gelten nur für positionierte Elemente, das sind jene, die entweder absolute, relative oder fixed als position-Eigenschaft haben.
-
Bei static, dem Standardwert, haben top/left/bottom/right keine Auswirkung. Deshalb beginnt dein <div> bei static am linken Rand (hier: Seitenrand), da, wo alle Elemente normalerweise platziert werden.
-
Bei absolute fällt das Element, wie schon geschrieben, komplett aus dem Darstellungsbaum raus. top/left/bottom/right beziehen sich auf das nächsthöhere positionierte Element (oder, letztenendes, die Seite selbst).
-
relative ist in gewisser Hinsicht eine Mischung aus static und absolute. Die Berechnung und die Auswirkung auf umgebende Elemente entspricht jener von static. Dann jedoch wird das Element um top/left/bottom/right verschoben. Sein ursprünglicher Platz bleibt frei, es wird relativ dazu angezeigt.
Zur genauen Definition siehe http://www.w3.org/TR/CSS21/visuren.html#propdef-position.
Daher reicht dein Element bei positon:relative bis zum rechten Fensterrand, trotz oder auch gerade wegen margin-right. Es wird zuerst der rechte Außenabstand von 120 Pixeln abgezogen(margin-right:120px). Dann wird das Element um 120 Pixel nach rechts verschoben angezeigt (left:120px) - und landet damit genau am rechten Fensterrand.
-
Hi(gh)!
Daher reicht dein Element bei positon:relative bis zum rechten Fensterrand, trotz oder auch gerade wegen margin-right. Es wird zuerst der rechte Außenabstand von 120 Pixeln abgezogen(margin-right:120px). Dann wird das Element um 120 Pixel nach rechts verschoben angezeigt (left:120px) - und landet damit genau am rechten Fensterrand.
Jetzt habe ich es mal zur Abwechslung mit position:relative und zusätzlich margin-left:120px (statt left:120px) probiert - und mit einem Mal sieht es so aus, wie ich es haben will!
Danke für den Denkanstoß!
Bis bald im Khyberspace!
Yadgar
-
-
-
-
-
-
Hi!
(ist das eigentlich normal, dass die Lernkurve so steil ist?):
Sie ist nicht steil, sie leidet nur an ein par Sprungstellen.
-
Hi,
Und wieder bin ich an einem Punkt, wo ich nicht mehr weiter weiß (das kommt davon, wenn man sich nicht jeden Tag 12 Stunden mit Webprogrammierung beschäftigt) und hier um Hilfe flennen muss (ist das eigentlich normal, dass die Lernkurve so steil ist?):
Vielleicht.
Nicht normal ist, daß zu jedem Fitzelproblemchen bei derselben Homepage ein neuer Thread aufgemacht wird.<div style="position:absolute; top:0px; left:120px; margin-right:120px" >
<h1>Yadgars Tor zum Khyberspace</h1>
</div>
die Überschrift nicht horizontal mittig dargestellt, sondern bleibt am linken Rand des <div>-Bereiches?Welche Breite erwartest Du denn für das div? Vermutlich eine, die stark von der realen Breite abweicht (width ist nicht angegeben, also gilt width: auto ...)
Die Variante mit margin-left:auto; margin-right:auto aus den FAQs habe ich ausprobiert, funktioniert auch nicht...
Doch, die funktioniert wunderbar. Der neben der width der h1 übrigbleibende Platz der Breite 0 wird gleichmäßig auf margin-left und margin-right verteilt.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Vielleicht.
Nicht normal ist, daß zu jedem Fitzelproblemchen bei derselben Homepage ein neuer Thread aufgemacht wird.Ich kann nichts dafür, dass meine Nerven so schwach sind... zum richtigen Erwachsenen (also taff, souverän, mit beiden Beinen im Leben und so) hat es bei mir leider nicht gereicht!
Was machen wir denn da? Tütenkleben in der Behindertenwerkstatt? Sozialverträgliches Frühableben? Ab in den Schredder mit mir?
-