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
Simon Strömberg
1,423 PointsHow do i fix the margin/padding with menus on header?
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Flexbox</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" type="text/css" href="responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <div id="logo"><a href="http://www.disciplin.se">Disciplin</a> <ul class="meny"> <li><a href="index.html"><span class="nuvarande">HEM</span></a></li> <li><a href="#">TOPPLISTA</a></li> <li><a href="#">ANNONSERA</a></li> <li><a href="#">KONTAKT</a></li> <li class="skapablogg"><a href="#">SKAPA EN BLOGG</a></li> <li class="loggain"><a href="#">LOGGA IN</a></li>
</ul>
</div> </header> <div class="hborder2"></div> <div id="main"> <h1>Vill du bli premiumbloggare?</h1> <p>Nedanför kan du läsa om vad vi erbjuer våra premiumbloggare</p> <section id="left"> <ul id="ikon1"> <li> <img src="bilder/1.jpg" alt="bild1" class="bild1"> <h2>Betalt per besökare</h2> <p> Vi betalar dig 1,5 för varje unik besökare du får till din blogg, drar du in många besökare kan vi diskutera om att höja betalninen per unik besökare. </p> </li> <li> <img src="bilder/2.jpg" alt="bild1" class="bild1"> <h2>Syns med på framsidan av Disciplin.se</h2> <p> Som premiumbloggare får du synas med på framsidan av Disciplin.se med din bild för extra exponering av din blogg. </p> </li> </ul> </section> <section id="right"> <ul id="ikon2"> <li> <img src="bilder/1.jpg" alt="bild1" class="bild2"> <h2>Betalt per besökare</h2> <p> Vi betalar dig 1,5 för varje unik besökare du får till din blogg, drar du in många besökare kan vi diskutera om att höja betalninen per unik besökare. </p> </li> <li> <img src="bilder/2.jpg" alt="bild1" class="bild2"> <h2>Syns med på framsidan av Disciplin.se</h2> <p> Som premiumbloggare får du synas med på framsidan av Disciplin.se med din bild för extra exponering av din blogg. </p> </li> </ul> </section> </div> <div class="orange"> <h1>Ansök om att bli premiumbloggare!</h1> <p>För att ansöka krävs det att du har minst 2500 unika besökare i veckan</p>
<div class="knapp"> <h1>ANSÖK!</h1> </div>
</div> <section> <div id="inte-premium"> <h1>Har du inte 10 000 besökare i månaden?</h1> <p>Det gör inget, har du minst 2500 unika besökare i månaden så kan du ändå få några fördelar</p>
<img src="bilder/1.jpg" alt="bild1" class="bild3">
<h2>Betalt per besökare</h2>
<p>
Vi betalar dig 1,5 för varje unik besökare du får till din blogg, drar du in många besökare kan vi diskutera om att höja betalninen per unik besökare.
</p>
<img src="bilder/2.jpg" alt="bild1" class="bild3">
<h2>Syns med på framsidan av Disciplin.se</h2>
<p>
Som premiumbloggare får du synas med på framsidan av Disciplin.se med din bild för extra exponering av din blogg.
</p>
</div>
<div class="grey"> <h1>Ansök om att få ditt eget domännamn!</h1> <p>För att ansöka krävs det att du har minst 2500 unika besökare i månaden</p> <h1 class="knapp2">ANSÖK</h1> </div> <footer> <div class="border"></div> <p>© - 2014 <a href="http://www.disciplin.se">Disciplin.se</a> - Skapa en gratis träningsblogg idag hos Disciplin.se | Kontakta oss på <a href="mailto:info@disciplin.se">info@disciplin.se</a></p>
</footer>
</section> </body> </html>
4 Answers
Simon Strömberg
1,423 Points/********************************** GENERAL ***********************************/
body { font-family: 'sans-serif', open-sans;
}
main {
max-width: 940px; margin: 50px auto; padding: 0;
}
main p {
color: #000; text-shadow: none; text-align: center; line-height: 1.5em; margin: -2px 0; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: #ffb533; }
a:active { text-decoration: none; color: #ffb533; }
img { max-width: 100%; border-radius: 100%; margin: 15px 0; }
h1 { margin: 5px 0; text-align: center;
}
h2 { margin: 20px 0; text-align: center;
}
li { list-style: none; }
/********************************** Header ***********************************/
header { border-bottom: 0.1em solid #efe4e4; margin: 0 -999em; padding: 0 999em;
}
.hborder2 { border: 0.15em solid #f5f3f3; margin: -30px -999em; padding: 0 999em;
}
logo {
text-align: center; margin: 0; font-weight: 800; }
p { font-family: sans-serif; margin: 15px 0; font-size: 0.75em; font-weight: normal; line-height: 0.75em; }
/********************************** Menyer ***********************************/
.meny { text-align: center; padding: 10px 0; margin: 0; }
.meny ul { list-style: none; margin: 0 5px; padding: 0; }
.meny li { display: inline-block; }
.meny a { font-weight: normal; padding: 15px 5px; }
.nuvarande { text-decoration: none; color: #ffb533; }
.orange {
background: orange;
height: 400px;
width: 100%;
margin: 0 -9999rem;
margin-top: 50px;
margin-bottom: 50px;
padding: 0.25rem 9999rem;
}
.orange h1 { text-align: center; color: #2e2e2e; text-shadow: 1px 1px 0 #ffe57c; margin: 50px 0 0; line-height: 0.75em;
}
.orange p { text-align: center; color: #2e2e2e; text-shadow: 1px 1px 0 #ffe57c; font-size: 1.0em; margin-top: 5px; margin-bottom: 100px; line-height: 1.5em;
}
.orange .knapp { border: 2px dotted #fff; height: 100px; width: 350px; margin: 0 auto; color: #fff;
}
.orange .knapp:hover { background: #ffb533; border: 2px dotted #fff; height: 100px; width: 350px; margin: 0 auto; color: #fff;
}
.knapp h1 { margin: 1.0em; color: #fff; text-shadow: none;
}
inte-premium {
max-width: 940px; margin: 0 auto; padding: 0;
}
inte-premium h1, h2 {
text-align: center; margin: 10px 0; padding: 0;
}
inte-premium p {
text-align: center; margin: 5px 0; padding: 0; line-height: 1.5em;
}
.grey { border: 1px solid #e3e3e3; background: #e3e3e3; width: 100%; height: 200px; margin: 0 -999rem; margin-top: 50px; margin-bottom: 50px; padding: 0 999rem; text-align: center; color: #2e2e2e; text-shadow: 1px 1px 0 #fff; }
.grey h1 { margin: 20px 0; }
.grey p { margin: -25px 0 25px; font-size: 1em; line-height: 1.5em;
}
.grey .knapp2 { border: 2px dotted #fff; margin: 0 auto; padding: 25px 50px; width: 250px; color: #fff; text-shadow: none;
}
.grey .knapp2:hover { background: orange; border: 2px dotted #fff; margin: 0 auto; padding: 25px 50px; width: 250px; color: #fff; text-shadow: none;
}
footer { text-align: center; font-size: 1.25em;
}
footer p { text-align: center; padding: 10px 0; line-height: 1.5em;
}
footer .border { border: 5px solid #e3e3e3; max-width: 940px; margin: 0 auto;
}
Simon Strömberg
1,423 Points@media screen and (max-width: 480px) {
/******************************* Bilder *******************************/
header { border-bottom: 0.1em solid #efe4e4; margin: 30px -999em; padding: 4px 999em;
}
img { width: 100%; height: 100%; margin: 0 auto;
}
.grey { height: 260px; width: 100%;
}
.grey .knapp2 { height: 10%; width: 55%; margin: 0 auto;
}
.grey .knapp2:hover { height: 10%; width: 55%; margin: 0 auto;
}
.orange { height: 260px;
}
.orange h1 { margin-top: 10px;
}
.orange p { margin-top: 10px;
}
.orange .knapp { border: 2px dotted #fff; height: 30%; width: 90%; margin: 0 auto; margin-top: -72px; color: #fff;
}
.orange .knapp:hover { background: #ffb533; border: 2px dotted #fff; height: 30%; width: 90%; margin: 0 auto; margin-top: -72px; color: #fff;
}
.knapp h1 { margin: 0.89em; color: #fff; text-shadow: none;
}
} @media screen and (min-width: 660px) {
header { border-bottom: 0.1em solid #efe4e4; margin: 30px -999em; padding: 4px 999em;
}
logo {
float: left;
margin-left: 0.5%;
margin-top: -30px;
padding: 7px 5px;
text-align: left;
width: 90%;
}
.meny { display: inline-block; background: none; float: right; font-size: 0.75em; margin-right: -10%; margin-top: 0 auto; padding: 2px 5px; text-align: right; width: 80%;
}
.skapablogg a { color: #fff; border: 1px solid orange; background: orange; padding: 3px 5px;
}
.loggain a { color: #fff; border: 1px solid orange; background: orange; padding: 3px 5px;
}
.hborder2 { border: 0.15em solid #f5f3f3; margin-top: 500px margin: 0 -999em; padding: 0 999em;
}
}
Simon Strömberg
1,423 PointsI got issues in header in the responsive and I would like to know how to fix it:
Issue: http://puu.sh/eeJa7/0569b9a484.png Issue: http://puu.sh/eeJdZ/4c12e017ac.png
Regards
Simon Strömberg
1,423 Pointshelp ty