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
Leonard Morrison
Courses Plus Student 32,914 PointsWhy isn't my nav standing properly? Why is my border color not working?
For some reason, whenever I activate my site, the border colors don't work and the nav doesn't stand horizonally like it should. Help a fella out, thank you. (I have 2 nav that I wanna work with for different languages. Is there any way I can throw that in there?)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leban Mohamed | Programmer</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<style>
nav { color: white;
background-color: #f15258;}
footer{ color: white;
background-color: #f15258;}
</style>
</head>
<body>
<header>
<a href="en-index.html" id=logo>
<h1>Leban Mohamed</h1>
<h2>Programmer and Developer Extrodinaire </h2>
</a>
<nav>
<ul id="gallery">
<li><a href="about.html">About</a></li>
<li><a href="en-index.html" class=selected>Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div id="nav2">
<ul>
<li><a href="en-index.html">英語/English</a></li>
<li><a href="jp-index.html">日本語/Japanese</a></li>
</ul>
</div>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<p>Here's where the gallery will be</p>
<li>
<a href="Pictures/Watton.png">
<img src="Pictures/Watton.png" alt="">
<p>This app is a project I worked on when I was in college. It's a modified stopwatch used for relay races.</p>
</a>
</li>
<li>
<a href="Pictures/NintendoFunFacts.png">
<img src="Pictures/NintendoFunFacts.png" alt="">
<p>Another simple app I've created for fun. I figured I'd throw a Nintendo themed factoid this time.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href ="https://www.facebook.com/leban.mohamed"><img src="Pictures/facebook-wrap.png" alt="Facebook logo"></a>
<a href ="https://twitter.com/TheSuperL"><img src="Pictures/twitter-wrap.png" alt="Facebook logo"></a>
<p>© 2016 Leban Mohamed</p>
</footer>
</div>
</body>
</html>
a
{
text-decoration: none;
}
img
{
max-width: 100%;
}
/*********************
BODY
**********************/
#wrapper
{
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
/*The logo's text is set center for the natural attention popping nature.*/
#logo
{
text-align: center;
margin: 0 auto;
}
/*This covers the links I believe.*/
a
{
background-color: #f15258;
border-color: #e15852;
}
/*********************
HEADER
**********************/
header
{
background-color:#f15258;
border-color: #e15852;
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
h1, h2
{
color:#fff;
margin: 15px 0;
}
h1
{
font-size: 2.50em;
margin: 15px 0;
font-weight: bolder;
line-height: 0.8em;
}
h2
{
font-size: 1.50em;
margin: -5px 0 0;
font-weight: normal;
}
/**********************
Navigation
**********************/
nav
{
background-color: #c42922;
border-color: #000080;
}
nav ul
{
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li
{
display: inline-block;
}
nav a, nav a:visited
{
color: #fff;
text-align: center;
list-style: none;
}
#nav2 ul
{
list-style: none;
margin: 0 10px;
padding: 0;
}
#nav2 li
{
display: inline-block;
}
#nav2 a, #nav2
/*nav hover and selected*/
nav a.selected, a:hover
{
color: #000080;
}
/*********************
BODY
**********************/
body
{
background-color: #fff;
color: #999;
}
/*********************
Portfolio
**********************/
#gallery
{
padding: 0;
margin: 0;
list-style: none;
}
#gallery li
{
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #f15258;
}
#gallery li a p
{
margin: 0;
padding: 5%;
font-size: 0.70em;
}
/*********************
FOOTER
**********************/
footer
{
color: #999;
text-align: center;
padding-top: 50px;
clear: both;
width: 100%;
}
2 Answers
Clayton Perszyk
Treehouse Moderator 49,047 PointsHey Leban,
As far as borders, I would suggest replacing what you have with something like this:
selector {
border: 1px solid #e15852;
}
To fix the nav layout use a float:
nav ul
{
list-style: none;
margin: 0 10px;
padding: 0;
float: left;
}
Also, you can get rid of this rule:
nav li
{
display: inline-block;
}
One more thing, you have styles in your html and your main.css file; you should move any styles from html to the css file.
Best,
Clayton
Leonard Morrison
Courses Plus Student 32,914 PointsThat was so good, I kinda feel guilty for you having to do that much work. Thank you very much. Sorry for the trouble.
Clayton Perszyk
Treehouse Moderator 49,047 PointsNo worries. CSS design is one of my weak spots; so it was good practice.
Leonard Morrison
Courses Plus Student 32,914 PointsLeonard Morrison
Courses Plus Student 32,914 PointsIt solves the problem of the languages, but I can't have that 2 color tone navigation bar that Nick has. I want to have a light red navigation bar with a light navy blue border on top. (about 10px or something.) I hope that isn't much trouble. By the way, the Contact link is on the bottom of the Portfolio link.
Here's the new code:
Note: I did not change the html class. (other than getting rid of the style sections.)
Clayton Perszyk
Treehouse Moderator 49,047 PointsClayton Perszyk
Treehouse Moderator 49,047 PointsHere is the new html:
And here is the new CSS (I think it produces your desired effect):
I added comments for where I added and removed things, but there might be changes that are not commented.