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
