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
orange sky
Front End Web Development Techdegree Student 4,945 PointsCss header problem
Hello,
If you run this code, you will see the .main-logo and .main-nav are sitting on the top of the columns. I gave .main-header a z-index:100, but it didn't work. How can I get .main-logo and .main-nav to stay inside main-header
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="normalize.css">
<style>
/*=====================================================*/
.main-header { background-color: #384047;}
.main-logo { background-color: #5fcf80;}
.main-nav li { background-color: #3f8abf;}
.primary-content { background-color: #caebf6;}
.secondary-content { background-color: #bfe3d0;}
.third-content {background-color:pink}
.main-footer { background-color: #b7c0c7;}
body{
font:normal 1.1em/1.5 sans-serif;
color:#222;
background-color:#edeff0;
}
.main-wrapper{
width:90%;
margin:auto;
}
/*main-header
===============================================*/
.main-header{
position:relative;
min-height:100px;
padding:15px;
}
.main-logo, .main-nav{
position:absolute;
}
.main-nav {
left:150px;
}
.main-logo{
border-radius:5px;
}
.main-nav li{
display:inline-block;
margin-top:46px;
border-radius:5px;
}
.main-logo a, .main-nav a{
padding:10px 18px;
float:left;
display:block;
text-decoration:none;
color:white;
border-radius:5px;
}
/*style the columns
==========================================*/
.main-banner{
display:none;
}
.container{
position:relative;
}
.col{
position:absolute;
width:50%;
padding:20px;
}
.feat-img{
width:50%;
margin-right:10px;
float:left;
}
.primary-content {
padding-right:10px;
}
.primary-content{
width:50%;
}
.secondary-content{
right:0;
}
html, body, .col, .container, .main-wrapper{
height:100%;
}
*{
box-sizing:border-box;
}
</style>
</head>
<body>
<div class="main-wrapper">
<header class="main-header group">
<h1 class="main-logo"><a href="#">Logo</a></h1>
<ul class="main-nav group">
<li><a href="#">Link1 </a></li>
<li><a href="#">Link2 </a></li>
<li><a href="#">Link3 </a></li>
<li><a href="#">Link4 </a></li>
</ul>
</header>
<div class="main-banner">
<h1>Main Banner </h1>
<p> ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
</p>
</div>
<div class="container group">
<div class="primary-content col">
<h2>Primary Content</h2>
<img class="feat-img" src="http://lorempixel.com/400/300">
<p>
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:aieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
</p>
<p>
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
</p>
</div>
<div class="secondary-content col">
<h3>Secondary Content</h3>
<p>
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
</p>
<hr/>
<p>
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
</p>
</div>
<div id="clear"></div>
</div>
<footer class="main-footer">
<p>© 2014 Example Layout </p>
</footer>
</div>
</body>
</html>
5 Answers
idan ben yair
10,288 Pointsapply this:
.main-nav {
margin-top: -30px;
}
it will push your nav back to the header.
orange sky
Front End Web Development Techdegree Student 4,945 Pointsmay I please see the full solution for .main-logo and main-nav; I gave .main-logo:-30px too, but it is longer aligned to .main-nav, then I tried .main-logo-25px -20px, I still cant get them to align.
Adama Sy
7,076 Pointsif you create a flex.css you can manage your things better. this is what I did to mine. and it works great
orange sky
Front End Web Development Techdegree Student 4,945 PointsHello Adama, I have yet to learn 'Flex'. thanks for the advice, but at this stage, I am hoping for a solution. Cheers!
Adama Sy
7,076 Pointsorange sky you Know me I need to learn PHP, or Ruby also Xcoce, to reach what I want to do. But at this stage I'm on Javascript coding, so far away from my goal.
There is no rush, you have 1000 of things to learn, finish you css course you will find the answer.
Just be patient. Flex is the best way to put Items into space. Just give yourself time to reach it, but don't rush better you understand what you are doing Mate
orange sky
Front End Web Development Techdegree Student 4,945 PointsHey Adama, I love Javascript, it is so much more intuitive than cs. t I will definetely not rush things. Cheers!