Guten Abend
Auch nach Benutzung der Suchfunktion konnte ich mein Problem nicht lösen.
Irgendwo habe ich wohl ein Verständnis Problem und zwar geht es darum, einen Text auf einem Bild darstellen zu lassen(per CSS).
Das Bild erscheint auch und der Text auch, nur entweder ist das Bild überm Text oder dazwischen oder drunter, aber der Text lässt sich nicht auf dem Bild darstellen.
Ist das Bild alleine auf einer Seite funktioniert alles, aber sobald eine Navigation dazu kommt mit einem Kopf und Fußbereich, ist sense.
Ich bin noch ein blutiger Anfänger und habe das "1 Spalten Layout" auf der Seite hierfür benutzt, um ein bisschen rumzuprobieren .
Im Inhaltsbereich habe ich ein Bild eingefügt, also genau zwischen Header und Footer.
Wenn ich mit dem Befehl "Position:absolute" arbeite, wird alles verdeckt trotz des "z-index" setzens Der z-index Behfel ist nicht im Quellcode.
Bitte um Hilfe oder Hilfestellung
LG scotch
<!DOCTYPE html>
<html lang="de">
<head>
<link href="design.css" rel="stylesheet" >
<title>ProbeWebseite</title>
<meta-charset="UTF-8">
</head>
<body>
<div id="kopfbereich">
</div>
<div id="nav">
<ul>
<li><a href="index.html">Starseite</a></li>
<li><a href="ueberuns.html">Über Uns</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</div>
<div id="schatten"></div>
<div>
<img id="hintergrund" src="bilder/raum.jpg" alt="Hintergrundbild Raum">
</div>
<div id="inhalt">
<h1>Eine Überschrift </h1>
<h2>Ein bisschen werbe Text</h2>
</div>
<div id="footer">
<p>1 Satz Fußleiste </p>
</div>
<div id="schatten"</div>
</body>
</html>
und der dazugehörige CSS code
html,body {
font: 100% Arial, Helvetica, sans-serif;
}
#kopfbereich {
background-color: red;
background:url(bilder/logorotneu.jpg) no-repeat; left top;
height: 225px;
}
#kopfbereich p {
color:white;
text-align:right;
font-size:2em;
padding:0.4em 0.4em 0 0;
}
#nav {
background-color:#ceb98e;
padding:0;
}
#nav ul {
padding:0px;
}
#nav li {
background-color:#orange;
list-style-type: none;
display: inline;
height: 1.5em;
padding: 0 1em;
line-height: 1.5em;
border-right: black 1px solid;
}
#schatten {
background-color: green;
background:url(bilder/schatten.png); repeat-x;
height:12px;
}
#inhalt {
background-color: #fff;
padding: 0;
text-align: top;
}
#hintergrund {
background:url(bilder/raum.jpg) no-repeat top left;
width:1500px;
height:800px;
padding:0;
}
#footer {
background-color: #ceb98e;
}
* {
margin:0;
padding:0;
}
Alles anzeigen