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.
- Part One: MySpace DIV Overlay [The Base]
- Part Two: MySpace DIV overlay [Navbar / Content]
- Part Three: MySpace DIV overlay [Comments]
- Part Four: MySpace DIV overlay [Color]
- Dark minimal MySpace DIV overlay
- Minimal Lime MySpace DIV overlay
