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
Stephen Roberts
8,580 PointsMy relatively positioned nav bar will not move?!!
Hi I'm really sorry if i'm being thick but I cannot get my nav bar to move. It is positioned relatively and I need it to move around 20px downwards. But I cannot get it to move left, right up or down. Could someone explain what I am doing wrong please? Here is my code
<!DOCTYPE html>
<head>
<title>BodyWorks Hair and Beauty Salon></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="grid-container">
<header class="main-header group">
<img class="banner" src="img\banner.png" alt="BodyWorks Banner" title="Bodyworks Banner">
<div class="banner-logo">
<img class="logo" src="img\bodyworks-blackbg.png" alt="Bodyworks Logo">
</div>
<ul id="nav" class="main-nav group">
<li><a href="#">Home</a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">Price List</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</header>
<div class="grid group">
<div id="left" class="col">
<h1>About Us</h1>
<p>At Bodyworks Hair and Beauty Clinic our aim is to make you feel special. <br>
We offer a wide range of the latest services and therapies including:
<ul>
<li>the latest cuts and colours</li>
<li>hot stone massage</li>
<li>St Tropez tanning</li>
<li>luxury manicures and pedicures</li>
<li>fast tanning booth</li>
<li>personalised gift vouchers</li>
<li>special wedding services</li>
</ul>
To experience our friendly, professional atmosphere then please call us on 02392 486116. Or pay us a visit for more information.
</p>
</div>
<div id="center" class="col">
<img class="team" src="img\team.jpg" alt="body works team picture" title="The awesome Bodyworks Team">
<img class="logo-two" src="img\bodyworks-blackbg.png" alt="Bodyworks Salon picture" title="Bodyworks Salon Picture">
<img class="award" src="img\awards.jpg" alt="Bodyworks Awards" title="Bodyworks awards 2013">
</div>
<div id="right" class="col">
<h1>Award Winning Salon and Staff</h1>
<p>This salon and it's multi-talented team have been nominated for many awards and in 2013 won Best Success story for businesswoman of the year at the woman of the year awards. We went on to win Beauty Therapist of the year at the Hair and Beauty Awards. We were also nominated for Hair Salon of the year, Beauty Salon of the year. Our stylist Katie Merry was nominated for Stylist of the year, and stylist Eve Hoar was nominated for Colour Technician of the year. </p>
</div>
</div>
<footer class="footer">
<div class="col-two">
<div class="socials">
<ul>
<li><a href="https://www.facebook.com/Bodyworksclinic?ref=br_tf" class="facebook"></a></li>
<li><a href="#" class="twitter"></a></li>
</ul>
</div>
</div>
<div class="copy-text">
<p id="copyright">©2014 Site designed by Wiggys Web Designs</p>
</div>
</footer>
</div>
</body>
</html>
/*Centralise*/
.wrapper {
width: 90%;
margin: auto;
}
/*Headr, Banner and Footer*/
.main-header {
padding: 20px;
}
.logo {
width: 25%;
top: 3%;
position: absolute;
left: 61%;
}
.main-nav li,
.banner,
.logo {
display: inline;
}
.banner {
padding: 5px 0;
position: relative;
width: 90%;
}
}
/*Nav Bar*/
#nav {
position: relative;
left: 50px;
}
/* Column Layout */
.col {
padding: 20px;
float: left;
width: 10%;
}
.team,
.logo-two,
.award {
max-width: 120px;
}
#left,
#right {
width: 40%;
}
/* Clearfix */
.group:after {
content: " ";
display: table;
clear: both;
}
2 Answers
Jonathan Grieve
Treehouse Moderator 91,253 PointsI don't see any style to shift it down relatively by 20px in #nav.
Also I don't know if this affects anything but your padding declarations are for 20px on all sides. I don't think this will actually shift it anywhere but you could try a margin-top: 20px; to shift the element you want downward,s :-)
Stephen Roberts
8,580 PointsThat actually makes a lot of sense thanks for that. Nice to know there is a fall back option. Thanks for the explanation.
Jonathan Grieve
Treehouse Moderator 91,253 PointsNo problem. Let me know if it works out. :-)
Stephen Roberts
8,580 PointsStephen Roberts
8,580 PointsThanks for that adjusting the margin hadn't really occured to me.
No there isn't in that particular mark-up. But there is left 50px which is what I had been doing in my desperation to get it to move anywhere really. Actually that reminds me I had forgotten to adjust the padding, thanks again.
Out of interest is that the recomended way of doing it? Because when watching the video he can manipulate it by doing top left right etc but it just didn't work at all for me in my code.
Jonathan Grieve
Treehouse Moderator 91,253 PointsJonathan Grieve
Treehouse Moderator 91,253 PointsI think its mainly personal preference. I tend to just use the position styles (top, right, bottom, left) to position elements, relatively or absolutely. Remember when positioning relatively it means "relative to it's parent element". So the next element up in the tree.
But margin-left, margin-right, etc, work the same way and I'd not considered before that you could use them the same way.
I'm not sure of this for certain but it might be because you're using a display property of inline, I presume this is to get elements stacked across each other rather than on top. Try using inline-block for your display property. This gives you the best of both worlds, but if position styles aren't working for you, you should be able to use your margins. :-)