A very complicated header

Get Started
1

Hi,

I’m putting together a site based of a PSD design, I’ve got the footer and the content done without a problem, but the header is bamboozling me. I wondered if anyone could give me any advice or help on how to style it.

Here’s the page:

I’ve got the logo down using Fahner image replacement method, and I’m doing ok with the search box.
My first issue is the nav menu: As these are all different shapes I take it I just have to upload the seperate images for each one, I think this is going to be really inefficient though (the design has already been signed off). Is this the only way to do this or is there some possible cheat way that’s better? (As I write this I realise there probably is not).

Secondly, the waves. The waves (that the children are standing on) will connect at each end meaning that this will be one image that will be repeated on the X-axis. Should this just be one large image and perhaps been laid out like so:

That is; Give the masthead div a defined height then just place the image in as a background, aligned to centre.

If this is the case I have one more question: The Welcome area. It is envisigned that this will be a hidden area and clicking it will reveal more. How can I get this so it is ‘under’ the waves? Positioning top -XXpx?

I look forward to hearing from you!

Thanks v. much. Jonno.

2

For the navigation, I’d recommend making it into a background image. After that, you can overlay the navigation and text on top of he background image. That’ll help you to keep the image and still have the navigation clickable and linkable.

For the waves, you can use a div set at width:100% and then repeat-x it. That seems easiest.

~TehYoyo

Edit: This is the problem w/ having a design with no development compatibility in mind.

3
  • re: the nav images - you can do it one of two ways. You can create each as an individual image (those are small, so the cost shouldn’t be that high) or you can use a CSS sprite technique, and create one large image, then position it using the background-image position property by assigning a class to each list element.
  • re: the wave - yep, just create one image and set it to the background of that div.
  • re: the welcome - absolute position it and set the z-index to be below the header. That should be the easiest way to accomplish it.
4

Awesome, glad I was on the right lines. Should I put all content within a DIV class called content that has the width of say 960px;?

So it might look something like this:


<body>
<div id="container">
<div id="header">
	<div class="wrapper">
        <h1>
        	<a href="index.html" title="Home"> 
	        	Thomas Ferens Academy
                <span></span>
            </a>
        </h1>
        <form action="" method="get">
            <input type="search" placeholder="Search..." name="Search website" />
            <input type="submit" />
        </form>    
        
        <div id="nav">
            <a href="#">Home</a></li>
            <a href="#">Parents</a>
            <a href="#">Education</a>
            <a href="#">Our Academy</a>
            <a href="#">News</a>
            <a href="#">My Academy</a>
            <a href="#">Contact</a>
            <a href="#">Information</a>
        </div>
        <span class="waves"></span>
    </div>
</div>
<div id="main">
...
</div>

I just coded it up and it looks right. I was having such a mind blank yesterday, thanks for clearing this up for me.

5

In the future, avoid coding PSDs to HTML. Often times the designer of hte PSD doesn’t realize the limitations HTML/CSS have. Well, really what feasibility it is to create some sites :).

6

Nah, that’s dangerous. The chances of the text not aligning with the background image are high (imagine what happens when text is enlarged).

@JonnoW
It’s better to mark up your menu with an unordered list. E.g.

<ul id="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Parents</a></li>
  <li><a href="#">Education</a></li>
  <li><a href="#">Our Academy</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">My Academy</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Information</a></li>
</ul>

That’s considered the best-practice menu markup. Set the <li>s to float: left or display: inline-block to make then sit horizontally. Use image replacement for the links, as others have said, preferably by nesting an empty <span> inside the <a>s (as you did on the header) and set them to position: absolute (with position: relative on the <li>s.

7

Regarding the Welcome section; the whole z-indexing thing just isn’t working at all. I’ve tried every combination but with no luck. Is there a better alternative?

Cheers, yeah, I did actually do that before. Originally I was using HTML5’s NAV element, but found that IE doesn’t support it at all so went back. Thanks for pointing it out, I’ll make the change now.

Many thanks,

8

Oh, also, I want to use the HTML5 placeholder attr, again, IE doesn’t support this so in order to cover both bases (and avoid using javascript) I’ve put this hack in:

<form action="/search" method="get" id="search">
           	
            <!--[if !IE]>-->
 

            <input name="q" type="text" size="30" placeholder="Search..." />
            <!--<![endif]-->
           	<!--[if IE]>
				<input name="q" type="text" size="30" value="Search..." />
			<![endif]-->
        </form>

Is this acceptable? I’ve tested it across several different browsers and it seems ok…

9

Really? Basically what I was suggesting is a sprite…that’s dangerous?

I haven’t done a lot of work w/ sprites, so I don’t know what happens when text is resized.

~TehYoyo

10

Ah, no. It sounded like you were talking about setting a background image for the whole menu and then trying to position text on top of that. The key here is to tie the text of each link directly to the sprite image.

11

Oh. OK. Again, I don’t have a lot of experience w/ sprites - maybe I made a mistake or was confusing.

~TehYoyo