SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Rounded Corners on Menu

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

    Here is my markup...
    HTML Code:
    	<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...
    Code CSS:
    #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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    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. #3
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here is a cleaned up copy - I just pasted my existing code before...
    HTML Code:
    	<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>

    Quote Originally Posted by ralph.m View Post
    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...
    Code CSS:
    #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...
    Code CSS:
    	-moz-border-radius: 6px;
    	-webkit-border-radius: 6px;
    	border-radius: 6px;

    Here is a screen-shot of what I have so far...
    Attachment 59719


    Debbie

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    You'd need to change your CSS to this:

    Code:
    #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.

  5. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ralph,

    The padding, background color and border radius rules are moved to the <a> element.
    Here is an updated screen-shot of my menu...
    Attachment 59721

    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...
    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. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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.

  7. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by DoubleDee View Post
    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.

  9. #9
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,531
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •