myspaceprodesigns.com

blog header

Introduction  •  Blog Selectors  •  Blog Header  •  Final Tips

So, unfortunately, we have to use the custom header section in order to get a header on our blog. I don't put tables in it because that would just complicate it further. Instead, I create divs. Remember when I told you not to worry about the .firefox, .firefox2, .ffcontain, and .mpdlogo earlier? This is where we reference them.

I created these because I wanted to place links to Firefox (because IE sucks and everyone should have it), the form which is a site search, as well as a link to my website and the .ffcontainer is one that I'll use for special purposes.

You'll notice that I'm using a lot of relative positioning on these. I am doing this because I want items to be placed relative to the header and not to the content of the blog, or it will overlap the content of my blog.

Remember how we noted earlier that we can't use background-image in our style sheet? Well, to get around this, I used it in my header section. Here is an example:

In my style sheet, I defined the rest of the properties for .mpdlogo and put the background image in the header. In my style sheet, I told the browser to make the layer 100 percent the width of the screen and, with relative positioning, I told the browser the put all of the div contents starting at the top left corner of the div. If you don't want a graphic here and you just want text, just type in whatever you want. However, remember to use proper CSS so it looks the same in all browsers by defining font:Xpt FAMILY; because MySpace default for this doesn't define a font-family and uses a size of "small" which is browser dependant.

The next part was adding my firefox link. It is positioned relatively because I wanted to make sure that the rest of the blog moved down when I put it in place. Using some positioning changes, I was able to position it so it appeared to not be within the header. Just play with my CSS in the CSS Editor to see.

The form, I placed with absolute positioning because if I used relative positioning, it would have moved everything down approximately 100px, which I didn't want to do. I had to put the form in the head section because MySpace will not allow forms in your blogs unless you disable CSS to submit them, which is just more trouble than it's worth, especially when you want this form to show up on all pages.

So, since you've seen my CSS, here is the full code I'm using in my header so you can get the idea:

OK, so you've pretty got it. Here are a few final tips to help you out.

Comments

View Comments (0) •  Leave Comment  •  Support Forum

contact

© 2006-2018 myspaceprodesigns.com | all rights reserved | development and hosting by d web designs

valid css-3 | valid xhtml 1.1 | valid wcag 2.0 l3 | valid section 508 | irca label | perfect seo! | 46226 members | 45 users online