Rounded Corners on Menu

[DoubleDee]

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

[ralph.m]

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.

[DoubleDee]

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>

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.

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...
MyTabs.png


Debbie

[ralph.m]

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 1em 0.4em;
	text-align: center;
	text-decoration: none;                      				/* Hyperlink NOT underlined. */
	color: #4682B4;								/* Steel Blue (darker) */
	font-weight: bold;
	-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 */
}

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

[DoubleDee]

Ralph,

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

Here is an updated screen-shot of my menu...
MyTabs_revised.png

Thanks for the help (again)!!

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

[ralph.m]

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

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.

[DoubleDee]

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.

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.

Did you like my updated screen-shot?!

Thanks for your help!!


Debbie

[ralph.m]

Did you like my updated screen-shot?

Sure, looks fine. Color scheme is nice. 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.

[DoubleDee]

Sure, looks fine. Color scheme is nice.

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