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
erdragerdragsson
Courses Plus Student 5,887 Pointscant fix links at bottom border
ive made a bottom border on my page like this
html { min-height: 98%; border-bottom-color: #599a68; border-bottom-style: solid; border-bottom-width: 40px; }
and ive put some links under the footer section in my html file in <span> tags
but in css, i cant figure out how to positioning them inside my border, ive tried man things but i cant get it right, do you guys have any ideas?
4 Answers
Jonathan Grieve
Treehouse Moderator 91,252 PointsI think the problem might be to do with not so much the rules your applying, but to do with CSS specificity.
It looks like what you're doing is trying to style your links on the root element with his the HTML element but we may need to see more of your code so we can help you. :-)
erdragerdragsson
Courses Plus Student 5,887 Pointsfooter {
font-size: 1.2em;
text-align:center;
clear: both;
padding-top: 50px;
color: #989898;
}
.social-icon {
width: 35px;
height: 35px;
margin: 0 5px;
}
#bottom-links {
}
´´´html
<footer> <a href="http://twitter.com/erdrag"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/erdrag"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Erdrag.</p> </footer> <span id="bottom-links"> <a href="#logo">Go back up!</a> </span> </div> </body> </html>
´´´
erdragerdragsson
Courses Plus Student 5,887 Pointsokey i took out the pieces of the code, but just tell me if you need more of the code
Jonathan Grieve
Treehouse Moderator 91,252 PointsOkay, from what I can tell, the code your want to make the border is as follows so
a {min-height: 98%; border-bottom-color: #599a68; border-bottom-style: solid; border-bottom-width: 40px;}
or
#bottom-links {min-height: 98%; border-bottom-color: #599a68; border-bottom-style: solid; border-bottom-width: 40px;
}
erdragerdragsson
Courses Plus Student 5,887 Pointsi want the border as it is,
but i want links inside the border
do you think it would work if i do
bottom-links {
position:relative;
bottom: -20px;
}
something like that?
erdragerdragsson
Courses Plus Student 5,887 PointsI think i fixed it now, is this a good, solution? or is there any other way to do it?
´´´ span { margin: 0 auto; }
bottom-links {
display: table; position: relative; bottom: -30px; margin: auto; }
bottom-links a, #bottom-links a:visited {
color: #fff; }
bottom-links a:hover {
color: #32673f; } ´´´ ´´´ <footer> <a href="http://twitter.com/erdrag"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/erdrag"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Erdrag.</p> </footer> <span id="bottom-links"> <a href="#logo">Go back up!</a> <a href="#logo">Credits!</a> </span> </div> </body> </html> ´´´