HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Joshua Lyons
PRO
Joshua Lyons
Pro Student 417 Points

Footer Background color fills the screen.

When I float the ul items it allows my footer background color to fill the screen.

4 Answers

Can you provide an example of your code? Normally this happens when it breaks the container in some fashion.

This is a common issue with floats. You need to clear them after.

A lot of people make a clear or clearfix class and either attach in a empty div. You could also attach clear: both to the footer to fix this as well.

footer { 
  background: #000; 
  clear: both;
  padding-bottom: 0;
  text-align: center;
}

You will want to take a look into using clear for floats. This can cause problems later on down the road.

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Joshua Lyons
Joshua Lyons
Pro Student 417 Points

awesome! That's very helpful! thank you.

Joshua Lyons
PRO
Joshua Lyons
Pro Student 417 Points

/************************ General ************************/

body { font-family: Ailerons; color: #6ab47b;

}

a { text-decoration: none; color: #6ab47b; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5.5%; font-size: 2.0em; }

img { max-width: 100%; }

/************************ Heading ************************/

logo {

text-align: center; margin: 0; }

h1 { float: center; font-size: 2.4em; margin: 0 15px; padding-top: 10px; }

h2 { font-size: 1.2em; margin: -9px 0; }

h1, h2 { text-align: center; font-weight: normal; }

header { background: #000; border-color: #599a68; }

nav ul { font-size: 1.3em; text-align: center; list-style-type: none; padding-bottom: 10px; padding-left: 0; padding-top: 20px; }

nav a:hover { color: #fff }

/************************ Colors ************************/

/************************ Footer ************************/

footer { background: #000; padding-bottom: 0;

text-align: center;

}

footer img { padding-top: 25px; }

footer p {

padding-left: 0; padding-bottom: 34px; margin: 0 0; }

/************************ Page: Portfolio ************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mr. Ryan Lyons|Web Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head>

<body>

<header>
  <a href="index.html" id="logo">
    <h1>Mr. Ryan Lyons</h1>
    <h2>designer</h2>
  </a>
  <nav>
    <ul>
      <li><a href="index.html" class="selected">Portfolio</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
</header>

<div id="wrapper">
  <section>
    <ul id="gallery">
      <li>
        <a href="img/numbers-01.jpg">
          <img src="img/numbers-01.jpg" alt="bitch">
        </a>
        <p>Experimentation with color and texture.</p>
      </li>
      <li>
        <a href="img/numbers-02.jpg">
          <img src="img/numbers-02.jpg" alt="">
        </a>
        <p>Playing with blending modes in photoshop.</p>
      </li>
      <li>
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
        </a>
        <p>Trying to create 80's glow.</p>
      </li>
      <li>
        <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
        </a>
        <p>Photoshop drips.</p>
      </li>
      <li>
        <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt="">
        </a>
        <p>Repitition shapes.</p>
      </li>
    </ul>
  </section>
</div>

<footer>
    <a href="https://www.facebook.com/bigrojolyons">
      <img src="img/bllogo.jpg" alt="">
    </a>
  <p>&copy; 2017 Joshua Lyons.</p>
</footer>

</body> </html>

Joshua Lyons
PRO
Joshua Lyons
Pro Student 417 Points

i ended up using overflow: auto in the div id="wrapper"