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 trialburakdogramaci
15,298 PointsBackground colour of my Navigation menu doesn't appear like it appears on video, what might cause this problem?
So I've polished the navigation and footer menu as it says on the video but my navigation bar doesn't starts right after the header, it's seems like a rectangle placed inside the header bar. What can I do to make it seem like in the video?
3 Answers
Luke Glazebrook
13,564 PointsHey Burak!
Please could you post your code for us to take a look at?
burakdogramaci
15,298 PointsWow. Thats just great thanks for that. I should have been much more careful. Though, now that it seems to be corrected, another problem came out, as two large margins between the both sides of the navigation menu. I'm trying to find what's causing that now, yet thanks for your great help and attention :)
Luke Glazebrook
13,564 PointsNo problem Burak! I'm glad you managed to get your issue resolved.
Best of luck resolving your issue! Sounds like a positioning issue so check the margins and padding of the elements that are causing you issues!
burakdogramaci
15,298 PointsWell, thanks for the best wishes, I found the other mistake as well. Turns out that I missed mentioning unordered lists while writing nav on css. Just posting the correct form, for no reason at all. But maybe helps someone.
nav {
text-align: center;
padding: 10px 0 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
Luke Glazebrook
13,564 PointsI'm glad you managed to resolve the spacing issue as well!
I wish you the very best of luck with the rest of the track.
burakdogramaci
15,298 PointsSure here is the html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Burak Dogramaci | Netnographer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Burak Dogramaci</h1>
<h2>Netnographer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="Img/numbers-01.jpg">
<img src="Img/numbers-01.jpg" alt="">
<p>Experimentation with the colors and texture</p>
</a>
</li>
<li>
<a href="Img/numbers-02.jpg">
<img src="Img/numbers-02.jpg" alt="">
<p>Playing with the blending mode.</p>
</a>
</li>
<li>
<a href="Img/numbers-06.jpg">
<img src="Img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="Img/numbers-09.jpg">
<img src="Img/numbers-09.jpg" alt="">
<p>Drips created using photoshop brushes.</p>
</a>
</li>
<li>
<a href="Img/numbers-12.jpg">
<img src="Img/numbers-12.jpg" alt="">
<p>creating shapes using repetation.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/bdogramaci"><img src="Img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/burakdogramaci"><img src="Img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014, Burak Dogramaci</p>
</footer>
</div>
</body>
</html>
Luke Glazebrook
13,564 PointsI've spotted the problem! Your website is being displayed like that because your heading element is closed after the nav element which means that the nav element is housed inside of the heading.
The following code will fix your problem!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Burak Dogramaci | Netnographer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Burak Dogramaci</h1>
<h2>Netnographer</h2>
</a>
</header>
<nav>
<ul>
<li><a href="index.html" class="selected">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="Img/numbers-01.jpg">
<img src="Img/numbers-01.jpg" alt="">
<p>Experimentation with the colors and texture</p>
</a>
</li>
<li>
<a href="Img/numbers-02.jpg">
<img src="Img/numbers-02.jpg" alt="">
<p>Playing with the blending mode.</p>
</a>
</li>
<li>
<a href="Img/numbers-06.jpg">
<img src="Img/numbers-06.jpg" alt="">
<p>Trying to create an 80's style of glows.</p>
</a>
</li>
<li>
<a href="Img/numbers-09.jpg">
<img src="Img/numbers-09.jpg" alt="">
<p>Drips created using photoshop brushes.</p>
</a>
</li>
<li>
<a href="Img/numbers-12.jpg">
<img src="Img/numbers-12.jpg" alt="">
<p>creating shapes using repetation.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/bdogramaci"><img src="Img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/burakdogramaci"><img src="Img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014, Burak Dogramaci</p>
</footer>
</div>
</body>
</html>
burakdogramaci
15,298 Pointsburakdogramaci
15,298 PointsSure, thanks for replying btw.
So, I'm going to copy/pasta the whole css code below, I couldn't find any other way to mention or quote it. Also I'm adding screenshots. it looks like this instead of this
/* ************************************* GENERAL ************************************* */ body { font-family: 'Open Sans', sans-serif; }
wrapper {
}
a { text-decoration: none; }
img { max-width: 100%; }
/* ************************************* HEADING ************************************* */
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
}
h1 { font-family:'Changa One', sans-serif; margin: 15px, 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/* ************************************* Navigation ************************************* */
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
nav { list-style: none; margin: 0 10px; padding: 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
/* ************************************* FOOTER ************************************* */
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/* ************************************* Page: Portfolio ************************************* */
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left;
width: 45%; margin: 2.5%; background-color: #f5f5f5; color:#bdc3c7; }
gallery li a p {
}
/* ************************************* COLORS ************************************* */
/* Site Body */ body { background-color: #fff; color: #999; }
/* Green Header */ header { background: #6ab47b; border-color: #599a68; }
/* Color for Nav */ nav a, nav a:visited { color: #fff; }
/* Logo Text */ h1, h2 { color: #fff; }
/* Links */ a { color: #6ab47b; }
/* Nav background in mobile devices */ nav { background: #599a68; }
/* Selected nav link */ nav a.selected, nav a:hover { color: #32673f; }
Luke Glazebrook
13,564 PointsLuke Glazebrook
13,564 PointsHey, thank you for sharing your code! Your CSS looks fine to me...
Could you try posting your html also so I can take a look at that aswell?