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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<meta name="description" content="Testhomepage" />
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="innerframe">
<img src="bilder/blank.jpg" alt="innerframe" width="100%">
<div id="highestz">
<img src="bilder/logo.png" alt="logo">
</div>
</div>
</body>
</html>
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?
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test</title>
<meta name="description" content="Testhomepage" />
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="innerframe">
<img src="bilder/blank.jpg" alt="innerframe" width="100%">
<div id="highestz">
<img src="bilder/logo.png" alt="logo">
</div>
</div>
</body>
</html>
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?
Zuletzt bearbeitet:
