« MOD: Fix an Element In Place (so it doesn't scroll w/the page) »

Sometimes it's adventageous to fix an element of the layout in-place so that it doesn't scroll with the rest of the page. This is a technique I often use, mainly because I like to keep primary branding (logo) and navigation always visible and accessible when possible.

To achieve this effect, some simple CSS added to the Custom CSS Panel in your Squarespace website adminstration will do the trick.

Fix an Element in Place:

This will fix the sidebar1 in place inside its parent container #sidebar1Wrapper

#sidebar1 { position: fixed; }

Example: The page header (containing the Vuela logo and the primary navigation), and the sidebar (containing the blog navigation links) is fixed in place on this webpage. Here is the CSS we used for these elements:

#pageHeaderWrapper { width: 340px; float: right; margin-top: 30px; }
#pageHeader { position: fixed; }

#sidebar2Wrapper { width: 340px; float: right; }
#sidebar2 { position: fixed; width: 340px; top: 190px; }

When 'position: fixed' is applied to an element it takes it out of the natural flow of positioning in relation to the elements around it. Because of this, we add 'top: 190px' to #sidebar2 in order to move it far enough down the page to not overlap the page header.

Stick the footer to the bottom of the page:

#pageFooterWrapper { position: fixed; bottom: 0px; }

I like to apply border / background styling so that when the page content scrolls behind the pageFooter, there is enough definition to achieve a favorable effect:

#pageFooterWrapper { position: fixed; bottom: 0px; border-top: 1px solid #333333; background: #eeeeee; }

If needed, you can apply z-index which will make sure that the pageFooter is the top-most layer and always shows up on top of the other elements, with the rest of the page content scrolling back behind it:

#pageFooterWrapper { position: fixed; bottom: 0px; border-top: 1px solid #333333; background: #eeeeee; z-index: 5; }

Create a Layering Effect: If you like you can achieve more visual depth by creating a background image with a transparent drop shadow for your pageFooter to highlight the layering effect when content scrolls behind it.

To do this, create an image that has the background you want for the footer, and include a semi-transparent drop shadow along the top. The image only needs to be a few pixels wide since we will set it to repeat horizontally (repeat-x), and needs to be at least as tall as you want the footer to be - we will positionthe image to sit at the top of the footer background. Then add the background to the css applied to the footer, making sure to include any neccessary padding so that the footer text/content is positioned below the drop shadow:

#pageFooterWrapper { position: fixed; bottom: 0px; background: url(/storage/LayoutElements/footerBg.png) repeat-x top; padding: 20px; z-index: 5; }

Fix an Element Anywhere: You can use the same idea to fix any element to any side (top, bottom, left or right) of the page. For example, if you want to fix #sidebar1Wrapper in place 50px down from the top and 50px over from the left, you would use the following CSS:

#sidebar1Wrapper { position: fixed; top: 50px; left: 50px; }

Or, to position the same element 50px over from the right:

#sidebar1Wrapper { position: fixed; top: 50px; right: 50px; }

Example: On this webpage, the 'BLOG' button (Learn more about simple CSS rollovers) is fixed to the left, and the 'A Friend of Squarespace' button is fixed to the bottom right, like so:

#blogBtn { position: fixed; top: 120px; left: 0px; }
#sqBtn { position: fixed; bottom: 10px; right: 10px; }

Additional Notes:

• This type of positioning may not be supported by older browsers such as Internet Explorer 6.
• Since the element will not be scrollable with the rest of the page, make sure that the content contained in it (such as sidebar navigation) is short enough to be visible on smaller screens.

For Additional Reference:

• Quirksmode "The Position Declaration"

Comments

[Ben]

I really like the way your logo and buttons are fixed in place. Thanks for sharing

[Devender]

Cool tips!

I've implemented a few on my ss page. Although, I'm not clear how to the the button function? like the one you mention.. #blogBtn. Can you please elaborate?

Thanks again for all the great work and a very beautiful site.
-Dev

[VUELA]

Hi Dev! #blogBtn mentioned in this post is the name I gave to a button I created and inserted into the page, then positioned using the css method described in this post. Read more about rollover buttons in this new post: Simple CSS Rollovers.

[Mike]

What a super helpful instruction.

I too am curious about just adding a simple logo image and fixing it in place. I feel like, for the complete novice, there is missing instruction.

How do you "connect" that #BlogBtn with it's coordinates (and what is that anyway with the #, is that the file name for the graphic itself?), to your actual image file?

And where do you connect it so it all works nice? An explanation that my grandmother could understand would be super, because if I can't explain it to her, then I won't know how to do it either. And she's cooking dinner. So much of the confusion for all this CSS and XHTML stuff, I think, comes from really seeing how and where all the pieces go, how they work together.

Thanks for any further clarification you can provide. .

— M

[VUELA]

Hi Mike! A very basic explanation of html vs css is that html is written to create the page (to create containers, and put content into those containers) and is written in the page itself -- and css is written separately to style the containers and their content and is then applied to the page.

The information in this blog is written to be generally specific to creating websites using the Squarespace CMS (Content Management System). With Squarespace the basic html structure is already created for you, and you use Squarespace's editing interface to fill in your content, change the layout, etc. Squarespace offers a style editing panel and a custom css panel that can be used to change colors, fonts, background images, positioning, etc. To access the style editor and the custom css panel in Squarespace you need to log into your Squarespace website and click the paintbrush icon at the top right of the screen.

With Squarespace you can use the style editor panel or the custom css panel to customize elements already created by the system (ie: a logo in the page header). To do this you need to know how to find the name of the element you want to customize, then write the css to modify it in the custom css panel. The best way to find the names of existing elements in the page is to use Firefox along with an additional tool you can use with Firefox called Firebug. Once you have Firebug installed you can view your webpage in Firefox and right click on an element in the page you want to find the name of and select "Inspect Element" from the mouse menu. This way you can view the source for the page and see all the names.

If you want to add your own element instead of using one that Squarespace already creates for you, you can add some html to the page itself to create a container and put content into it, for example:

<div id="blogBtn">
put stuff in here
</div>

div is the container
id specifies the container's ID (name), so this element's name is #blogBtn.

Then you would add the css to modify it into the custom css panel:
#blogBtn { position: fixed; top: 20px; left: 20px; }

You can learn more about the #blogBtn I created for this site in this other post.

However, I recommend getting some basic instruction first for an introduction to html and css to understand what ID's are, what classes are, how to write basic html and css, etc. One link I found on a quick google search is HtmlDog - this tutorial is not specific to Squarespace and instead discusses a basic introduction to html and css working from scratch. I did not read it, it's just a quick link.

Other good resources are:
Squarespace Developers Forum
www.w3schools.com

[Mike]

Thanks so much, I really appreciate your clear and thorough explanation that's cleared up a ton of vague notions I had about how all the pieces go together. I recognize Squarespace for the fantastic tool it is, but they really should be more up front about the complexity of their system for anyone that doesn't have the technical expertise to do even the simplest of custominzing. And even in the style editor, there's layers and layers of tweaks that just don't work unless one understands the cascade, and how to work the parent child relationships to get what you want (i.e. 8 different link selectors each with their own hover, active states etc - page link, paragraphs link, section link, etc.)

You're last paragraph is now the base for my gameplan moving forward. Thanks again - look forward to learning more from this blog.
Cheers,
— M

[bldlmx bldlmx]

I like the writing structure of your blog and it does a pretty decent job of presenting the material. kyafdt kyafdt - Discount Belstaff Blouson.

[des]

i am trying to fix the background image to stop it from scrolling without the rest of the page but this technique isn't working... can you help me out?