This is not just for wordpress, but for any website. This might be a little advanced for some people using wordpress, but you should be able to take my code and use it in your site without any problems.

On the more advanced side, this is a fix to the IE6 problem with z-index (layers). When I was making this header, I first start in Firefox, which is a big mistake, you should start in IE, because you will run into more problem with IE. With Firefox, I made this header in about 5 minutes. It worked fine using z-index, but then when I looked at it IE6, it looked awful. So I started to tweak it and tweak it, and TWEAK IT!…4 hours later I have a nice header that works in both Firefox, IE6, and IE7. When I was googling “IE6 z-index” I came across countless forum posts on this same problem. Bottom line, I don’t use IE at all anymore, only for testing Firefox is the way to go.

Here is the code if you want to just get it and go. You also download an example using images:
download code: code.zip

When I say stylish header, I mean a header that stays centers when you resize the browser and has 2 background images or colors. If you look at our header, the left is mostly black and the right is gray with a fade. Main image is 980px wide, has a gray color on the right and a dark image on the left. The downloadable code has a background with brown on the left and black on the right, with a middle image that matches the 2 colors on each side.

My initial theory about how to create this header was to make two div’s for the background of the header, both with a width of 50%, and then float the main image over then, centered to the screen using z-index. This create an expandable header image. It works great in Firefox, but not in IE6. After struggling, I finally figured out that it has nothing to do with z-index. It is all about positioning. I also found it was hard to put 2 div’s together with a 50% width. If you look at the code above, I make a full width background div that holds the color for the right side of the main image. Inside that div, I make another div that is positioned to the left, and width of 50%. Now when I resize the browser, both sides of the main image will expand properly. Now I just have to put the main image over these 2 div’s. You would think z-index would be the answer, but you really just need to make the main image’s position relative to the main div container. It’s probably easier to just look at the code to figure it out.

Good luck with your wordpress headers, and if there is an easier way to do this, let me know.

Popularity: 11% [?]