Ergebnis 1 bis 7 von 7

Thema: Footer wird nicht angezeigt

  1. #1
    Mus
    Gast

    Standard Footer wird nicht angezeigt

    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...index_1.0.html
    (Testseite)
    http://xxxmusxxx.xx.funpic.de/MyPage/Tests/style.css
    (CSS)

    http://xxxmusxxx.xx.funpic.de/MyPage...les/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/images/Homepage_Styles/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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Footer wird nicht angezeigt

    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

  3. #3
    Mus
    Gast

    Standard AW: Footer wird nicht angezeigt

    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/images/Homepage_Styles/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...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

  4. #4
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Footer wird nicht angezeigt

    <div id="footer">
    <body background="http://xxxmusxxx.xx.funpic.de/MyPage/0Pics0/images/Homepage_Styles/footer.JPG">
    Copyright
    </div>
    WTF?
    Body??

    Ganz schnell wieder rausnehmen...


    HTML-Code:
    #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...

  5. #5
    Mus
    Gast

    Standard

    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/images/Homepage_Styles/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...index_1.0.html
    das ist meine zweite Testseite

    MfG
    Mus

    also meine Frage...^^
    wie bekomm ich die Grafik nun ans Seitenende?
    Geändert von Sweet_Angel (07.08.2010 um 11:13 Uhr) Grund: zusammengeführt

  6. #6
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard

    Zitat Zitat von Mus Beitrag anzeigen
    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-Code:
    <!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>
    Ahja, das CSS hab ich faulheitshalber direkt mit eingebettet... Darfst die styles komplett in die CSS Datei packen ;P
    Geändert von Sweet_Angel (07.08.2010 um 11:14 Uhr) Grund: zusammengeführt,Nutze bitte die Edit funktion!

  7. #7
    Mus
    Gast

    Standard AW: Footer wird nicht angezeigt

    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

Ähnliche Themen

  1. Antworten: 4
    Letzter Beitrag: 08.12.2009, 14:17
  2. Ava wird nicht angezeigt
    Von Allegra im Forum Forum-Hilfe.de intern
    Antworten: 2
    Letzter Beitrag: 16.08.2008, 14:36
  3. swf wird nicht angezeigt
    Von Klebo im Forum Flash Forum
    Antworten: 34
    Letzter Beitrag: 08.07.2008, 19:01
  4. JPG wird nicht angezeigt
    Von Carolyn im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 16
    Letzter Beitrag: 14.04.2006, 21:54
  5. uhr wird nicht angezeigt
    Von phore im Forum Computer - Internet Forum
    Antworten: 3
    Letzter Beitrag: 04.08.2005, 11:53

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •