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
Assia Ouarga
928 Pointsmy images are overlapping, and i followed all the instructions..plzzz helpp
here is my HTML code:
<!doctype html> <html> <head> <meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Maven+Pro:700,500|Slabo+27px' rel='stylesheet' type='text/css'>
<link href="main.css" rel="stylesheet"= type="text/css">
</head> <title> Assia Ouarga | Designer </title>
<body> <header>
<a href="index.html" id="logo">
<h1> Assia Ouarga</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>
</header>
<div id="wrapper"> <section>
<ul id="gallery">
<li >
<a href="pics/number1.jpg">
<img src="pics/number1.jpg" alt="cupcake" >
<p> Who does not like cupcakes!!</p>
</a>
</li>
</ul>
<ul id="gallery">
<li >
<a href="pics/number2.jpg">
<img src="pics/number2.jpg" alt="cupcake" >
<p> Who does not like cupcakes!!</p>
</a>
</li>
</ul>
<ul id="gallery">
<li>
<a href="pics/number3.jpg">
<img src="pics/number3.jpg" alt="cake" >
<p> What's better than decorating a cake!!</p>
</a>
</li>
</ul>
<ul id="gallery">
<li>
<a href="pics/number4.jpg">
<img src="pics/number4.jpg" alt="pizza" >
<p> Yummyyyy Pizza </p>
</a>
</li>
</ul id="gallery">
<ul id="gallery">
<li>
<a href="pics/number5.jpg">
<img src="pics/number5.jpg" alt="pretzels">
<p> Delicious salty pretzels </p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://www.twitter.com">
<img src="pics/twitter.jpg" alt="twitter logo" width="50px" height="50px">
</a>
<a href="http://www.facebook.com">
<img src="pics/facebook.png" alt="facebook logo" width="50px" height="50px">
</a>
<p>© 2016 Assia Ouarga</p>
</footer>
</div>
</body>
</html>
and here is my CSS :
/*************************************** General ****************************************/
body { font-size: 'Slabo 27px', serif; }
wrapper{
max-width: 550px;
margin: 0 auto;
padding: 0 20%;
a { text-decoration: none; color: #ADD8E6; }
img { max-width: 100%; }
/*************************************** Heading ****************************************/ }
logo {
text-align: center;
margin: 0;
text-decoration: none;
}
h1 { font-family: 'Maven Pro', sans-serif; margin: 15px 0; font-size: 2.3em; font-weight: bold; line-height: 1.5em; }
h2 { font-family: 'Maven Pro', sans-serif; font-size: 2em; margin: -5px 0 0; font-weight: normal; }
/*************************************** Navigation ****************************************/
nav { text-align: center; margin: 10px 3 3; padding: 3px 0; }
/*************************************** Footer ****************************************/
footer { font-size: 1.2em; text-align: center; padding-top: 50px; color: #FF99CC; }
/*************************************** Page : Portfolio ****************************************/
gallery {
margin: 0;
padding: 0;
list-style: none;
}
gallery li {
float: left;
width: 45%;
margin:2.5%;
background-color: #FFE4E1;
color: #DB7093;
}
/*************************************** Colors ***************************************/ / site body */
body { background-color: #FFF color: #ADD8E6;
}
/* color: MistyROse */
header { background: #FFE4E1; border-color: #F5FFFA;
}
/* nav background on mobile */ nav { background-color: #DB7093; color: #FFE4E1; }
/* logo text */ h1, h2 { color: #DB7093;
}
/* links */ a { color: #ADD8E6;
}
/* nav link */ nav a, nav a:visited { color: #ADD8E6; text-decoration: none; }
/* selected nav link */
nav a.selected, nav a:hover { color: #FFE4E1; }
Thanks in advance
3 Answers
Assia Ouarga
928 PointsThaanks, problem solved already. I deleted the equal but nothing changed. Thanks again for your support
Mark Buskbjerg
20,986 PointsIn the link to your main.css:
<link href="main.css" rel="stylesheet"= type="text/css">
You have an equal sign after "stylesheet" probably causing you some trouble.
Should be:
<link href="main.css" rel="stylesheet"= type="text/css">
Let me know if this helps :)
ahbabur fahim
5,473 Pointshow did you solve it cos im having the same problem, cant figure it out
Mark Buskbjerg
20,986 PointsFeel free to add a new forum post and tag me. I'll try and help you out :)