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

Mark Truitt
Mark Truitt
16,078 Points

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

Mark Truitt
Mark Truitt
16,078 Points

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;
}
Mark Truitt
Mark Truitt
16,078 Points

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
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"