PDA

View Full Version : Basic Navbar Question


Blue_Vision
01-30-2009, 12:44 AM
Sorry for this being such a newbie question. I'm still trying to wrap my head around html etc.

I need to create a navbar like this (words changed odviously...LOL) with the Y's hanging down etc. What is the best approach to this?

Because the bottom half of it is really going to be buttons with different colors I thought maybe I should cut the top 47 pixels or so and put that into one row and then for the "y" hanging off I cut an 18 or so pixels down by like 50 pixels wide square around it in hopes that they would just "fit together" in two vertical rows and then I could use the rest of that rows height for the nav buttons. However... I get a tiny gap inbetween the 2 images so the y is obviously sliced.

Am I doing this complety stupidly or what. How can I get rid of that gap? I would just use the full image and not cut it in-half but I don't think I could put the bottons "on-top" of another image.

Does any of that make sense or do I need to take screenshots of my DW design window so you see what I'm talking about?

Thanks!

Corrosive
01-30-2009, 07:25 AM
Sorry for this being such a newbie question. I'm still trying to wrap my head around html etc.

I need to create a navbar like this (words changed odviously...LOL) with the Y's hanging down etc. What is the best approach to this?

Because the bottom half of it is really going to be buttons with different colors I thought maybe I should cut the top 47 pixels or so and put that into one row and then for the "y" hanging off I cut an 18 or so pixels down by like 50 pixels wide square around it in hopes that they would just "fit together" in two vertical rows and then I could use the rest of that rows height for the nav buttons. However... I get a tiny gap inbetween the 2 images so the y is obviously sliced.

Am I doing this complety stupidly or what. How can I get rid of that gap? I would just use the full image and not cut it in-half but I don't think I could put the bottons "on-top" of another image.

Does any of that make sense or do I need to take screenshots of my DW design window so you see what I'm talking about?

Thanks!

Your theory of how to do it is sound. If you are getting gaps then it is your execution that is giving you problems. You got any code or a URL you can post? Also, you could just have the banner and the grey button background as one image and then position your list over the grey bit so you get pure html buttons. That might be easier.

Blue_Vision
01-30-2009, 08:16 AM
I'm getting nervous about the fact that I'm trying to use html tables after I've read a bunch of anti-tables stuff here and pro css. Am I making a big mistake? I don't like tables at all but I haven't found a decent free graphics layout tutorial online with CSS. Only text stuff...

I would love to use one image as stated but I can't figure out the code to use to be able to lay anything (or "list" as you say) over another image. Can you give me a hint?

Thnx : )

Corrosive
01-30-2009, 08:52 AM
I'm getting nervous about the fact that I'm trying to use html tables after I've read a bunch of anti-tables stuff here and pro css. Am I making a big mistake? I don't like tables at all but I haven't found a decent free graphics layout tutorial online with CSS. Only text stuff...

I would love to use one image as stated but I can't figure out the code to use to be able to lay anything (or "list" as you say) over another image. Can you give me a hint?

Thnx : )

You will need to be doing this with div tags and CSS I'm afraid (yes, we hate tables lol). I could talk you through it later but it would have to be tonight (UK time). Otherwise one of the other members might be able to help you out.

chriskq
01-31-2009, 10:01 AM
this is very simple to do.
the banner should be in a div with a h1 inside.
the navigation should be in a div of its own with a list inside.

i can help you with this if u want