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 trialShai Yahav
7,153 PointsMy About page and navigation bar are not as Nick page
Hi, I have a gap for the header on the about page wich I don't have on other pages
When I change the browser to use small resolution the navigation bar is not as the video in one line, it changes to be one on the top of another
4 Answers
Shai Yahav
7,153 Pointsindex.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shai Yahav | Web Developer</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">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Shai Yahav</h1>
<h2>Front End Web Developer</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 color and texture.</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt"">
<p>Playing with blending modes.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt"">
<p>Trying to create 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</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt"">
<p>Creating shapes using repetition</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="https://www.facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<a href="https://www.twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<p>© 2014 Shai Yahav.</p>
</footer>
</div>
</body>
</html>
about.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Shai Yahav | Web Developer</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">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Shai Yahav</h1>
<h2>Front End Web Developer</h2>>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img src="img/shai.jpg" alt="Photograph of Shai Yahav" class="profile-photo">
<h3>About</h3>
<p>Hi, My name is Shai Yahav! This is my first site :)</p>
<p>If you'd like to email me, press here</p>
</section>
<footer>
<a href="https://www.facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<a href="https://www.twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<p>© 2014 Shai Yahav.</p>
</footer>
</div>
</body>
</html>
main.css:
/*********************
General
*********************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
clear: both;
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration:none;
}
img {
max-width: 100%;
}
h3 {
margin: 0 0 1em 0;
}
/* *******************
HEADING
*********************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
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 ul {
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 {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
/*********************
PAGE ABOUT
*********************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/*********************
PAGE CONTACT
*********************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat:no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
}
/* *******************
COLORS
*********************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* green header */
header {
background: #64b47b;
border-color: #599a68;
}
/* nav background on mobile */
nav {
background: #599a68;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673f;
}
Wayne Priestley
19,579 PointsHi Shai,
I've edited your code so it appears correct in your post.
Here is a link to explain how to use Markdown to post your code How to post code If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code
Hope this helps.
Shai Yahav
7,153 PointsIt got mixed up a little with all the marks but on my workspace it looks ok
Shai Yahav
7,153 PointsThanks!
Hernan Martin Demczuk
1,264 PointsMaybe the name is too long and is using too much space so nav bar has to split in two different lines. Try changing the font size to a smaller one or even reduce the margins to see if that is the problem!
Joshua Mardan
11,788 PointsJoshua Mardan
11,788 PointsCan you post your code?