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
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsLinks no longer link
This is not in reference to one of the tutorials. I am trying to build a personal website using what I have learned in the tutorials. I had my page linking working just fine for awhile. But, I was having problems with the sizing of the background behind the navigation (I'm not using <nav>). I got that problem fixed (at least for the desktop version). In the process my links stopped working. I have reviewed the appropriate tutorials, searched CSS-Tricks and MDN, but I am just not seeing the problem. I'd be happy to include a screen image and the HTML and CSS, but I don't know how?
I need some help from my friends (to quote the Beatles).
OK Let's start over:
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsDidn't solve the problem but I got a good laugh out of it. And that might be better.
5 Answers
shadrackndacayisenga
Python Web Development Techdegree Student 14,189 PointsI have assessed the main.css code. The main problem is that the .wrapper and .wrapper:after float is hiding the navigation links(on desktop layout).
To get the links to work you will have to use clear property to prevent the .leftheader * and *.rightheader from hiding behind wrapper when floated.
Add the clear : both; property to .wrapper * and *.main-footer selectors css.
See more on how to use clear property
clear: both ;
This will most likely display the links as desired.
Note: that , I had to clear CSS shows many other errors of mismatched properties on line 16,
font-family: 1em/1.5em 'Economica', sans-serif;
/*the above shows mismatch error in debugger.
You can either use font shorthand in case you want to include size as well otherwise
*/
font-family:'Economica', sans-serif;
/*Works fine*/
Forgot to : colons on line 46, 76, 202, 204. For the contact images to work use absolute url or use simply change ../example_image_file.jpj to /img/example_image_file.jpj something like
.contact-detail li .locpin a {
background-image: url('../img/example_image_file.jpj');
}
I suggest using an IDE , ore an editor with syntax highlighting like Komodo Edit for easy syntax highlighting to and debugging , or simply using a css validator like w3's jigsaw.
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsThanks. I knew there would be plenty of Newbie mistake. I'll try this out.
shadrackndacayisenga
Python Web Development Techdegree Student 14,189 PointsWell, that is mostly cases of overlapping containers or optimized display,position and other flow properties. Check for things like display , position, overflow property and see also whether the changes you made are cascading to the mobile @media screen sizes of choice.
That said, this is blind type debugging, since , I can really not know what is wrong without taking a look.
use to post your screenshot for a better debugging help.
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsI remembered I can drop the project to dropbox. here is a link
It doesn't look hot here. But I've tested it and it works. Now that I have saved it the link is hot.
OK, I just noticed you will get a 404 error when you click on the link. Remove that portion of the link after 'html' and it works fine.
jason chan
31,009 Points... -> click edit comment, will show you how to link things ont he forum. right now the links have been escaped for security reasons.
nik
8,925 PointsHi doug,
Looking at your page, I noticed your wrapper div height is set to 100% and covers your entire page including the main-header div. This is okay but your header is not inside the wrapper so it is being covered preventing the links from being clickable. If your header is suppose to be outside then remove the height and add margin-top: 10% to your CSS to push down the wrapper so it doesn't cover over your header.
wrapper {
width: 100%;
height: 100%; /* remove this */
display: block;
position: relative;
margin-top: 10%; /* add this */
}
Tried this myself and it works. The only question is if it fits your design :)
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsShadrack (above ) shared the 'clear: both;' idea. It seems to work. Is it a matter of preference which to use or is there a convention that would dictate the use of one over the other?
nik
8,925 PointsShadrack's method is perfect as it retains the .wrapper as the container holding all the body elements without adding spaces. So later if you make some changes, it won't throw your layout around or introduce some wierd anomoly. Mine was just a simple fix based off of what I saw from looking at you're page.
Doug Hawkinson
Full Stack JavaScript Techdegree Student 25,073 PointsThanks.
Shaun Moore
6,301 PointsShaun Moore
6,301 PointsPsst! https://www.youtube.com/watch?v=SkyqRP8S93Y ;) have a nice day :D