Tutorial
Click on thumbnailed images to enlarge
Here's the code to make a CENTERED myspace DIV, with the width of 800px centered.
Make sure the CSS is wrapped in this first:
< style type= "text/css" >/*VERY IMPORTANT*/
{css here}
< / style > /*VERY IMPORTANT*/
So here it is:
div.content
{position:absolute;
margin-left:-400px;
left:50%;
top:90px;
width:800px;
height:400px;}
That should center the div.
position:absolute; = allows it to be moved. BE SURE TO INSERT THIS!!!
left:50%; - like explained below, moves the div left halfway:
-----------------------------------------
e.g div = []
normal:
|[] |
left:50%;
| [] |
margin-left:-halfdivsizepx;
| [] |
-----------------------------------------
margin-left:-400px; = brings the div left (minus) so when left is set to 50% (half way across the page) the left side of the div will be half way across, now you want the center of the div to be half way so it's exactly center, so then you have to use the left:-XXXpx; - make it minus half the width of your div.
top:90px; = Moves the div down directly under the ad.
width:800px; = determines the width of the div.
height:400px; = determines the height of the div. If you don't make it a certain height, and you check to see what it looks like without putting any text in it, then you wont see it.
After all of that, you can start changing the look of the div, with background-image and font-family, color, background-color, border, padding etc...
Here's the code all-together:
< style type= "text/css" >
div.content
{position:absolute;
margin-left:-400px;
left:50%;
top:90px;
width:800px;
height:400px;}
< / style >
[IN THE WHO I'D LIKE TO MEET YOU'LL NEED TO PUT THIS:]
< div class= "content" >
Text here etc...
< /div >
Otherwise the div will NOT show up.
You will want to hide the myspace search form and navbar, to do so, look n my scripts. If you don't want to do this, then you can move the div down just underneath the navbar by:
Changing the top:90px; to top:166px;
Good Luck. Hope this helped.
Joe.
Tutorial Comments
Showing latest 10 of 10 comments

whats a div?
yo..im lost haha;;where do i learn 2 make them..or atleast read DIV lyouts better ?
um hi can some one make me a claire refeld div? i do not know how to make a div layout x-x
yeah.. um can someone please explain this?
T3eW3e --y0u need to get an image code such as
adjust left and right to how far u need them to be..
make the background image/color to where it matches your design..
then get codes for div scroll boxes that have top and left codes... play around with the numbers until u get the box/boxes where you'd like
you have it backwards.
you're supposed to set left at 50%, and adjust using margin left.
I have designes my own DIV layout, but dont know how to put it onto myspace, so it works, can anybody help me:S...i heard that you have to hide your original profile or something like that..i can do thatt, but what do i do next to get my own DIV Layer up and running..T3eW3e
will this be centered in ie and ff?
this looks cool. I'm definitely trying this on my next layout! =]
I'm using the Light Up The Sky
layout by Superednerd on my myspace and it's positioned to the left.
I tried all this and can't figure out how to get it in the center of the page.
Maybe you can help me out.
pleaseeee.
Tutorial Details
Author |
joespace
![]() |
Submitted on | Nov 17, 2007 |
Page views | 34,747 |
Favorites | 68 |
Comments | 10 |
Reviewer |
tripvertigo
![]() |
Approved on | Nov 17, 2007 |