Navigation

    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • TeamSpeak

    [How To] Fixierter Header und Footer

    CSS
    fixed header tutorial html5 css3 fixed footer
    1
    1
    1080
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Ritzga
      Ritzga last edited by Ritzga

      Hi Leute!

      Wolltet ihr für eure Website nicht mal einen fixierten Header/Footer haben ?
      Dann seit ihr hier genau richtig!

      Zu aller erst brauchen wir ein solides HTML5 gerüst:

      <!DOCTYPE html>
      <html lang="en">
          <head>
          <style>
      
          </style>
          </head>
          <body>
              <header>
                  <a href="#"><p>Ich bin ein Header</p></a>
              </header>
                  <nav id="nav">
      	            <ul>
      		            <li><a href="">Link 1</a></li>
      		            <li><a href="">Link 2</a></li>
      		            <li><a href="">Link 3</a></li>
      		            <li><a href="">Link 4</a></li>
      		            <li><a href="">Link 5</a></li>
      		            <li><a href="">Link 6</a></li>
      	            </ul>
                  </nav>
              <section>
              </section>
              <section>
              </section>
              <footer>
                  <p>ICH BIN EIN FOOTER</p>
              </footer>
          </body>
      </html>
      

      dann brauchen wir nur den CSS3 Code dazu ;D (diesen in den Style Tag einfügen)

      header 
      {
      	position: fixed; /*Die Position wird an das Browserfenster fixiert*/
      	top: 0; /*Der Header wird direkt am oberen Rand plaziert*/
      	width: 100%; /*Die Breite wird maximal eingestellt*/
      	height: 90px; /*Die höhe wird auf 90 Pixel gesetzt*/
      	background-color: #22c4c4;
      	color: #fff;
      	font-weight: bold;
          z-index: 1000; /*Der Z-index sorgt dafür, dass der Header über allem steht*/
          text-align: center;
      }
      footer
      {
          position:fixed;
          bottom:0px; /*Der Footer wird direkt am unteren Rand plaziert*/
          width: 100%;
          height:70px;  /*Die höhe wird auf 70 Pixel gesetzt*/
      	background-color: #22c4c4;
          color: #5CCCCC;
          text-align: center;
          z-index: 1000;
      }
      

      Durch "position:fixed" wird die Position des Objektes an das Browserfenster fixiert, dadurch ist es vollkommen egal wo man sich auf der Seite Befindet, aber der Header und Footer bleiben dort wo sie sich befinden.

      Nun besitzt ihr einen fixierten Header und Footer ;D
      Live-Demo: Klick Mich!

      Kommentare, Verbesserung oder Wünsche bitte unter diesen Beitrag ;3

      1 Reply Last reply Reply Quote 0
      • First post
        Last post