Rounded Corner's

Discussion in 'Web Design and Development' started by monke, Jun 20, 2007.

  1. monke macrumors 65816

    monke

    Joined:
    May 30, 2005
    #1
    How do you make bars, so that the main part of it is repeating and you have rounded corners?

    I know how to repeat the image in CSS, and have everything working. I just can't figure out how to add rounded corners to it.

    Here's a pic that might help explain what I mean:
    rounded corners.jpg
     
  2. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #2
    use an unordered list and just have your rounded corners before and after the list...?
     
  3. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #3
    How exactly do you do this?

    Here's what I've got

    HTML File:
    HTML:
    <div id="navigation">    
    <ul id="menu">
    <li><a href="Link">Link</a></li>
    </ul>
    </div>
    CSS File:
    Code:
    #navleft {
    background: url(files/navleft.jpg) repeat-x;
    width:	62%;
    height: 28px;
    float: left;}	
    /* UL Files here */
    Actually, I realized I only need a rounded corner on the right hand side.
     
  4. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #4
    No.

    Answer is Sliding Doors. Part II.
     
  5. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #5
    Except I don't want a rollover.

    Apple's start page has an example of this. Look a the 'Top Stories' column in the middle. That's all I want. No link nothing, but I don't want to have a big image loading.
     
  6. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #6
    Read the tutorial. The article describes a general CSS technique and happens to use it in a navbar.

    Figure it out. Worth learning.
     
  7. operator macrumors regular

    Joined:
    Oct 29, 2006
    Location:
    Canada
    #7
    I can also vouch for the Sliding Door method. It works very well.
     
  8. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #8
    It's not making any sense at all. I'm fairly new at this, and it's doing absolutely nothing for me.

    Where should I be looking? I feel lost. :eek:
     
  9. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #9
    Ignore Part II and read Part I carefully.

    You won't need a list like the intro talkes about. That's navbar specific.

    But read "The Sliding Doors Technique." The trick is that you actually use only 2 images, not 1 (fixed) or 3 like the idea tossed at the beginning of this thread.

    Read that part carefully and study the diagrams. Once you understand that concept, you can figure out how to make a nested div into the box you want. This technique useful for many things, including this.
     
  10. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #10
    you could always do something mega simple like

    HTML:
    <!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>
    <style>
    #menu {
    background: url(files/navleft.jpg) repeat-x;
    width:	62%;
    height: 28px;
    float: left;}
    </style>
    <style type="text/css"> 
    <!-- 
    #menu li { 
    list-style-type: none; 
    display: inline; 
    margin: 0px; 
    height: 30px; 
    width: 100px; 
    }
    
    #menu a, #menu a:link { 
    background: url(images/buttons.gif); 
    background-repeat: no-repeat; 
    color: #000; 
    font: bold 12px/22px tahoma, verdana, arial, sans-serif; 
    text-decoration: none; 
    height: 30px; 
    width: 100px; 
    }
    
    #menu a:hover { 
    background: url(images/buttons_rollover.gif); 
    background-position: 0px -30px; 
    } 
    --> 
    </style> 
    </head>
    
    <body>
    
    <div id="menu" style="height: 30px;"> 
    <nobr><img src="lhscorner.jpg" height="25"/>
    <li><a href="#">  Home  </a></li> 
    <li><a href="#">  Registration  </a></li> 
    <li><a href="#">  Information  </a></li> 
    </div><img src="rhscorner.jpg" height="30"/><nobr>
    </body>
    </html>
     
  11. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #11
    That code is NASTY, yagran, sorry. The point of CSS/XHTML based designs is to simplify code, esp. for debugging and reading purposes.

    That's why the pros use Sliding Doors. It's just 2 CSS definitions and nested tags, like so:

    Code:
    .bar {
    ...
    }
    
    .bar h3 {
    ...
    }
    
    HTML:
    <div class="bar">
    <h3>Today's Top Stories</h3>
    </div>
    
    Your code is anything but simple. Anyway, that's a freebie for monke, I guess. I was hoping he'd figure it out based on the article.
     
  12. yagran macrumors 6502a

    Joined:
    Jan 8, 2007
    Location:
    Brighton, East Sussex, UK
    #12
    i know its horrible. dont get me wrong.
    i just gave him a code that was pre made which i lifted from a website somewhere.

    im not gan sit here and write a code for him same as you, but he didnt seem to understand what you were giving him so i gave him smething that WOULD work for what i think he wants.
     
  13. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005
    #13
    I couldn't figure out where exactly to put it. So I pasted my code here.
    Basically I wanted a rounded edge on the the right of the div 'navleft' and the same rounded edge on the left of the div 'navright'.

    I know it's not the best coding, but I'm new at it. Any Help? :eek:
    HTML:
    <div id="navigation">
      <div id="navleft">
        <ul id="left">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>        	
        </ul><!--ul#left-->
      </div><!--#navleft -->
      <div id="navright"> 
        <ul id="right">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>			
       </ul><!--ul#right-->    
      </div><!--#navright-->
    </div><!--#navigation-->
    Code:
    #navigation {
    	text-align: center;
    	margin-top: 15px;
    	height: 28px;
    	width: 100%;
    }
    	
    	#navleft {
    		background: url(files/navleft.jpg) repeat-x;
    		width:	62%;
    		height: 28px;
    		float: left;
    	}	
    	
    	#navleft  ul {
    		list-style: none;
    		margin: 0;
    		padding: 0;
    	}
    	
    		#navleft  ul a {
    			color: #ffffff;
    			font: 13px "Lucida Grande", Verdana, sans-serif;
    			text-shadow: #04256f 0px 1px 0px;	
    			display: block;		
    		}
    		
    		#navleft  ul a:hover {
    			color: #2299d7;
    		}
    		
    		#navleft  ul li {
    			float: left;
    			padding-left: 2.25em;
    		}
    		
    		#navleft ul#left {
    			float: left;
    			margin: 5px 0px 0px 15px;
    			display: inline;
    		}
    	
    	#navright {
    		background: url(files/navright.jpg) repeat-x;
    		width:	25%;
    		height: 28px;
    		float: right;
    		clear: right;
    	}
    	
    	#navright  ul {
    		list-style: none;
    	}
    	
    		#navright  ul a {
    			color: #ffffff;
    			font: 13px "Lucida Grande", Verdana, sans-serif;
    			text-shadow: #6f0404 0px 1px 0px;				
    		}
    		
    		#navright  ul a:hover {
    			color: #e23838;
    		}
    		
    		#navright  ul li {
    			float: left;
    			padding-left: 2.25em;
    		}
    		
    		#navright ul#right {
    			float: left;
    			margin: 5px 0px 0px 15px;
    			display: inline;
    }
    Thanks again. :)
     
  14. jng macrumors 65816

    jng

    Joined:
    Apr 6, 2007
    Location:
    Germany
    #14
    Do you have a photoshop/screenshot of what you want it to look like? The code looks really convoluted. It'd help to have a screenshot.
     
  15. monke thread starter macrumors 65816

    monke

    Joined:
    May 30, 2005

Share This Page