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