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

CSS

Posted by Lucian Dumitru
Lucian Dumitru
Courses Plus Student 13,024 Points

What I'm I doing wrong with my HTML5/CSS

Hi,

I'm having a problem with my CSS code and I don't know what i'm I doing wrong. The problem is that when I hoover the mouse over navigation buttons ( HOME, PORTFOLIO, ABOUT US ) the entire page is moving towards few pixels the bottom of the page. Can you help me with this issue? The page looks like this: http://www.beautytips.ro/test/portfolio_bug.html

The HTML code is below

<body> <div class="wrapper"> <header> <ul class="menu"> <li class="link"><a href="#">Home</a></li> <li class="link"><a href="#">Projects</a></li> <li class="link"><a href="#">About Us</a></li> </ul> </header> <div class="abstract"> <h1>Abstract Design<h1> </div> <footer class="main-footer wrapper"> <span>Ā©2016 Abstract Design. All Right Reserved</span><br> <a href="#"><i class="fa fa-facebook-square social"></i></a> <a href="#"><i class="fa fa-instagram social"></i></a> <a href="#"><i class="fa fa-twitter social"></i></a> <a href="#"><i class="fa fa-youtube social"></i></a> </footer> </div> </body>

Lucian Dumitru
Lucian Dumitru
Courses Plus Student 13,024 Points

CSS CODE

*{ box-sizing: border-box; }

.wrapper { width: 90%; margin: auto;

} /* Heading */ .menu { list-style: none; font-family: 'Poiret One'; font-size: 2em; font-weight: bold; margin: auto; text-transform: uppercase; text-align: center;

}

.link { display: inline-block; text-decoration: none; margin-bottom: 40px; margin-top: 50px; padding: 0 30px;

}

/* link-uri */

a:visited { color: #52abab; } a:active { color: #52abab; } a:link { color: #52abab; text-decoration: none; } a:hover { color: tomato; }

.link:hover { border-bottom: 1px solid tomato; }

/* Continut si Titlu */

.abstract { font-family: 'Poiret One', cursive; font-size: 2.6em; color: #000; text-align: center; border-bottom: 1px solid #52abab; padding-bottom: 0; text-shadow: 2px 2px 2px #52abab; }

/* Footer */

.main-footer {

text-align: center;
font-family: 'Roboto', cursive;
border-top: 1px solid #52abab;
font-weight: bold;
font-size: 12px;
margin-top: 50px;
margin-bottom: 20px;
padding-top: 30px;

} .social { font-size: 30px; color: #52abab; margin-top: 20px; margin-left: 20px; } /* Hoover */

.social:hover { color: tomato;

2 Answers

Milutin Jovkovic
Milutin Jovkovic
2,614 Points

maybe you will resolve problem, if you isnted of, .link:hover { border-bottom: 1px solid tomato; }, you put border-bottom: 1px solid tomato into a:href properties...

Lucian Dumitru
Lucian Dumitru
Courses Plus Student 13,024 Points

Thank you! It worked!

Milutin Jovkovic
Milutin Jovkovic
2,614 Points
Milutin Jovkovic
Milutin Jovkovic
2,614 Points

that is happening to you because of .link:hover { border-bottom: 1px solid tomato; } because of 1px border the entire page is moving towards 1 pixel the bottom