Ankündigung

Einklappen
Keine Ankündigung bisher.

Zusätzliche fusszeile

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Zusätzliche fusszeile

    Hallo Leute

    Ich hab eine html Seite am laufen mit folgendem Code:

    HTML-Code:
     <!DOCTYPE HTML>
    <html lang="de">
    <head>
        <link rel="icon" href="bim/favicon.ico" type="image/x-icon" />
    <title>x.ch</title>
    <meta charset="utf-8">
    <style>
    * { margin: 0; padding: 0;}
    html, body {height: 100vh;}
    body {
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    background-image: url(bim/xy.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
      display: flex;
      justify-content: center;
    }
    #container {
    max-width: 960px;
    margin: 0 auto;
    display: inline-block;
    background-color: rgba(0,0,0,0.4);
    padding: 2.5em 3em 1.5em;
    margin: 3.5em 0 3em;
      text-align: center;
    }
      #container a {
        font-family: "Futura", Helvetica, sans-serif;
    font-weight: 400;
    color: #fff;
    line-height: 37px;
    letter-spacing: inherit;
    font-size: 27px;
    -ms-word-break: break-word;
    word-break: break-word;
    word-wrap: break-word;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    hyphens: none;
         text-decoration: none;
      }
    
      #container hr {
        background-color: rgba(255,255,255,0.3);
    height: 1px;
    width: 40%;
        display: block;
    margin: 0 auto 0 auto;
    text-align: center;
        border: none;
        margin-top: 14px;
        margin-botttom: 28px;
      }
    
      #container p {
        font-family: "Merriweather", Georgia, serif;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
        padding-top: 27px;
    }
    
    </style>
    </head>
    <body>
    <div id="container">
    <img alt="x.ch" src="bim/w.png"><br>
    <br><br>
    <a href="/">x.ch</a><br>
      <hr>
    <p>... mit der Technik</p>
    </div>
    <br>
    <p>
    </div>
    </body>
    </html>
    nun möchre ich zusätzlich eine Fusszeile Footer für anderen Text einbinden nach dem selben Prinzip. des "container".

    Schematisch sollte es dann in etwa der Skizze im Anhang ausschauen.

    20190517_223509.png

    Welche Ergänzung muss ich einfügen, dass dies klappt?

    hab es bereits mit folgendem Zusatz code versucht: (Auszug am Schluss)

    HTML-Code:
    #container p {
        font-family: "Merriweather", Georgia, serif;
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
        padding-top: 27px;
    }
    #fusszeile {
     float: left;
    background-color: rgba(0,0,0,0.4);
      border-top: 20px  ;
       margin: 60px;
      width: 30%;
      display: block;
    }
    
    </style>
    </head>
    <body>
    <div id="container">
    <img alt="x.ch" src="bim/w.png"><br>
    <br><br>
    <a href="/">x.ch</a><br>
      <hr>
    <p>... mit der Technik</p>
    </div>
    <br>
    <p></p>
    <footer>
     <div id="fusszeile">
        <hr>
       <p>swiss made</p> <img src="bim/swiss-made.jpg"><br>
      </div>
      </footer>
    </div>
    </body>
    </html>
    dies führt aber nicht zum Ergebnis.

    Kann mir hier jemand weiterhelfen?

  • #2
    Soll die Fußzeile denn ganz normal in die Seite eingebettet sein oder soll sie beim Scrollen fixiert sein? In jedem Fall ist float:left der falsche Weg. Wenn ersteres zutrifft, ist es wahrscheinlich schon ausreichend, wenn Du es weglässt und beim body flex-direction:column und align-items:center hinzu fügst.
    Zuletzt geändert von Sempervivum; 18.05.2019, 06:43.

    Kommentar


    • #3
      Die Fusszeile sollte normal in die Seite eingebaut werden und nicht immer fix zu sehen sein.

      Kommentar


      • #4
        Dann versuche es mit
        beim body flex-direction:column und align-items:center

        Kommentar


        • #5
          Vielen Dank für Deine hilfreiche Antwort.

          Ich hab nun den Code wie folgt ergänzt und möchte eigentlich unten gerne auch die selbe box quer (ca. 95% breit) über die Seite haben. (wie im Bild oben)

          HTML-Code:
          #footer {
          width: 95%;
          min-height: 560px;
          margin: 0 auto;
          display: inline-block;
          background-color: rgba(0,0,0,0.6);
          padding: 2.5em 3em 1.5em;
          margin: 3.5em 0 3em;
          text-align: center;
            border-radius: 5px;
          }
          
            #footer a {
              font-family: "Futura", Helvetica, sans-serif;
          font-weight: 400;
          color: #fff;
          line-height: 37px;
          letter-spacing: inherit;
          font-size: 16px;
          -ms-word-break: break-word;
          word-break: break-word;
          word-wrap: break-word;
          -webkit-hyphens: none;
          -moz-hyphens: none;
          hyphens: none;
               text-decoration: none;
            }
          
            #footer hr {
              background-color: rgba(255,255,255,0.3);
          height: 1px;
          width: 99%;
          display: block;
          margin: 0 auto 0 auto;
          text-align: center;
              border: none;
              margin-top: 14px;
              margin-botttom: 28px;
              float: center;
            }
          
            #footer p {
              font-family: "Merriweather", Georgia, serif;
          color: #fff;
          font-size: 10px;
          font-weight: 400;
          line-height: 30px;
              padding-top: 27px;
            }
          
          ...
          
          <div id="footer">
          <a href="/">designe by ...</a><br>
            <br>
          </div>
          folgender Cod funktioniert auch nicht:

          HTML-Code:
          #bereich {
              background-color: yellow;
              width: 400px;
              height: 100px;
              }
          
           ...
          
          div id="bereich">
          <a href="/">designe by ...</a><br>
            <br>
          </div>
          Wie kann ich das erreichen?

          Kommentar


          • #6
            Wenn Du den Footer über (fast) die ganze Breite haben willst, sieht dies doch vernünftig aus:
            Code:
            #footer {  
             width: 95%;
            Ich bin nur ein wenig verwirrt, weil Du zunächst vom Footer schreibst und dann von #bereich? Soll diese Box zusätzlich zum Footer angezeigt werden?

            Kommentar


            • #7
              Um die Codes auseinander zu halten, hab ich diese einfach anders benannt.

              den...
              HTML-Code:
              #footer {
                  width: 95%;
              ...hab ich ja bereits mit eingepackt. Es erschein aber nicht mal einen Rahmen oder sonst was... als wäre der Code nicht da...

              Weiss da auch nicht mehr weiter...

              Kommentar


              • #8
                Wenn Du also beide Boxen, #footer und #bereich, untereinander anzeigen willst, brauchst Du sie ja nur nacheinander in deine HTML-Seite einzufügen. Durch
                Code:
                display: flex;
                flex-direction: column;
                werden sie dann untereinander angeordnet. Woran scheiterst Du dabei denn?
                BTW: float_center gibt es nicht.

                Kommentar


                • #9
                  mir ist nicht bewusst, was ich anders gemacht habe, aber es scheint nun zu passen.

                  Ich danke Dir für die Hilfe.

                  Kommentar

                  UNTERSTÜTZT UNS!

                  Einklappen


                  Für alle Amazon-Käufe, die ihr über diese Suchmaske tätigt, bekommen wir eine kleine Umsatzbeteiligung. Euch kostet es nichts mehr und wir können von den Einnahmen einen Teil unserer Kosten abdecken!

                  Vielen Dank für eure Unterstützung!

                  homepage-forum.de - Hilfe für Webmaster! Statistiken

                  Einklappen

                  Themen: 56.653   Beiträge: 428.483   Mitglieder: 28.275   Aktive Mitglieder: 60
                  Willkommen an unser neuestes Mitglied, motorGlype.

                  Online-Benutzer

                  Einklappen

                  196 Benutzer sind jetzt online. Registrierte Benutzer: 6, Gäste: 190.

                  Mit 3.502 Benutzern waren am 23.01.2020 um 17:20 die meisten Benutzer gleichzeitig online.

                  Die neuesten Themen

                  Einklappen

                  Die neuesten Beiträge

                  Einklappen

                  Lädt...
                  X