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 PointsNeed help with formatting on web page
Hello,
Please check out this site I'm working on:
If you go to the bottom of the first section "Abstracts & Publications" the last blue hyperlink does not work. Part of the issue is this line of code:
.page-title:before {
display: block;
content: " ";
height: 150px; /* Give height of your fixed element /
margin-top: -150px; / Give negative margin of your fixed element */
visibility: hidden;
}
If I adjust height to 0px and margin-top to 0px it fixes the problem. However, this causes a new problem with the left sidebar menu. In particular when clicking on a left menu item the scroll moves down below the specified anchor text/element.
Does anyone know what workaround I need to do to keep the left menu bar working correctly and allowing the links at bottom of sections to work?
Thanks for your time!
2 Answers
Steven Parker
243,318 PointsNice looking website!
What happened was you expanded your paragraph with a pseudo-element that is not visible, but overlays the previous paragraph. This makes the link at the end unreachable (like a button under a glass window).
What you could do instead is add a separate anchor element that has no height, and is relatively positioned above the paragraph far enough to slip behind the header. Remember to remove the .page-title::before pseudo-element from the CSS!
<a id="Press" class="offset-anchor"></a> <!-- add one like this for each section -->
<p class="page-title">Press</p> <!-- id was moved to the anchor above -->
...
.offset-anchor: {
position: relative;
top: -120px;
visibility: hidden;
}
Steven Parker
243,318 PointsThe new anchors go directly before each page-title paragraph. The id of the paragraph element is moved to the new anchor.
It looks like you've already done this for the "Press" section. Now just do the same with the other sections (just search for "page-title").
Then to make it work, you just need to add the CSS for offset-anchor and remove the CSS for page-title::before.
Brandon Brigham
3,716 PointsOk great thanks Steven I got that part but if you click on Press on the left hand side it scrolls down too far - Do you see that on your end?
Steven Parker
243,318 PointsIt doesn't look like you've added the CSS for offset-anchor yet. It needs the CSS to offset the position.
Brandon Brigham
3,716 PointsI've added this to the css
.offset-anchor: { position: relative; top: -120px; visibility: hidden; }
Aha! I took off the colon and it did the trick!
Steven Parker
243,318 PointsI guess I wasn't seeing it because due to the syntax error the entire rule was being ignored.
Brandon Brigham
3,716 PointsNo worries Steven thank you!
Not sure if you could figure this one out too but since we changed this coding when you start say on the home page, hover over Resources (for example) and click on "Press" it will take you to that section of that particular page but when you navigate this way the section title is covered by the header again.
Do you know a way to fix this one?
Steven Parker
243,318 PointsThe other pages need that same CSS and anchor arrangement. Perhaps when you have it installed on all pages it will perform as expected when switching pages.
Brandon Brigham
3,716 PointsWell unfortunately when you try to navigate from any page other than Resources TO any of the Resources dropdowns it takes you below the desired section you choose =(
Steven Parker
243,318 PointsBut you still have not converted the other pages yet. It may work differently once every page has the same anchor arrangement and the same CSS.
Brandon Brigham
3,716 PointsHey Steven,
So I added the new code to every page now and am still seeing the same issue - I tried to put the old piece of CSS in there
.page-title:before { display: block; content: " "; height: 150px; /* Give height of your fixed element / margin-top: -150px; / Give negative margin of your fixed element */ visibility: hidden; }
This helped the new menu issue we are trying to solve but it left huge gaps between each of the section because of the height: 150px; element -
Any ideas?
I took that CSS out for now so you could look at it.
Thanks for your time man!
Steven Parker
243,318 PointsThis is getting complicated. Here's two more ideas:
- Convert the
<link>that brings in the CSS to a<style>using@include. - Move the CSS from the stylesheet to inline (ugh!).
Beyond that, I might need to experiment a bit. Any chance you could load this up into a workspace and post a snapshot of it here?
Brandon Brigham
3,716 PointsBrandon Brigham
3,716 PointsThis is what I have for the 'Press' section:
<a id="Press" class="offset-anchor"></a><p class="page-title">Press</p>But when I click on the left menu for 'Press' it takes me below the Press title.
Brandon Brigham
3,716 PointsBrandon Brigham
3,716 PointsOk I'm not following you on that last part - hmmm -
I haven't loaded anything onto workspace either - I'll take a look though and see
Brandon Brigham
3,716 PointsBrandon Brigham
3,716 PointsHey Steven,
I tried uploading this to a Workspace but with little luck - It seems my client has 'temporarily' forgotten about this little detail so I'm holding off on it for now - I really appreciate all your help on this!
Steven Parker
243,318 PointsSteven Parker
243,318 PointsI'm happy to help!
Start a new question if something else comes up.