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 trialRicardo Guedes
Courses Plus Student 3,270 PointsMy images dont float properly...
My code seams the same but my images stay in top of each other and not in 2 columms like in the exemple
8 Answers
Dan Weru
47,649 Points#gallery {
margin:0;
padding:0;
list-style:none;
}
#gallery li {
float:left;
width:45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
Also check to confirm that your use the same word in the css as you have used in your html.
Dan Weru
47,649 Pointshey, could i have a look at your code?
Dan Weru
47,649 Pointsedit your css file.
your code should be
gallery{...}
noot gallery{...}
.... you have typing errors. Remember gallery is an id and ids start with a '#' symbol in the css file
Ricardo Guedes
Courses Plus Student 3,270 Pointsoh! Oops... Too many hours doing this exercises... Thanks alot one weru!
Dan Weru
47,649 PointsThe pleasure is all mine.
Ricardo Guedes
Courses Plus Student 3,270 PointsThanks alot!
Seams to be working like it should!
Dan Weru
47,649 PointsTypos happen all the time, keep at it.
Ricardo Guedes
Courses Plus Student 3,270 Points<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ricardo Guedes | Designer</title> <link rel="stylesheet" href="_css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Lobster|Bree+Serif' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="_css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Ricardo Guedes</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 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 in Photoshop.</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 repetition.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2016 Ricardo Guedes.</p> </footer> </div> </body> </html>
Ricardo Guedes
Courses Plus Student 3,270 PointsRicardo Guedes
Courses Plus Student 3,270 Points/**************************************** GENERAL *****************************************/
body { font-family: 'Bree Serif', sans-serif; }
wrapper {
}
a { text-decoration: none; }
img { max-width:100%;
}
/**************************************** HEADING *****************************************/
logo {
}
h1 { font-family: 'Bree Serif', serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; } h2 { font-family: 'Lobster', cursive; font-size:0.75em; margin:-5px 0 0; font-weight:normal; }
/**************************************** NAVIGATION *****************************************/ nav { text-align:center; padding:10px 0; margin:20px 0 0; }
/**************************************** FOOTER *****************************************/ footer { font-size:0.75em; text-align:center; padding-top: 50px; color: #fff; }
/**************************************** PORTFOLIO *****************************************/
galery {
}
galery li {
}
/**************************************** COLORS *****************************************/
/Site body/ body { background-color:#a69e9e; color: #999; }
/* grey header*/ header { background: #747474; border: #599a68; }
/* nav background on mobile*/ nav { background: #5f5f5f; }
/* logo text*/ h1, h2 { color:#cbeaf7; }
/* links */ a { color: #cbeaf7; }
/* nav link*/ nav a:visited { color:cbeaf7; } /* selected nav link*/ nav a .selected, nav a:Hover { color: #fff; }