myspaceprodesigns.com
div overlay tutorial
- bookmark us
- add me on myspace
- add me on xuqa
- add me on yfly
Boredom Notes Div Layout
author: Uday
10/12/2007 02:55 AM
10/11/2007 10:26 PM
Re: Can Sum1 please help me :(
div tutorial introduction
• Introduction • Preparation • Hide Everything • Your First Layer • Add Picture • Add Contact Links • Understanding Overflow • Background Images • Z-Index • Div Overlay Generator •
The first thing we need to do build a div layout, after understanding style sheets and MySpace selectors is to understand a little CSS and how to create a layer. Well, this is how we do it:
.layer{
left:50%;
margin-left:XXXpx;
top:XXXpx;
position:absolute;
height:XXXpx;
width:XXXpx;
z-index:X;
}
explanation
.layer - That's your selector. All of the properties we assign to it will define that particular selector. The example above is what we would use to build a layer. If we weren't building a layer, we could just put color, background, text, or various other properties and assign anything we wanted to have those properties that class.
left:50% - This just means that our layer's left edge will be positioned XXXpx from the centerline of the page. I like to use left:50% because it will position everything from the center of the browser on all browsers. This is important if you want a page to look the same no matter what browser your viewers are using.
margin-left:XXXpx - This is telling our browser where to render our layer compared to the center (left:50%) of the page. The XXX will be a numerical entry and states where the left edge of your layer begins. If the left edge is to the left of the center, it will be a negative number. If it is to the right of the center, this will be a positive number.
top:XXXpx - This is telling our browser how far from the top of the page (0px) we want the top of the layer to start. On MySpace, the bottom of the navigation menu is at 155px, so usually, we don't go any lower than 155px. Please remember that as you position your layers as you may inadvertantly cover the MySpace banner advertisement at the top of the page, which would break Terms of Service and result in the deletion of your MySpace account.
position:absolute - This says that the positioning we defined above is positioned exactly XXXpx from the center of the page and XXXpx from the top of the page. I do not recommend using position:relative on MySpace unless you really know what you are doing. Relative positioning positions your layer relative to where they are in the body of your page, which is not good when different people use different resolutions if not applied properly. To learn more about positioning, you can check our tutorial on CSS Positioning after you finish this tutorial.
height:XXXpx - This just tells your browser how tall the div layer is.
width:XXXpx - This just tells your browser how wide the div layer is.
z-index:X - This defines the stacking order of your div layers. Selectors with higher z-indexes go on top of selectors with lower z-indexes.
There are lots of other properties we can use in any selector. As we begin our own overlay, you will get experience working with these properties and watching what they do to each layer.
The last thing we need to do is assign content to each layer. This content will go after your style sheet since we only want to define our selector properties within the style sheet. This is how we do it:
<div class="layer">Content of Layer Here</div>
OK, so now we know the basics, click here and we'll get started!
Comments
View Comments (27) • Leave Comment • Support Forum