Thomas: Fusszeile

Hallo,

ich habe ein Problem mit einer Fusszeile im CSS.

Ich möchte eine Abschlussleiste quer über den Bildschirm machen, nur zeigt mir der IE6 sowie
Firefox die Leiste nicht am Boden, sondern irgendwo in der Seite an.

#schlusszeile { position: absolute; bottom: 0px; width: 100%; height:20px; text-align: center; color: #FFF; font-size: 11px; background-color: #F00;}

Was kann ich machen, das die Leiste "am Boden" bleibt?

mfg
Thomas

  1. Moin

    Ist der div #schlusszeile in einen anderen Div eingebettet oder direkt im Body?

    Gruß Bobby

    --
    -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
    -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
    ie:{ br:> fl:{ va:{ ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
    1. Das CSS:

      html, body {
       margin: 0px; padding: 0px; border: 0; height: 99%;
       font-family: arial, times;
       background: #FFFFFF url('../hintergrund/menue2b.gif') left repeat-y;
      }

      a img { border: 0px; }
      a { font-family: arial, times; text-decoration: none; color: #FF0000; font-size: 13px; }

      a.schwarz:link {
        background-color: none;
        color:            #000000;
        text-decoration:  none;
        font-size:        11px;
      }

      a.schwarz:visited {
        background-color: none;
        color:            #000000;
        text-decoration:  none;
        font-size:        11px;
      }

      a.schwarz:active {
        background-color: none;
        color:            #000000;
        text-decoration:  none;
        font-size:        11px;
      }

      a.schwarz:hover {
        background-color: none;
        color:            #FF0000;
        text-decoration:  none;
        font-size:        11px;
      }

      #banner { width: 100%; padding: 0px; background: transparent url('../hintergrund/banner5.gif') top repeat-x;}

      #lieferanten { width: 393px; height: 14px; position: relative; bottom: 92px; right: 3px; }

      #hauptseite { width: 100%; }

      #links { float: left; padding-top: 40px; padding-left: 10px; width: 150px; }

      #rechts { position: absolute; left: 150px; right: 0px; top: 96px; bottom: 15px; padding-left: 15px; padding-right: 15px; margin: 0px; padding: 0px; overflow: fixed; text-align: center; }

      #textfeld { width: 720px; border: none; background-color: white; padding-top: 0px; padding-left: 20px; text-align: left; margin-left: auto; margin-right: auto; }

      a.menue {
       background-color: white;
       display: block;
       width: 115px;
       border: 1px solid #555;
       border-top: 4px solid #555;
       font-size: 12px;
       padding-left: 5px;
       color: black;
       text-decoration: none;
       margin-top: -12px;
      }
      a.menue:hover {
       border: 1px solid #000000;
       border-top: 4px solid #CCCCCC;
      }
      a.menue_aktiv {
       background-color: #CCCCCC;
       display: block;
       width: 115px;
       border: 1px solid #555;
       border-top: 4px solid #555;
       font-size: 12px;
       padding-left: 5px;
       color: black;
       text-decoration: none;
       margin-top: -12px;
      }

      h1 { font-family: times, serif; width: 720px; border-bottom: 1px solid #777; font-weight: normal; color: #555; margin: 0; }
      p { font-size: 13px; line-height: 18px; margin-top: 20px; margin-right: 10px; }
      table, tr, td { border: 0px; margin: 0px; padding: 0px; border-collapse: collapse; }

      #schlusszeile { position:fixed; bottom:0px; width:100%; padding:0px; text-align: center; color: #FFF; font-size: 11px; background-color:#F00;}
      #schlusszeile a, #schlusszeile a:visited, #schlusszeile a:active { text-decoration: none; color: #FFF; font-size: 11px; }

      1. hi,

        Das CSS:

        Ja, fein gemacht.

        Dir wurde eine konkrete Frage gestellt (die sich noch dazu eher auf die HTML-Struktur als auf's CSS bezog) - wieso bitte klatschst du als "Antwort" einfach nur deinen CSS-Code hier rein?

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Hallo wahsaga,

          die Fusszeile ist im body geschrieben worden.
          Die Frage habe ich Bobby direkt beantwortet und er wollte den CSS sehen...

          lg
          Thomas

          1. hi,

            die Fusszeile ist im body geschrieben worden.
            Die Frage habe ich Bobby direkt beantwortet

            Wo und wie - per E-Mail ...?

            und er wollte den CSS sehen...

            Wenn ihr ausserhalb des Forums diskutieren wollt - dann kannst du ihm dein CSS auch auf diesem Wege zukommen lassen.
            Ansonsten ergibt das hier eine für alle anderen nicht achvollziehbare Kommunikation.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            1. Hallo,

              um es besser verständlich zu machen habe ich
              hier noch die index Seite beigefügt.

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//DE" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
              <head>
              <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
              <meta http-equiv="content-language" content="de">
              <title>Start</title>

              <link rel="stylesheet" type="text/css" href="css/vorlage.css" media="all">
              </head>

              <body>

              <div id="banner">
              <table width="100%">
              <tbody>
              <tr>
              <td width="50%">
              <img src="logo.gif">
              </td>
              <td align="right" valign="bottom" width="50%">
              <div id="lieferanten">
              <img src="lieferanten.gif" style="border: medium none ;">
              </div>
              </td>
              </tr>
              </tbody>
              </table>
              </div>

              <div id="hauptseite">
              <div id="links">

              <a href="index.htm" class="menue_aktiv">Beginn</a><br>
              <a href="news.htm" class="menue">News</a><br>
              <a href="produkte.htm" class="menue">Produkte</a><br>
              <br>
              </div>

              <div id="rechts">
              &nbsp;

              <div id="textfeld">
              <center>
              <h1>Herzlich Willkommen!</h1>
              <p>
              <img src="leiste.jpg">
              </p>
              </center>
              </div>
              &nbsp;
              </div>
              </div>
              <div id="schlusszeile">Webseite von Dehumanoid</div>
              </body>
              </html>

              lg
              Thomas

              1. Moin

                Was soll das position:fixed hier?

                #schlusszeile { position:fixed; bottom:0px; width:100%; padding:0px; text-align: center; color: #FFF; font-size: 11px; background-color:#F00;}

                ändere dies in absolute und schon funktionierts.

                Noch am Rande: Deine Struktur ist mehr als verwirrend. warum arbeitest du mit position:absolute, wo es gar nicht notwendig ist und verschachtelst die Divs in mindestens  3 Ebenen? Das muß nicht sein. Es bläht einen Quellcode nur unnötig auf. Versuche für geschachtelte Divs "normale HTML-Elemente" zu finden, die über CSS formatiert werden können.

                Gruß Bobby

                --
                -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
                -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
                ie:{ br:> fl:{ va:{ ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
                1. Moin

                  Was soll das position:fixed hier?

                  #schlusszeile { position:fixed; bottom:0px; width:100%; padding:0px; text-align: center; color: #FFF; font-size: 11px; background-color:#F00;}

                  ändere dies in absolute und schon funktionierts.
                  Gruß Bobby

                  Danke für deine Nachricht.
                  Ab ist es nicht so, dass bei "position:absolute" die Fussleiste mitscrollt? Ich habe vor, die Leiste starr an den Boden zu binden...

                  lg
                  Thomas

                    1. Alles klar - herzlichen Dank!!!

            2. Moin

              Wo und wie - per E-Mail ...?

              Ich wurde ungefragt mit eMails bombadiert. Das mag ich überhaupt nicht. Deshalb sagte ich er solle den Code hier posten. Da habe ich mich wahrscheinlich unglücklich ausgedrückt, sodas nur der CSS-Code hier landete.

              Gruß Bobby

              --
              -> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
              -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
              ie:{ br:> fl:{ va:{ ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
  2. Hello out there!

    Was kann ich machen, das die Leiste "am Boden" bleibt?

    <http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position@title=Fixe Positionierung>. Ob evtl. Würgarounds für veraltete Browser erforderlich sind, musst du entscheiden.

    See ya up the road,
    Gunnar

    --
    „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)