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 trialerdragerdragsson
Courses Plus Student 5,887 PointsProblem with data-icon!
Hey i have added my icons so that they are next to my links, but when i set overflow: hidded; to my nav links element it doesnt make the icon disapear?
anyone have an idea how to fix this?
heres the code
/******************
NAVIGATION LINKS STYLING
*************************/
.nav a {
padding: 10px 40px 10px 40px;
width: 100%;
position: relative;
}
.nav a::before {
font-family: 'icomoon';
content: attr(data-icon);
color: #fff;
position: absolute;
top: px;
left: -30%;
}
.nav ul {
list-style: none;
margin: 0px 28px;
padding: 0;
}
.nav li {
position: relative;
display: inline-block;
font-size: 14px;
}
/*NAVIGATION SELECTORS*/
.nav {
text-align: right;
width: 50%;
float: right;
padding-bottom: 2%;
margin-top: 5%;
}
AND THE HTML
<nav class="nav">
<ul>
<li><a class="nav-links selected" href="index.html" data-icon="">Home</a></li>
<li><a class="nav-links" href="about.html">About</a></li>
<li><a class="nav-links" href="contact.html">Contact</a></li>
</ul>
</nav>
erdragerdragsson
Courses Plus Student 5,887 Pointsheres the full css code for the nav and header
:root {
font-family: 'Roboto Slab', serif;
min-height: 98%;
border-bottom: 40px solid #0c4750;
}
* {
-webkit-border-radius
}
/*BODY SELECTOR*/
body {
height: 100%;
background: hsl(188, 74% , 21%);
background: -webkit-linear-gradient(#0e535d , #8ce1ee);
background: -moz-linear-gradient(#0e535d , #8ce1ee);
background: -ms-linear-gradient(#0e535d , #8ce1ee);
background: -o-linear-gradient(#0e535d , #8ce1ee);
background: linear-gradient(#0e535d , #8ce1ee);
color: #FFFFFF;
line-height: 1.6;
}
/*THE CONTENT AREA*/
.container {
max-width: 1000px;
min-height: 100%;
margin: 0 auto;
padding: 0 5%;
}
/* STYLES THE h1 and h2 and paragraph on the page */
h1, h2 {
margin-bottom: .28em;
font-weight: bolder;
font-size: 28px;
font-family: 'Droid Serif', serif;
text-shadow: 1px 1px 1px black;
}
p {
font-weight: bold;
font-size: 18.88px;
margin: 0.8em 0;
}
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('../fonts/icomoon.woff') format('woff'),
url('../fonts/icomoon.ttf') format('truetype'),
url('../fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/*************
HEADER STYLING
*******************/
header {
float: left;
position: relative;
margin: 0 0 40px 0;
padding: 0 0 0 0;
width: 100%;
min-height: 100%;
overflow: hidden;
}
header {
background:#0b3f47;
border-color: #0b3f47;
}
header {
border-bottom: 6px solid #082f35;
border-top: 6px solid #082f35;
margin-bottom: 110px;
}
.image {
width: 50%;
float: left;
}
.intro-pic {
position: relative;
display: block;
margin: auto 0;
text-align:center;
top: -5px;
bottom: -5px;
left: -2px;
}
.image {
top: 50%;
bottom: 50%;
}
/*STYLING FOR THE OTHER LINKS ON THE PAGE*/
a.Other-links {
text-decoration: none;
color: #101010;
}
a.Other-links:hover {
text-decoration: underline;
color:#000;
}
/******************
NAVIGATION LINKS STYLING
*************************/
a.nav-links {
background-color:#006b8f;
height: 100%;
margin: 5px 0px 0px 2px;
padding: 0px 5px 0px 5px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
border-radius: 20px;
text-decoration:none;
color: #fff;
font-size: 16px;
font-weight: 600;
letter-spacing: 3px;
text-shadow: 1px 0 1px black;
border: 2px solid black;
}
a.nav-links:hover {
background-color:#00506b;
-moz-box-shadow: 0px 0px 1px black;
-webkit-box-shadow: 0px 0px 1px black;
box-shadow: 0px 0px 1px black;
}
a.nav-links.selected {
background-color:#00506b;
}
.nav a {
padding: 10px 40px 10px 40px;
width: 100%;
position: relative;
overflow: hidden;
}
.nav a::before {
font-family: 'icomoon';
content: attr(data-icon);
color: #fff;
position: absolute;
left: -30%;
}
.nav ul {
list-style: none;
margin: 0px 28px;
padding: 0;
}
.nav li {
position: relative;
display: inline-block;
font-size: 14px;
}
/*NAVIGATION SELECTORS*/
.nav {
text-align: right;
width: 50%;
float: right;
padding-bottom: 2%;
margin-top: 5%;
}
2 Answers
Marcus Parsons
15,719 PointsIn your *
selector, you don't have -webkit-border-radius
set properly. You also need to put that top
property back into your .nav a::before
rule. It just wasn't set right when you first had it. You should set it to 10px as Guil does in the video. As far as errors go, that's all I'm seeing for your CSS. If fixing those errors doesn't fix the problem, we will also need your HTML file.
erdragerdragsson
Courses Plus Student 5,887 Pointshey i did put the top to 10px but it did not help, heres my html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Erdrag's Official Website">
<meta name="author" content="Erdrag">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<link rel="stylesheet" href="css/responsive.css" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Merienda+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:700|Roboto+Slab' rel='stylesheet' type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Erdrag Official Website</title>
</head>
<body>
<header class="main-header">
<div class="image">
<a href="index.html">
<img class="intro-pic img" src="img/mainlogo.png" title="Home" alt="logo">
</a>
</div>
<nav class="nav">
<ul>
<li><a class="nav-links selected" href="index.html" data-icon="">Home</a></li>
<li><a class="nav-links" href="about.html">About</a></li>
<li><a class="nav-links" href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="container">
<div class="work">
<h2>What you will see!</h2>
<p>Some things that you can / are going to see on this website,
in the future is me creating stuff for fun. like websites, simple
visual programming games and more! (Read more about it in the "About" section)
A great site i use to learn about all kind of different things is the<a class="Other-links" href="http://teamtreehouse.com" target="_blank">Treehouse</a> website.</p>
</div>
<div class="still-learning">
<h2>Still learning!</h2>
<p>Im still learning all the things about Web development, web design, and much more, and you never run out of things to learn. Some sites i can reccomend that has great tutorials and forums is <br> <a class="Other-links" href="http://teamtreehouse.com" target="_blank">Treehouse</a> & <a class="Other-links" href="http://sololearn.com" target="_blank">Sololearn</a></p>
</div>
<div class="github-mobile">
<a href="#" target="_blank"><img class="github-mobileimg" src="img/github.png" title="Github Profile!" alt="github profile"></a>
</div>
<br>
<footer class="copyright">
<a href="#"><img src="img/facebook2.png" title="Facebook" class="social-icon" alt="Facebook Logo"></a>
<a href="#" target="_blank"><img src="img/twitter2.png" title="Twitter" class="social-icon" alt="Twitter Logo"></a>
<a href="http://teamtreehouse.com/erdragerdragsson"><img src="img/mail2.png" title="mail" class="social-icon" alt="Mail icon"></a>
<a href="https://www.google.se/#q=not+yet"><img src="img/instagram.png" title="Instagram or sumtin" class="social-icon" alt="Instagram or sumtin"></a>
<p class="copyright-text">© Erdrag 2015, All rights reserved.</p>
</footer>
<div id="date-stamp">
<script LANGUAGE="Javascript">
var stampdays = new Array( "Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
// Month Names - Guess what this array does. 0..11 to the system clock month
var stampmonths = new Array( "January","February","March","April","May","June","July","August","September","October","November","December");
// GRABS the Date info from your System clock when your Browser reads enters the page.
var thedate = new Date();
//Gets the Translated Arrays written to the webpage for viewing. Remember you can use this for other things, too
document.write(stampdays[ thedate.getDay()] + ", " + stampmonths[ thedate.getMonth()] + " " + thedate.getDate() + ", " + thedate.getFullYear());
</script>
</div>
</div>
<div class="github-span">
<a href="https://github.com/Erdrag" target="_blank"><img class="github" src="img/github.png" title="Github Profile!" alt="Github"></a>
<img src="img/chat.png" class="github-chat" alt="Chat bubble">
</div>
</body>
</html>
Marcus Parsons
15,719 PointsIt seems that the only issue there is (after fixing the -webkit-border-radius and top properties in the CSS) was changing the data icon. I changed the home icon to the one that Guil uses 
.
EDIT: I figured out why this works, as well. It looks as though you got the code for the "home" icon from the http://icomoon.io site which lists one of those home icons as 
. This code, though, is for the new version of icomoon which we aren't using. We are using the old version of icomoon and the codes are different for the old version, which is why new codes won't show up.
erdragerdragsson
Courses Plus Student 5,887 Pointsi added the the code guil used, but i cant see the icon even if i remove the overflow hidden property
and when i add the hover state like this, nothing happends
.nav a:hover::before {
left: 10%;
}
do i need to download the files for the icons guil is using or does it matter?
Marcus Parsons
15,719 PointsAfter changing the icon to 
I was able to see the icon clearly. It was off from the button of course. Did you read my updated comment?
Marcus Parsons
15,719 PointsI was able to make a neat transition, though, by setting this:
.nav a::before {
font-family: 'icomoon';
content: attr(data-icon);
color: #fff;
position: absolute;
//Changed left to -1000%
left: -1000%;
top: 10px;
transition: .4s;
}
erdragerdragsson
Courses Plus Student 5,887 Pointsi still cant see the icon hmm :/
i changed the data-icon back to the one i had first and now the transition works, but i does not overflow hidden
for the data-icon guil used, to i need to download something?
Marcus Parsons
15,719 PointsGuil is using an old version which is packaged as part of the project files. I don't know where you got your icomoon files, but that's where I got the ones I used. I assumed that you had done the same thing since you are using some of the same code. With those icomoon files, though, I had to use the old codes that Guil uses to get them to even show up. I honestly have no idea what to do next.
erdragerdragsson
Courses Plus Student 5,887 Pointsi choosed 3 icons at icomoon then downloaded a file with 4 differents format (.eot .woff .ttr .sbg)
does that effect anything? did guil use different format files for those icons he used, or does it even matter?
Do you know anyone who might know whats going on? Guil Hernandez ?
Marcus Parsons
15,719 PointsIt may be that I'm an idiot, and I forgot how icomoon worked. I don't even think it's an old version per se, actually. I think that the ones that Guil includes only have those icons in the files that he uses on the page. That's why I was able to use that code, and you weren't. I feel pretty dumb right now! LOL!
erdragerdragsson
Courses Plus Student 5,887 Pointsoh okey, that explains pretty much, but i still dont get how the overflow thing isnt working? :/
Marcus Parsons
15,719 PointsThe overflow issue may be because Guil's layout is using flexbox and yours is not. Then again, I really don't know. Good luck, erdrag!
erdragerdragsson
Courses Plus Student 5,887 Pointsyeah, i fixed it sort off, i displayed it none, then at hover i displayed it inline, but now the transition is gone but anyway,
thanks for helping me! i appreciate it:)
EDIT: I fixed it with the z-index property!
Marcus Parsons
15,719 PointsYay! :D It seems like you deserve your own best answer :P
erdragerdragsson
Courses Plus Student 5,887 Pointsone thing more :P do you have any idea why the icons transitions leave a trail ?
Marcus Parsons
15,719 PointsIf you're still using that "left: 1000%" property, the trail is from where the icon is placed all the way off the screen and transitions to the second location. If you don't like that, you could set the display of that before declaration to none, and then just have it display on hover.
Marcus Parsons
15,719 PointsMarcus Parsons
15,719 PointsI notice that you don't have a
top
property set correctly for yournav a::before
selector. You need to give thattop
property some value instead of just "px".If that does not fix your problem, please come back and post your full code. It will help us better help you if we have more than just a snippet of code. Thanks!