I surf around a lot and like to visit other forums where people ask questions and provide answers. I explore the programming and design forums and often see tons of questions regarding “How do I make a div overlay on Myspace?” Or more importantly, how do they make an div overlay period. What are these overlays? How do you do them? And how might you use them to alter pages that maybe shouldn’t be altered to begin with? What you learn here can be applied to Myspace as well as any other social networking sites. All they need to do is allow you to input Cascading stylesheet definitions and alter the HTML code. We will stay away from customizing the code for any particular site and try to stay at a high proof of concept level. We will show you the basics here on the Programming Underground!
So what is a div overlay and why should you even care? Well you may not care but div overlays are one way to alter pages that were probably not meant to be altered in certain visual ways. For example, MySpace or Facebook allow you to alter profiles, but as far as altering the entire page, well, they don’t want you to cover up any advertising they have. Maybe you want to cover up a copyright or some form of banner (watch out for legal problems that may arise). A div overlays is the process of taking a <div> HTML tag (which is a container for other HTML elements such as images, text, or even other <div> tags) and placing them at a higher level over the top of the original page…. just like you would overlay a piece of clear plastic over a chart before writing on it.
Div overlays can be transparent, but most of the time that defeats the purpose or goal of the overlay to cover up what is underneath it. To help understand this concept, think about two sheets of paper. One sheet is a full 8×11 piece of paper which represents the web page you see in the browser. The second sheet can be the same size but most likely smaller and sits on top, covering whatever is on the other sheet. This second sheet can then have stuff drawn on it and display whatever you want.
Here is a small picture to show how this works…
As you can see the page underneath is your web page and using a <div> element at a higher level, we can overlay it on top of the page and cover up part of the page. You could even cover the entire page if we make it the same size as the web page underneath.
So how do we setup the overlay to work like this? Well, this is where cascading stylesheets come in. If you are new to the idea of cascading stylesheets (CSS), think of them as style information attached to HTML elements which control their look and presentation. HTML tags are the structure and the CSS is its “style”.
By creating a div element in HTML and then telling it to “rise above” the rest of the page, and out of the normal flow, we can position it over other elements. We do this with CSS properties like z-index (which controls how elements are stacked on one another) and also position: absolute which allows us to position an element based on its “top” and “left” properties.
To see this in action, we are going to take a simple page like Myspace.com Canada which had a really ugly picture of that weirdo we call a prime minister Stephen Harper and change it. Some Canadians would say he is pretty much a monster, so lets change him into one for Halloween. This is a screenie of the page…
As you can see he is right there pretty much in the middle of the page where they advertise that he will be blogging for them. For our example assume that we can put in a little HTML code into the page (which you can to some extent in MySpace or other sites) and that we can also modify the CSS code by adding some of our own.
We need only two things to make this work. First is the HTML code which outlines our DIV tag. Here is an example we are going to use…
<div id="overlay"> <img src="monster.jpg" border="0"/> <div style="color: #FF0000; font-weight: bold; padding-top: 3px;">VOTE FOR MEEEEE!</div> </div>
Notice that our div tag encapsulates an image tag for our monster and another div tag for our “Vote for meeee!” line. The outer div tag is given the ID “overlay”. This name can be any name you want, but it is important to label this div with a unique identifier name because the CSS we are going to add needs to reference this div tag as you will see in a minute.
This div tag can be put anywhere in the page as long as it appears when someone visits the page to see it. I think on Myspace you can put this into templates or into little areas which you can put specialized content.
Once the page has this content, we need to add some CSS definitions which will reference the div tag we just added, take it out of the flow, raise it up over the other elements and position it right over the picture of Steven Harper. Here is what our overlay code might look like…
#overlay {
position: absolute;
background-color: #FFFFFF;
color: #FFFFFF;
border: #c0c0c0 solid 1px;
z-index: 1;
padding-top: 8px;
top: 205px;
left: 410px;
width: 216px;
height: 245px;
text-align: center;
}
What this is saying is to take our div element with the id of overlay and make its positioning absolute (which takes it out of the normal flow of the page), change its background to white along with its color, put a nice little gray border around it (like the other page elements), raise it up above the others by changing its index, add some padding for the elements in the div, adjust its position to be 205 pixels from the top and 410 from the left, make its 216 pixels wide, 245 pixels tall and align the text to the center.
Sounds like a mouth full and this style definition certainly is. You could break the style definition up to customize individual pieces. However the positioning, z-index, top/left/width/height has to modify the outer most div tag (the container) to make this all work.
Once we have these two pieces in line, we should see the overlay sit right above Stephen Harper’s picture and replaced with our own. Here is what it looks like….
Oooh now it is truly scary!
Now here are a few tips you can use to make this overlay a bit more interesting…
1) You can stack more than one layer on top of one another, just like pieces of paper. You could stack an overlay on top of your overlay if you wish.
2) If you can put a piece of javascript code on the page, you can also have it fetch other HTML elements you didn’t create and get their position, width/height etc and know exactly where to place your overlay. Look into the javascript document object and its function called “getElementById()”
3) You can make the overlay cover the entire page and then essentially redesign your whole Myspace page to whatever you want. You may have seen this once in awhile on other people’s profiles.
4) Ever see those popup graphics that sit right over the web page you are visiting advertise something and have those “close” buttons? Maybe the graphic is a car that is driving across the screen or something advertising the new Chevy Tahoe? Those are div overlays as well. So you can make them dynamic and interactive.
5) Just about anything you can put in a div tag you can put in the overlay including tables, graphics, even flash elements.
6) Using javascript you can even make overlays fade in and out, adjust transparency and move around the screen or with your mouse cursor.
Given this basic understanding here you can make some great things. Try making a popup calendar on your web page where the user clicks a little calendar icon and it puts up a div overlay showing the current calendar month. Lets the user choose a day from the calendar and it modifies some form elements. Try making your own little cartoon using flash and put it in an overlay. Try stacking overlays on one another and see if you can make a cartoon of a character running and the background scrolls over and over again like those old bugs bunny shows.
The world is your oyster! *apply overlay* The world is your toaster!
Thanks for reading. 🙂
