Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Michael Forster
Michael Forster
4,329 Points
Posted by Michael Forster
Michael Forster
4,329 Points

How can I fix my footer in CSS?

Hello guys, I am doing my first Website Right now and I am very close to finish my first one, but I have a Problem with my footer. One Thing is that I have some pixles between the footer and the "ultimate ending" of the page. Next Thing is that my Content in my footer is both centre but i want that it is side by side. How can I solve all These Problems? Here you have my side, it's About my Shooting club in my City :D. I hope you see it. file:///C:/Users/mifor/Documents/Atom/index.html

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,967 Points

That file is on your local workstation. In order for anyone to see it you will have to upload it or post your code.

4 Answers

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

Hi Michael!

There are a couple of things I see here. First in terms of the extra spacing at the bottom of the page that's actually the default margin that's on the body. If you want to remove that you can set the margin-bottom to 0 within your body. 

body {
  background-color: rgb(73, 73, 73);
  margin-bottom: 0;
}

You'll see this spacing also exists on the sides of your page so margin: 0; might be more appropriate for you.

Next, if you're wanting to set the two blocks of content in the footer to be side by side the easiest way you can do that would be to convert your footer to a flexbox container.

footer {
    background-color: rgb(54,54,54);
    margin: 0 auto;
    padding: 0;
    border: 20px solid rgb(54,54,54);
    display: flex;
}

Next you'll want to set both of the items within the footer to have an equal grow basis so they take up 50% of the space.

#Kontakt, #Adresse {
  text-align: center;
  flex-grow: 1;
}
Michael Forster
Michael Forster
4,329 Points
Michael Forster
Michael Forster
4,329 Points 
/*Base Styles*/
*{
  box-sizing: border-box;
}
body {
background-color:rgb(73, 73, 73);

}

/*p's and headlines*/

h1 {
  font-size: 5.625rem; /* 90px/16px  */
  text-align: center;
  margin: 12px 0 0;
  color: #fefefe;
  padding-top: 170px;
  height: 650px;
  background-color: rgb(54, 54, 54);
}

p {
 color: #fefefe;
}

h2,h3,h4 {
  color: #ffa949;
  font-size: 2.5em;
  text-align: center;
}

/*classes*/

.schießen {
  margin: 2em;
  background-color: rgb(73, 73, 73);
  font-size: 2em;
  color: #fefefe;
  padding: 1.5em 1.5em;
  border-top: .2em solid #fefefe;
  text-align: center;
  /*border: 0.75em solid #fefefe;
  box-shadow:0 0 50px 10px rgba(0,0,0, 1);*/
}

.anfang {
  margin: 2em;
  background-color: rgb(73, 73, 73);
  font-size: 2em;
  color: #fefefe;
  padding: 1.5em 1.5em;
  text-align: center;
}

.bild {
  border:solid 4px black;
  width:40%; height:auto

}

/*ids*/

#events {
  text-align: left;
}

#Kontakt {
  text-align: center;
}

#Adresse {
  text-align: center;
}


/*footer*/

footer {
    background-color: rgb(54,54,54);
    margin: 0, auto;
    padding: 0;
    border: 20px solid rgb(54,54,54);
}

<!DOCTYPE html>
<html lang="de">

<head>
  <title>Sch&uuml;tzenverein Stein</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <header id="Kopf" class="Haupt-Kopf">
    <h1>Der Sch&uuml;tzenverein in Stein</h1>
  </header>
  <div class "anfang">
    <p class="anfang">
      Den Sch&uuml;tzenverein Stein gibts schon seit &uuml;ber 40 Jahren und wird es noch lange geben. Jeden
      Montag und Freitag treffen sich Sportsch&uuml;tzen, die einfach nur schie&szlig;en. Manche treffen sich
      aber auch nur, weil sie es genie&szlig;en sich mit anderen zu Unterhalten. <br>Das machen die Sch&uuml;tzen
      nach dem schie&szlig;en auch. Also kommen Sie mal vorbei, sei es nur, um sich dazu zu setzen und eine Cola
      oder ein Bier zu trinken.<br> <br>
      <img class="bild" src="img/coca-cola.jpg" alt="coca cola">
    </P>
  </div>
  </div>
  <div class="schießen">
    <h2>
      Das Gewehrschie&szlig;en
    </h2>
    <p>
      Das Gewehrschie&szlig;en ist anspruchsvoller also viele Denken. Man muss vollkommen ruhig und
      Entspannt sein. Da jeder Ruckler dazu f&uuml;hren kann, dass man
      daneben schie&szlig;t. Dar&uuml;berhinaus braucht man aber auch gen&uuml;gend Kraft und gen&uuml;gend Ausdauer.
      Ein Gewehr kann bis zu 5kg wiegen, diese 5kg muss man dann ein paar Sekunden halten, aber dabei auch
      noch vollkommen ruhig sein. Das ist schwerer, als das viele aus Filmen oder Computer
      spielen kennen.<a class="links" href="links/Gewehrschießen">Hier kannst du noch mehr dar&uuml;ber lesen.</a>
      <br> <br> <img class="bild" src="img/shooter.jpg" alt="Ein Mädchen Schießt">
    </p>
  </div>
  <div class="schießen">
    <h3>
      Das Pistolenschie&szlig;en
    </h3>
    <p>
      Das Pistolenschie&szlig;en ist auf dem gleichen Level wie das Gewehrschie&szlig;en. Zwar hat
      man hier keine 5kg, daf&uuml;r muss man 800g aufbringen, um den Abzug zu best&auml;tigen.
      Zudem hat man kein Objektiv auf der Pistole, daf&uuml;r aber gibt es gr&ouml;&szlig;ere Zielscheiben.
      Trotzdem muss man die Pistol sehr ruhig halten, da wie beim Gewehr nur winzige Wackler
      ausreichen, damit man das Zeil nicht trifft. Hier hilft nur &uuml;ben,&uuml;ben und noch mehr
      &uuml;ben. <a class="links" href="links/Pistolenschießen">Hier kannst du noch mehr dar&uuml;ber lesen.</a><br><br>
      <img class="bild" src="img/pistol.jpg" alt="Pistole">
    </p>
  </div>
  <div class="schießen">
    <h4>
      Events beim Sch&uuml;tzenverein
    </h4>
    <ul class="text" id="events">
      <li>K&ouml;nigsschie&szlig;en</li>
      <li>Polen Partnerstadt</li>
      <li>Lasertag</li>
    </ul>
  </div>
  <footer id="Ende">
    <p id="Kontakt">

      Kontakt <br>
      Tel:+49123456789<br>
      Tel:+49123456789(Ersatz)
      E-Mail: <a href="mailto:Schützenverein@gmail.de">Sch&uuml;tzenverein@gmail.de</a>
    </p>
    <p id="Adresse">
      Adresse<br>
      HierWohneIch 13<br>
      90547, Stein
    </p>
  </footer>
</body>
</html>
Michael Forster
Michael Forster
4,329 Points
Michael Forster
Michael Forster
4,329 Points

Wow, thanks mate, it helps a lot. Thank you!