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
Alex Mtz. Carrillo
Courses Plus Student 16,177 PointsBlock vs Inline Elements
I'm following along with the video lesson, but somehow can't manage this part. How can I make the links in my navigation (main-nav) area have their backgrounds look separate as opposed to just one big rectangle encompassing them all? I want each link to be displayed "inline" and have them have their own individual background! Hope I made any sense, thanks! I'll post both my html and css code.
<!DOCTYPE html>
<html>
<head>
<title>Display Modes</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/mainn.css">
</head>
<body>
<div class="main-wrapper">
<header class="main-header">
<h1 class="main-logo"><a href="#">Logo</a></h1>
<ul class="main-nav">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</header>
<div class="primary">
<h2>Primary Content</h2>
<p>Bacon ipsum dolor sit amet chicken pork ground round brisket corned beef ball tip shank tail salami filet mignon ham hock prok belly venison shankie. Pig kielbasa drumstick sasage pork chop boudin. Chicken t-bone salmi pork chop, beef ribs kevin tam tri-tip beef venison biltong brisket. </p>
<p>Venison strip steak meatball chicken, brisket prosciutto sirloin. Capicola drumstick brisket tri-tip salami. Chicken beef jerky, tail turkey prosciutto cow ham sirloin boudin tenderloin. Meatloaf tri-tip turducken brisket andouille, pork belly corned beef fatback hamburger.</p>
</div>
<div class="secondary">
<h3>Secondary Content</h3>
<p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork Ioin shoulder.</p>
<hr>
<p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
</div>
<footer class="main-footer">
<p>©2014 Example Layout</p>
</footer>
</div>
</body>
</html>
and here's the CSS
/*--------------- GENERAL ---------------------------
---------------------------------------------------------*/
.main-wrapper {
width: 90%;
margin: auto;
}
a {
text-decoration: none;
color: #FFF;
}
ul {
list-style: none;
}
/*--------------- COLORS ---------------------------------
---------------------------------------------------------*/
body { background-color: grey; }
.main-header { background-color: #333; }
.main-logo { background-color: #5CD65C; }
.main-nav { background-color: #0099FF; }
.primary { background-color: #C2FFFF; }
.secondary { background-color: #CCFFCC; }
.main-footer { background-color: #B2B2B2; }
/*--------------- HEADER / NAV ---------------------------
---------------------------------------------------------*/
.main-header {
padding: 20px;
}
.main-logo,
.main-nav,
.main-nav li {
display: inline;
}
2 Answers
Andrew McCormick
17,730 Pointstarget your <li> elements instead.
so change .main-nav { background-color: #0099FF; }
to
.main-nav li { background-color: #0099FF; }
Daniel Burt
3,699 PointsHi Alejandro, I haven't time to look at this closely at the moment, but without looking at the code, are you aware that your main.css is actually labelled mainn.css?
Alex Mtz. Carrillo
Courses Plus Student 16,177 PointsYes, it's like that cause I've been practicing in another file called "main.css" with only 1 "n" :)