Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Kyle Sox
PLUS
Kyle Sox
Courses 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.

2 Answers

Kevin Korte
Kevin Korte
28,109 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.

Kyle Sox
Kyle Sox
Courses Plus Student 9,946 Points

Thanks Kevin that fixed it. I took out the wrapper too, that didn't seem to do anything. Positioning is confusing to me for some reason.

Kevin Korte
Kevin Korte
28,109 Points

Good to hear. Positioning might be one of the toughest things to get down. Can't really do much without positioning content. Just keep working on it, you'll eventually get there.

James Barnett
James Barnett
39,199 Points

The best way to learn positioning is to work through learnlayout.com and then do this in CSS with floats, no absolute positioning.

Kyle Sox
Kyle Sox
Courses Plus Student 9,946 Points

Thanks James, I'll do that. I think I saw this link on one of your other posts. Good stuff.