MySpace Tutorial 1: The DIV Element
Okay… here’s the deal with <div> elements. All they do is create a box so you can place content inside. Using CSS (Cascading Style Sheets), you can move and resize it, put borders around it, color it in, put an image inside or as a background, etc.
All HTML (HyperText Markup Language) elements have to have an opening and closing tag, like this:
<div>
this is just random text.
</div>
The first opens, the second closes. Notice the slash? That tells the browser to stop doing whatever element you’re talking about.
So in the example above, we’re saying
- MAKE A BOX AROUND THE NEXT THING I SAY!
- Then, PUT SOMETHING INSIDE IT!
- Then, STOP MAKING THE BOX NOW PLS K THX!
With HTML, you give your page a skeleton. With CSS, you fill it in with flesh and clothes and make the skeleton look presentable.
If you make DIV box and put nothing in it, you can’t see it, because all it is is a box. You haven’t yet told it to do anything. With CSS, you tell it to do something. Check this out:
<style>
div {
position: absolute;
top: 100px;
right: 50px;
color: #ff0;
background: #f00;
border: 2px solid #f90;
width: 200px;
height: 200px;
}
</style>
The “style” tag tells the browser that you’re about to define a few rules that it should try to play by. Notice that it opens and closes. You want your style tags to be at the top of your HTML document.
MySpace gives precious little room for that, so you just put it as close to the top as you can. The first thing the browser will see that you can edit, and that will take HTML is the “Interests” box. I know the first edit box is the “About Me”, but the browser sees the crap on the left side of your actual profile page first, makes more crap all the way down, and then starts on the right side and goes down. Browsers generally read from left to right, up to down. The way MySpace is set up, in a table of columns and rows, the left side doesn’t stop making HTML until the bottom, and then starts again at the top and goes down. (This is because the whole left side is, basically, wrapped in one big tag.)
SOOOOO… You put your style rules in the Interests box if you can. It’s not the best place, but it’s the best place that’s allowed.
In the example rules above, you are doing the following:
- position- place the box absolutely, relative to the whole page. You can also position it relatively to where you type the DIV box within your HTML. See below.
- top- put the box 100 pixels from the top of the page.
- right- put it 50 pixels from the right side of the page.
- color- text is colored yellow. See below.
- background- the box’s background is red.
- border- the box’s border is orange.
- width- the box’s width will be 200 pixels
- height- the box’s height will be 200 pixels
- (you can do more, too)
POSITION: Now, if you position it relatively (position: relative), it would have been 100 pixels from the box’s own top edge, and 50 pixels from it’s own right edge.
COLOR: Usually, you’ll use RGB values. This stands for Red Green Blue, and the numbers or letters define the mix of these three colors. They are HEXADECIMAL, which means that instead of going 0-9, they go 0-F (0123456789ABCDEF), with zero being nothing and F being 100%. F00 is red, 0F0 is green, and 00F is blue.
BUT… what if you don’t want every single DIV to be positioned 100 pixels from the top, 50 from the right, with yellow text on red background, etc.? You can name it!
<div class="myBox1"></div>
Now that you’ve named your DIV box, you’ll need to make the rule a little more specific:
<style>
div#myBox1 {
(put stuff here)
}
</style>
Notice that everything to do with CSS is case-sensitive. Whenever possible, use all lower case letters. You can use whatever you want for the class, though: All caps, no caps, etc.
To make a background with an image, use this CSS rule:
background: #000 url(http://www.domain.com/path/to/file.jpg);
Hope this helps clarify how these things work. For more on CSS and HTML, try a Google search like this:
http://www.google.com/search?q=MySpace+tutorial+HTML+CSS
Posted on Sunday, September 10th, 2006 at 11:26 pm.
You can leave a response, or trackback from your own site.
Follow responses via the RSS 2.0 feed.
| 
|
September 14th, 2006 at 9:39 am ::
Comments are now enabled! I recommend subscribing to comments, until your question is asked. You can unsubscribe at any time.