A Myspace Sidebar - It’s Simple Using DIV
By J Andrew Morrison
How would you like to have a column on the left side of your Myspace profile in which you could place anything you like? Even better, what if this column was never covered when some one’s browser window is smaller than the Myspace layout “grid”? Well the solution is much simpler than you might think, and I am going to give it to you right now. I’m not going in depth into the workings of CSS or the Myspace structure. There are a lot of great CSS tutorial sites out there to learn the deeper and more complex aspects of modifying your Myspace layout and Myspace background. Just type Myspace tutorials into Google. Here, I am just going to give you the code and brief explanations of what it does.
First, just to make sure you understand what I am speaking of, visit my Myspace layout at profile sbccjohn (I would recommend opening a new tab/window for reference). Notice the grey box in the upper left corner (I left it plain so it would stand out). Now make your browser window smaller using the resize corner and notice how the banner ad and table stops when it gets near the box. I’ll show you why and how it does this.
Let’s dive right into this Myspace layout modification by looking at the code.
Here is the code that actually builds the box seen in the sidebar. Place this CSS code wherever you put your own modification code. I prefer the top of the “About Me” edit box:
You can put whatever your want here. Even aligned images:
< img xsrc=" url of desired image" />
There is only one line of code needed to keep the sidebar from being covered by the rest of the Myspace layout, it’s in bold below. If you already have CSS modifications using the ‘body’ tag you just need to add the line to the current code. Otherwise you can add the entire style block below the div code listed above; just be careful not to place it inside another style block. Here is the code:
body {
margin-left:155px;
}
That is all you need to build the sidebar for your Myspace layout.
The first block of code tells the browser to create a block of space, 15 pixels from the top and 7 pixels from the left, 150 pixels wide and 400 pixels high, with a 1 pixel border that is black and solid, and to not put any space between the edge and inside content (padding) or around the outside (margin), and make the background color grey.
The second block of code tells the browser to keep the entire Myspace layout at least 155 pixels from the left. It’s important to note the relationship between the margin-left in this block of code and the width in the previous code. You need to keep margin-left larger than width or the Myspace layout might cover your sidebar in smaller browser windows.
Now you can explore with different combinations of colors, widths, heights, borders and position. For example you can have the sidebar start lower by changing top to 100px. You can even add a background image using the same methods you add a Myspace background image. Enjoy the new layout!
J Andrew Morrison is a writer, inventor, and online merchandiser of products and services. You can visit his Myspace Tutorial site at Myspace-Modifier.com. He also has a daily Internet marketing journal and resource center at Getting-Clicks.com.
How would you like to have a column on the left side of your Myspace profile in which you could place anything you like? Even better, what if this column was never covered when some one’s browser window is smaller than the Myspace layout “grid”? Well the solution is much simpler than you might think, and I am going to give it to you right now. I’m not going in depth into the workings of CSS or the Myspace structure. There are a lot of great CSS tutorial sites out there to learn the deeper and more complex aspects of modifying your Myspace layout and Myspace background. Just type Myspace tutorials into Google. Here, I am just going to give you the code and brief explanations of what it does.
First, just to make sure you understand what I am speaking of, visit my Myspace layout at profile sbccjohn (I would recommend opening a new tab/window for reference). Notice the grey box in the upper left corner (I left it plain so it would stand out). Now make your browser window smaller using the resize corner and notice how the banner ad and table stops when it gets near the box. I’ll show you why and how it does this.
Let’s dive right into this Myspace layout modification by looking at the code.
Here is the code that actually builds the box seen in the sidebar. Place this CSS code wherever you put your own modification code. I prefer the top of the “About Me” edit box:
You can put whatever your want here. Even aligned images:
< img xsrc=" url of desired image" />
There is only one line of code needed to keep the sidebar from being covered by the rest of the Myspace layout, it’s in bold below. If you already have CSS modifications using the ‘body’ tag you just need to add the line to the current code. Otherwise you can add the entire style block below the div code listed above; just be careful not to place it inside another style block. Here is the code:
body {
margin-left:155px;
}
That is all you need to build the sidebar for your Myspace layout.
The first block of code tells the browser to create a block of space, 15 pixels from the top and 7 pixels from the left, 150 pixels wide and 400 pixels high, with a 1 pixel border that is black and solid, and to not put any space between the edge and inside content (padding) or around the outside (margin), and make the background color grey.
The second block of code tells the browser to keep the entire Myspace layout at least 155 pixels from the left. It’s important to note the relationship between the margin-left in this block of code and the width in the previous code. You need to keep margin-left larger than width or the Myspace layout might cover your sidebar in smaller browser windows.
Now you can explore with different combinations of colors, widths, heights, borders and position. For example you can have the sidebar start lower by changing top to 100px. You can even add a background image using the same methods you add a Myspace background image. Enjoy the new layout!
J Andrew Morrison is a writer, inventor, and online merchandiser of products and services. You can visit his Myspace Tutorial site at Myspace-Modifier.com. He also has a daily Internet marketing journal and resource center at Getting-Clicks.com.
