best way to implement this header?

Hi,
I've designed this header, and not sure about what's the best way to implement it into an html page, I want the text in the navbar to be editable, and not an image...

is there any program that is recommended for doing that easily?

Here it is (logo was blurred )



Thanks!

 

make it a background image, aline the text using CSS or something.

 

yup, its better if you use text link as your navigation instead of image, cause you can manipulate this by using your targetting keyword in the menu

 

Take a small section of the gradient background, use this title horizontally. Then crop the left content as an image and the circular section that will have the text in then simple had html text for the navigation - pulling it all together with css. Simple

 

sabian1982 - do I need to use tables for this? what program should I use?

I've just tried lorien1973 method -

here's what it looks like

in IE it seems OK, but in Firefox its kinda screwed up, anyone knows why?

 

nice, but when I open it in firefox, you're right kinda screwed up, perhaps there is some code in your css that firefox can't read ?

 

Tables... erm... if thats the way you want to create the site then yer, although personally id try doing it as pure css - tables increase the load time and really standards compliant. You should really only ever use tables for tabular data.

What you've done works well but as you say there are some issues when viewing (for example) in firefox.

I take it your planning on designing an entire site eventually... not just the header?

Using pure CSS and no tables would probably work better, would load faster (especially if you have lots of pages) and would be way easier for editing content in the future once your site is complete.

At the end of the day its up to you... if your designing the site its what works easiest for you... alternatively get someone to code the site for you.

 

I agree with Sabian, try to implement it using CSS. But if you decide to go the tables route there's no need to wrap <p> tags around the image, that's what screwing it up in FF. Take them out, it shouldn't change in IE. If it does, make the cell valign="bottom" and play with the height value.

 

Thanks, I took the <P> tag out and it seems to be fine on both browsers

what do you think?

I have no clue on how to do it with pure CSS, and would really like to know, how can it be done?

 

Theres no 1 line answer to that question i'm afraid.

The idea behind pure css is you put the content in one file (the html file) and the style in another (the css).

Take a look at: www.michaelthorn.co.uk/redesign - this is something i'm working on at the moment. Its done entirely using pure css. If you look at the source the majority of it is just div tags, images and text tags. Everything else (positioning, text styles etc.) is stored in the css file called style.css

Why is this good? Firstly because it seperates style from content meaning you can edit the content without editing around any of the design. Secondly its better for people with visual impairment and search bots for indexing. Thirdly it saves on bandwidth as you only download the style.css for the entire site - other than that your just downloading small pages contain mainly div tags and textual content.

ps nice logos and stuff on your root domain

 

thanks sabian

If i'll stick to the table method though - I've just figured that the header is not centered on higher resolutions....

what can be done??

Thanks!