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.415   Beiträge: 428.251   Mitglieder: 27.807   Aktive Mitglieder: 71
                  Willkommen an unser neuestes Mitglied, avabrooks.

                  Online-Benutzer

                  Einklappen

                  577 Benutzer sind jetzt online. Registrierte Benutzer: 4, Gäste: 573.

                  Mit 1.625 Benutzern waren am 17.03.2018 um 18:52 die meisten Benutzer gleichzeitig online.

                  Die neuesten Themen

                  Einklappen

                  • daniel5959
                    Antwort auf Googleplatzierung
                    Hallo,

                    ob wirklich Hilfe gesucht wird oder nur der Link untergebracht werden soll, das lasse ich mal offen.

                    Wenn es um die Platzierung bei Google geht, sprich um SEO (Suchmaschinenoptimierung), dann sollte das bei einem Shop auf jeden Fall einem Profi überlassen werden - gute...
                    Heute, 06:41
                  • Haris
                    Googleplatzierung
                    Hallo,

                    ich habe einen Onlineshop, der aktuell etwas schwächelt. Auf https://www.urv-online.de/index.php/...rbeagentur.php habe ich gelesen, dass es sinnvoll sein kann, wenn man die Seite optimieren lässt. Nun ist meine Frage, ob man das selbst machen kann,...
                    Heute, 00:58
                  • föni
                    Antwort auf Zusätzliche fusszeile
                    mir ist nicht bewusst, was ich anders gemacht habe, aber es scheint nun zu passen.

                    Ich danke Dir für die Hilfe.
                    Gestern, 16:40
                  • seoNaster
                    Antwort auf Suche Filehoster
                    Ich kenne filealpremium.net Der ist auch kostenlos und bietet dir normale Geschwindigkeit an auch ohne Premium Konto, lediglich eine Anmeldung ist notwendig. Ich meine auch es gibt keine Einschränkungen und auch keine Werbung die einen normalerweise bei kostenlosen Accounts stört.
                    Gestern, 10:53
                  • Rauch17
                    Antwort auf Fliesen im Wohnzimmer
                    Fliesen im Wohnzimmer ist nicht so gute Idee. Ich empfehle nur Holzfußboden, besonders wenn man im Sommer barfuß gerne läuft....
                    20.05.2019, 19:07

                  Kostenlose Homepage bei Jimdo!

                  Einklappen

                  Jimdo

                  Die neuesten Beiträge

                  Einklappen

                  • Haris
                    Googleplatzierung
                    Hallo,

                    ich habe einen Onlineshop, der aktuell etwas schwächelt. Auf https://www.urv-online.de/index.php/...rbeagentur.php habe ich gelesen, dass es sinnvoll sein kann, wenn man die Seite optimieren lässt. Nun ist meine Frage, ob man das selbst machen kann,...
                    Heute, 00:58
                  • daniel5959
                    Antwort auf Googleplatzierung
                    Hallo,

                    ob wirklich Hilfe gesucht wird oder nur der Link untergebracht werden soll, das lasse ich mal offen.

                    Wenn es um die Platzierung bei Google geht, sprich um SEO (Suchmaschinenoptimierung), dann sollte das bei einem Shop auf jeden Fall einem Profi überlassen werden - gute...
                    Heute, 06:41
                  • föni
                    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>
                    ...
                    17.05.2019, 22:00
                  • föni
                    Antwort auf Zusätzliche fusszeile
                    mir ist nicht bewusst, was ich anders gemacht habe, aber es scheint nun zu passen.

                    Ich danke Dir für die Hilfe.
                    Gestern, 16:40
                  • andi656
                    Suche Filehoster
                    hallo,

                    welche Anbieter gibt es momentan die günstig oder sogar kostenlos ihren Dienst anbieten?
                    Ich bin da noch etwas ratlos, da ich sowas noch nie genutzt habe und bin daher über jeden Ratschlag dankbar....
                    19.05.2019, 10:34
                  • seoNaster
                    Antwort auf Suche Filehoster
                    Ich kenne filealpremium.net Der ist auch kostenlos und bietet dir normale Geschwindigkeit an auch ohne Premium Konto, lediglich eine Anmeldung ist notwendig. Ich meine auch es gibt keine Einschränkungen und auch keine Werbung die einen normalerweise bei kostenlosen Accounts stört.
                    Gestern, 10:53
                  • Rauch17
                    Antwort auf Fliesen im Wohnzimmer
                    Fliesen im Wohnzimmer ist nicht so gute Idee. Ich empfehle nur Holzfußboden, besonders wenn man im Sommer barfuß gerne läuft....
                    20.05.2019, 19:07
                  • Rauch17
                    Antwort auf Geschenk fur Chefin?
                    Letztes Mal habe ich meiner Chefin eine Orchidee mit Lindt Schokolade geschenkt. Sie war sehr froh.
                    20.05.2019, 19:05
                  • Rehnat
                    Antwort auf Geschenk fur Chefin?
                    Sind ja wirklich so einige gute Ideen zusammengekommen, hoffe, sie haben dir dann auch helfen können?
                    Aber, ich finde, dass deine Idee auch toll war... Kann mich meinem Vorschreiber auf jeden Fall anschließen, denn ich finde auch, das es nicht immer so einfach ist ein passendes Geschenk zu finden....
                    20.05.2019, 12:48
                  • Mr.Kennedy
                    Antwort auf Webseite Domain Namen ändern?
                    Sehr hilfreich. Ich konnte meine Domain zu kennedy-translations.com ändern. Danke
                    20.05.2019, 12:32
                  Lädt...
                  X