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 trialLuke Eubank
2,051 Pointsi've copied and pasted the correct css and the images still wont align side by side? WHAT DO I DO!?
i've copied and pasted the correct css and the images still wont align side by side? WHAT DO I DO!?
7 Answers
Mohamed A.Fouad
5,550 PointsI've just finished reviewing your code and I've found these mistakes : 1- comments go like this
/* Comment */
not like this
/Comment/
2- The hash sign (#) before the ids in CSS file is missing.
3- Some HTML attributes need to be closed for example:
class="social-icon
Needs to be like this
class="social-icon"
4- Also You have missed out several semicolons.
5- The main problem was that you forgot to put (:) in here
width: 45%;
it was like this
width 45%
so the full CSS code would be like this
/******************************************************* 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%; }
/******************************************************* 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: 'Oswald', 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;
margin:
text-align: center;
}
.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;
}
/******************************************************* COLORS ********************************************************/
/*over nav link*/
nav a.selected, nav a:hover { color: #43563f}
/*site body*/
body { background-color: #f5f5f5; color: #f5f5f5; }
header { background: #eba133; border-color: #500a68 }
nav { background: #888888; }
/*logo text*/
h1, h2 { color: #f5f5f5; }
/*link color*/
a { color: #EBA133; }
/*nav link*/
nav a, nav a:visited {
color: #eba133;
font-family: 'Roboto', sans-serif;
font-weight: normal;
line-height: 0.8em;
}
and the HTML code would be like this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Luke Eubank - Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700|Sarpanch:400,800,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Luke</h1>
<h2>Designer</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 colors and textures.</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Experimentation with colors and textures.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Experimentation with colors and textures.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Experimentation with colors and textures.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Experimentation with colors and textures.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/lukeethere"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/luke.ashton.eubank"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Luke Eubank</p>
</footer>
</div>
</body>
</html>
compare those codes with your codes and you will find what is missing.
James Barnett
39,199 PointsNow that is what I call a throughly helpful reply.
Mohamed A.Fouad
5,550 PointsThank you sir, your comment honours me.
Mohamed A.Fouad
5,550 PointsAs Gloria said, could you please give us your codes to review it so we can help you!
Luke Eubank
2,051 Points/*******************************************************
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%
}
/*******************************************************
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: 'Oswald', 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;
margin:
text-align: center;
}
.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
}
/*******************************************************
COLORS
********************************************************/
/*over nav link*/
nav a.selected, nav a:hover {
color: #43563f}
/*site body*/
body {
background-color: #f5f5f5;
color: #f5f5f5;
}
header {
background: #eba133;
border-color: #500a68
}
nav {
background: #888888;
}
/*logo text*/
h1, h2 {
color: #f5f5f5; }
/*link color*/
a {
color: #EBA133;
}
/*nav link*/
nav a, nav a:visited {
color: #eba133;
font-family: 'Roboto', sans-serif
font-weight: normal;
line-height: 0.8em
Gloria Dwomoh
13,116 PointsYou have missed out several semicolons. Try adding them. One of them is in the image tag...for example change
img { max-width: 100% }
to
img { max-width: 100%; }
Ps. Your code is not appearing very well because it has no markdown. Try looking at the post I suggested in the other question of yours so that we can see your code better, because without it more errors appear.
Mohamed A.Fouad
5,550 Points1- I don't see HTML code! Please send us the right code.
2- As Gloria said, You have missed out several semicolons.
3- In the CSS code some classes need to be identified by using "." before using them in CSS for example:
- Your code is like this:
logo{text-align: center; margin: 0; }
- The right code should be like this:
/* if this is a class use dot "." before the name of it */
.logo{text-align: center; margin: 0; }
/* if this is an id use hash "#" before the name of it */
#logo{text-align: center; margin: 0; }
Luke Eubank
2,051 Points <head>
<meta charset="utf-8">
<title>Luke Eubank - Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700|Sarpanch:400,800,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Luke</h1>
<h2>Designer</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 colors and textures.</p>
</a>
</li>
<li>
<a href="img/numbers-02.jpg">
<img src="img/numbers-02.jpg" alt="">
<p>Experimentation with colors and textures.</p>
</a>
</li>
<li>
<a href="img/numbers-06.jpg">
<img src="img/numbers-06.jpg" alt="">
<p>Experimentation with colors and textures.</p>
</a>
</li>
<li>
<a href="img/numbers-09.jpg">
<img src="img/numbers-09.jpg" alt="">
<p>Experimentation with colors and textures.</p>
</a>
</li>
<li>
<a href="img/numbers-12.jpg">
<img src="img/numbers-12.jpg" alt="">
<p>Experimentation with colors and textures.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/lukeethere"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon></a>
<a href="http://facebook.com/luke.ashton.eubank"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon></a>
<p>© 2014 Luke Eubank</p>
</footer>
</div>
</body>
</html> ```
Luke Eubank
2,051 Pointsmore than helpful man! really appreciate it
Gloria Dwomoh
13,116 PointsGloria Dwomoh
13,116 PointsCan you show your html and css code?