all things graphic design

myspace div overlay

This tutorial is for people with a general knowledge of html and CSS. The example div overlay layout im using for this tutorial is located here and you have my permission to edit the coding on this layout to make your very own. I created this tutorial for people that would just like a simple explanation and the coding to use when creating a div overlay for their myspace.

return to menu

a clean canvas

This coding will get rid of everything on your myspace page and leave you with a blank canvas to work with!.

td td td td{
border:0px;
width:0px;
text-align:left;
}

table,td,tr{
padding:0px;
width:;
background-color:transparent
}

table table table{
padding:1px;
height:.01%;
width:100%;
}

table table,table table table table,table,tr,td{
height:0px;!important;
border:0px;!important
}

a.text,table div font a,table div div,.navbar font,tr td font{
visibility:hidden;
display:none;
height:0px;!important;
}

table table table table,table table table table td.text, td.text td.text table{
display:none;
}

td.text table table{
display:inline;
visibility:visible;
}

table td table tr td.text table{
visibility:hidden;
}

table td table tr td.text table table,table td table tr td.text table table td.text{
visibility:visible;
}

table a, div table td font {
visibility:hidden;
}

.navbar {
display:none;
}

div table form td font, div div table td font {
visibility:hidden;
}

table table a, div table table td b font, div table td p font, div table table table td font {
visibility:visible;
}

table {
border-collapse: separate;
}

.navigationBar table td {
visibility: hidden;
}

</style>

return to menu

stylizing

The CSS below will stylize and position your layout. This is the only CSS you will need for your overlay, its really quite simple when you don�t have to deal with all of the default CSS.

.bg{
background-color: white;
position: absolute; 
left: 50%;
top: 150px;
_top: 180;
margin-left: -270px;
_margin-left: -255px;
width:500px; 
height:400px; 
border: 15px solid white;
overflow-x: hidden;
}

.sidebar{
background-color: white;
position: absolute; 
left: 50%;
top: 190px;
_top: 230px;
margin-left: -230px;
_margin-left: -210px;
width:100px; 
border: 1px solid white;
overflow: hidden;
}

.aboutme{
background-color: white;
position: absolute; 
left: 50%;
top: 190px;
_top: 230;
margin-left: -100px;
width: 300;
height: 325px;
border: 1px solid white;
padding: 15px;
overflow: auto;
color:BBC5D1;
}

a.navigate:link,a.navigate:active,a.navigate:visited{
padding:2px;
color:fff!important;
font-size:10px;
display:block;
margin-top:0px;
cursor:default;
border-bottom:1px solid white;
border-right:1px solid white;
border-left:1px solid;
border-left-color:fff;
text-indent:1px;
text-align:center;
font-weight: bold;
font: 10px verdana;
background-color:F49BC2;
overflow: hidden;
width:100px;
}

a.navigate:hover{
padding:2px;
color:F49BC2!important;
font-size:10px;
display:block;
margin-top:0px;
cursor:default;
text-transform: none;
text-decoration: none;
text-indent:1px;
text-align:center;
font-weight: bold;
font: 10px verdana;
background-color:fff;
overflow: hidden;
width:100px;
}

a{
font-family:tahoma; 
font-size:10px; 
color:DCE4F0; 
} 
 
a:link{
font-family:tahoma; 
font-size:10px; 
color:DCE4F0; 
}

a:active{
font-family:tahoma; 
font-size:10px; 
color:DCE4F0; 
}

a:visited{
font-family:tahoma; 
font-size:10px; 
color:DCE4F0;
}

a:hover{
font-family:tahoma; 
font-size:10px; 
color:fff; 
}

p{
color:E93D76;
}

h2{
font-size: 18px;
text-decoration: underline;
color:F49BC2;
}

li{
list-style:none;
}

</style>

return to menu

keeping it centered

For this minimalistic overlay we are keeping the CSS very simple. Now if you want to change the width and height of your div overlay you will have to change the amount of pixels your div id is from all sides necessary to fit it into the desired position as seen in the last step with the "bg", "aboutme", and "sidebar" divs. The amount of pixels you need to use from the margin-left usually equals to half the width of the image you are trying to center. Left:50% helps center your div too so that is why it is included in the coding.

return to menu

browser compatability

To make your layout compatable in Firefox & IE you will more than likely have to set a certain position for firefox in which you would just use the normal margin-left: -230px;, and for �IE only� you would use the code _margin-left:-210px;. The only difference between the two is the underscore, in which you would use for IE because firefox will not pick the style up coded that way. You can use the underscore before any style and it will change the outcome of your layout in Internet Explorer only.

I always check how my layout looks in IE and FIrefox to make sure they are projecting my layout in a decent way, just by playing around with the pixels until its where I want it to be on each browser, since they are the two most used browsers for the internet.

return to menu

inserting div/bg

Insert your div overlay image in your �bg� div. Remember, if your image is a different size then the one we are using in this tutorial you will have to play around with the margin pixels to position it in the correct place (this goes for all of your divs).

return to menu

inserting div/nav

This is your navigation

return to menu

inserting div/about

This is where you write about yourself and whatnot <div class="aboutme"> <h2>About Me</h2> <p> stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here.stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here.stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here.</p> <h2>Another Section</h2> <p>here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here.stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here.stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here. stuff about you goes here.></p> </div> This is the final part of your html. You can put pictures, marquees, and anything you want in this section. And of course all of this coding goes in your about me section. Its as simple as that, 4 divs and very short clean coding!

return to menu