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