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
luke jenkins
368 Pointsmy 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
RAFAEL COSTA
6,243 PointsLuke,
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
368 PointsThanks for everything, really helpfull and patience :)
RAFAEL COSTA
6,243 PointsBe welcome Luke! In this area sharing is everything!!!! ;)
RAFAEL COSTA
6,243 PointsLuke, 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
368 Pointsgallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color
RAFAEL COSTA
6,243 PointsIt's missing the closing } for gallery li
luke jenkins
368 Pointssorry 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;
}
RAFAEL COSTA
6,243 PointsCode like this:
gallery and #gallery li
luke jenkins
368 Pointsdoesn't work :/
RAFAEL COSTA
6,243 PointsLuke, post all two codes here, both HTML and CSS.
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
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; }