Help With Rounded Corners on Tabbed Menu

Forum Moderators: not2easy

Message Too Old, No Replies

Help With Rounded Corners on Tabbed Menu

dognobbler

10:29 am on Mar 21, 2008 (gmt 0)

Hi There, I am trying to create a tabbed menu using CSS.

I would like the tabbed menu to have rounded corners in both the top right and top left corner.

I can figure out how to get one rounded corner using background but I cannot figure out how to get the second one.

If possible I would prefer to be told how to edit the code I have to make it work rather than start with brand new code.

Although any help would be greatly appreciated.

Thanks

Andy

[edited by: encyclo at 11:01 pm (utc) on Mar. 21, 2008]
[edit reason] no URLs please, see posting guidelines [/edit]

swa66

11:37 am on Mar 21, 2008 (gmt 0)

Search for "sliding doors", basically you position one side on e.g. the <li> and the other side on e.g. the <a>.

dognobbler

1:55 pm on Mar 21, 2008 (gmt 0)

Thanks for the suggestion, sliding doors is OK but I am looking for something where the background changes colour when moused over which sliding doors doesn't do.

Ideally someone would tell me how to change my existing code to add the extra corner.

Any other suggestions are greatly appreciated.

Andy

swa66

8:38 pm on Mar 21, 2008 (gmt 0)

You can easily do changing backgrounds on hover, I reposition the background image in a :hover.

For inspiration: go to a list apart and look for "Sliding Doors of CSS, Part II by Douglas Bowman."

JAB Creations

3:05 am on Mar 22, 2008 (gmt 0)

The border-radius property is only supported via proprietary extensions in Gecko and Webkit currently. Opera 10 is most likely the earliest possible version we'll see support and IE8 well, they're now only catching up on CSS 2.1 so who knows...

- John

Gecko

-moz-border-radius: 3px 3px 3px 3px;

Webkit

-webkit-border-radius: 3px 3px 3px 3px;

*edit* - Typo.

[edited by: JAB_Creations at 3:06 am (utc) on Mar. 22, 2008]

rocknbil

6:38 pm on Mar 22, 2008 (gmt 0)

You start with a circle graphic.

You nest objects within objects, and float the "circle holder" to one side or the other, and background-position the circle so only the required quadrant displays. On hover, you swap out with your colored circle.

For a menu, I'd probably try a list item with a span inside the list item floating right.

The LI holds the top left round.

It definitely takes some fiddling with, but use a valid document type, validate your code, keep hitting it, you'll get it.

A (primitive?) working round corner solution [webmasterworld.com]

dognobbler

4:07 pm on Mar 23, 2008 (gmt 0)

Thanks for all the help guys. I am almost there.

I have created a tabbed menu here that changes colour when I mouseover and that works in all browsers,

The only thing I can't figure out is how to set one of the tabs to be active and to be a different colour from the rest.

Again any help would be greatly appreciated.

Thanks

Andy

[edited by: SuzyUK at 5:07 pm (utc) on Mar. 23, 2008]
[edit reason] no personal urls thanks [/edit]

swa66

7:32 pm on Mar 23, 2008 (gmt 0)

Just as you can reposition a background on :hover, you can add a third background for the selected one and reposition the background there just as well.

There are 2 main ways I know to select a specific item in a menu as a current one.

The fancy one:

<body id="about">
...
<li class="c_home"><a href="#"></a></li>
<li class="c_about"><a href="#"></a></li>
...

in css:

#about .c_about, #home .home, .... {style for those selected}
#about .c_about a, #home .home a, .... {style for those selected}

and the easier to understnad one is to add a class on the selected one:

<ul id="menu">
<li><a href="#">home</a></li>
<li class="selected"><a href="#"></a></li>
...
</ul>

css:

#menu .selected {style for the selected one}
#menu .selected a {style for the selected one}