Autor Beitrag
Horand
Hält's aus hier
Beiträge: 6



BeitragVerfasst: Sa 09.05.20 12:19 
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:
ausblenden 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:

ausblenden 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-size200px;
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 user profile iconNarses: HTML-Tags hinzugefügt
Moderiert von user profile iconNarses: CSS-Tags hinzugefügt
jfheins
ontopic starontopic starontopic starontopic starontopic starontopic starofftopic starofftopic star
Beiträge: 890
Erhaltene Danke: 150

Win7
VS 2013, VS2015
BeitragVerfasst: Do 14.05.20 18: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.

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 ;-)