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!
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
Cari Sekendur
595 PointsSpacing and font styles are incorrect
Hi, my H3 and Nav elements are not styled properly and I'm not sure why.
I'm also missing the space between my section content and the navigation.
Code below.
Help!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cari Sekendur Design</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Changa+One:400,400italic|Source+Sans+Pro:400,200,200italic,300italic,300,400italic,600,600italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Cari Sekendur</h1>
<h2>Design</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="image/numbers-01.jpg">
<img src="img/numbers-01.jpg" alt="">
<p>Experimentation with color and texture.</p>
</a>
</li>
<li>
<a href="image/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Playing with blending modes in photoshop.</p>
</a>
</li>
<li>
<a href="image/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Trying to create and 80's style of glows.</p>
</a>
</li>
<li>
<a href="image/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Drips created using photoshop brushes.</p>
</a>
</li>
<li>
<a href="image/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Creating shapes using repitition.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/cskdr"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://twitter.com/cskdr"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2016 Cari Sekendur.</p>
</footer>
</div>
</body>
</html>
/***********************************
GENERAL
************************************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
h3 {
font-family: 'Open Sans', sans-serif;
font-size: 700;
margin: 0 0 1em 0;
}
/***********************************
HEADING
************************************/
header {
float: left;
margin: 0 0 30 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-family: 'Changa One', sans-serif;
font-size: 0.75em;
margin: -5 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: 700;
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%;
}
/***********************************
COLORS
************************************/
/* site body */
body {
background-color: #fff;
color:#999;
}
/*green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/*nav background on mobile*/
nav {
background: #599a68;
}
/*logo text */
h1, h2 {
color: #fff;
}
/*link color*/
a {
color:#6ab47b
}
/*nav link colors*/
nav a, nav a:visited {
color: #fff;
}
/* selected nav link colors*/
nav a.selected, nav a:hover {
color: #32673f
}
4 Answers
Chandice Cook
Front End Web Development Techdegree Student 1,765 PointsHi, could you edit your original post and use the "Markdown Cheatsheet" under the text box to enter your code properly? That would make it much easier to read. Thanks!
Chandice Cook
Front End Web Development Techdegree Student 1,765 PointsAlso here
h3 { font-family: 'Open Sans', sans-serif; font-size: 700; margin: 0 0 1em 0; }
font-size cannot be 700. That would be huge for one, and you did not specify what unit. 700 what? Perhaps you meant font-weight, in which 700 would probably be valid. font-size needs to be something like 12px or 1em.
Cari Sekendur
595 PointsThanks so much!
What do you think about the spacing question?
Cari Sekendur
595 PointsAlso, I'm having another spacing issue now that I've added media queries. There isn't enough space between my 2 columns, and when I expand the desktop browser, the mail, phone and twitter icons stick to the left (primary) column, even though in my html they are in the secondary column. Any idea how to solve this?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cari Sekendur Design</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic,800,300italic,300,800italic|Changa+One:400,400italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Cari Sekendur</h1>
<h2>Design</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a> </li>
<li><a href="contact.html" class="selected">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="primary">
<h3>General Information</h3>
<p>I am not currently looking for new design work, but I am available for speaking gigs and similar engagements. If you have any questions, please don't hesitate to contact me!</p>
<p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me.</p>
</section>
<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:555-6425">555-6425</a></li>
<li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
<li class="twitter"> <a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
</ul>
</section>
<footer>
<a href="http://twitter.com/cskdr"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://twitter.com/cskdr"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2016 Cari Sekendur.</p>
</footer>
</div>
</body>
</html>
@media screen and (min-width: 480px) {
/***********************************
TWO COLUMN LAYOUT
************************************/
#primary {
width: 50%;
float: left;
}
#seconary {
width: 40%;
float: right;
}
}
@media screen and (min-width: 660px) {
}
Chandice Cook
Front End Web Development Techdegree Student 1,765 PointsAs far as the spacing between section and nav elements, I would open up workspaces for the video that those instructions are on and compare it to your own. I'm not sure whether or not the instructions say to add a bottom margin or padding but I would bet that that is your issues. As far as your other question, I'm pretty new at this as well haha. I just finished Nick's CSS videos a few days ago. So I'm no use there. Sorry! I seem to remember having similar issues and I think for me it was something to do with syntax errors. You could also google a css and/or html validator and put your code in and see if it can be of any use. Sorry I'm not more help!
Cari Sekendur
595 PointsThanks so much Chandice! I really appreciate your help! You seem like a pro!
Cari Sekendur
595 PointsOne more follow up... is there a way I can see Nick's code to compare to mine without rewatching the videos?
Cari Sekendur
595 PointsCari Sekendur
595 PointsFixed it!