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!
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
Kyle SoxCourses Plus Student 9,946 Points
Div Positioning Woes
So I'm moving along pretty good with my treehouse classes so I thought I'd try to add some SM icons to the top of a page of an existing clients website. The site is a WP theme. I am adding the SM in the header.php so they will appear on all pages. I set the position to fixed, but they follow me down the page when I scroll. I haven't started any php training yet, maybe I'm missing something?
Here's the site - http://www.clearon.com/
I'll post the code if you need me to.
Kevin Korte28,148 Points
You have a couple of issues going on.
For starters, the only page long enough to scroll on my screen is the videos page.
The reason they follow you down the page is because you set the position to fixed. When something is fixed, it doens't move as the page scrolls. This is mostly commonly used to fix a header to the top of the screen so the nav bar is always displayed no matter how far down the user scrolls.
You could change the position to absolute. And than use a left margin to push the social icons however far to the left you need them. Floats won't work here. That's a quick and dirty solution, but I generally try to avoid using absolute positioning, and instead would work on restructuring the head so the social icons are where you want them without having to use an absolute position.
One more piece of advice, at least on the videos page, your CSS that controls the social icons is inline styling on the page. Which means it will only work on that page it's on. Cut that bit of CSS code out of it's inline style tags and put it in the sites external CSS document, so all the pages will pull the same style for that class. Much cleaner and easier to maintain.