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
nicolai kristensen
2,316 PointsTitle, navigation fix help
Hey, i want my navigation and my title (h1) elements to go into 2 different layers, so my title to be at the top and my navigation to be underneath it, if anyone can help in my css to see what i did wrong i would be glad.
@charset "utf-8";
* {
box-sizing: border-box;}
body{
font-family: 'rambla', sans-serif;
font: normal 1.1em/1.5;
color: #222;
background-color: #edeff0;
margin: auto;
}
p {
font-family: 'source sans pro', sans-serif;
font-weight: 400;}
.main-wrapper {
width: 100%;
margin: auto;
}*/
.main-header {background-color:#1f2725;} /* mørkegrå */
.main-logo {background-color: #eef06d;} /* gul */
.main-nav li{background-color: #4c64c7;} /* blå agtig */
.primary-content {background-color:#09C;} /*turkis */
.secondary-content {background-color:#c77b4c;} /*orange-agtig */
.extra-content {background-color:#a9a7a2;} /*grå-agtig */
.main-footer {background-color: #900;} /* rød */
.main-header {
padding: 15px;
width: 100%;
min-height: 200px;
}
.main-nav, .main-nav li {
display: inline-block;
}
.main-logo {
float: left;
}
.main-nav li, .main-nav {
float: left;
display:
}
.main-logo {
display: block;
margin: 0 50px 0 0;
}
.main-nav li {
margin-top: 15px;
margin-right: 10px;
margin-left: 10px;}
.main-nav {display: table-cell;
vertical-align: middle;}
.main-nav {
padding-left: 10px;}
.main-logo {
margin-top: o;
margin-bottom: 0;
border-radius: 5px;
padding: 10px 20px;
}
.main-nav li {
border-radius: 5px;
}
.main-logo a, .main-nav a {
color: white;
text-decoration: none;
display: block;
text-align: center;
padding: 10px 20px;
}
.main-footer {
text-align: center;
}
.main-footer p {
margin: 0;
padding: 10px 0;
}
.col {
padding: 20px;
float: left;
width: 30%;
}
.primary-content {
width: 40%;}
.col:last-child {
float:right;}
/* Color layout */
.primary-ski {
width: 50%;
float: left;
margin-top: 2px;
margin-right: 20px;
margin-bottom: 5px;
border: solid 1px;
padding: 5px;
}
/* Clearfix */ ```
.group::after {
content: "";
display: table;
clear: both;
}'''
'''html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Lejlighed i Østrig</title>
<link href="../Css designing/normalize.css" rel="stylesheet" type="normalize/css" />
<link href="../Css designing/styles123.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Rambla:400,700,400italic,700italic|Source+Sans+Pro:400,600,900' rel='stylesheet' type='text/css'>
</head>
<div class="main-wrapper">
<body>
<header class="main-header group">
<h1 class="main-logo">Lejlighed i Østrig </h1>
<nav>
<ul class="main-nav">
<li><a href="../index.html" class="selected">Startside</a></li>
<li><a href="../sommer.html">Om Sommeren</a></li>
<li><a href="../vinter.html">Om Vinteren</a></li>
<li><a href="../lejlighed.html">Lejligheden</a></li>
<li><a href="../pris/rådighed.html">Pris og rådighed</a></li>
<li><a href="../kort/kørsel.html">kort og kørsel</a></li>
<li><a href="../forespørgsel.html"> Forespørgsel</a></li>
</ul>
</nav>
</header>
<div class="content-row group">
<div class="extra-content col">
<h4>Extra content</h4>
<p>Vis assum bonorum nominati te, eam illum senserit an. Ne nostrud voluptatum vim. Sit eu quodsi tibique assueverit, tacimates postulant in mea.Vis assum bonorum nominati te de dedee ed ede deed ede de.Vis assum bonorum nominati te, eam illum senserit an.</p>
<hr>
<p>Vis assum bonorum nominati te, eam illum senserit an. Ne nostrud voluptatum vim. Sit eu quodsi tibique assueverit.</p>
</div>
<div class="primary-content col">
<h2>Primary content</h2>
<img class="primary-ski" src="../../../Pictures/ski area.png" width="300" height="300" alt="skiferie"/>
<p>Vis assum bonorum nominati te, eam illum senserit an. Ne nostrud voluptatum vim. Sit eu quodsi tibique assueverit, tacimates postulant in mea.Vis assum bonorum nominati te, eam illum senserit an. Ne nostrud voluptatum vim. Sit eu quodsi tibique assueverit, tacimates postulant in mea.Vis assum bonorum nominati te, eam illum senserit an. Ne nostrud voluptatum vim. Sit eu quodsi tibique assueverit, tacimates postulant in mea.</p>
<p>Vis assum bonorum nominati te, eam illum senserit an. Ne nostrud voluptatum vim. Sit eu quodsi tibique assueverit, tacimates postulant in mea.Vis assum bonorum nominati te, eam illum senserit an. Ne nostrud voluptatum vim. Sit eu quodsi tibique assueverit, tacimates postulant in mea.Vis assum bonorum nominati te, eam illum senserit an. Ne nostrud voluptatum vim. Sit eu quodsi tibique assueverit, tacimates postulant in mea.</p>
</div>
<div class="secondary-content col">
<h3>Secondary content</h3>
<p>Vis assum bonorum nominati te, eam illum senserit an. Ne nostrud voluptatum vim. Sit eu quodsi tibique assueverit, tacimates postulant in mea.Vis assum bonorum nominati te de dedee ed ede deed ede de.</p>
<hr>
<p>Vis assum bonorum nominati te, eam illum senserit an. Ne nostrud voluptatum vim. Sit eu quodsi tibique assueverit, tacimates postulant in mea.Vis assum bonorum nominati te de dedee ed.</p>
</div>
</div>
<footer class="main-footer">
<p> © Website by Nicolai Kristensen</p>
</footer>
</div>
</body>
</html>
'''
Damien Watson
27,419 PointsSorry your code is a little hard to read due to formatting. What do you mean by 2 different layers? Both the 'h1' and 'ul' elements can be block level elements, which means they can both be on separate 'lines'. If you truly want them in different 'layers', best I can offer without seeing the code is to wrap them each in a 'div'.
nicolai kristensen
2,316 PointsWhat i mean is that i want my h1 and my navigation on 2 separate lines, and i want the text in the middle :)
4 Answers
webremy
8,606 PointsIf you want top layer to be just the logo, and the bottom just the nav, don't float them. the width must take up entire area of the container. So if your section is 900px wide, the logo wrap must be 900px, or use clear or overflow, depending on situation to remove follow from the second element.
The simplest is wrap the logo .main-logo, .main-nav {width: 900px;}
html:
<div class="main-logo">your logo</div> <div class="main-nav"> <ul> <li>navigation menu</li> <li>navigation menu</li> <li>navigation menu</li> <li>navigation menu</li> </ul></div>
Try to confine your coding, so do not call .main-logo in css more times unless really needed. There are times where you want to consolidate properties, but still should not result with so many calls of that div tag
webremy
8,606 Pointsalso, check your css, you have the letter o in place of the number 0. Probably more errors. They will impact your result depending on the condition.
when you apply margin, do not call each side separately, simplify it in one line.
change this
margin-top: 2px;
margin-right: 20px;
margin-bottom: 5px;
to this:
margin: 2px 20px 5px 0;
makes for cleaner code
Damien Watson
27,419 PointsRemik is right with the shorthand, it does make your css more concise if you understand how it works. This is great for margins, padding, borders, fonts etc. W3 Schools has some great info on this. Search for 'shorthand'.
Quick example with the margin above, you can do shorthand in three different ways, depending what you need:
.myClass1 { margin: 2px 20px; } /*= 'top & bottom 2px' 'left & right 20px'; */
.myClass2 { margin: 2px 20px 5px; } /*= 'top 2px' 'left & right 20px' 'bottom 5px'; */
.myClass3 { margin: 2px 20px 5px 0; }/*= 'top 2px' 'right20px' 'bottom 5px' 'left 0'; */
Hope this helps.
:D
Damien Watson
27,419 PointsHey Nicolai, As Remik is saying, there is a lot of duplication in your css, but this is probably because the example code used multiple style sheets, it is best practice to reduce this down to one definition per element. This also makes it easier to modify. If you are using the 'Folio' responsive example as a base, your header most likely looks like this (just for good measure I've put in a main-logo as well:
<header>
<img src="main_logo.png" alt="main logo" class="main-logo">
<a href="index.html" class="logo">
<h1>Main Title</h1>
<h2>Sub Title</h2>
</a>
<nav>
<ul class="main-nav">
<li><a href="../index.html" class="selected">Startside</a></li>
<li><a href="../sommer.html">Om Sommeren</a></li>
<li><a href="../vinter.html">Om Vinteren</a></li>
<li><a href="../lejlighed.html">Lejligheden</a></li>
<li><a href="../pris/rådighed.html">Pris og rådighed</a></li>
<li><a href="../kort/kørsel.html">kort og kørsel</a></li>
<li><a href="../forespørgsel.html"> Forespørgsel</a></li>
</ul>
</nav>
</header>
CSS copied from above and sorted. I also compressed it to reduce the length (you can see the repeats):
/* removed other comments
.main-header {background-color:#1f2725;}
.main-header { padding: 15px; width: 100%; min-height: 200px; }
.main-logo {background-color: #eef06d;}
.main-logo { float: left; }
.main-logo { display: block; margin: 0 50px 0 0; }
.main-logo { margin-top: o; margin-bottom: 0; border-radius: 5px; padding: 10px 20px; }
.main-logo a, .main-nav a { color: white; text-decoration: none; display: block; text-align: center; padding: 10px 20px; }
.main-nav, .main-nav li { display: inline-block; }
.main-nav li{background-color: #4c64c7;}
.main-nav li, .main-nav { float: left; display: }
.main-nav li { margin-top: 15px; margin-right: 10px; margin-left: 10px;}
.main-nav li { border-radius: 5px; }
.main-nav {display: table-cell; vertical-align: middle;}
.main-nav { padding-left: 10px;}
.primary-content {background-color:#09C;}
.secondary-content {background-color:#c77b4c;}
.extra-content {background-color:#a9a7a2;}
.main-footer {background-color: #900;}
*/
When thinking about CSS, try look at what the element already does and only modify what is needed.
Without any styling, the elements sit as you want them (on two separate lines). We are going to float the main-logo left and make the 'logo headers' centered. The nav elements will also be in one line and centered. You can use this as a base and then build up from there with colors etc.
.main-logo { float:left; }
.logo { display:block; clear:left; max-width:100%; text-align:center; }
.main-nav { margin:0; padding:0; max-width:100%; list-style:none; text-align:center; }
.main-nav li { display:inline; padding:0 4px; border-right:1px solid #CCC; }
.main-nav li:last-child { border:0; }
nicolai kristensen
2,316 PointsThanks for all the help guys, really much appreciated, i got it sorted out and my css is alot smoother looking now and easier to work with, thanks.
Damien Watson
27,419 PointsAwesome, glad to hear. :)
nicolai kristensen
2,316 Pointsnicolai kristensen
2,316 PointsI cant get my coding to get into the cheatsheet apparently