Footer wird nicht angezeigt

Mus

Hallo werte Community

bin neu hier und habe gleich ein Anliegen, um ehrlich zu sein erbitte ich eure Hilfe.

Ich habe mich entschlossen meine alte HP wieder aufleben zu lassen und wollte mich um ein gutes Design kümmern. Da scheiterts schon...^^

Augenmerk ist also nur das Style.
Header und Body klappt soweit gut, sowie die Navigationsleiste etc... .

Es ist das erste Mal, dass ich einen Footer erstellen will und hab jetzt sehr lange experimentiert, bin halt kein Profi, bisher leider erfolglos rumprobiert. Der Footer wird einfach nicht angezeigt, vllt wird er vom Body Background verdeckt wer weiß.

http://xxxmusxxx.xx.funpic.de/MyPage/index_1.0.html
(das ist die normale Indexseite, hier hab ich einfach den Footer weggelassen im CSS und HTML)
http://xxxmusxxx.xx.funpic.de/MyPage/style.css
(dazugehöriges CSS)

http://xxxmusxxx.xx.funpic.de/MyPage/Tests/index_1.0.html
(Testseite)
http://xxxmusxxx.xx.funpic.de/MyPage/Tests/style.css
(CSS)

http://xxxmusxxx.xx.funpic.de/MyPage/0Pics0/…yles/footer.JPG
(Footer Prototyp....^^)

Also so siehts aus im Detail:
HTML
<div id="footer">
</div>

CSS
#footer {
position: absolute;
bottom: 0;
width: 100%
background: #000000 url('http://xxxmusxxx.xx.funpic.de/MyPage/0Pics0/…yles/footer.JPG') no-repeat;
}

Ich denke auch der Ansatz ist falsch. Jedoch keine Ahnung wie es funktionieren soll.
Das Bild hab ich auch schonmal im HTML verlinkt, ähnlich wie beim Header...naja, hat auch nicht geklappt

Ich hoffe ihr findet eine Lösung und bedanke mich schonmal für eure Unterstützung.

MfG
Marcus alias Mus

Grevas

1. Leere Elemente werden nicht angezeigt. Außer sie haben eine vordefinierte Größe.
2. position: absolute; bottom: 0; bewirkt, dass der Footer eben an position: 0 vom unteren Rand ist - aber nur zur Ladezeit (beim scrollen bleibt der dort wo er ist). Denke mal nicht, dass es so beabsichtigt ist?

Wie soll sich denn der Footer verhalten? Wenn er am unteren Rand kleben soll, ist position: fixed; was für dich.
Ansonsten streich position: absolute; komplett

Mus

Hallo Grevas,
ich danke dir für die schnelle Antwort

zu 2.: danke auch für die Hinweise die Begriffe haben mich verwirrt. Es ist so beabsichtigt, dass nach dem Content-Bereich am Ende der Seite ein Footer sein soll. Er soll nicht nur zur Ladezeit ganz unten sein.

Ich weiß ehrlich gesagt nicht wie ich es hinbekommen soll den Footer dementsprechend zu verändern.

hab jetzt im Html Dokument das Div Element gefüllt und dachte mit <body background="img"> würde sich der Hintergrund irgendwo zeigen. Das macht er aber nicht ich seh ihn nichtmal.

HTML
<div id="footer">
<body background="http://xxxmusxxx.xx.funpic.de/MyPage/0Pics0/…yles/footer.JPG">
Copyright
</div>
</body>
</html>

CSS
#footer {
bottom: 0;
width: 1024px;
height: 202px;
}
(Ich weiß nicht was ich stattdessen als bottom: 0; nehmen soll...)

Die Testseiten sind noch die selben.
http://xxxmusxxx.xx.funpic.de/MyPage/Tests/index_1.0.html
http://xxxmusxxx.xx.funpic.de/MyPage/Tests/style.css

danke nochmal wäre toll wenn ihr mir nochmals weiterhelfen könntet
MfG
Mus

Grevas

Zitat

<div id="footer">
<body background="http://xxxmusxxx.xx.funpic.de/MyPage/0Pics0/…yles/footer.JPG">
Copyright
</div>

WTF?
Body??

Ganz schnell wieder rausnehmen...

HTML

#footer {
width: 1024px;
height: 202px;
background: url("http://xxxmusxxx.xx.funpic.de/MyPage/0Pics0/images/Homepage_Styles/footer.JPG") no-repeat;
position: relative;
}

Und sorry meinerseits, hab mir deinen code sonst nicht näher angeschaut - jetzt aber...
Das ist ... Sanft ausgedrückt eine mittlere katastrophe. "position: relative;" sollte man in so einem fall gar nicht schreiben müssen - aber sonst wird es tatsächlich von deinen anderen Sachen verdeckt (da sie absolut positioniert sind)

Ich update das hier gleich noma...

Mus

Danke nochmal

Nun ja, ich muss mich wohl für das Chaos im Code entschuldigen
sorry

Jedenfalls hab ich auf den Testseiten den Code dementsprechend geändert wie du es geschrieben hattest.

Ich seh nur dennoch den Footer nicht er scheint weiterhin verdeckt zu sein, den kurzen Copyright Text find ich auch nirgends.

Tut mir leid, hast du vllt noch einen anderen Vorschlag?
Ich probier noch ein wenig, die Testseiten lass ich mal so.

Ich bedanke mich
MfG
Mus

also ich hab jetzt mit dem z-index wert probiert

#footer {
width: 1024px;
height: 202px;
background: url("http://xxxmusxxx.xx.funpic.de/MyPage/0Pics0/…yles/footer.JPG") no-repeat;
position: relative;
z-index: 1;
}

zumindest ist die grafik jetzt sichtbar, befindet sich dann auf der Homepage aber über dem Header

http://xxxmusxxx.xx.funpic.de/MyPage/Tests/Tests/index_1.0.html
das ist meine zweite Testseite

MfG
Mus

also meine Frage...^^
wie bekomm ich die Grafik nun ans Seitenende?

Grevas

Zitat von Mus

also meine Frage...^^
wie bekomm ich die Grafik nun ans Seitenende?

Genau darum gehts, bei deinem grusel-code. Sry ich versuch da was zu machen - aber ist echt .... grauenhaft

Kurze erläuterung:

position: absolute; bewirkt, dass ein Element absolut positioniert wird. D.h. es wird von anderen Elementen komplett ignoriert.

=> katastrophe wenn man eine dynamische höhe haben will und irgendwas drunter sein soll...
Gleichzeitig floatest du ohne clear -> das allein wär ja noch kein problem... Könnte man einfach paar clear's reinhaun und gut wärs, durch die positionieren ist halt alles, öhm, falsch...

Soo... ACHTUNG: es ist immer noch eine Katastrophe. Aber wenigstens wird dir ein Moderner Browser etwas präsentieren... Mein Rat wäre dennoch, versuchen das ganze nachzuvollziehen und es neu aufsetzen

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 
<head>
<meta http-equiv="content-language" content="de">
<meta name="generator" content="PSPad editor, www.pspad.com">
<meta name="robots" content="index, follow">
<style>
 a:link { text-decoration:none; color:#000000; } 
 a:visited { text-decoration:none; color:#000000; } 
 
 a:hover { text-decoration:none; color:#ffffff; } 
 a:active { text-decoration:none; color:#ffffff; } 
 
body { 
font-family: verdana, arial, helvetica, sans-serif;;
background: #000 url('http://xxxmusxxx.xx.funpic.de/MyPage/0Pics0/images/Homepage_Styles/background_body.jpg') repeat-y;
font-size:100%; text-align:left; margin:0; 
}
 
/* 1. Layout */
 
#header {
width: 1024px;
 
margin: -3px 0 0 0;
position: relative;
z-index: 0;
 
}
#wrapper { 
position: relative;
z-index: 2;
margin-top: -216px;
margin-left: 163px;
}
#navi1 {
 
width: 150px;
 
padding: 0;
float: left;
 
color: #fff;
 
}
 
#navi1 div, #navi2 div, #navi3 div {
width: 148px;
border-top: 0px solid #000;
border-bottom: 0px solid #000;
color: #fff;
font-size: 70%;
letter-spacing: 2px; margin-left:1px; margin-right:1px; margin-top:1px; margin-bottom:3px; padding-left:0; padding-right:0; padding-top:0; padding-bottom:2px
}
 
#content {
padding-left: 50px;
width: 490px;
 
float: left;
 
font-size: 80%;
color: #fff;
}
#content_start {
    margin-top: 50px;
}
 
#navi2 {
position: absolute;
top: -66px;
left: 0;
margin-left: 576px;
 
 
color: #FFFFFF;
}
 
#navi3 {
left:-6px;
padding:0;
position:absolute;
top:-180px;
 
color: #FFFFFF;
}
 
#navi1 p, #navi2 p {
font-size: 80%;
padding: 0;
 
}
 
#navi1 ul, #navi2 ul {
list-style-type: none;
 
 
padding: 0;
}
 
#navi1 ul li, #navi2 ul li {
font-size: 80%;
 
padding: 0;
color: #999;
}
 
#navi1 a, #navi2 a {
text-decoration: none;
text-align: right;
color: #000000;
}
 
 
#navi1 ul li a:hover, #navi2 ul li a:hover {
color:#ffffff;
}
 
#navi2 a:link, #navi2 a:visited {
color: #000000;
text-decoration: none;
font-size: 12px;
}
 
#navi2 a:hover {
color: #ffffff;
text-decoration: none;
}
 
 
 
#content a:link, #content a:visited {
color: #000000;
text-decoration: none;
}
 
#content a:hover {
color: #ffffff;
text-decoration: none;
}
 
#content h1 {
 
border: 0px solid #000;
 
color: #000000;
font-size: 90%;
letter-spacing: 2px;
 
font-weight: normal;
clear: left; 
margin-left:66px; margin-right:15px; margin-top:11px; margin-bottom:5px; padding-left:3px; padding-right:3px; padding-top:0; padding-bottom:2px
}
 
#content h2 {
margin: 15px 20px 15px 20px;
font-weight: bold;
font-size: 110%;
text-decoration: underline;
}
 
#content p {
 
color: #000000
}
 
#content ul {
margin-bottom: 20px;
}
 
img {
border: 0px none;
}
 
table {
color:#000000; 
font-family: verdana, arial, helvetica, sans-serif;
font-size: 100%;     
}
hr {color:#ffffff}
 
#footer {
padding-left: 180px;
width: 844px;
height: 202px;
background: url("http://xxxmusxxx.xx.funpic.de/MyPage/0Pics0/images/Homepage_Styles/footer.JPG");
}
#footer div {
    width: 500px;
    margin-left: 175px;
}
</style>
 
<title>marcus reitmajer online</title>
</head>
 
<body>
 
<div id="header"><img src="http://xxxmusxxx.xx.funpic.de/MyPage/0Pics0/images/Homepage_Styles/background.jpg" alt="" /></div>
 
<div id="wrapper">
<div id="navi1"> <br>
  <div> Homepage</div>
  <ul>
    <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/Homepage/index1.0.html">Home</a></li>
    <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/Homepage/news.php">News</a></li>
    <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/Homepage/Kontakt.php">Kontakt</a></li>
    <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/Homepage/Gaestebuch/gaestebuch.php">Gästebuch</a></li>
    <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/Homepage/Impressum.html">Impressum</a></li>
  </ul>
 
  <div>Anime/Manga</div>
 
  <ul>
    <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/AnimeManga/Begriff.html">Begriffe</a></li>
    <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/AnimeManga/Info.html">Serieninfos</a></li>
    <li> <a href="http://xxxmusxxx.xx.funpic.de/cpg1410/index.php">Galerie</a></li>
    <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/AnimeManga/japan.html">Japan & Co.</a></li>
    <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/AnimeManga/4you.html">Downloads</a></li>
  </ul>
 
  <div> Video</div>
  <ul>
    <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/Video/videosammlung.html">Videosammlung</a></li>
  <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/Video/video_tutorial.html">Videotutorials</a></li>
 
  </ul>
 
  <div> Foto</div>
  <ul>
  <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/Foto/foto_sonstiges.html">Bildergalerien</a></li>
  <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/Foto/foto_tutorial.html">Bildbearbeitung (Tutorials)</a></li>
  </ul>
 
 
  <div> Audio</div>
 
  <ul>
 
    <li>
 
<script language="javascript" type="text/javascript">
<!--
var win=null;
 
onerror = stopError;
function stopError(){
    return true;
}
 
 
function s1177725271(){
    myleft=500;
    mytop=500;
    settings="width=140,height=300,top=" + mytop + ",left=" + myleft + ",scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no,dependent=no";
    win=window.open("http://xxxmusxxx.xx.funpic.de/MyPage/Audio/Music.html","Music",settings);
    win.focus();
 
}
// -->
</script>
 
<a href="javascript:s1177725271();">Musikbox</a><a href=""> [Info]</a>
 
 
 
  <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/Audio/jmusic_info.html">Musiksammlung</a></li>
  <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/Audio/pop_info.html">Downloads</a></li>
  <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/Audio/rock_info.html">Musikbearbeitung (Tutorials)</a></li>
 
  </ul>
 
 
  <div> My Life</div>
  <ul>
  <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/MyLife/about.html">About Me</a></li>
  <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/MyLife/schule.html">Lebenslauf</a></li>
  <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/MyLife/hobby.html">Hobby</a></li>
 
  </ul>
 
<div>Linkage</div>
  <ul>
  <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/LinkStuff/partner.html">Partner</a><br></li>
  <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/LinkStuff/partnerschaft.html">Partnerschaft?</a><br></li>
  <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/LinkStuff/linkme.html">Banner</a><br></li>
 
  </ul>
 
<div>Voting</div>
 
  <ul>
  <li> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/Sch%fclerKZ/kz_info.html">Lauftext</a><br></li>
  </ul>
 
 
<div>Specials</div>
 
<ul>
<li><a href="http://xxxmusxxx.xx.funpic.de/MyPage/Specials/forum.html">Forum</a><br></li>
<li><a href="http://xxxmusxxx.xx.funpic.de/MyPage/Specials/linklist.html">nützliche Links</a><br></li>
</ul>
 
 
<div>Homepage-Hilfe</div>
 
  <ul>
  <li><a href="http://xxxmusxxx.xx.funpic.de/MyPage/HomepageHilfe/hhilfe_einleitung.html">Html/CSS</a><br></li>
 
  <li><a href="http://xxxmusxxx.xx.funpic.de/MyPage/HomepageHilfe/hhilfe_vorkenntnisse.html">PHP</a><br></li>
  <li><a href="http://xxxmusxxx.xx.funpic.de/MyPage/HomepageHilfe/hhilfe_webmastertools.html">Die eigene Homepage</a><br></li>
  </ul>
</div>
 
 
<div id="content"> 
<h1>
<a href="http://xxxmusxxx.xx.funpic.de/MyPage/Homepage/index1.0.html"><b>marcus.reitmajer.de.vu</b></a> >> <a href="http://xxxmusxxx.xx.funpic.de/MyPage/Homepage/index1.0.html">Home</a>
 
</h1>
    <div id="content_start">
        <p>
            <b>Herzlich Willkommen auf meiner neuen Internetpräsenz!</b><br><br>
        </p>
    </div>
</div>
 
<div id="navi2">
<SCRIPT LANGUAGE="JavaScript" SRC="http://www.onlinewebservice3.de/onlinecount.php?id=c98358&amp;offset=5&amp;style=1" type="text/javascript"></SCRIPT>
</div>
 
<div id="navi3">
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" bgcolor="">&nbsp;</td>
 
</tr>
 
<tr>
<td>
<div align="center">
<iframe src="http://225519.shoutbox.de/" width="150" height="140" frameborder="0" allowTransparency="true"></iframe>
</div>
</td>
</tr>
</table>
</div>
<br style="clear: both;" />
 
</div>
 
<div id="footer">
    <div>
        <p>Copyright</p>
    </div>
</div>
</body>
</html>

Alles anzeigen

Ahja, das CSS hab ich faulheitshalber direkt mit eingebettet... Darfst die styles komplett in die CSS Datei packen ;P

Mus

Also ich muss mich im höchsten Maße bedanken.

VIELEN DANK

Es klappt einwandfrei.
Deinen Rat werde ich natürlich annehmen. Ich werde mich dahinter klemmen müssen aber es beruhigt mich sehr dass es erstmal funktioniert

Falls dennoch Fragen auftreten sollten werd ich mich bei dir melden.
Jedoch hoffe ich doch dass ichs verstehen werde und dich nicht mehr belästigen muss

Also in diesem Sinne nochmal besten Dank
MfG

Mus

Tags