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
Arturo Espinoza
9,181 PointsNeed 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
5,676 PointsYou 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;
}
Hugo Paz
15,622 PointsIn your class heading add this
clear:both;
Se if you like the result.
Arturo Espinoza
9,181 PointsThat 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
9,181 PointsSorry I meant space between Nav and <hr>
Hugo Paz
15,622 PointsDavid solution is the best. Use that one.
Arturo Espinoza
9,181 PointsSolved, Thank you both.
Arturo Espinoza
9,181 PointsArturo Espinoza
9,181 PointsPerfect that did exactly what I needed. Thank you.
David Omar
5,676 PointsDavid Omar
5,676 Pointsthe :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