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

HTML

hugh lancaster
hugh lancaster
3,078 Points
Posted by hugh lancaster
hugh lancaster
3,078 Points

Header position?

In CSS I have a header link to an image.....

header { width: 1000px; margin: 0 auto; height: 115px; background-image: url('../img/img01.jpg'); }

On the html page I have this......

<header> <a href="index.html" id="logo"> <h2>Bloodborne Pathogens</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>

I want the Portfolio - "about" and "contact" reside just below the img above. How do I do that? Thanks

4 Answers

Grant Zabriskie
Grant Zabriskie
11,017 Points
Grant Zabriskie
Grant Zabriskie
11,017 Points

Hugh,

Looks like your HTML is unfinished. I can't see all of the header code. Can you add that in so I can get a better sense of what you're trying to do?

George Elias
George Elias
3,015 Points
George Elias
George Elias
3,015 Points

You inserted the image as background image and not an actual image.

If you insert the image in the HTML instead of the CSS it will place it above the links as follows:

<img src="img/img01.jpg">

Hope this is what you meant. If not please clarify.

hugh lancaster
hugh lancaster
3,078 Points
hugh lancaster
hugh lancaster
3,078 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>BBP</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h2>Bloodborne Pathogens</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">
hugh lancaster
hugh lancaster
3,078 Points
hugh lancaster
hugh lancaster
3,078 Points

/********************************** 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%; }

h3 { margin: 0 0 1em 0; }

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

header { width: 1000px; margin: 0 auto; height: 115px; background-image: url('../img/img01.jpg'); }

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; }

nav a { font-weight: 800; padding: 15px 10px; }

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

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

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/********************************** 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: 2em; color: #bdc3c7 }

/********************************** PAGE: ABOUT ***********************************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/********************************** PAGE: CONTACT ***********************************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter.png'); }

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

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

/* green header */ header {

width: 1000px; margin: 0 auto; height: 115px; background-image: url('../img/img01.jpg'); }

/* nav background on mobile */ nav { background: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* links */ a { color: #6ab47b; }

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

/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }