PDA

View Full Version : I seriously need some help with my Masthead!


moss2076
06-23-2008, 05:05 PM
Can anyone help me out with coding my masthead? I have been struggling for so long now I am going crazy! Basically I am trying to recreate the look of the Opera masthead (not rip it off, but get an idea of how to design a similar masthead layout) -

http://www.opera.com/?home

I really like the top-right-hand grey search bar, and I want to recreate that effect but with a horizontal UL instead or a textbox.

I want a top-left horizontal UL also at the same level, and a logo underneath.

Here is what I have come up with so far -
http://www.siteoftom.com/masthead.html

Has anyone tried to recreate opera's masthead? If so, how have/would you go about it? I want a fluid design which allows for different text sizes and displays fine in IE6/7, FF, et.

Ive been trying for ages and am nearly ready to throw my pc out of the window!

:thumbsup:

jcdevelopment
06-23-2008, 05:28 PM
It looks like you are basically there, what were you needing help with? It looks like you have everything you want.

moss2076
06-23-2008, 05:58 PM
Oops sorry I forgot to put what the main problem was in the first post !! - Sorry :p

On the Opera masthead they have the quote "Simply The Best Internet Experience". On my masthead I am trying to do something similar - position an image (called "right_hand_banner_r1_c1.gif) which will be used in a similar way (not as a logo in Operas case). I have placed the image as a background image in the CSS for the div called "redrightcorner".

But I cannot get the image (or div for that matter) to display in IE7. I have not tried it in IE6, but it is ok in the latest version of FF. My image isnt finished yet, but I want to get it to display in IE before I carry on designing it.

So I need to know what I am doing wrong, should I be using a DIV at all to display the image? And for that matter should I be displaying my left-hand "SOT.com" logo inside a DIV or should it be a seperate image?

Are Opera using a seperate image for the "simply the best internet experience quote" or is it part of their grey search bar?

I should also add that the div called "redrightcorner" has a height of 80px. Now, if I remove this div from my code, and give the div called "siteoftom" a height of 80pix instead, the "siteoftom" div with the SOT.com logo does not display in IE.

moss2076
06-23-2008, 06:29 PM
Here is my masthead without the div called "redrightcorner" and WITH the div called "siteoftom" using a height of 80px.

http://www.siteoftom.com/masthead2.html

The "siteoftom" div and sot.com logo arent visible for some reason in either IE or FF..and I need to fix it!