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!

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

CSS

Posted by erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

cant 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
MOD
Jonathan Grieve
Treehouse Moderator 91,243 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,243 Points

I 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
PLUS
erdragerdragsson
Courses Plus Student 5,887 Points
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points 
footer {
  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
erdragerdragsson
Courses Plus Student 5,887 Points

okey i took out the pieces of the code, but just tell me if you need more of the code

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,243 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,243 Points

Okay, 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
PLUS
erdragerdragsson
Courses Plus Student 5,887 Points
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

i 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
PLUS
erdragerdragsson
Courses Plus Student 5,887 Points
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

I 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> ´´´