Jakemmarsh Jakemmarsh - 1 month ago 5
CSS Question

How to code this header design?

The header I'm talking about

I recently received this design from a potential client, and although we didn't agree to work together I was going to attempt to code the design for some practice. This is not my design (and I'm not claiming it is), and I am not intending on using it for anything, purely for practice. This is also why I blocked out the name of the company.

Anyways, I'm pretty stumped when it comes to this header/navigation area. The decorations to the side of the logo, and the logo essentially spanning two divs, really throw me off. I was wondering how any of you would go about coding this.

I was thinking just a div for each side decoration, and then the logo would have to be absolutely positioned. Is this a correct solution?

I first even tried incorporating it into the 960grid system, but that was going nowhere because the logo spanning problem made the grid very difficult.

Answer

Have you seen if the client BOUGHT the font, you could always font-face the font which would make it easier for you.

Other than that, I would remove the dots between the links and the text and use the image for the background, then just create one UL giving each li a class for the page ie home, about, galleries then use some PHP to add current_page class.

Then after galleries create another li with the following markup:

<li class="logo"><a href="/">Logo</a></li>

Add style like so.

li.logo {
    background: transparent url(....) no-repeat;
    width: width of logo;
    height: height of logo;
    display: block;
    overflow: hidden;
}

li.logo a {
    text-indent: -9999px;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

If you'd like me to do it for you, or show you examples I'd be happy to.