Entwickler-Ecke :: Thema anzeigen - Frage zu Positionierung und Rahmen von Divs

Horand - Sa 09.05.20 13:19
Titel: Frage zu Positionierung und Rahmen von Divs

Hallo, ich bins mal wieder.

Ich habe eine Art Banner für eine Homepage erstellt. Dazu sind in einem Div-Block eine Überschrift und ein Bild, das ganz rechts und hinter der Überschrift stehen soll. Letzteres konnte ich mit dem z-Index richten. Die Positionen für die Elemente sind wie folgt: div=relative; überschrift=relative(bei absolute ist von dem Div nicht mehr zu sehen, warum auch immer) und das Bild=absolute, weil ich das ja bewegen möchte (ganz nach rechts).

Mit ein bisschen "trial und error" habe ich das Ganze jetzt in etwa so hingekriegt, wie ich das möchte, aber gerade mit der Positionssache steig ich noch nicht so durch. Zum Beispiel ist mir unerklärlich, warum erst dann der volle Div zu sehen ist, wenn man den Rahmen angibt.

Ich poste am Beste mal den Code:

HTML-Code:

HTML-Dokument

1:
2:
3:
4:

    <div id="Div1">    
    <h1 id="headline"> Herzlich Willkommen! </h1>
    <img src="bild.jpeg" alt="Bilder deaktivert" id="bild"></img>
    </div>

CSS-Code:

Cascading Style Sheet

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:

#Div1 {
position:relative;
background-color:black;
background-repeat:no-repeat;
border-bottom-style:dashed;

}

#bild {
position: absolute;
margin-top:-17%;
margin-left:80%;
z-index:1;
}

#headline {
position:relative;
margin-top:0px;
padding-top:2px;
margin-left:0;
font-family: test;
color: white;
text-align: center;
font-size: 200px;
z-index:2;
}

Was ich noch erreichen möchte, dass die Überschrift ein kleines bisschen weiter nach unten gerückt wird. Mit margin und padding scheint das aber irgendwie nicht zu funktionieren, da "bewegt" sich das ganze Div.

Also, ihr seht, die position-Sache bereitet mir noch Kopfzerbrechen. Ich würde mich freuen, wenn jemand ein paar hilfreiche Tips hätte.

Vielen Dank und ein schönes Wochenende

Moderiert von Narses: HTML-Tags hinzugefügt
Moderiert von Narses: CSS-Tags hinzugefügt

jfheins - Do 14.05.20 19:45

Hi,
ich würde dir (immer noch) empfehlen, von position: relative (und erst recht absolute) generell Abstand zu nehmen. Das kannst du benutzen, wenn ein Icon schon richtig sitzt, aber irgendwie 2px zu tief ist. Aber ich würde es nicht für die großen Layoutelemente einsetzen.

Zu deinen Fragen:

Zitat:

Zum Beispiel ist mir unerklärlich, warum erst dann der volle Div zu sehen ist, wenn man den Rahmen angibt.

Das liegt daran, dass der div keinen direkten Inhalt hat. Das Konzept heißt collapsing margins [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing].

Nebenbei bemerkt machen deine position: xy Angeben eh wenig Sinn, da du weder top, left right noch bottom angibst. Poste doch mal eine Skizze, wie es am Ende aussehen soll ;-)

Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!