Please note that I no longer support custom MySpace overlays. Code examples are proof of concept. MySpace may have modified their layouts which may have had an impact on overlay code from this site.
The following is a much needed update to my MySpace DIV overlay tutorials. Parts 1 – 3 covered the basic DIV overlay to cover the default layout, creating a two column layout [main content & sidebar], and adding a comment box.
Due to the fact that these tutorials are meant as a reassuring push in the right direction [as far as learning basic HTML and CSS], the codes will serve as generic examples. I urge users who yearn for real individuality and style to reference the various online CSS / HTML resources available online.
For this particular tutorial we are going to leave the previous content areas as-is. Yes. The theme here is minimal hand holding. Hopefully what you learn from here will inspire you to conduct your own research on your own time. Let’s go ahead and create a new DIV with a width of 529px and a height of 400px. Within this new DIV we’re going to create two additional DIVs and position using float: left and float: right. Add the following HTML to your ‘I’d Like to Meet’ section under your sidebar DIV:
<div class="floatcontainer">
<div class="leftdiv">
<p>We're going to float this container to the left</p>
</div>
<div class="rightdiv">
<p>We're going to float this container to the right</p>
</div>
</div>
Add the following CSS into your ‘About Me’ section:
.floatcontainer{
clear: both;
width: 520px;
height: 300px;
padding: 5px;
background-color: 999999;
}
.leftdiv{
float: left;
width: 225px;
height: 280px;
margin: 2px;
padding: 3px;
background-color: 865433;
}
.rightdiv{
overflow: scroll;
float: right;
width: 275px;
height: 250px;
margin: 2px;
padding: 3px;
background-color: 888888;
}
Use the above code as an example for creating your own DIVs. For DIVs which contain large text bodies, add overflow: scroll to the appropriate class. Doing so will force any text or content that expands beyond the DIV borders into a scrollable container.
Adding color to your DIVs is as easy as adding background-color: color code;. For those interesting in adding a background image, use background-image: url(‘http://URLofImage.com’);. DIVs with background images require an additional property: background-repeat. Use background-repeat to tell the browser to repeat the the image both horizontally and vertically (repeat), repeat horizontally (repeat-x), or repeat vertically (repeat-y).
The basic MySpace div overlay that I have written the tutorial series for is available for download here.
