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

Arturo Espinoza
Arturo Espinoza
9,181 Points

Need help with my Nav Bar please.

I want my nav bar to be on the top right as it currently is now. Except I need it to have a break between the nav and the page title. At this moment its seems to group them together and I cant seem to separate them. Can someone please help me with this. My website is http://hoteltraining.co/ if you would like to see it in action. Its a personal website I'm building. I know there are a few other problems with the codes but I want to deal with them one by one :)

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" href="index.css">
 <title>Traning</title>
 </head>

<body>
        <!-- Nav section -->
   <nav>
    <ul>
    <li><a href="staff.html" title="Staff">Staff</a></li>
    <li><a href="dineandlounge.html" title="Dine and Lounge">D&L</a></li>
        <li><a href="ex.html" title="Executive Suite">EX</a></li> 
    <li><a href="pr.html" title="President Suite">PR</a></li> 
    <li><a href="fm.html" title="Family Suite">FM</a></li> 
    <li><a href="kt.html" title="Two Double Beds Kitchenette">KT</a></li>
    <li><a href="seld.html" title="Two Double Beds">SELD</a></li> 
    <li><a href="bdel.html" title="One Queen Deluxe">BDEL</a></li> 
    <li><a href="index.html" title="Home" class="active">Home</a></li>
    </ul>
</nav>


<hr>
    <!-- Main Div -->
   <div class="heading">
     <h1>Hotel Tour and Training</h1>
   </div>
        <div class="column">
            <img src="img/intro.png">
            <img src="img/intro.png">
            <img src="img/intro.png">
            <img src="img/intro.png">      
 </div>


<hr>
    <!-- footer start -->
  <footer class="">
          <div class="footer-name">
          <p> 2014 Arthur Espinoza.</p>
        </div>
</body>
</html>

/********************************
Body
*********************************/
body { 
  background: #38595E;

}

/********************************
Nav
*********************************/
ul{
  padding: 0;
  list-style: none;
  text-align: right; 
  max-width: 100%; 
  background: #2CC0B3;

}
ul li{
  float: right;
  width: 100px;
  text-align: center;
  line-height: 5px;
}

ul li a{
  display: block;
  padding: 20px 10px 23px 10px;
  color: #333;
  background: #2CC0B3;
  text-decoration: none;
}

ul li a:hover{
  color: red;
  background: #fff;
}

ul li ul{
  display: none;
}

ul li:hover ul{
  display: block; /* display the dropdown */
}

/********************************
Title
*********************************/

h1 { 
   text-align:center;
   padding: 30px 20px;
   background: #2CC0B3;
   text-shadow:3px 3px 2px #38595E;
}

.heading,
.footer-name {
  max-width: 100%;
}

/********************************
Image
*********************************/

div {
    margin:0 auto;
    width:1220px;
}

img { 
      width:300px; 
      height:325px; 
      background:steelblue; 
      border-radius:15px; 
      cursor:pointer; 
      -webkit-duration: .3s; 
      -moz-duration: .3s; 
      -o-duration: .3s; 
      transition-duration:.3s; }

img:hover { 
  background:lightcoral; 
  border-radius:50%; 
}

/********************************
flashContent
*********************************/
#panov {
    text-align: center;
} 


/********************************
Phones to Tablets
*********************************/


/********************************
Tablets to Desktop
*********************************/
@media screen and (max-width:938px) {

 .column {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    margin:0 auto;
    width:650px;}
}

@media screen and (max-width:340px) {

}
}

/********************************
Footer
*********************************/

.footer-name {
 text-align: center;
}

/********************************
Panoramic Viewer
*********************************/

body, div, h1, h2, h3, span, p {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  color: #000;
}

body {
  font-size: 10pt;
  background : #38595E;
}

table,tr,td {
  font-size: 10pt;
  border-color : #00c6c6;
  background : #dddddd; 
  color: #000000; 
  border-style : solid;
  border-width : 1px;
}

h1 {
  font-size: 18pt;
}

h2 {
  font-size: 14pt;
}

.warning {
  font-weight: bold;
}

3 Answers

David Omar
David Omar
5,676 Points

You need to add a clearfix to your nav because you have floated elements inside of it so your nav is just being collapsed.

nav:after {
  content: "";
  display: table;
  clear: both;
}

Clearfix

Arturo Espinoza
Arturo Espinoza
9,181 Points

Perfect that did exactly what I needed. Thank you.

David Omar
David Omar
5,676 Points

the :after psuedo class lets you insert content onto a page without using markup. the content is just the actual content you want displayed, could be text, an image or nothing like above.

:after

Hugo Paz
Hugo Paz
15,622 Points

In your class heading add this

clear:both;

Se if you like the result.

Arturo Espinoza
Arturo Espinoza
9,181 Points

That definitely helped some. I just need to separate (add space) between the nav from the break. Do you have any ideas on this part?

Arturo Espinoza
Arturo Espinoza
9,181 Points

Sorry I meant space between Nav and <hr>

Hugo Paz
Hugo Paz
15,622 Points

David solution is the best. Use that one.

Arturo Espinoza
Arturo Espinoza
9,181 Points

Solved, Thank you both.