Hacking MySpace

As I said last week I would cover how to put your group members and topics into a div here it is. The benefits to this are that you can then position the topics anywhere you like in a group div layout, they are not just confined to the one place.

This tutorial will be pretty easy for those who understand div positioning, but I will explain that in a little detail as well for those who don’t understand it yet.

The Code

The code is split into two parts, the first being the CSS to position the div and the second being the div itself (not the same as normal div codes).

The CSS

The CSS is pretty straightforward, just copy and paste this into your stylesheet and change the positioning and that will be you ready to go:

.topics {display: block; position: absolute; top: 600px; left: 50%; margin-left: -400px; padding: 5px; border: 2px solid white; width: 600px; background-color: transparent; background-image: url(”pic_url_here”); background-position: top center; background-repeat: repeat-y; z-index: 1;}

Seems pretty straightforward now doesn’t it?

The div code

You need to place this at the very end of your group description. Make sure there is nothing after it, otherwise your in for all sorts of trouble with your code.

</td></tr></table>
<div class=”topics”><table><tr><td>

What this does is ends the table that the members and topics are in already, then starts a new div (the topics div you just created) and starts a table inside that. This should then make the topics and members move to where you have positioned them in the CSS.

A little about div positioning

You need to start by making sure that the div is positioned absolutely (meaning that position:absolute; is in the CSS code, which if copied from the code above it should be).

After absolute positioning you need to make sure you don’t change the left:50%; under any circumstances. What this does is makes the div start from the very center of any page (no matter what resolution the user is using). You then have to position left and right using margin-left:XXpx; which is simple enough once you play about with the numbers a bit. Note that “XX” is a number and it can be negative if you want it to be.

Positioning from the top of the page just uses top:XXpx; which is easier than the left positioning as it is absolute, just play about with the numbers, increasing or decreasing them to suit your need, it should become nearly second nature to you if you do it as often as some people do.

Related: