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
Abdullah Khalid
12,178 Pointscss Problem with margin
Hi ,,
why when i set the margin top to 50px is Not take a space between floating Elements and footer
please see my css code
thanks
<!DOCTYPE html> <html>
<head> <title>Abaadi</title> <meta charset="UTF-8"> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Abaadi</h1> <h2>Web developer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Home</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>This is The first Image of my page</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>This is The first Image of my page</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>This is The first Image of my page</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>This is The first Image of my page</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>This is The first Image of my page</p> </a> </li> </ul> </section> </div> <footer> <p>© 2015 abaadi</p> </footer> </body>
</html>
css code:
...css /********************** GENERAL ***********************/
body { font-family: 'Open Sans', sans-serif; margin: 0; }
wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0;
}
img { max-width: 100%; }
a { text-decoration: none; }
/********************** HEADING ***********************/
header { float: left; width: 100%; background-color: #94D1A7; margin: 0 0 30px 0; padding: 5px 0 0 0; }
logo {
color: #fff;
text-align: center;
margin: 0;
}
h1 { margin: 0; padding: 0; font-family: 'open sans', sans-serif; font-weight: normal; }
h2 { margin: -5px 0 0; padding: 0; font-size: 20px; font-weight: normal; }
/********************** NAVIGATION ***********************/
nav { text-align: center; padding: 5px 0; margin: 20px 0 0; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; padding: }
/********************** CONTENTS ***********************/
gallery {
list-style: none;
}
gallery li {
width: 45%;
float: left;
margin: 2.5%;
background-color: #EAEAEA;
}
gallery li p {
color: #656565;
padding: 0 0 0 5px;
margin: 15px 0 15px 0;
}
/********************** FOOTER ***********************/
footer { clear: both; margin: 100px 0 20px 0; /* padding-top: 50px; */ text-align: center; }
footer p { font-size: 12px; margin: 0; }
...
3 Answers
Shawn Denham
Python Development Techdegree Student 17,802 PointsCan you post your HTML as well as your CSS code. Check the markdown cheatsheet for how to post code. :)
Shawn Denham
Python Development Techdegree Student 17,802 PointsI have pasted your HTML and CSS on a Codepen
You have an error on line 37 where you have padding but no value. If you erase that the page looks fine. I guess I am still not understanding what you are wanting to do.
Abdullah Khalid
12,178 Pointsfirst Thanks ,, second I have a problem is the presence of a gap between the browser and the page header ,,
It has the margin is set to 0
...css /********************** GENERAL ***********************/
body { font-family: 'Open Sans', sans-serif; margin: 0; }
wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
img { max-width: 100%; }
a { text-decoration: none; }
/********************** HEADING ***********************/
header { float: left; width: 100%; margin: 0 0 30px 0; padding: 5px 0 0 0; }
logo {
text-align: center;
margin: 0;
}
h1 { margin: 15px 0; padding: 0; font-family: 'open sans', sans-serif; font-weight: normal; }
h2 { margin: -5px 0 0; padding: 0; font-size: 20px; font-weight: normal; }
/********************** NAVIGATION ***********************/
nav { text-align: center; padding: 5px 0; margin: 20px 0 0; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
/********************** CONTENTS ***********************/
gallery {
list-style: none;
}
gallery li {
width: 45%;
float: left;
margin: 2.5%;
background-color: #EAEAEA;
}
gallery li p {
color: #656565;
padding: 0 0 0 5px;
margin: 15px 0 15px 0;
}
/********************** FOOTER ***********************/
footer { clear: both; padding-top: 50px; text-align: center; }
footer p { font-size: 12px; margin: 0; }
/********************** COLORS ***********************/
body { background-color: #fff; color: #707070; }
header { background-color: #94D1A7; }
logo {
color: #fff;
}
nav { background-color: #7BA688; /* mobile bg color */ }
nav a, nav:visited { color: #fff; }
nav a:hover, nav a.selected { color: #36423A; }
...
Abdullah Khalid
12,178 PointsAbdullah Khalid
12,178 PointsI have posted my code