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 How to Make a Website Styling Web Pages and Navigation Style the Image Captions

Andrew Carr
Andrew Carr
10,979 Points
Posted by Andrew Carr
Andrew Carr
10,979 Points

I have a green box whose html origin I can't find (Stlyingwebpages/styletheimage)

Anyone who is willing to look at the code?

Rich Bagley
Rich Bagley
25,869 Points

Hi Andrew,

Can you post the code you're having problems with using 3 backticks (```) on the line before and after please and we'll see what we can spot?

Thanks

-Rich

6 Answers

Andrew Carr
Andrew Carr
10,979 Points
Andrew Carr
Andrew Carr
10,979 Points

<!DOCTYPE> <html> <head>
<meta charset="utf-8"> <title> Andrew Carr | Amateur Dolphin Educator </title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:600italic,800italic,400|Raleway:500,600,400' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1> Andrew Carr</h1> </a> <a href="Dlp//Dolphin-face.jpg" id="logo" alt=""> <h2> Amateur Dolphin Educator</h2> </a> <nav> <ul id="intro"> <li><a href="index.html" class="selected">Go home</a></li> <li><a href="about.html">Find out more here!</a></li> <li><a href="contact.html"> Contact! </a><li> </ul> </nav> </header> <!-------Pictures---------> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="/Dlp//dolphin-picture.jpg"><img src="/Dlp//dolphin-picture.jpg" alt=""> <p> Cool picture, huh?</p> </a> </li> <li> <a href="/Dlp//dolphins223.jpg"><img src="/Dlp/dolphins223.jpg" alt=""> <p> This one speaks to me on many levels</p> </a> <li> <a href="/Dlp//Dolphins.jpg"><img src="/Dlp/Dolphins.jpg" alt=""> <p> This is just a picture of dolphins.</p></a>
</li> <li> <a href="/Dlp//Image0200.jpg"><img src="/Dlp/Image0200.jpg" alt=""> <p> Captioning Dolphin photos is fun!</p></a> </li> <li> <a href="/img/numbers-01.jpg"><img src="/img/numbers-01.jpg" alt=""><p> Fine, I guess I'll use stock photography </p></a></li> </ul> </section>
<!--Education compoent-------> ''' <section id="education"> <nav> <ul> <li> <a href="http://en.wikipedia.org/wiki/Dolphin"> Wikipedia Dolphins </a> </li> <li> <a href="http://www.defenders.org/dolphin/basic-facts"> Defend the Dolphins! </a> </li> <li> <a href="http://seaworld.org/en/animal-info/animal-infobooks/bottlenose-dolphins/"> Seaworld Dolphins!</a> </li> </ul> </nav> ''' </section>

  <footer>
  <a href="http://www.twitter.com/dolphin"> <img src="img/twitter.png" alt="Twitter Logo"> </a>
  <a href=https://www.facebook.com/pages/Dolphins/106279019410550> <img src="img/facebook.png" alt="Facebook Logo"> </a>
  <p>&copy; 2014 Andrew Carr. </p>
  </footer>

</div> </body> </html>

==CSS== /****************** GENERAL ******************/

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

wrapper {

max-width:940px; margin: 0 auto; padding:0 5%;

}

a { text-decoration:none; color:#fff; }

a:hover{ color:#482be3}

img { max-width:100%; }

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

logo {

text-align: center; margin: 0; }

h1 { font-family:'Open Sans', sans-serif; margin: 15px 0, font-size: 1.5em; font-weight:normal; line-height:.8em; }

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

h1:hover, h2:hover{ color:#3829b4}

/*********** Navigation *************/

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

nav a:hover{ color:#ccc}

intro a:hover{

color:#000}

/*********** Footer *************/ footer { font-size: .8em; text-align: center; padding-top: 0px; color: #ccc; }

/********************************** PAGE: PORTFOLIO ***********************************/

gallery {

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

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #456789; color: #fff; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em color: #bdc3c7} /*********** colors *************/

/site body/

body { background-color:#fff; color: #999; }

/* green header*/ header { background:#6eb97b; border-color: #599a68; }

/navation background on mobile/ nav { background: #599a68 }

I know that if I get rid of the 'Education' section, the green block goes away, but I think that should only add some navigation links. I'm quite the n00b over here so apologies for any subsequent confusion I relay

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi,

This line in your css appears to set the header to green:

/* green header*/ header { background:#6eb97b; border-color: #599a68; }

This section in particular sets the background colour:

background:#6eb97b;

Is this what you are referring to?

EDIT:

You appear to have the following line which changes the background of the nav element to a shade of green:

/navation background on mobile/ nav { background: #599a68 }

This wraps your menu ul and li tags.

Thanks

-Rich

Andrew Carr
Andrew Carr
10,979 Points
Andrew Carr
Andrew Carr
10,979 Points

Even when I remove that there's still a green box that encapsulates my 'ul' items of the pictures. I know that if I disable the 'education' component the green box goes away, but that's only a navigation component at the bottom. Is there somewhere else I can check?

Rich Bagley
Rich Bagley
25,869 Points

Just updated my previous answer and included another possible place this may be occurring under my EDIT.

-Rich

Andrew Carr
Andrew Carr
10,979 Points
Andrew Carr
Andrew Carr
10,979 Points

Many thanks! As a final point of clarification, why does a background on the navigation then cause 'ul' elements to also have that background? Is there a way to assuredly know it will only affect specific parts? Thank you again!

Best, Andrew

Rich Bagley
Rich Bagley
25,869 Points

Happy to help.

The nav style is essentially wrapping the ul elements and as they don't have a background colour, the parent element colour is shown.That particular style applied to all nav elements.

One way to target a specific would be through using classes.

The Selectors section of the CSS Foundations course will help explain this in more details but you basically apply a class to an element, e.g.

<div class="title-area">
content goes here
</div>

and then style only this specific element using:

.title-area {
styles go here
}

Hope that helps clear it up.

-Rich