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

Posted by Otto Mejia
Otto Mejia
744 Points

How do I know how big a background-color box is gonna be?

I'm doing the exercises How to Make a Website, I'm shown in the video that in the list items in the gallery there can be a color set to encapsulate the p elements within the list item. But how would the browser or you know how big the background-color box is going to be? Mine is slightly different in size than the one shown in the video example. Here's my html and css to show you what I have.

<html>
  <head>
    <meta charset="utf-8">
    <title>Otto Mejia | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,700,800,400' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Otto Mejia</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="">
              <p>Experimentation with color and texture</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of code.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repitition.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="https://twitter.com/Otto__me" target="_blank">
        <img src="img/twitter-wrap.png" alt"Twitter logo"></a>
        <a href="https://ottosportfolio.squarespace.com" target="_blank">
        <img src="img/facebook-wrap.png" alt"Facebook logo"></a>
        <p>&copy; 2015 Otto Mejia.</p>
      </footer>
    </div>
  </body>
</html>

/*******CSS********/

/********************
GENERAL
*********************/



body {
  font-family: 'Open Sans', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%
}



/********************
HEADING
*********************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px, 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}



/********************
NAVIGATION
*********************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display:inline-block;
}



/********************
FOOTER
*********************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #ccc;
}



/********************
PAGE: PORTFOLIO
*********************/
#gallery {
  margin: 0;
  padding: 0;
  list-style: none;  
}

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

#gallery li a p{
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #336699;
}




/********************
COLORS
*********************/

/* site body */
body {
  background-color: #fff;
  color: #999;
}

/* green header*/
header {
  background: #3399cc;
  border-color: #336699;
}

/* nav background on mobile */

nav {
 background: #336699;
}

/* logo text */

h1, h2 {
  color: #fff;
}

a {
 color: #336699;

}


/* nav link */
nav a, nav a:visited {
  color: #fff;
}


/* selected nav link */
nav a.selected, a:hover {
  color: #9999ff;
}
mikes02
mikes02
Courses Plus Student 16,968 Points

Just a heads up, I edited your post to separate the HTML and CSS into their own code blocks so it is easier to view.

3 Answers

Kevin VanConant
Kevin VanConant
1,833 Points
Kevin VanConant
Kevin VanConant
1,833 Points

Your browser goes to the CSS page to style everything on the page. When you call something from the CSS page that is where you will get all of your style on your page. Sorry if it's kind of a broad statement. In CSS you can call every P element and style it but it will take whatever the CSS files says and use that to style it.

Otto Mejia
Otto Mejia
744 Points

I know that the CSS communicates with the browser. But what I meant to say in my question was why does it set a certain width and height for a background-color for my list items in the gallery? I have my list items floated to the left, my width to 45%, my margin to 2.5%; and my background-color is set to a light gray. The light gray box is added under my gallery pictures. That light gray box encloses my p elements which is fine, but how does it know what size that box is? It is not set with any measurements. How does it know what size it has? If you must know what I'm talking about, copy and paste my HTML and CSS to look at a preview of the website.

Kevin VanConant
Kevin VanConant
1,833 Points

Oh ok I see what you mean. Sorry for the misunderstanding. in your "#gallery li" you are setting a background of #f5f5f5. When your "#gallery li a p" comes out it is taking the properties from above and adding a padding of that f5f5f5 color to your text background. Plus you have 5% padding around your text. So your gallery li and gallery li a p are working together to create the background color then applying a padding that gives it it's size. Hope this helps a little more.

Otto Mejia
Otto Mejia
744 Points
Otto Mejia
Otto Mejia
744 Points

Ok, thank you for your explanation. I will try to process that in my head more clearly. If I have anymore questions, I will ask you.

Otto Mejia
Otto Mejia
744 Points
Otto Mejia
Otto Mejia
744 Points

Thank you, I understand it now. And thanks to the guy who fixed my CSS from my HTML.