Hallo,
ich bin ein Anfänger und möchte folgendes realisieren:
Es soll eine Grafik in der Mitte des Browserfensters sichtbar sein. Das habe ich sowei hinbekommen.
Über dieser Grafik soll (zentriert in der Mitte) eine weitere Grafik liegen die Transparent ist und wesentlich kleiner.
Ich habe jetzt schon diverse Erklärungen gelesen, steige aber bei der Positionierung in html /css nicht durch.
Hier mein Ansatz als Code:
HTML
Test
und das dazu passende .css File:
html
{
background-color: #fff;
color: #111;
font-family: Verdana, Helvetica, Arial, sans-serif;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
#innerframe
{
height:auto;
width:70%;
position: center;
margin-left: auto;
margin-right: auto;
z-index:1;
}
#highestz
{
z-index:2;
width:100%;
}
Der DIV Container ist im HTML quasi innerhalb eines anderen DIV Containers. Leider wird es einfach untereinander abgebildet, statt zu überlagern.
Kann mir hier irgendwer auf di Sprünge helfen?
position:center gibt es nicht, sondern top, right, bottom u. left stehen als Startpositionen zur Verfügung, und z-index funktioniert nur in Verbindung mit position (relative, absolute o. fixed).
Ja, ok. Ich habe es soweit auch schon hinbekommen. Mein Problem ist aber, dass die Grafik mit Z-Index 2 sich in der relativen Position zur Grafik mit Z-Index 1 nicht verändern soll. Grafik 2 soll immer mittig zu Grafik 1 sein.
Wenn ich aber das Browserfenster größer - oder kleiner mache verschieben sich die Z2 Grafiken auf der Z1 Grafik.
Kann ich das irgendwie fixieren?
Dazu solltest Du den aktuellen Stand auf https://jsfiddle.net demonstrieren.
Und achte darauf, dass die Grafikdateien dort auch eingebunden/sichtbar sind.
also mit diesem fiddle komme ich nicht klar. Ich habe den Quelltext des .html und des .css file da jeweils reinkopiert. aber wo kommen die bilder etc hin?
Keine Ahnung.
Aber hier der Link zu dem Seitenversuch: www.projektwoelke.lima-city.de
Die Überschrift sollte eine absolute Position (mittig) auf der darunter liegenden Grafik bekommen.
Das habe ich jetzt auch geschafft. Es funktioniert, ist aber wahrscheinlich jetzt völlig falsch gelöst.
Hier der Quelltext des .css
html
{
background-color: #fff;
color: #111;
font-family: Verdana, Helvetica, Arial, sans-serif;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
#hintergrundbild
{
height:auto;
width:70%;
margin-left: auto;
margin-right: auto;
z-index:2;
}
#überschrift
{
position:absolute;
top:5%;
left:30%;
z-index:3;
width:40%;
}
