Part 2: MySpace DIV overlay [Navbar / Content]

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.

UPDATE: Individuals who are not getting the results they want copying the code below directly into MySpace will need to copy n’ paste into a plain text editor then into MySpace.

This is part two of a series aimed at providing the basic structure for a complete MySpace DIV [profile] overlay. In order to continue with this portion of the series, you will need to have the basic base DIV in place. Check the first part of the series here: Part One: MySpace DIV overlay [The base].

My hope / goal is provide the bare bones structure for a complete overlay. Once the framework of the profile is in place, the idea is for each user to utilize basic CSS to style and tweak each profile to suit their own tastes and personality.

If you recall, we will be creating our DIV overlay using “layers”. Today we’ll create the basic navbar, a main content area, and a sidebar. This means that we will be using three seperate DIVs. We will build upon the previous code from part one of the series. Paste / replace the following code below into your ‘I’d Like to Meet’ section.

<div class="main">
<table style="width:800px;
height:800px;
cellpadding:0px;
cellspacing:0px;
background-color:FFFFFF;">
<tr><td valign="top">
<ul class="navigation">
<li><a href="http://">Link1</a></li>
<li><a href="http://">Link2</a></li>
<li><a href="http://">Link3</a></li>
<li><a href="http://">Link4</a></li>
<li><a href="http://">Link5</a></li>
</ul>
<br />
<div class="content">
MAIN CONTENT AREA
</div>
<div class="sidebar">
SIDEBAR CONTENT
</div>
</td></tr></table></div>

Append the following CSS to your existing stylesheet in the ‘About Me’ section. Make sure that you paste the following code within the existing <style type=”text/css> and </style> tags. [Edit in safe mode]

.navigation{
border-bottom:1px solid;
border:1px solid;
}
.navigation li{
display:inline;
list-style-type:none;
padding:0 20px 0 0;
}
.navigation a:link, .navigation a:visited{
font-family:arial;
font-size:11px;
padding:3px;
}
.navigation a:hover{
text-decoration:none;
padding:3px;
}
.content{
width:525px;
float:left;
padding:5px 5px 5px 7px;
margin:5px 0 0 5px;
border:1px solid;
}
.sidebar{
width:210px;
float:right;
padding:5px 5px 5px 7px;
margin:5px 5px 0 0;
border:1px solid;
}

I’ve added a solid 1px border to each DIV for visualization purposes. To get a better grasp of CSS boxes, check the following interactive box model.

My hope is that most of you who find yourself reading through this series can take the base structure and expirement to create your own unique profile. Use the following CSS cheatsheets as reference when needed: Added Bytes – CSS Cheatsheets (well worth a bookmark).

5ThirtyOne

Derek Punsalan

Part 2: MySpace DIV overlay [Navbar / Content]

Syndicate

Advertisements

Most Recent

Categories