CODEWITHSUNDEEP
htmlcss
Jakemmarsh
Jakemmarsh

Reputation: 4661

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.

Upvotes: 3

Views: 2412

Answers (3)

Surreal Dreams
Surreal Dreams

Reputation: 26380

I'd break the design into 2 rows, like so:

enter image description here

The "design" bits can sit on either side of the logo image in the center of the fist row. This lets you link the logo but not the designs. The second row gets sliced up for the navigation elements and the logo. I'd put it all inside a div with a set width and height that is the exact dimensions of all the various images. Keep it simple. You can put the rows into individual divs, but I think you'd be fine without it.

For a super low-budget implementation, use the image as-is and apply an image map to it to add the links you need. You lose options like rollover images, but that's what makes it low budget.

Since this is a learnng exercise, try coding it up several different ways. Float all the elements, position them absolutely, make columns, make rows, use a big background image and and position the navigation over it, and anything else you can think of - but no tables! :)

Upvotes: 1

Moin Zaman
Moin Zaman

Reputation: 25445

I'd use one list and add a class on the 3rd item to give it a big enough margin-right to create space for a h1 logo. This way your markup is nice and semantic and you don't have to use multiple div's and lists.

You could also use the nth-child CSS selector instead of adding a class.

Upvotes: 3

Andrew Manson
Andrew Manson

Reputation: 280

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.

Upvotes: 2

Related Questions