...

View Full Version : Nifty Corners Issue



masey
12-21-2005, 12:00 AM
I'm having a small issue with some CSS in a menu that I am building for a website:

http://ultimatesalesmeetings.com/scratch47/2006/

I'm wanting the dark grey color on the top row of the navigation area to encompass the 'Home' option ONLY (so it looks like a tab) instead of extending out across the rest.

I have tried limiting the width of that div amongst other things, and so far no luck.

Can anyone help me out here?

Thanks in advance.

ronaldb66
12-21-2005, 09:05 AM
What do you mean--it does.
On IE6.0/Win2000, I see "HOME" with a darkish grey background, while all the other texts next to it (they aren't links; very confusing when it's obviously meant to look like a menu) are on a lighter grey background.

Could you be a bit more clearly about what you want it to look like?

By the way: there are better ways to mark up a menu; check out the Listutorial (http://css.maxdesign.com.au/listutorial/index.htm) for the how-to and Listamatic (http://css.maxdesign.com.au/listamatic/index.htm) and -2 (http://css.maxdesign.com.au/listamatic2/index.htm) for some examples (although the horizontal nested list ones aren't very compelling).

masey
12-21-2005, 09:32 AM
I thought it would have been obvious... but this should clearly show what I'm after...

http://i16.photobucket.com/albums/b41/mrsquiggle2/example.gif

NancyJ
12-21-2005, 09:37 AM
The first thing I would do is streamline your markup, its excessively bloaty.

Change your js to apply the curved corners to #primarySelected, rather than the container.
Modifying the width wont help because you've set it to display:inline, so it wont accept width or height.
If you modify the width of #primaryMenu to 55px you get the look that you want but that ofcourse shrinks the whole div so the other items drop below it.

NancyJ
12-21-2005, 09:44 AM
I thought it would have been obvious... but this should clearly show what I'm after...

http://i16.photobucket.com/albums/b41/mrsquiggle2/example.gif
The issue is that your js doesnt work in IE, so ronaldb66 doesnt see your curves at all. For him he will see a square tab around the Home link

masey
12-21-2005, 09:45 AM
Bleh... I just don't know enough about this kind of thing it seems. I mean I only taught myself CSS something like 3 days ago.

Maybe I'll just go with no rounded corners... :(

I just wanted some nice looking tabs for that top primary level without having to use images...

masey
12-21-2005, 09:46 AM
The issue is that your js doesnt work in IE, so ronaldb66 doesnt see your curves at all. For him he will see a square tab around the Home link

But you guys see curves on all the other elements in IE right? That uses the same JS.

ronaldb66
12-21-2005, 10:12 AM
NancyJ's right: I didn't see any of the things you mentioned, just a square "HOME".

There are other, JS-free techniques for incorporating rounded corners, most notably Doug Bowman's Sliding Doors (http://www.alistapart.com/articles/slidingdoors/) technique; for your rounded corner tabs, this seems like just the thing you're looking for.
Warning: since you say yourself that you're relatively new to CSS, there might be a steep learning curve ahead here.


By the way: there's nothing wrong with using images for this sort of stuff, as long as they are CSS background images.

masey
12-21-2005, 10:14 AM
Steep learning curve eh? Bring it on... it's the only way to learn right?

Pennimus
12-21-2005, 10:17 AM
Yeah, why not use background images? It will result in far less code and it will work without the need for javascript.

masey
12-21-2005, 10:20 AM
Better still... just stick with "-moz-border-radius" so that people who know what they are doing and using Firefox or Mozilla will get the good effect... and those using IE... well... let's just say it's their fault for not waking up and smelling the cheese! LOL

Thanks anyway everyone...

Masterslave
12-21-2005, 10:23 AM
You can use a unordered list with list-items. In those list-items you can use another unordered list for your bar below.

This is a article on A List Apart, it's near the same menu as you have.
http://www.alistapart.com/articles/hybrid



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum