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
Brandon Brigham
3,716 PointsWhy is HTML not active?
Hi,
On my site I'm working on (http://villa-terrazza.com/2014NewSite) there is a left sidebar area where the text is not active. In other words, I can't highlight any of the text or click on any of the links. Again it's the far left side below the green Sidebar menu. I think it has something to do with the brown box image with the text 'Furnishing Your Escape' but I'm not totally sure. Any ideas?
Thanks!
6 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Brandon,
I'd like to point out that your social links in the footer area are also inactive because of this problem. I can see that you've updated the z-index for the "Find Us" box but you're going to have to keep doing that for everything that's put in the wrong spot on that left side.
There is something covering it but it's not a div. It's css generated content on the outermost div.
.site:before {
background-color: rgba(0, 0, 0, 0);
content: "";
display: block;
height: 100%;
left: 0;
min-height: 100%;
position: absolute;
top: 0;
width: 182px;
z-index: 2;
}
In the original theme this was meant to be a background strip for the "secondary" div. I think at some point you must have given this a transparent color because it interfered with your design. The reason your brown box and the green nav above it worked was because you had placed those inside the secondary div. Anything inside this secondary div will not be covered by the strip because its set at a z-index of 2 as well.
Your "Find Us" box was placed with the main content area which is at a lower level than the strip and so it was covered. Same thing with the social links. You placed your additional footer content outside of the <footer> element and so it is also lower than the strip.
I think given your restructuring of this, the original purpose of this strip is no longer relevant and can be removed. Given it's transparent color you're not really using it anymore. Your light brown main content background is now serving as the entire background for that area. I would say comment out the css above so you can bring it back in if needed. Then your social links will work and you don't really need to set the z-index to 10 on the other items.
Or you could give your footer wrapper a higher z-index so the social links are above this strip.
Related to structure -
I recommend that you move your additional footer content back inside the footer element. It looks like the black strip above the wordpress link was meant for supplementary footer content. You could move your social links and site navigation inside that container and change its background to white. This would also get your social links working again because the footer was set at a higher index than the sidebar strip.
Andres Altuve
16,274 PointsIt looks like you have a div on top of it. If you add a z-index, it works.
Add the following code to the stylesheet.
.wpb_row *, .wpb_row *:before, .wpb_row *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; z-index: 10 !important; }
Im not sure if it is the best solution, but it works.
Tommy Gebru
30,164 Pointsyou have a beautiful site, i am not sure what area is unresponsive is it the "whats new" link or the brown 'Furnishing Your Escape' box?
Brandon Brigham
3,716 PointsThank you, It is the area underneath the 'Furnishing Your Escape' box - The 'Find Us' box
Brandon Brigham
3,716 PointsThank you Andres!
Brandon Brigham
3,716 PointsThank you Jason! I moved the footer content back inside the footer element and that definitely fixed the problem. Thanks for your help!