Adrian World Design
  • Services
    • Website Consulting
    • Startup Consulting
    • Zend Development
  • Portfolio
    • My Framework
  • Knowledge
    • Web Standards
    • PHP bare-bones
    • Zend Framework
    • Zend Framework 2
    • Git - Github
    • Search Engine Optimization
    • Web Hosting
    • Linux
    • Microsoft Windows
    • Web Browsers
    • Mobile Devices
  • About
    • Business
    • Professionally
    • Personally
  • Contact
    • Contact Form
    • Phone
    • Email
    • Messaging

Knowledge Base Overview

Offset elements

Knowledge ⇒ Web Standards ⇒ Cascading Style Sheets ⇒ Offset elements
Tweet
Share on Tumblr

Created: Apr 12, 2012 12:32:52 PM CSTLast updated: Apr 12, 2012 1:51:37 PM CST

I've just discovered a little style problem with the Facebook Like button. Somewhere within all the elements is a div that holds the iFrame element. This div element has an inline style "top: -2000px".

This is clearly not good, i.e. how you should hide an element with an offset!

Offset elements

You can easily hide an element from view with offset. Lets see what they did in Facebook

<div style="position: absolute; top: -2000px; ">
...
</div>

The position attribute takes the element out of the current flow. The negative value from the top attribute positions the element 2000px above its current place; which is relative to the parent usually defined with a "position: relative" style.

Left versus top

Now here's why this is not a good thing.

If such a element on your page is somewhere below the 2000px range the element suddenly becomes visible again in your webpage.

On some pages on this website I have decided to place the Facebook Like button at the end of the document which some times is longer than 2000px. I don't know when this started because this is created via their JavaScript and therefore it is more or less outside my influence. The only option: I have to move the Like button above the document.

A better solution is to move an element to the left. There is usually no way you can scroll ever to the left. With a style like "left: -2000px" an element will be always out of site.

blog comments powered by Disqus
Prev
Next

Powered by FeedBurner Load our "Knowledge Base" feed in your RSS feeder

Follow us on Twitter
Follow us on Facebook
Follow us on LinkedIn
Follow us on Google+

All rights reserved, Adrian World Design ©2009–2021 Powered by Wejas Framework

Jump to Top