Whats wrong with my code?

Question

Hi, I'm trying to do a couple of different things. For the navigation, I would like to display logo on left side and links on the right side. Also, I would like to have the navigation with a full background solid color maybe a good 600px in height. Also, my footer is not full width. I tried a few different methods but to no avail. I'm not sure why I'm not getting these effects? Any help is appreciated. I have attached the code.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>John Doe | Developer | 3D Modeler</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css"> </head> <body> <nav id="primary-nav" role="navigation"> <a href="http://www.example.com"/> <img src="img/logo.png" alt="Brand" /> <ul> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Testimonials</a></li> <li><a href="#">Hire John</a></li> </ul> </nav>

<div class="jumbotron">
  <h1>Pixel Perfect Web Developer & 3D Modeler</h1>
  <p>Tools Of The Trade</p>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li><!-- Did not learn yet -->
    <li>PhP</li><!-- Did not learn yet -->
    <li>Wordpress</li><!-- Did not learn yet -->
    <li>3ds Max</li>
    <li>Cinema 4D</li>
    <li>Blender</li>
    <li>Photoshop</li>
  </ul>
  <h4>View Portfolio</h4> <!-- Add down arrow -->
  </div>

<div class="gallery">

</div>

<div class="about-me-banner">
  <h3>About Me</h3> <!-- Font Awesome Directional Icon goes here -->
  <p>
    Hi, my name is John Doe and I am a web developer and 3D modeler. I enjoy building responsive web sites with the latest technologis. Some of these technologies include; HTML5, CSS3, Javascript, Php, Wordpress. My clients appreciate the fact that I take the time to understand their project and at the same time approach their needs in an easy to understand language for them. I am also talented in 3D modeling things such as products, and architectural visualization (personal, commerical, real estate).
  </p>
</div>

<footer class="main-footer">

    <div class="bio">
      <img src="#" alt="John Doe" />
        <p>Web Developer, 3D modeler and an enthusiast for all things tech related. Eddie Kozlica combines his tactical skills from both arts to provide fully functional
          web development and 3D modeling services. His aim is to provide high quality websites and 3D renderings.</p>
          <p>
            Multi-disciplined artist.
          </p>
          <p>
            <a href="Hire John.html">Hire Now>></a>
          </p>
    </div>
    <footer class="main-footer">
    <div class="social-icons">
      <a href="#">Twitter<img src="#" alt="" /></a>
      <a href="#">GitHub<img src="#" alt="" /></a>
      <a href="#">LinkedIN<img src="#" alt="" /></a>
    </div>

    <div class="Right-Side-Nav">
      <h4>About</h4>
      <p>
        Learn all about Johns skills and workflow.
      </p>
      <h4>Portfolio</h4>
      <p>
        View John's work.
      </p>
      <h4>Testimonials</h4>
      <p>
        View what others have to say about John's work.
      </p>
      <h4>Contact</h4>
      <p>
        Just stopping by to say hello, Contact John.
      </p>
      <h4>Hire John</h4>
      <p>
        Enquire about hiring John.
      </p>
    </div>

    <div class="copyright-info">
      Copyright &copy; 2016 John Doe All Rights Reserved
    </div>

</footer>

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

/** General **/ html, body { background-color: #ffffff; }

.container { text-align: center; font-family: 'Open Sans', sans-serif; }

.jumbotron { text-align: center; font-family: 'Open Sans', sans-serif; padding: 20px 0 0 0; position: relative; z-index: 9999; }

/** Navigation **/

nav { position: fixed; margin: 0 auto; float: left; }

ul { list-style-type: none; display: inline-block; }

li { display: inline; float: left; margin-right: 15px; }

nav ul li a { text-decoration: none; font-size: 1.0em; display: block; }

/** Skills **/

.about-me-banner { text-align: center; }

.main-footer { text-align: center; background: #B6B6B6; color: #ffffff; font-size: 1em; font-weight: 300; }

Answer 1 · 2016-08-06T06:25:09Z

August 6, 2016 6:25am

Hi Edi,

Please look at the code below. The reason the arrows are not aligning next to the text is because the heading was displaying block and needed to be changed to inline block. Block elements span the entire width of their parent container and any child element would naturally push or appear below.

For the 3 columns I added the class of col on the end as this makes reading the code a little easier and you know that you want all 3 to share some properties. Please have a look below to see how I achieved the desired results.

For the small copyright text, I simply took it out of the flow of the footer as the height is quite large. This then puts the text right at the bottom of the page and I just added the same background color.

====== HTML =======

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>John Doe | Developer | 3D Modeler</title> 
     <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
     <!-- Font Awesome Icons -->
     <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
     <link rel="stylesheet" href="main.css"> </head> 
     <body> 

    <header class="main-header">
      <div class="logo">
          <a href="http://www.example.com"/> <img src="img/logo.png" alt="Brand" />
      </div>

     <!-- Navigation -->
     <nav id="primary-nav" role="navigation"> 
         <ul> 
           <li><a href="#">About</a></li> 
           <li><a href="#">Portfolio</a></li>
           <li><a href="#">Testimonials</a></li> 
           <li><a href="#">Hire John</a></li>
         </ul> 
      </nav>
      <!-- End Navigation -->

    </header>

  <div class="jumbotron">
    <h1>Pixel Perfect Web Developer & 3D Modeler</h1>
      <p>Tools Of The Trade</p>
        <ul>
          <li>HTML</li>
          <li>CSS</li>
          <li>Javascript</li><!-- Did not learn yet -->
          <li>PhP</li><!-- Did not learn yet -->
          <li>Wordpress</li><!-- Did not learn yet -->
          <li>3ds Max</li>
          <li>Cinema 4D</li>
          <li>Blender</li>
          <li>Photoshop</li>
        </ul>
    <h4>View Portfolio</h4> <i class="fa fa-arrow-down 2x" aria-hidden="true"></i>
  </div><!-- End of Jumbotron -->


<div class="about-me-banner">
  <h3>About Me</h3> <i class="fa fa-arrow-down" aria-hidden="true"></i>
  <p>
    Hi, my name is John Doe and I am a web developer and 3D modeler. I enjoy building responsive web sites with the latest technologis. Some of these technologies include; HTML5, CSS3, Javascript, Php, Wordpress. My clients appreciate the fact that I take the time to understand their project and at the same time approach their needs in an easy to understand language for them. I am also talented in 3D modeling things such as products, and architectural visualization (personal, commerical, real estate).
  </p>
</div>


<!-- Gallery -->

<a href="#"><img src="" alt="" /></a>

<div class="about-banner"> <h4>About John</h4> <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> </div>

<footer class="main-footer"> 
  <div class="footer-container">
      <div class="left col"> 
        <p class="short-intro"><a href="about.html">
        <img src="img/guitar.jpg" alt="John Doe" class="align-left medium" /></a> John Doe is a front end web developer with a strong emphasis on simple, elegant design. His passion for all things tech related goes back to the early 90's. John is a big fan of finding out about new techniques and technologies for web development, and a casual programmer, Linux, Android, and architecture admirer. He combines his development experience to design and code the best possible websites. Moreoever, he uses his 3D knowledge to create the best possible renders for his clients. </p> 
      </div> 
      <div class="middle col"> 
        <div class="social-icons"> 
          <i class="fa fa-facebook fa-lg" aria-hidden="true"></i> 
        </div> 
        <p> Follow John's facebook page for interesting tips, tricks, tutorials.</p> 
        <div class="social-icons"> <i class="fa fa-twitter fa-lg" aria-hidden="true"></i> 
        </div>
        <p> Follow @JohnDoe for up-to-date news, articles, retweets of interesting things.</p>
        <div class="social-icons"> <i class="fa fa-github fa-lg" aria-hidden="true"></i> 
        </div>
        <p> View @JohnDoe on Github and collaborate on different projects. </p>
        </div> 
        <div class="right col"> 
        <a href="#"><h4>About</h4></a>
         <p> Learn about John Doe and his workflow. </p> 
         <a href="#"><h4>Portfolio</h4></a> 
          <p> View the latest work from John Doe. </p> 
         <a href="#"><h4>Testimonials</h4></a> 
         <p> See what other clients are saying about John's work. </p> <a href="#"><h4>Contact</h4></a>
          <p> Contact John Doe to inquire about a project. </p> <a href="#"><h4>Hire John</h4></a> 
          <p> Hire John for your next project. </p> 
      </div> 
    </div>
     </footer>
     <div class="small-print"> <p> Copyright © 2016 ALL RIGHTS RESERVED JOHN DOE </p> </div>

===== css ======



header, section, footer, aside, nav, article, figure, figcaption { display: block; }

h4 {
    margin: 0;
}

p {
    margin: 0;
}

body, html { margin: 0; font-family: 'PT Sans', sans-serif; }

.wrapper { max-width: 960px; min-width: 720px; }

.logo { float: left; width: 5%; display: inline-block; margin: 20px 0px 0px 75px; }

/** Main Header **/

.main-header { padding-top: 1.0em; padding-bottom: 1.0em; background: #C3357E; }

/** Navigation **/

primary-nav {

float: right;
width: 20%;
margin: 20px 75px 0 0px;
}

primary-nav li {

font-size: 22px;
display: inline;
}

primary-nav li a {

color: #fff;
}

primary-nav li a:hover {

border-bottom: 3px #ffffff solid; }

header { height: 600px; }

ul { list-style-type: none; display: inline-block; }

li { display: inline; float: left; margin-right: 15px; }

nav ul li a { text-decoration: none; font-size: 1.0rem; display: block; }

/** Jumbotron **/

.jumbotron { text-align: center; margin-top: 250px; color: #ffffff; line-height: 1; font-size: 1rem; }

.jumbotron p { margin: -15px 0 15px 0; padding: 20px; font-size: 1.1em; }

/** Skills **/

.list { margin-top: -20px; vertical-align: middle; font-size: 1.1em; }

/** Portfolio-jumbotron **/

portfolio {

margin-top: -1px;
font-weight: 700;
color: #fffff;
}

portfolio a:hover {

color: #D1EDEF; }

.arrow-down { display: block; margin-top: -15px; }

.arrow-down i:hover { color: #1DEDEF; }

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

/** About Banner **/

.about-banner { text-align: center; padding: 1em; background-color: #e3e2d3; color: #ffffff; font-size: 1em; }

.about-banner h4 {
    display: inline-block;
}

.about-me-banner {
    text-align: center;
}

.about-me-banner h3 {
    display: inline-block;
}

.about-me-banner p {
    width: 50%;
    color: #666;
    text-align: left;
    margin: 0 auto;
    font-size: 18px;
    padding: 1.2em 0 1.2em 0;
}

img.align-left { float: left; margin-right: 10px; border: 3px solid black; }

img.medium { width: 100px; height: 100px; }

p.short-intro { text-align: justify; font-size: 1em; font-weight: 650; color: #ffffff; line-height: 22px;}

/** Main Footer **/

.main-footer { background: #5b5c57; height: 600px; max-width: 100%; margin-left: auto; margin-right: auto; }

/** Social Icons **/

.social-icons { width: 5%; color: #F1F1F1; vertical-align: text-top; float: left; }

.social-icons i:hover { color: #35A0C3; }

.footer-container {
    width: 100%;
    text-align: right;
    padding-top: 40px;
}

.col {  
    width: 30%;
    display: inline-block; 
    vertical-align: top;
    padding-left: 1em;
    padding-right: 1em;
}

.middle {
    color: #fff;
    text-align: left;
    line-height: 33px;
}

.right {
    text-align: left;
    line-height: 33px;
}



p.intro-text { text-align: left; color: #ffffff; padding: 0 0 0px 25px; margin: 0 0 25px 10px; }

p.intro-text2 { margin: -20px 0 -15px 0; color: #ffffff; }

/** Small Print **/

.small-print { display: block; background-color: #5b5c57; padding-bottom: 2em; text-align: center; line-height: 140%; font-size: .80em; color: #ffffff; clear: both; margin-bottom: -10px; }


 Hope this helps,

Any questions please just fire away,

Matt

Answer 2 · 2016-08-02T16:20:01Z

August 2, 2016 4:20pm

Hey Edi,

I have had a quick look at your code and played with the navigation. Please look at the code and try to figure out what I have done using floats.

Your main error I found is that you have two lists within your code and you had given both lists shared properties. You need to target the elements specifically by adding more classes and id's within index.html.

As I have used floats and making the assumption you use this method for the rest of your code that you add containers or wrappers in your HTML code and look up using clearfix.

Let me know if you have any questions.

Thanks,

Matt

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>John Doe | Developer | 3D Modeler</title> 
     <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/main.css"> </head> 
     <body> 

    <header class="main-header">
      <div class="logo">
          <a href="http://www.example.com"/> <img src="img/logo.png" alt="Brand" />
      </div>

     <!-- Navigation -->
     <nav id="primary-nav" role="navigation"> 
         <ul> 
           <li><a href="#">About</a></li> 
           <li><a href="#">Portfolio</a></li>
           <li><a href="#">Testimonials</a></li> 
           <li><a href="#">Hire John</a></li>
         </ul> 
      </nav>
      <!-- End Navigation -->

    </header>

  <div class="jumbotron">
  <h1>Pixel Perfect Web Developer & 3D Modeler</h1>
  <p>Tools Of The Trade</p>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li><!-- Did not learn yet -->
    <li>PhP</li><!-- Did not learn yet -->
    <li>Wordpress</li><!-- Did not learn yet -->
    <li>3ds Max</li>
    <li>Cinema 4D</li>
    <li>Blender</li>
    <li>Photoshop</li>
  </ul>
  <h4>View Portfolio</h4> <!-- Add down arrow -->
  </div>

/** Navigation **/

.logo {
    float: left;
    display: inline-block;
    margin: 20px 20px
}

.main-header {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    background: #3acec2;
    margin-bottom: 30px;
}

#primary-nav {
    float: right;
    margin: 10px 20px 0 0;
} 

#primary-nav li {
    float: left;
    font-size: 20px;
}

#primary-nav li a {
    color: #fff;
}

header {
    height: 80px;
}

ul { 
    list-style-type: none; 
    display: inline-block; 
}

li {
 display: inline;
 float: left; 
 margin-right: 15px;
  }

nav ul li a {
 text-decoration: none; 
 font-size: 1.0em; 
 display: block; }

Answer 3 · 2016-08-01T18:41:14Z

August 1, 2016 6:41pm

This course will tell you how to do everything you are describing and Nick is a much better teacher than I am.

Good luck

Answer 4 · 2016-08-03T03:31:06Z

August 3, 2016 3:31am

Thanks to both of you for the answers. Matt, your answer helped me a lot. I looked at the code and saw what you did, I even figured out a couple of other problems I was having. Definitely will be back with more questions if they arise. Thanks!

Answer 5 · 2016-08-05T17:29:17Z

August 5, 2016 5:29pm

Can someone help me with a few issues...So after playing around with the code, I am unable to do the following. 1. The "about john" banner that is gray, I cannot seem to get the arrow to be right of the text. 2. How can I make the three columns in the footer area be more closer to each other and in center of the footer area (dark gray area). 3. How can I get the fine print (copyright text) to be all the way at the bottom? Here is the codeAny help is appreciated!

<!DOCTYPE html> <html> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>John Doe | Developer | 3D Modeler</title> <link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'> <script src="https://use.fontawesome.com/ebaac7d7fd.js"></script> <link rel="stylesheet" href="main.css"> </head>

 <body>
<div class="wraper">
<header class="main-header">
  <div class="logo">
      <a href="http://www.example.com"/> <img src="img/logo.png" alt="Brand" />
  </div>

 <!-- Navigation -->
 <nav id="primary-nav" role="navigation">
     <ul>
       <li><a href="about.html">About</a></li>
       <li><a href="#">Portfolio</a></li>
       <li><a href="#">Testimonials</a></li>
       <li><a href="#">Hire John</a></li>
     </ul>
  </nav>
  <!-- End Navigation -->

<div class="jumbotron"> <h1>Pixel Perfect Web Developer | 3D Modeler</h1> <p>Tools Of The Trade</p> <ul class="list"> <li>HTML</li> <li>CSS</li> <li>Javascript</li> <li>PhP</li> <li>Wordpress</li> <li>3ds Max</li> <li>Cinema 4D</li> <li>Blender</li> <li>Photoshop</li> </ul> <h4 id="portfolio"><a href="#">View Portfolio</a></h4> <div class="arrow-down"> <a href="#"><i class="fa fa-angle-down" aria-hidden="true"></i></a> </div> </header>

<div class="about-banner"> <h4>About John</h4> <i class="fa fa-arrow-circle-o-right" aria-hidden="true"></i> </div>

<footer class="main-footer"> <div class="left-side"> <p class="short-intro"><a href="about.html"><img src="img/guitar.jpg" alt="John Doe" class="align-left medium" /></a> John Doe is a front end web developer with a strong emphasis on simple, elegant design. His passion for all things tech related goes back to the early 90's. John is a big fan of finding out about new techniques and technologies for web development, and a casual programmer, Linux, Android, and architecture admirer. He combines his development experience to design and code the best possible websites. Moreoever, he uses his 3D knowledge to create the best possible renders for his clients. </p> </div> <div class="middle-section"> <div class="social-icons"> <i class="fa fa-facebook fa-lg" aria-hidden="true"></i> </div> <p class="intro-text"> Follow John's facebook page for interesting tips, tricks, tutorials. </p class="intro-text"> <div class="social-icons"> <i class="fa fa-twitter fa-lg" aria-hidden="true"></i> </div> <p class="intro-text"> Follow @JohnDoe for up-to-date news, articles, retweets of interesting things. </p> <div class="social-icons"> <i class="fa fa-github fa-lg" aria-hidden="true"></i> </div> <p class="intro-text"> View @JohnDoe on Github and collaborate on different projects. </p> </div> <div class="right-side"> <a href="#"><h4>About</h4></a> <p class="intro-text2"> Learn about John Doe and his workflow. </p> <a href="#"><h4>Portfolio</h4></a> <p class="intro-text2"> View the latest work from John Doe. </p> <a href="#"><h4>Testimonials</h4></a> <p class="intro-text2"> See what other clients are saying about John's work. </p> <a href="#"><h4>Contact</h4></a> <p class="intro-text2"> Contact John Doe to inquire about a project. </p> <a href="#"><h4>Hire John</h4></a> <p class="intro-text2"> Hire John for your next project. </p> </div> <div class="small-print"> <p> Copyright © 2016 ALL RIGHTS RESERVED JOHN DOE </p> </div> </footer>

header, section, footer, aside, nav, article, figure, figcaption { display: block; }

body, html { margin: 0; font-family: 'PT Sans', sans-serif; }

.wrapper { max-width: 960px; min-width: 720px; }

.logo { float: left; width: 5%; display: inline-block; margin: 20px 0px 0px 75px; }

/** Main Header **/

.main-header { padding-top: 1.0em; padding-bottom: 1.0em; background: #C3357E; }

/** Navigation **/

primary-nav {

float: right;
width: 20%;
margin: 20px 75px 0 0px;

}

primary-nav li {

font-size: 22px;
display: inline;

}

primary-nav li a {

color: #fff;

}

primary-nav li a:hover {

border-bottom: 3px #ffffff solid; }

header { height: 600px; }

ul { list-style-type: none; display: inline-block; }

li { display: inline; float: left; margin-right: 15px; }

nav ul li a { text-decoration: none; font-size: 1.0rem; display: block; }

/** Jumbotron **/

.jumbotron { text-align: center; margin-top: 250px; color: #ffffff; line-height: 1; font-size: 1rem; }

.jumbotron p { margin: -15px 0 15px 0; padding: 20px; font-size: 1.1em; }

/** Skills **/

.list { margin-top: -20px; vertical-align: middle; font-size: 1.1em; }

/** Portfolio-jumbotron **/

portfolio {

margin-top: -1px;
font-weight: 700;
color: #fffff;

}

portfolio a:hover {

color: #D1EDEF; }

.arrow-down { display: block; margin-top: -15px; }

.arrow-down i:hover { color: #D1DEDEF; }

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

/** About Banner **/

.about-banner { text-align: center; display: block; margin: 0; padding-top: 1em; padding-bottom: .8em; background: 30px; background-color: #e3e2d3; color: #ffffff; font-size: 1em; }

img.align-left { float: left; margin-right: 10px; border: 3px solid black; }

img.medium { width: 100px; height: 100px; }

p.short-intro { text-align: justify; font-size: 1em; font-weight: 650; color: #ffffff; }

/** Main Footer **/

.main-footer { background: #5b5c57; height: 600px; max-width: 100%; margin-left: auto; margin-right: auto; }

/** Social Icons **/

.social-icons { width: 5%; color: #F1F1F1; vertical-align: text-top; float: left; }

.social-icons i:hover { color: #35A0C3; }

.left-side, .middle-section, .right-side { display: block; width: 500px; float: left; margin: 50px 50px 0 50px; clear: none; }

.middle-section { height: 250px; padding-top: 20px; }

p.intro-text { text-align: left; color: #ffffff; padding: 0 0 0px 25px; margin: 0 0 25px 10px; }

p.intro-text2 { margin: -20px 0 -15px 0; color: #ffffff; }

/** Small Print **/

.small-print { display: block; text-align: center; line-height: 140%; font-size: .80em; color: #ffffff; clear: both; margin-bottom: -10px; }

Answer 6 · 2016-08-06T17:40:02Z

August 6, 2016 5:40pm

Matt, I see what you did with the footer [small print], it definitely makes sense. I just had to add padding-top: 1em;, padding-bottom: 1em; in and change background in order for it to blend in. Now it looks good, its sitting on the bottom. However, I'm still having problems with the three column layout. It's still not centered in the middle and evenly between each other. Any suggestions?

This is the CSS for the columns

.left-col, .middle-col, .right-col { width: 500px; float: left; margin: -20px 0 0 -50px; }

.left-col { float: left; margin: 0 auto; display: inline-block; vertical-align: top; padding-left: 1em; padding-right: 1em; }

.middle-col { float: left; color: #fff;
margin: 0 auto; text-align: left; }

.right-col { float: left; margin: 0 auto; text-align: left; }

Also, I am trying to have a masonry or brick (whatever its called) type of gallery. Essentially, a collage of pictures with no gaps. Any good ones out there?

Welcome to the Treehouse Community

Looking to learn something new?

Unsubscribed User

Unsubscribed User

Whats wrong with my code?

6 Answers

Matt Laws

Matt Laws

Matt Laws

Matt Laws

Russell Sawyer

Russell Sawyer

Unsubscribed User

Unsubscribed User

Unsubscribed User

Unsubscribed User

primary-nav {

primary-nav li {

primary-nav li a {

primary-nav li a:hover {

portfolio {

portfolio a:hover {

Unsubscribed User

Unsubscribed User