Rounded Corners on Menu

HTML & CSS
1

I am trying to put rounded corners on a horizontal menu so it looks like tabs.

Here is my markup…


	<div id="boxUserDetails">
		<!-- PROFILE MENU -->
		<ul id="profileMenu">
			<li <?php if($scriptName=="/index.php") echo 'class="current"'; ?>>
				<a href="">My Details</a>
			</li>
			<li <?php if(($scriptName=="/articles/index.php")
					||($scriptName=="/articles/article.php")) echo 'class="current"'; ?>>
				<a href="/articles/index.php">My Thoughts</a>
			</li>
		</ul><!-- End of #TOPMENU -->
	</div>

I tried these styles but it didn’t work…


#profileMenu li{
	position: relative;                         /* Set containing block for Submenu. */
	float: left;
	padding: 0 1em;
	background-color: #D7D3FF;									/* Blue Gray */
	-moz-border-radius: 6px 6px 0 0;
	-webkit-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0;
}

I suppose it would be nice to have a little space in between each “tab” as well.

Help needed!

Thanks,

Debbie

2

If you want spacing, I’d say set your links to display: block and put the rounded corners on those; then put margins between the <li>s.

Off Topic:

It’s better to post HTML-only code when asking for CSS help, as we can’t use that PHP code.

3

Here is a cleaned up copy - I just pasted my existing code before…


	<div id="boxUserDetails">
		<!-- PROFILE MENU -->
		<ul id="profileMenu">
			<li id="firstTab" >
				<a href="">My Details</a>
			</li>
			<li>
				<a href="">My Thoughts</a>
			</li>
			<li>
				<a href="">My Friends</a>
			</li>
		</ul>
	</div>

I don’t think I am following you, Ralph.

Here is what I have so far…


#profileMenu{
  width: 600px;
	margin: 20px 0 5px 0;					
	min-height: 0;										/* haslayout IE7 for float containment. */
	list-style: none;										/* No Bullets. */
	background-color: #FFF;
	border-bottom: 5px solid #D7D3FF;
}

/* Still do not understand this! */
#profileMenu:after{                           /* Contain floats without overflow. */
  content: "";
  clear: both;
  display: block;
  height: 0;
  font-size: 0;
}

#profileMenu li{
	position: relative;                         /* Set containing block for Submenu. */
	float: left;
	margin: 0 10px 0 0;
	padding: 0 1em;
	background-color: #D7D3FF;						/* Blue Gray */
}

li#firstTab{
	margin: 0 10px 0 20px;
}

#profileMenu li.current{
	background: #D7D3FF;							/* Blue Gray */
}

#profileMenu li.current a{
	color: #4682B4;									/* Steel Blue (darker) */
}

#profileMenu a{
	display: block;					                             /* Allows Text Centering. */
	padding: 0.6em 0 0.4em 0;
	text-align: center;
	text-decoration: none;                      				/* Hyperlink NOT underlined. */
	color: #4682B4;								/* Steel Blue (darker) */
	font-weight: bold;
}

I tried adding this in the “a” element but nothing happened…


	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;

Here is a screen-shot of what I have so far…

Debbie

4

You’d need to change your CSS to this:


#profileMenu{
  width: 600px;
	margin: 20px 0 5px 0;					
	min-height: 0;										/* haslayout IE7 for float containment. */
	list-style: none;										/* No Bullets. */
	background-color: #FFF;
	border-bottom: 5px solid #D7D3FF;
}
 
/* Still do not understand this! */
#profileMenu:after{                           /* Contain floats without overflow. */
  content: "";
  clear: both;
  display: block;
  height: 0;
  font-size: 0;
}
 
#profileMenu li{
	position: relative;                         /* Set containing block for Submenu. */
	float: left;
	margin: 0 10px 0 0;
	padding: 0;
}
 
li#firstTab{
	margin: 0 10px 0 20px;
}
 
#profileMenu li.current{
	background: #D7D3FF;							/* Blue Gray */
}
 
#profileMenu li.current a{
	color: #4682B4;									/* Steel Blue (darker) */
}
 
#profileMenu a{
	display: block;					                             /* Allows Text Centering. */
	padding: 0.6em [COLOR="#0000FF"]1em[/COLOR] 0.4em;
	text-align: center;
	text-decoration: none;                      				/* Hyperlink NOT underlined. */
	color: #4682B4;								/* Steel Blue (darker) */
	font-weight: bold;
	[COLOR="#0000FF"]-moz-border-radius: 6px 6px 0 0;
	-webkit-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0;
	background-color: #D7D3FF;						/* Blue Gray */[/COLOR]
}

The padding, background color and border radius rules are moved to the <a> element.

5

Ralph,

The padding, background color and border radius rules are moved to the <a> element.

Here is an updated screen-shot of my menu…

Thanks for the help (again)!! :tup:

BTW, some follow-up questions…

1.) Was is wrong for me to have the padding, background color in the <li> before I wanted rounded corners?

2.) What is the which numbers apply to which corners with this code…


	-moz-border-radius: 6px 6px 0 0;
	-webkit-border-radius: 6px 6px 0 0;
	border-radius: 6px 6px 0 0;

I guess the Top, Right, Bottom, Left doesn’t apply, huh?

3.) Do you think it looks better to have spaces between each Tab, or should they touch?

Thanks,

Debbie

6

No, not really. The only downside I see it that part of each tab would be <li> rather than <a>, so not all of the tab was clickable.

What is the which numbers apply to which corners with this code…

It works in this order: top-left, top-right, bottom-right, bottom-left. I guess they had to make a call on that, as it’s not quite the same situation as top, right, bottom, left.

7

Did you like my updated screen-shot?!

Thanks for your help!!

Debbie

8

Sure, looks fine. Color scheme is nice. :slight_smile: I presume you have hover / current states in there, which is a nice improvement. It’s nice if something happens when you hover over a link.

9

Thanks.

I presume you have hover / current states in there, which is a nice improvement. It’s nice if something happens when you hover over a link.

Not yet, but I’ll put that on my “To-Do List”!

Debbie