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 trial

CSS How to Make a Website Styling Web Pages and Navigation Style the Portfolio

luke jenkins
luke jenkins
368 Points

my images are overlapping

I have got to the stage of making my photos go side by side with my own personal images but there are over lapping each other.

12 Answers

Luke,

you img tag is like this: img { =max-width:100%; }

Eliminate the = sign.

Then this:

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7;

}

luke jenkins
luke jenkins
368 Points

Thanks for everything, really helpfull and patience :)

Be welcome Luke! In this area sharing is everything!!!! ;)

Luke, try to put your codes here. But even without seeing them, in your CSS file you must have the "float: left" in yout img element. Try to find the following:

img {

}

Then set inside the float: left;

luke jenkins
luke jenkins
368 Points

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color

It's missing the closing } for gallery li

luke jenkins
luke jenkins
368 Points

sorry didn't highlight it all

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7;

}

Code like this:

gallery and #gallery li

Luke, post all two codes here, both HTML and CSS.

luke jenkins
luke jenkins
368 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>MA | Data Base</title> <link rel="stylesheet" href="CSS/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Pacifico|Courgette' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="CSS/main.css"> </head> <body> <header> <a href="Index.html" id="logo"> <h1>Morris Armitage</h1> <h2>Data Base</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/1 Stubbs Close.jpg"> <img src="img/1 Stubbs Close.jpg" alt""> <p>1 Stubbs Close</p> </a> </li> <li> <a href="img/18 Arrended Road.jpg"> <img src="img/18 Arrended Road.jpg" alt""> <p>18 Arrendene Road</p> </a> </li> <li> <a href="img/22 Alderton Close.jpg"> <img src="img/22 Alderton Close.jpg" alt""> <p>22 Alderton Close</p> </a> </li> <li> <a href="img/22 Rovers Way.jpg"> <img src="img/22 Rovers Way.jpg" alt""> <p>22 Rovers Way</p> </a> </li> <li> <a href="img/3 Bladon Way.jpg"> <img src="img/3 Bladon Way.jpg" alt""> <p>3 Bladon Way</p> </a> </li> <li> <a href="img/Baray Lodge.jpg."> <img src="img/Baray Lodge.jpg." alt""> <p>Baray Lodge</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>© 2015 Morris Armtiage ltd.</p> </footer> </div> </body> </html>

luke jenkins
luke jenkins
368 Points

/************************ GENERAL ************************/

body { font-family: 'Courgette', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { =max-width:100%; }

/************************ HEADING ************************/

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Pacifico', sans-serif; margin: 10px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; padding-top: 10px; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/************************ NAVIGATION ************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

/************************ HEADING ************************/

footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc; }

/************************ Page: Portfolio ************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7;

}

/************************ COLOURS ************************/

/* site body */ body { background-color: #fff; color: #999; }

/* Green header */ header { background: orange; border-color: orange; }

/* nav background on mobile devises */ nav { background: orange; }

/* logo text*/ h1, h2 { color: #fff; }

/* link colour */ a { color: #fff; }

/* colour for a nav link */ nav a, nav a:visited { color: #fff; }

/* navagation bard hover colouring and current page colouring */ nav a.selected, nav a:hover { color: #000; }