Exactly Center A Myspace DIV

CSS Tutorials

Tutorial

Click on thumbnailed images to enlarge

Make sure you put all of the coding (< style > etc...) together, don't leave any spaces.


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?

By deathbleach on Jul 8, 2009 11:52 pm

yo..im lost haha;;where do i learn 2 make them..or atleast read DIV lyouts better ?

By XxXlonelyXxX on Jul 7, 2009 11:43 am

um hi can some one make me a claire refeld div? i do not know how to make a div layout x-x

By xenosagamomo on Jan 2, 2009 7:46 pm

yeah.. um can someone please explain this?

By Jesse001 on Dec 23, 2008 10:13 pm

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

By emmijane on Sep 11, 2008 11:16 am

you have it backwards.
you're supposed to set left at 50%, and adjust using margin left.

By miguelS on Sep 2, 2008 2:37 am

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

By T3eW3e on Jun 18, 2008 11:49 am

will this be centered in ie and ff?

By mikazukix on Apr 27, 2008 9:32 pm

this looks cool. I'm definitely trying this on my next layout! =]

By shmuggy on Apr 16, 2008 7:58 am

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.

By tatertott4 on Apr 2, 2008 9:50 pm

Tutorial Details

Author joespace View profile
Submitted on Nov 17, 2007
Page views 31,108
Favorites 68
Comments 10
Reviewer tripvertigo View profile
Approved on Nov 17, 2007