Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

Need help editing my CSS! I hit a roadblock and do not know how to move items on my page

Please email me, or post your email if you would like the project files.


I have a few things I am trying to fix and can't figure out:

1.) Center the Nav Bar (it has drop down menus)

2.) move the <h3> blah blah text down so it has some spacing below the nav bar. Currently the h3 is to high up on the page.

3.) Center the <li> icons on the front page, they seem to be floating left. when I arrange it in "center" it just lines up straight up and down the page, it becomes 1 column instead of 3. I am trying to center the 3 columns, and currently they are hugging the left hand side.

Can you point out what I need to edit? I want to learn, but I am at a roadblock currently. Thanks

----------------------------------------
HTML code
-----------------------------------------
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Lightsaber Combat Styles</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Ubuntu' 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>

  <header class="main-header">
    <a href="index.html" ID="logo">
      <h1>Lightsaber Combat Styles</h1>
      <h2>May the Force be with you.</h2>
    </a> 
    <div id="nav-center">
    <nav>
      <ul class="main-nav">
        <li><a href="index.html" class="selected">Home</a></li>
        <li class="dropdown"><a href="index.html">Lightsaber Combat Styles</a>
          <ul class="drop-nav">
              <li><a href="style1.html">Style 1</a></li>
              <li><a href="style2.html">Style 2</a></li>
              <li><a href="style3.html">Style 3</a></li>
              <li><a href="style4.html">Style 4</a></li>
              <li><a href="style5.html">Style 5</a></li>
              <li><a href="style6.html">Style 6</a></li>
              <li><a href="style7.html">Style 7</a></li>
          </ul>
         </li>
        <li><a href="lcc.html">Lightsaber Chroegraphy Contest</a></li>
        <li><a href="contact.html">Contact Us</a></li>
      </ul>
    </nav>
      </div>
    </header>
  <body>

       <h3>This is some information about various styles.  Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah
    And some more information Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah
    Blah Blah BlahBlah Blah BlahBlah Blah BlahBlah Blah Blah
    </h3>

      <div id="wrapper">
        <section>
    <ul id="gallery">
      <li class="saber_styles">
        <a href="style1.html">
          <img src="img/numeral/roman1.png" alt="Style 1">
          <p>Style 1</p>  
        </a>
      </li>
      <li class="saber_styles">
        <a href="style2.html">
          <img src="img/numeral/roman2.png" alt="Style 2">
          <p>Style 2</p>  
        </a>
      </li>  
      <li class="saber_styles">
        <a href="style3.html">
          <img src="img/numeral/roman3.png" alt="Style 3">
          <p>Style 3</p>  
        </a>
      </li>
      <li class="saber_styles">
        <a href="style4.html">
          <img src="img/numeral/roman4.png" alt="Style 4">
          <p>Style 4</p>  
        </a>
      </li>   
      <li class="saber_styles">
        <a href="style5.html">
          <img src="img/numeral/roman5.png" alt="Style 5">
          <p>Style 5</p>  
        </a>
      </li>   
      <li class="saber_styles">
        <a href="style6.html">
          <img src="img/numeral/roman6.png" alt="Style 6">
          <p>Style 6</p>  
        </a>
      </li>   
      <li class="saber_styles">
        <a href="style7.html">
          <img src="img/numeral/roman7.png" alt="Style 7">
          <p>Style 7</p>  
        </a>
      </li>   
     </ul>
    </section> 
      <footer>
      <p>&copy; 2015 Rockstar Enterprises</p>
      </footer>
   </div>
  </body>
</html>
--------------------------------------------------
--------------------------------------------------
---------------------------------------------------
CSS Code
----------------------------------------------


body {
  font-family: 'Ubuntu', 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;
}



/*****************************
COLORS
*****************************/
/*Site Body*/
body {
  background-color:#fff;
  color:#999;
}

/*header color*/
header {
  background:steelblue;
  border-color: lightblue;
}

/*nav background on mobile devices*/
/*
nav {
  background:lightblue;
}
*/

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

/*links*/
a {
  color: steelblue;
}




/*****************************
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: 'Ubuntu', sans-serif;
  margin: 16px 0px;
  font-size: 2em;
  font-weight: bold;
}

h2 {
  font-size:.75em;
  margin:-5px 0 0;
  font-weight:bold;
}


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

/*****************************
NAVIGATION *DROP-DOWN*
*****************************/
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@font-face {
    font-family: 'icomoon';
    src:url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-13/fonts/icomoon.eot');
    src:url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-13/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-13/fonts/icomoon.woff') format('woff'),
        url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-13/fonts/icomoon.ttf') format('truetype'),
        url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-13/fonts/icomoon.svg#icomoon') format('svg');
}
body {
    margin: 0;
    background: #ecf0f1;
    color: #fff;
    font-family: sans-serif;
    line-height: 1.5;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0; 
}
.main-header {
  margin: auto;
  width: 100%;
  min-height: 90px;
  padding: 1em 2em;
  border: 2px solid #2675a9;
  border-top: none;
  border-radius: 0 0 5px 5px;
    background: #2980b9;
}
  .main-header:after {
    content: " ";
    display: table;
    clear: both;
  }
.logo {
    display: block;
    text-decoration: none;
  float: left;
  margin-top: 5px;
}
  .logo::before {
    color: #fff;
    content: "\e001";
    font-weight: normal;
    font-style: normal;
    font-size: 2.5em;
    font-family: "icomoon";
    -webkit-font-smoothing: antialiased;
  }

/* Nav Demo Styles -------------------- */

.main-nav,
.drop-nav {
  background: #2c3e50;
}
.main-nav {
  float: left;
  border-radius: 4px;
  margin-top: 8px;
  border: solid 1px #1e2a36;
}
  .main-nav > li {
    float: left;
    border-left: solid 1px #1e2a36;
  }
  .main-nav li:first-child {
    border-left: none;
  }
  .main-nav a {
    color: #fff;
    display: block;
    padding: 10px 30px;
    text-decoration: none;
  }


.dropdown,
.flyout {
  position: relative;
}
.dropdown:after {
  font-size: .5em;
  display: block;
  position: absolute;
  top: 38%;
  right: 12%;
}
.drop-nav,
.flyout-nav {
  position: absolute;
  display: none;
}
.drop-nav li {
  border-bottom: 1px solid rgba(255,255,255,.2);
}
.dropdown:hover > .drop-nav,
.flyout:hover > .flyout-nav {
  display: block;
}
.flyout-nav {
  left: 100%;
  top: 0;
}
.flyout:hover a,
.flyout-nav {
  background: #395066;
}

.main-nav li:hover, .dropdown li:hover, .drop-nav li:hover {
  background-color:black;
}


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

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


/*****************************
PAGE: HOME
*****************************/

#gallery {
  margin:0px auto;
  padding:0;
  text-align:center;
  list-style:none;
}
#gallery li {
  float:left;
  width:45%;
  margin:2.5%;
  background-color: #f5f5f5;  /* oval roman numeral color */
  color: #bdc3c7;
}

#gallery li a p {
  margin:0;
  padding:5%;
  font-size:1em;
  font-weight:bold;
  color: #bdc3c7;
}


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


h3 {
  margin:0 12% 0% 12%;
  border: 2px solid;
  color: black;
  text-align:center;
}

My apologies for the bad format. I codling get the CSS to display properly.

Formatting tip: code formatting requires three 'backticks', which are different from apostrophes. On a normal US keyboard the backtick is in the top left. It looks like this: `

2 Answers

I'm on my phone so can't properly check your code, but I can make a few suggestions:

You have several different selectors (h3, body, .flyout-nav) that appear multiple times in your CSS. This can be confusing and make it hard to figure out where you're setting styles. I recommend combining identical selectors unless you have a good reason, preferably one that is described with comments like the colors section.

1) You have a div with id=nav-centre but you don't have any styles for #nav-centre in your CSS. Applying a style to either that or the nav element could be used to centre your navbar.

2) You apply styles to the h3 element in two places, and both of them set the top margin to 0. margin is the blank space around an element, remember, so increasing the top margin will give you the space you want.

The format for the margin attribute is: margin: top right bottom left or, if you get confused you can set them individually using top-margin, right-margin, etc.

3) I can't see exactly what you mean by this question, but in general if you want to centre a section, you should apply the style to an element that surrounds everything you want to move. You seem to have an element called section that's not being used, is that what you're trying to centre?

1.) I am trying to center my navigation bar but can't seem to get it moved properly. The messy coding is in result of me using "treehouses" CSS for drop-down nav code.

2.) your right I did apply h3 in two places, I wasn't sure if the cascading was preventing it from moving. I am trying to also move the H3 section down an inch, it is to close to the nav bar.

I will look into the unused <section> tags. It appears I may just need to re-code all of it and start from scratch. It was the default treehouse drop down code I pasted in which really confused me and made these styling problems, to my knowledge...

Thanks for the help!!! Any more is greatly appreciated.

Jeff