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

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

                  Einklappen

                  Themen: 56.459   Beiträge: 428.482   Mitglieder: 27.877   Aktive Mitglieder: 60
                  Willkommen an unser neuestes Mitglied, jorna2a.

                  Online-Benutzer

                  Einklappen

                  635 Benutzer sind jetzt online. Registrierte Benutzer: 1, Gäste: 634.

                  Mit 2.057 Benutzern waren am 14.07.2019 um 11:45 die meisten Benutzer gleichzeitig online.

                  Die neuesten Themen

                  Einklappen

                  SimpleSite

                  Die neuesten Beiträge

                  Einklappen

                  Lädt...
                  X