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.457   Beiträge: 428.476   Mitglieder: 27.874   Aktive Mitglieder: 61
                  Willkommen an unser neuestes Mitglied, solobest.

                  Online-Benutzer

                  Einklappen

                  745 Benutzer sind jetzt online. Registrierte Benutzer: 3, Gäste: 742.

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

                  SimpleSite

                  Die neuesten Beiträge

                  Einklappen

                  • bueny3897
                    Bestehende Webseite bearbeiten
                    Ein Freund von mir führt ein kleines Unternehmen, nun hat er schon eine bestehende Webseite die ich bearbeiten soll. Ich würde gerne wissen wie ich diese bearbeiten kann.
                    Servertyp: FTP
                    09.07.2019, 13:16
                  • bcounsultgroup
                    Antwort auf Bestehende Webseite bearbeiten
                    Wenn Sie Wordpress verwenden möchten, können Sie direkt über den Browser auf die Website zugreifen. Fügen Sie einfach /wp-admin am Ende der URL hinzu. Sie benötigen dann Anmeldeinformationen, um sich anzumelden....
                    15.07.2019, 13:44
                  • arnego2
                    Antwort auf SEO selbst machen oder mit Linkaufbau-Agentur?
                    Man sollte diesen Faden zumachen und alle Sperren die hier ihre Links losgeworden sind. IMHO
                    13.07.2019, 22:50
                  • arnego2
                    Antwort auf Bestehende Webseite bearbeiten
                    Der Besitzer sollte für dich die WordPress Installation vornehmen und dir den WP-Admin Zugang geben. Damit machst du dann deine Worpress Seite. Standartthemen gibt es ja genug. Ein Geschäft würde ich allerdings nicht auf einem Standart Theme aufzubauen....
                    13.07.2019, 22:49
                  • Zando87
                    Antwort auf SEO selbst machen oder mit Linkaufbau-Agentur?
                    Ich bin da ganz deiner Meinung dass es heutzutage so viele SEO Agenturen gibt dass man dort einfach den Überblick verlieren kann. Dennoch muss man sagen dass man heutzutage ohne SEO keine richtige Arbeit mehr leisten kann. Ich habe an Anfang selber versucht SEO für meine Website zu machen musste es...
                    13.07.2019, 21:49
                  • Andre1
                    Neue Seite ist fertig
                    Hallo an alle,

                    es hat etwas länger gedauert, als ich gedacht hatte.
                    Aber nun sind meine Seiten online.
                    Mehrere Demoseiten und meine Hauptseite.

                    Was haltet ihr davon, wo sollte ich noch Veränderungen vornehmen?

                    https://www.co-webdesign.de

                    ...
                    12.07.2019, 16:18
                  • Andre1
                    Antwort auf Neue Seite ist fertig
                    Hallo,

                    ich kann das ändern und werde das auch gleichmachen.
                    PHP-Versionen 7.1.29, 7.2.18, 7.3.5

                    Liebe Grüße
                    Andre...
                    13.07.2019, 21:43
                  • daniel5959
                    Antwort auf Neue Seite ist fertig
                    Hallo,



                    Bei Strato z.B. kostet die Unterstützung der alten PHP-Version etwa 5 Euro pro Monat, da die PHP-Community den Support für diese alten PHP-Versionen eingestellt hat und dies jetzt Strato gegen einen monatlichen Betrag übernimmt.

                    Aber wer übernimmt beim...
                    13.07.2019, 21:24
                  • Andre1
                    Antwort auf Neue Seite ist fertig
                    Hallo,

                    die Datenschutzerklärung habe ich überarbeitet, ebenso das Widerrufsrecht.
                    Das Widerrufsrecht hat und jetzt auch wieder alle Verträge berücksichtigt.

                    Die Preise bei Hostigangeboten sind im Moment nicht befristet.
                    Sie gelten erst einmal auf Dauer.
                    ...
                    13.07.2019, 20:33
                  • daniel5959
                    Antwort auf Bestehende Webseite bearbeiten
                    Hallo,

                    der Besitzer könnte ja die Datenbank selber anlegen, dann muss er keine Webhosting-Logindaten herausgeben, und nur die erforderlichen Daten für die Wordpress-Installation nennen, da wären ...
                    1. Datenbank-Name = ...............?
                    2. Datenbank-Nutzername = ...........?
                    3. Datenbank-Passwort
                    ...
                    13.07.2019, 20:16
                  Lädt...
                  X