Supportnet / Forum / Webseiten/HTML
Ebene auf Bild zentrieren
Frage
Ich will demnächst eine homepage online stellen, grafiken sind soweit fertig nur der text fehlt noch. der text soll mittels einer ebene auf ein bild. die ebene habeich so eingestellt, dass der text scrollbar wird. man kann also innerhalb des bildes den text scrollen. leider wird diese ebene immer so dargestellt, dass sie nicht auf dem hintergrund bleibt, sondern immer leicht daneben.
kennt jemand eine lösung zu diesem problem?
Antwort 1 von Supermax
Wie wärs mit einem Link zu der Seite oder dem Quelltext (Ausschnitt)?
Antwort 2 von Hr.Pfensterbrot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
background-image: url();
background-repeat: no-repeat;
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
background-image:url(file:///C|/Dokumente%20und%20Einstellungen/Administrator/Eigene%20Dateien/Titan%20Steele%20Central/Website_NEWS.jpg);
layer-background-image:url(file:///C|/Dokumente%20und%20Einstellungen/Administrator/Eigene%20Dateien/Titan%20Steele%20Central/Website_NEWS.jpg);
border:1px none #000000;
z-index:1;
left: 293px;
top: 201px;
overflow: auto;
}
-->
</style></head>
<body>
<center>
<img src="Website_NEWS.jpg" width="640" height="510" align="absmiddle" />
</center>
</body>
</html>
so sieht der code aus. wenn ich das bild hier hochladen könnte, dann würd ichs machen aber leider weiß ich nicht wie das geht hier...
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
body {
background-image: url();
background-repeat: no-repeat;
}
#Layer1 {
position:absolute;
width:200px;
height:115px;
background-image:url(file:///C|/Dokumente%20und%20Einstellungen/Administrator/Eigene%20Dateien/Titan%20Steele%20Central/Website_NEWS.jpg);
layer-background-image:url(file:///C|/Dokumente%20und%20Einstellungen/Administrator/Eigene%20Dateien/Titan%20Steele%20Central/Website_NEWS.jpg);
border:1px none #000000;
z-index:1;
left: 293px;
top: 201px;
overflow: auto;
}
-->
</style></head>
<body>
<center>
<img src="Website_NEWS.jpg" width="640" height="510" align="absmiddle" />
</center>
</body>
</html>
so sieht der code aus. wenn ich das bild hier hochladen könnte, dann würd ichs machen aber leider weiß ich nicht wie das geht hier...
Antwort 3 von Hr.Pfensterbrot
hab hier mal das bild hochgeladen http://www.megaupload.com/de/?d=5GVU67HR
Antwort 4 von derpfleger
Also, dein Beispielbild bei Megaupload kann ich nicht finden, dafür bin ich wohl zu doof (oder müsste ich mich da erst mal irgendwo anmelden?). Vielleicht postest du einfach die URL, unter der man deine Seite finden kann, dann kann man sich das direkt ansehen.
Nächstes: wenn du mit proprietären Eigenschaften von Netscape hantierst, brauchst du dich nicht wundern, wenn du Darstellungsprobleme bekommst. Verzichte auf layer-background-image und auf absmiddle, halte dich an validen Code, dann wirds schon mal etwas einfacher.
So fürs erste...
Gruß derpfleger
Nächstes: wenn du mit proprietären Eigenschaften von Netscape hantierst, brauchst du dich nicht wundern, wenn du Darstellungsprobleme bekommst. Verzichte auf layer-background-image und auf absmiddle, halte dich an validen Code, dann wirds schon mal etwas einfacher.
So fürs erste...
Gruß derpfleger
Antwort 5 von derpfleger
Antwort 6 von derpfleger
Ein Vorschlag:
Gruß derpfleger
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Titan Steele</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="..." />
<meta name="generator" content="Ulli Meybohms HTML EDITOR" />
<style type="text/css">
<!--
body {background-color:#471F17;}
#background {background:url(Website_HOME.jpg) no-repeat;
width:639px;
height:490px;
margin:0px auto;
}
#content { position:relative;
top:198px;
left:180px;
width:400px;
height:230px;
overflow:auto;
}
-->
</style>
</head>
<body>
<div id="background">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
</body>
</html>Zitat:
This Page Is Valid XHTML 1.0 Strict!
This Page Is Valid XHTML 1.0 Strict!
Gruß derpfleger
Antwort 7 von derpfleger
html { scrollbar-base-color:#471F17;
scrollbar-face-color:#471F17;
scrollbar-arrow-color:#471F17;}Das noch in den style-Bereich eingefügt, verändert zumindest im IE die Scrollbalkenfarbe...
...wenn mans braucht :-)
Gruß derpfleger
Antwort 8 von derpfleger
Der Vorschlag löst übrigens noch nicht das Problem, dass die Navigation lediglich ein Bild ist. Um das sinnvoll umzusetzen, solltest du die Navi aus dem Bild entfernen, und als eigenes Navi-div in den Quellcode einfügen....
Antwort 9 von derpfleger
... und sinnvollerweise solltest du auch den Contentbereich aus dem Bild nehmen, und selbigen ebensfalls als eigenständiges div integrieren.
Ist also so wie ich es gemacht habe bislang lediglich Gebastel ohne Sinn, aber ich denke, ich habe zumindest dein Problem dargestellt.
Gruß derpfleger
Ist also so wie ich es gemacht habe bislang lediglich Gebastel ohne Sinn, aber ich denke, ich habe zumindest dein Problem dargestellt.
Gruß derpfleger
Antwort 10 von derpfleger
Noch ein Vorschlag:
Du müsstest natürlich die Schriftformatierungen an deine Bedürfnisse anpassen, evtl. als Navigationselemente keine Schrift sondern Buttons verwenden, wie es dir beliebt...
Gruß derpfleger
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Titan Steele</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="..." />
<meta name="generator" content="Ulli Meybohms HTML EDITOR" />
<style type="text/css">
<!--
html { scrollbar-base-color:#471F17;
scrollbar-face-color:#471F17;
scrollbar-arrow-color:#471F17;}
body { background-color:#471F17;
font-family:Arial;
}
#background {background:url(Website_HOME.jpg) no-repeat;
width:639px;
height:490px;
margin:0px auto;
}
#navigation { position:relative;
top:140px;
left:26px;
width:118px;
height:300px;
background-color:#4A0F0B;
float:left;
overflow:auto;
}
#navigation p { margin-left:10px;
margin-top:10px;
margin-bottom:15px;
}
#navigation p a {text-decoration:none;}
#content { position:relative;
top:140px;
right:25px;
width:452px;
height:300px;
overflow:auto;
background-color:#4A0F0B;
float:right;
}
#content h1 {margin-left:10px;}
#content p {margin:0px 10px;}
-->
</style>
</head>
<body>
<div id="background">
<div id="navigation">
<p><a href="#">Home</a></p>
<p><a href="#">Band</a></p>
<p><a href="#">Music</a></p>
<p><a href="#">Gigs</a></p>
<p><a href="#">Pics</a></p>
<p><a href="#">Merch</a></p>
<p><a href="#">Links</a></p>
</div>
<div id="content">
<h1>Home</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
</body>
</html>
Zitat:
This Page Is Valid XHTML 1.0 Strict!
This Page Is Valid XHTML 1.0 Strict!
Du müsstest natürlich die Schriftformatierungen an deine Bedürfnisse anpassen, evtl. als Navigationselemente keine Schrift sondern Buttons verwenden, wie es dir beliebt...
Gruß derpfleger