Results 1 to 3 of 3

Thread: Rounded Corners ul horz Navigation

  1. #1
    Join Date
    Feb 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Rounded Corners ul horz Navigation

    I'm trying to get rounded corners on the top of my nav buttons. I have an inlined ul for my nav and have got a basic css on it, but am getting really stuck on getting rounded corners. It's scripted so that each nav width is relative to the length of the link text so that the buttons aren't all one size.

    Here is an example site of what I am trying to achieve.
    http://www.thesug.org/Pages/default.aspx


    I've spent over an hour of searching on my own, so now I am reaching out for help. Any would be much appreciated! Here is my html and css.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link href="CSS/banner.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="navbar">
      <ul>
        <li><a href="index.php">Home</a></li>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
      </ul>
    </div>
    </body>
    </html>
    Code:
    #navbar {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	height: 44px;
    	width: 1000px;
    	float: left;
    	margin-left: 28px;
    	margin-top: 10px;
    }
    #navbar a:link, a:visited, a:active {
    	text-decoration: none;
    	color: #FFFFFF;
    }
    #navbar ul {
    	margin: 0px;
    	padding: 0px;
    }
    
    #navbar ul li {
    	display:inline;
    	height:20px;
    	float:left;
    	list-style:none;
    	margin-left: 4px;
    	background-color: #5087C6;
    	font-size: 13px;
    	padding-right: 15px;
    	padding-left: 15px;
    	padding-top: 7px;
    	color: #FFFFFF;
    	border-top-width: thin;
    	border-right-width: thin;
    	border-left-width: thin;
    	border-top-style: solid;
    	border-right-style: solid;
    	border-left-style: solid;
    	border-top-color: #375E8A;
    	border-right-color: #375E8A;
    	border-left-color: #375E8A;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	text-transform: uppercase;
    	letter-spacing: 2px;
    	padding-bottom: 7px;
    }

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Take a look at this tutorial: http://css-tricks.com/video-screencasts/24-rounded-corners/

    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Feb 2009
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Good resources. Thanks for your help!

Tags for this Thread

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
  •