Elemente positionieren

[Shiela]

Hallo zusammen!

Ich versuche mich gerade hobbymäßig an einer kleinen Website und habe in diesem Forum auch schon viel Hilfe erhalten, Danke auf jeden Fall dafür. Nun habe ich das Problem, dass ich ein Textfeld ("Text") unter der Headline platzieren möchte. Mein Plan ist, dass die Headline die Seite umspannt und darunter sowohl das Textfeld als auch ein Menü erscheinen. Leider bekomme ich es einfach nicht hin, dass das textfeld und die Überschrift beide den selben Abstand zum rechten Rand aufweisen. Irgendwie hat die Überschirft eine Art "automatischen Zusatzrand", wodurch sie immer ein bisschen weiter links steht, auch wenn die margins der beiden gleich sind... wie behebe ich das? Danke auf jeden Fall für eure Antworten.

h1 {
   text-align: center;
   font-family:'Lemonada';
   font-size: 250%;
   border-style: solid;
   background-color: #D8D8D8;
   border-radius: 8px;
   border-color: black;
   margin: 2%
}

#Text {
   background-color: #D8D8D8; 
   position: absolute; 
   left: 30%;
   margin-top: 10px; 
   border-style: solid; 
   border-color: black; 
   border-radius: 5px; 
   margin-right: 2%
}

Edit Rolf B: Codeblocks formatiert man besser mit ~~~, siehe hier.

[Rolf B]

Hallo Shiela,

CSS allein ist zur Problemuntersuchung nicht genug. Du musst auch das gestylte HTML dazu zeigen. Wichtig ist z.B. die Familienbeziehung zwischen h1 und #Text (Kind, Geschwister, sonstwas?).

Wichtig ist auch, welches das position:relative Element in der Elternkette von #Text ist. Ohne ein solches Element wird #Text in Bezug zum Body positioniert. Du möchtest aber seine Position in Bezug zum <h1> Element setzen. Deshalb sollte #Text entweder ein Kind von <h1> sein (und <h1> ist position:relative), oder die beiden sollten Geschwister in einem <header> Element sein. Bei #Text als Kind von <h1> muss man allerdings auf die Inhaltstypen aufpassen, da ist nicht alles erlaubt. Würde der Inhalt von #Text mit in einem Inhaltsverzeichnis erscheinen? Ja: Kind von h1. Nein: Geschwister von h1.

Verschiebungen gibt es auch durch die Ränder. Wenn das #Text Element Kind des h1 ist und das h1 einen Rand hat, dann ist die Platzierung von #Text um den Rand verschoben. Die (0,0) Koordinate ist immer innerhalb des Randes.

Und du schreibst, dass Du einen bestimmten "Abstand zum rechten Rand" haben willst. Wenn das so ist, dann solltest Du #Text ggf. nicht mit left:, sondern mit right: positionieren. Und den Abstand von oben nicht mit Margins erzeugen, sondern mit der top Eigenschaft.

Wie Du es am besten machst, ist aber nur bei Kenntnis des HTML wirklich sinnvoll zu erklären.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Wichtig ist auch, welches das position:relative Element in der Elternkette von #Text ist. Ohne ein solches Element wird #Text in Bezug zum Body positioniert.

Nein, das eben gerade nicht. Siehe meine Antwort.

Du möchtest aber seine Position in Bezug zum <h1> Element setzen. Deshalb sollte #Text entweder ein Kind von <h1> sein

Nein, das ist großer Quatsch. Der Text ist nicht Bestandteil der Überschrift.

oder die beiden sollten Geschwister in einem <header> Element sein.

Ob das vernünftig ist, kann man ohne Kenntnis des Seiteninhalts nicht sagen. Also so ganz allgemein: nein.

Wie Du es am besten machst, ist aber nur bei Kenntnis des HTML wirklich sinnvoll zu erklären.

Und vor allem bei Kenntnis des gewünschten Layouts. Ich vermute ganz stark, dass absolute Positionierung nicht Teil der Lösung ist.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Rolf B

Kann mir einer erklären, warum jemand ein Posting, das an zwei Stellen fachlich Falsches sagt, positiv bewertet?

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Gunnar Bittersmann]

@@Shiela

ein Textfeld ("Text")

Hast du noch mehr Text auf der Seite als in diesem Feld? Dann ist „Text“ kein gut gewählter Bezeichner.

auch wenn die margins der beiden gleich sind...

Nö, sind sie nicht.

Nehmen wir mal an, der Viewport ist 1000px breit.

h1 {text-align: center; font-family:'Lemonada'; font-size: 250%; border-style: solid; background-color: #D8D8D8; border-radius: 8px; border-color: black; margin: 2%}

Die Abstand von h1 berechnet sich aus der Breite des Containers, vermutlich des body. Dieser hat vom Browserstylesheet vorgegebenen Außenabstand; das dürften in den meisten Browsern 8px sein. Macht also 984px Breite.

2% davon sind 19.68px.^[1] Hinzu kommen die o.g. 8px zum Viewportrand. Macht 27.68px.

#Text {background-color: #D8D8D8; position: absolute; left: 30%; margin-top: 10px; border-style: solid; border-color: black; border-radius: 5px; margin-right: 2%}

Durch die absolute Positionierung richtet sich hier alles nach der nächst höheren positionierten^[2] Box, wenn es keine solche gibt (was bei dir wohl der Fall sein dürfte) nach dem Viewport.

2% von 1000px sind 20px – das ist auch der Abstand vom Seitenrand.

Macht einen Unterschied von 7.68px.^[3] Oder wie du es nennst: „automatischer Zusatzrand“.

Der verschwindet bei h1, wenn du den Außenabstand des body auf 0 setzt. Der kommt auch bei #Text hinzu, wenn body ein positioniertes Element ist. Kannst du beides in diesem Codepen ausprobieren.

Was aber nicht heißen soll, dass du eins davon tun solltest. Du solltest auf die absolute Positionierung verzichten. Was wolltest du damit erreichen?

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

---

1. Nach meiner Rechnung. Die berechneten Werte in Browsern weichen geringfügig davon ab. ⁇ ↩︎

2. position-Eigenschaft mit anderem Wert als dem Ausgansgswert static ↩︎

3. Noch viel größer ist der Unterschied übrigens, wenn #Text wenig Text enthält. Durch die absolute Positionierung ist die Box nur so breit wie nötig (shrink to fit). ↩︎

[Shiela]

Danke für deine Hilfe, jetzt ist alles wie ich es mir vorgestellt hatte. 😀 Da ich auf meiner (sehr einfachen) Seite nur einen Text habe, bin ich mit der Id zufrieden, aber Danke für den Hinweis. Bezüglich der Frage, warum ich absolute Positionierung verwendet habe: das fiel mir einfach nur als erstes ein....

[Gunnar Bittersmann]

@@Shiela

Bezüglich der Frage, warum ich absolute Positionierung verwendet habe: das fiel mir einfach nur als erstes ein....

Mir fiele als erstes ein, dem Text die 30% als linken Abstand zu geben: Codepen

Ich hab das für alle Kindelemente des Containerelements (main in meinem Fall) gemacht: Weihnachtsmannmützenselektor main > *. Dann gilt das auch für weitere Textboxen; IDs brauchst du keine.

Für h1 wird das überschrieben, was davon abweicht. Was gleich ist (background und border), muss nicht nochmal wiederholt werden.

---

Als zweites fiele mir ein, ein Grid aufzuspannen: Codepen

• links und rechts jeweils eine Randspalte von 2%; dazwischen liegt der Hauptbereich, den hab ich mal page genannt.
• eine Spalte von 30% für die linke Begrenzung des text-Bereichs

main > * { grid-column: text } packt alles in den schmalere text-Spalte;
h1 { grid-column: page } lässt die Überschrift über die volle page-Breite gehen.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!