M
macinti777
Guest
Erstens begrüsse ich das helfende Forum ganz herzlichst.
Ich hab folgendes problem:
Die zentrale PHP datei:
<!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=UTF-8" />
<link href="backgroundup.css" rel="stylesheet" type="text/css" />
<link href="header.css" rel="stylesheet" type="text/css" />
<link href="doom.css" rel="stylesheet" type="text/css" />
<link href="backgrounddown.css" rel="stylesheet" type="text/css" />
<link href="footer.css" rel="stylesheet" type="text/css" />
<title>Gastro Heute</title>
<style type="text/css">
<!--
body {
background-color: #000000;
background-image: url();
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
</head>
<body>
<?php include("backgroundup.php"); ?>
<?php include("header.php"); ?>
<?php include("layout.php"); ?>
<?php include("backgrounddown.php"); ?>
<?php include("footer.php"); ?>
</body>
</html>
Die PHP Datei des oberen Hintergrundes:
<div class="backgroundup">
<div class="backgroundup_">
<img id="backgroundup" src="header.png" width="700" height="170" alt="" />
</div>
</div>
Zugehörige CSS datei:
@charset "UTF-8";
/* CSS Document */
div.backgroundup_ {
background-image:url('header.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
Die Vordergrundsbild PHP des Backroundes:
<div class="header">
<div class="header_">
<img id="header" src="obenwerb.png" width="660" height="130" alt="" /></div>
Das CSS dazu:
@charset "UTF-8";
/* CSS Document */
div.header_ {
text-align: center;
position:absolute;
top:19px;
width:100%;
height:170px;
}
Die Layout PHP:
<div class="Tabelle_01">
<div class="homen_">
<a href="home.php">
<img id="homen" src="homet.png" width="168" height="51" border="0" alt="" /></a>
</div>
<div class="wirn_">
<a href="wir.php">
<img id="wirn" src="wirt.png" width="168" height="51" border="0" alt="" /></a>
</div>
<div class="gastron_">
<a href="gastro.php">
<img id="gastron" src="gastrot.png" width="168" height="51" border="0" alt="" /></a>
</div>
<div class="sonstn_">
<a href="sonst.php">
<img id="sonstn" src="sonstt.png" width="168" height="51" border="0" alt="" /></a>
</div>
<div class="linksn_">
<a href="links.php">
<img id="linksn" src="linkst.png" width="168" height="51" border="0" alt="" /></a>
</div>
<div class="hometext_">
<img id="hometext" src="werbe.png" width="500" height="300" border="0" alt="" />
</div>
</div>
</div>
Zugehöriges CSS dazu:
@charset "UTF-8";
<style type="text/css">
#Tabelle_01 {
border: 0px;
width: 678px;
}
div.Tabelle_01 {
margin-left: auto;
margin-right: auto;
margin-top: -170px;
margin-bottom: 598px;
text-align: center;
position:relative;
top:170px;
width:696px;
height:300px;
}
div.homen_ {
position:absolute;
left:0;
top:13px;
width:168px;
height:51px;
background-image:url("homen.png");
}
div.homen_ a, div.homen_ a:link, div.homen_ a:visited {
display:block;
outline: none;
}
div.homen_ img {
width:100%;
height:100%;
border:0;
}
div.homen_ a:hover img {
visibility:hidden;
}
div.wirn_ {
position:absolute;
left:0px;
top:64px;
width:168px;
height:51px;
background-image:url("wirn.png");
}
div.wirn_ a, div.wirn_ a:link, div.wirn_ a:visited {
display:block;
outline: none;
}
div.wirn_ img {
width:100%;
height:100%;
border:0;
}
div.wirn_ a:hover img {
visibility:hidden;
}
div.gastron_ {
position:absolute;
left:0px;
top:115px;
width:168px;
height:51px;
background-image:url("gastron.png");
}
div.gastron_ a, div.gastron_ a:link, div.gastron_ a:visited {
display:block;
outline: none;
}
div.gastron_ img {
width:100%;
height:100%;
border:0;
}
div.gastron_ a:hover img {
visibility:hidden;
}
div.sonstn_ {
position:absolute;
left:0px;
top:166px;
width:168px;
height:51px;
background-image:url("sonstn.png")
}
div.sonstn_ a, div.sonstn_ a:link, div.sonstn_ a:visited {
outline: none;
}
div.sonstn_ img {
width:100%;
height:100%;
border:0;
}
div.sonstn_ a:hover img {
display:block;
visibility:hidden;
}
div.linksn_ {
position:absolute;
left:0;
top:218px;
width:168px;
height:51px;
background-image:url("linksn.png")
}
div.linksn_ a, div.linksn_ a:link, div.linksn_ a:visited {
display:block;
outline: none;
}
div.linksn_ img {
width:100%;
height:100%;
border:0;
}
div.linksn_ a:hover img {
visibility:hidden;
}
div.homestext_ {
position:absolute;
left: 180px;
top:-8px;
width:500px;
height:300px;
}
div.hometext_ {
position:absolute;
left:180px;
top:-8px;
width:500px;
height:300px;
}
div.homextext_ {
position:absolute;
left:180px;
top:4px;
width:500px;
height:300px;
}
.iframe_4 {
position:absolute;
background-image:
url(ifras.png);
top:-7.7px;
left:202px;
text-align: justify;
width: 500px;
height: 300px;
}
.abstand_iframe{
padding-left: 10px;
padding-top: 10px;
}
.scrollbereich {
overflow: auto;
width: 470px;
height: 276px;
}
.scrollbarabstand{
padding-right: 10px;
padding-left: 10px;
}
body {
background-color: #000000;
text-align:center; /* for IE */
margin:0 auto; /* for the rest */
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
div.homen_ {background-repeat:no-repeat;}
div.homen_ a:hover {visibility:visible;}
div.wirn_ {background-repeat:no-repeat;}
div.wirn_ a:hover {visibility:visible;}
div.gastron_ {background-repeat:no-repeat;}
div.gastron_ a:hover {visibility:visible;}
div.sonstn_ {background-repeat:no-repeat;}
div.sonstn_ a:hover {visibility:visible;}
div.linksn_ {background-repeat:no-repeat;}
div.linksn_ a:hover {visibility:visible;}
</style>
Die PHP datei des unteren Hintergrundes:
<div class="backgrounddown">
<div class="backgrounddown_">
<img id="backgrounddown" src="header.png" width="700" height="170" alt="" />
</div>
</div>
Und seine CSS Datei:
@charset "UTF-8";
/* CSS Document */
div.backgrounddown_ {
background-image:url('header.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: center;
}
Die Php des Footers der auf dem Backround liegen sollte, wie es beim Header oben der Fall ist:
</div>
<div class="footer">
<div class="footer_">
<img id="footer" src="untenwerb.png" width="660" height="130" alt="" /></div>
</div>
Und seine CSS Datei:
@charset "UTF-8";
/* CSS Document */
div.footer_ {
text-align: center;
position:absolute;
top:480px;
width:100%;
height:170px;
}
Es funktioniert eigentlich alles bestens, bis auf das untere Backround-image.
Es wird zwar angezeigt, aber zu weit unten, so um die 200px zu weit, wärend das untere Vordegrundbild, das heisst der Footer selbst richtig positioniert ist, es sollte aber auf dem Background Bild liegen.
Dazu müsste ich das Backround Image irgenwie weiter nach oben kriegen, aber wie?
Bild 9 im Anhang ist die Seite man sieht das der untere Hintergrund fehlt, beim Bild 10 sieht man wie weit es nach unten verschoben wurde.
Wenn jemand mir helfen könnte wäre sehr nett, danke.
Ich hab folgendes problem:
Die zentrale PHP datei:
<!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=UTF-8" />
<link href="backgroundup.css" rel="stylesheet" type="text/css" />
<link href="header.css" rel="stylesheet" type="text/css" />
<link href="doom.css" rel="stylesheet" type="text/css" />
<link href="backgrounddown.css" rel="stylesheet" type="text/css" />
<link href="footer.css" rel="stylesheet" type="text/css" />
<title>Gastro Heute</title>
<style type="text/css">
<!--
body {
background-color: #000000;
background-image: url();
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->
</style>
</head>
<body>
<?php include("backgroundup.php"); ?>
<?php include("header.php"); ?>
<?php include("layout.php"); ?>
<?php include("backgrounddown.php"); ?>
<?php include("footer.php"); ?>
</body>
</html>
Die PHP Datei des oberen Hintergrundes:
<div class="backgroundup">
<div class="backgroundup_">
<img id="backgroundup" src="header.png" width="700" height="170" alt="" />
</div>
</div>
Zugehörige CSS datei:
@charset "UTF-8";
/* CSS Document */
div.backgroundup_ {
background-image:url('header.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
Die Vordergrundsbild PHP des Backroundes:
<div class="header">
<div class="header_">
<img id="header" src="obenwerb.png" width="660" height="130" alt="" /></div>
Das CSS dazu:
@charset "UTF-8";
/* CSS Document */
div.header_ {
text-align: center;
position:absolute;
top:19px;
width:100%;
height:170px;
}
Die Layout PHP:
<div class="Tabelle_01">
<div class="homen_">
<a href="home.php">
<img id="homen" src="homet.png" width="168" height="51" border="0" alt="" /></a>
</div>
<div class="wirn_">
<a href="wir.php">
<img id="wirn" src="wirt.png" width="168" height="51" border="0" alt="" /></a>
</div>
<div class="gastron_">
<a href="gastro.php">
<img id="gastron" src="gastrot.png" width="168" height="51" border="0" alt="" /></a>
</div>
<div class="sonstn_">
<a href="sonst.php">
<img id="sonstn" src="sonstt.png" width="168" height="51" border="0" alt="" /></a>
</div>
<div class="linksn_">
<a href="links.php">
<img id="linksn" src="linkst.png" width="168" height="51" border="0" alt="" /></a>
</div>
<div class="hometext_">
<img id="hometext" src="werbe.png" width="500" height="300" border="0" alt="" />
</div>
</div>
</div>
Zugehöriges CSS dazu:
@charset "UTF-8";
<style type="text/css">
#Tabelle_01 {
border: 0px;
width: 678px;
}
div.Tabelle_01 {
margin-left: auto;
margin-right: auto;
margin-top: -170px;
margin-bottom: 598px;
text-align: center;
position:relative;
top:170px;
width:696px;
height:300px;
}
div.homen_ {
position:absolute;
left:0;
top:13px;
width:168px;
height:51px;
background-image:url("homen.png");
}
div.homen_ a, div.homen_ a:link, div.homen_ a:visited {
display:block;
outline: none;
}
div.homen_ img {
width:100%;
height:100%;
border:0;
}
div.homen_ a:hover img {
visibility:hidden;
}
div.wirn_ {
position:absolute;
left:0px;
top:64px;
width:168px;
height:51px;
background-image:url("wirn.png");
}
div.wirn_ a, div.wirn_ a:link, div.wirn_ a:visited {
display:block;
outline: none;
}
div.wirn_ img {
width:100%;
height:100%;
border:0;
}
div.wirn_ a:hover img {
visibility:hidden;
}
div.gastron_ {
position:absolute;
left:0px;
top:115px;
width:168px;
height:51px;
background-image:url("gastron.png");
}
div.gastron_ a, div.gastron_ a:link, div.gastron_ a:visited {
display:block;
outline: none;
}
div.gastron_ img {
width:100%;
height:100%;
border:0;
}
div.gastron_ a:hover img {
visibility:hidden;
}
div.sonstn_ {
position:absolute;
left:0px;
top:166px;
width:168px;
height:51px;
background-image:url("sonstn.png")
}
div.sonstn_ a, div.sonstn_ a:link, div.sonstn_ a:visited {
outline: none;
}
div.sonstn_ img {
width:100%;
height:100%;
border:0;
}
div.sonstn_ a:hover img {
display:block;
visibility:hidden;
}
div.linksn_ {
position:absolute;
left:0;
top:218px;
width:168px;
height:51px;
background-image:url("linksn.png")
}
div.linksn_ a, div.linksn_ a:link, div.linksn_ a:visited {
display:block;
outline: none;
}
div.linksn_ img {
width:100%;
height:100%;
border:0;
}
div.linksn_ a:hover img {
visibility:hidden;
}
div.homestext_ {
position:absolute;
left: 180px;
top:-8px;
width:500px;
height:300px;
}
div.hometext_ {
position:absolute;
left:180px;
top:-8px;
width:500px;
height:300px;
}
div.homextext_ {
position:absolute;
left:180px;
top:4px;
width:500px;
height:300px;
}
.iframe_4 {
position:absolute;
background-image:
url(ifras.png);
top:-7.7px;
left:202px;
text-align: justify;
width: 500px;
height: 300px;
}
.abstand_iframe{
padding-left: 10px;
padding-top: 10px;
}
.scrollbereich {
overflow: auto;
width: 470px;
height: 276px;
}
.scrollbarabstand{
padding-right: 10px;
padding-left: 10px;
}
body {
background-color: #000000;
text-align:center; /* for IE */
margin:0 auto; /* for the rest */
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
div.homen_ {background-repeat:no-repeat;}
div.homen_ a:hover {visibility:visible;}
div.wirn_ {background-repeat:no-repeat;}
div.wirn_ a:hover {visibility:visible;}
div.gastron_ {background-repeat:no-repeat;}
div.gastron_ a:hover {visibility:visible;}
div.sonstn_ {background-repeat:no-repeat;}
div.sonstn_ a:hover {visibility:visible;}
div.linksn_ {background-repeat:no-repeat;}
div.linksn_ a:hover {visibility:visible;}
</style>
Die PHP datei des unteren Hintergrundes:
<div class="backgrounddown">
<div class="backgrounddown_">
<img id="backgrounddown" src="header.png" width="700" height="170" alt="" />
</div>
</div>
Und seine CSS Datei:
@charset "UTF-8";
/* CSS Document */
div.backgrounddown_ {
background-image:url('header.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: center;
}
Die Php des Footers der auf dem Backround liegen sollte, wie es beim Header oben der Fall ist:
</div>
<div class="footer">
<div class="footer_">
<img id="footer" src="untenwerb.png" width="660" height="130" alt="" /></div>
</div>
Und seine CSS Datei:
@charset "UTF-8";
/* CSS Document */
div.footer_ {
text-align: center;
position:absolute;
top:480px;
width:100%;
height:170px;
}
Es funktioniert eigentlich alles bestens, bis auf das untere Backround-image.
Es wird zwar angezeigt, aber zu weit unten, so um die 200px zu weit, wärend das untere Vordegrundbild, das heisst der Footer selbst richtig positioniert ist, es sollte aber auf dem Background Bild liegen.
Dazu müsste ich das Backround Image irgenwie weiter nach oben kriegen, aber wie?
Bild 9 im Anhang ist die Seite man sieht das der untere Hintergrund fehlt, beim Bild 10 sieht man wie weit es nach unten verschoben wurde.
Wenn jemand mir helfen könnte wäre sehr nett, danke.
