Hi, well tell me at least your level of CSS so i can help you, do you know how to use <ul> and <li> tags ?

Hi, you could try replacing the text in the first level of the menu with your image.

For example, if the one of your menu items is "Links" and it had some submenus such as "Tutorials", "Books", "Sports" then replace the "Links" text with your image. This portion of your menu may look like this:

<ul class = "menu">
<li class = "toplevel"><img src = "images/links.png">
<ul>
<li><a href = "tutorials.html">Tutorials</a></li>
<li><a href = "books.html">Books</a></li>
<li><a href = "sports.html">Sports</a></li>
</ul>
</li>
</ul>

I hope this is of some help.

Ok. you can try this by your self its better for you to remember :D

<ul class = "menu">
<li class = "toplevel"><img src = "images/links.png">
<ul>
<li><a href = "tutorials.html">Tutorials</a></li>
<li><a href = "books.html">Books</a></li>
<li><a href = "sports.html">Sports</a></li>
</ul>
</li>
</ul>

O.k. here is the css:

.menu li {
float:left;
display:block;
}

.menu a {
display:block;
width:150px;
height:150px;
background:url() repeat-x;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#FFF;
text-align:center;
padding-top:4px;
margin:1px;
}

.menu a:link {
width:100px;
height:100px;
background:url() repeat-x;
}

.menu a:hover {
width:100px;
height:100px;
background:url() repeat-x;
}

it works fine for me, and change the background repeat by your needs :D and you need different image for /* .menu a:hover {} */ you probably know :D

Thank you for the reply you guys. My experience with CSS is intermediate. I'm rusty because I haven't made a website in 2-3 years and my company wants me to throw one together using our in-house designer who - conveniently enough - has never done website graphics. It's a bit of a mess, to say the least.

At any rate, previous websites I had made involved tables, or even further back into the 90s, involved frames. However, I'm attempting to create a website using CSS positioning with DIVs. The website is fix at 1024 x 768 and is supposed to be center horizontally and vertically, though I warned the bosses that a few years ago, this wasn't a very supported function and broke in some browsers when trying to center using the tables trick.

Anyways, I'm all over the place here. I figured I'd sorta refine my CSS skills whilst attempting to find some guidance with the menu since this will likely be the trickiest part about the website.

I'm familiar with ul and li tags. Do I want to give each li an ID tag and float them in the DIV?

Actually, for the sake of not being a total retard and being shunned by this forum community, perhaps I should drop the menu subject and ask a little about CSS positioning using DIVs. Please disregard this thread and I'll create a new one that hopefully makes sense and is relevant to my current skill level.

Ok, I'm finally getting a little more comfy with CSS again. I have my site up and am wanting to create some drop down menus. My buttons are absolutely positioned on the page. I'm looking for a way to have a slightly transparent black dropdown. I saw the comments above and I'm not sure they address this, or even how to use the code above. Can anyone help me out? Maybe there's a canned script to get this rolling?

Drop down menus are around in an abundance of examples. The tricky part is knowing what you want.
- Does it have to work without Javascript ?
- Pure CSS ?
- Do you want hover delay to activate/deactivate the submenu?
- Do you need IE6 support ?
...

Once you're done with that, you seem to be asking for translucent submenus.
Now that's not easy yet, as you need CSS3 to do opacity properly

CSS3:
[w3.org...]
e.g: opacity:.50;
This is relatively well supported already.

IE needs filters (hide them from standards complant browsers using conditional comments)
e.g.: filter:alpha(opacity=50);

Older FF versions used a pre-CSS3 vendor specific -moz-opacity statement.
e.g.: -moz-opacity:.50;

Hi,

Go on over to <snip> and click on Menus then click on the yellow menu that includes the Quality/Services links (Under the first group called Drop-Down CSS Menus). This is a drop down menu with image buttons and text submenus. You can easily replace their buttons with your own images and for sure you can change the yellow background to what you want.

You may be able to use swa66's filter with this to get your translucent dropdowns.

I hope this hels.

[edited by: swa66 at 4:01 am (utc) on Jan. 17, 2009]
[edit reason] no URLs please [/edit]

Sorry fo the misspelling,

I mean "I hope this helps".

aabe51

I definitely want the website to work with IE 6 (who wouldn't anyways?) though I have no preference about Javascipt, though I understand people try to avoid it... I did in fact find a menu on a website that I really liked. The guy who made it modified someone else's Javascript and put it on another site for others to view so I'm trying to work with his version of the menu. I can't for the life of me figure out why it doesn't work when pulled out of the table. Since my menu buttons are absolutely positioned, does anyone know of a way to make this script work with my site?

<snip>

As a note, the website <snip> is the site we are replacing. It was made several years back by who knows what company and cost an arm and a leg. D'oh! Anyways, in the meantime I will look into the CSS Menu Builder site you mentioned, though the menu you recommended isn't supposed in IE6...

Arg, menus are frustrating. I really like the menu I listed above since the dropdowns can be edited from a single JS file, and the transparencies are really nice, but I don't know how to get it out of the table without breaking it...

[edited by: eelixduppy at 10:42 pm (utc) on Jan. 16, 2009]
[edit reason] no personal URLs, please [/edit]

Or should I make a table with all of my buttons properly spaced and absolutely position the table on my page? I was just so stoked to not use tables for once. :(

No one? Have I asked a forbidden question since this script seems to require a table? Could anyone point me in the right direction? I've been attempting to position my menu buttons through absolute position, but I really like this menu I've found that seems to require being in a table. I'm just trying to figure out what I should do to get this thing positioned, and have the correct button spacing...

Ok, not getting any replies so maybe I can focus my question a little bit. The script I found only wants to work in a table, so there goes my idea of a tableless design. At this point though, can I just make a table, fit my buttons within the table, and absolute-position the table on the page? Can you even absolute-position a table?

Help please.... anyone?

HI,

Try putting your table within a div that is absolutly positioned. I haven't tried it yet, but it could look like this:

<div id = "nav">
<table>
<tr>
<td>
#your buttons and links
</td>
</tr>
</table>
</div>

In your css file position your nav div where you want it.

A really good book I bought myself on CSS is "CSS The Missing Manual" by David Sawyer McFarland. It is published by Pogue Press/O'Reilly. I bought it at Borders in the UK for £25, but the US price will be around $35. You can find it on Amazon I would guess.

He has a section on creating navigation bars and also on tables so you should get the knowlege you need to work through your problem. I hate to spend money I don't have to, but if you are trying to build up a basic knonwledge of CSS it is worth it. Then you can use Google and forums like this to fill in the blanks.