Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    rounded corner effect not rendering as expected

    Hey all,

    I wanted to create a simple rounded corner effect:

    Code:
    <style>
     
    	#box {
    		background: url(left-button.png) no-repeat top left;
    		padding-left: 6px;
      		
    	}
    
    	h1 {
    		background:   url(right-button.png) no-repeat top right;
    		padding-right: 6px;
     		font-size: 20px;
      		line-height: 1.5;
    		color: #fff;
    		text-align: center;
     	}
    	
    	a {
    		display: block;
    		width: 345px;
    		height: 30px;
    		background: url(blue-button-repeat.png) repeat-x;
    		text-decoration: none;
      	}
    </style>
     
    		
    		
    		
    		<a href="#">
    			<div id="box">
    				<h1>Manage Categories</h1>
    			</div>
    		</a>
    The rounded corners are png files with transparency. Problem is because blue-button-repeat.png is repeating along the x axis it overlays the rounded corner images and therefore blends with rounded corner, therefore giving a square box look again. I tried adding padding to the h1 but that only pushed the two rounded images inward.

    How can I make rounded corners here? I'm looking at the book css mastery and following their examples, but this is not working.

    Thanks for response.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello johnmerlino,
    Is that book really telling you to nest a block level element (#box) inside an anchor?

    It's pretty hard to see what else is going on when we can't see your images. Any chance you could put up a test site?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    These are the three images:
    http://i54.tinypic.com/1zmi3ys.png
    http://i53.tinypic.com/2m2vrb5.png
    http://i54.tinypic.com/e5pl3t.png

    And the html and css above is all I used. I just put it into a file with an html extension and then ran it on a browser.

    Thanks for response.

  • #4
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    Any idea what I'm doing wrong? You mention not to put block level elements in the link tag. Then what else can I do? I need three block level elements in order to deal with three background images.

    Thanks for response.

  • #5
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    THis right here will reveal the left corner but not the right corner:

    Code:
    <style>
     
    	#box {
    		background: url(left-button.png) no-repeat top left;
    		padding-left: 6px;
    	}
    
    	h1 {
    		background:   url(right-button.png) no-repeat top right;
      		font-size: 20px;
       		line-height: 1.5;
    		color: #fff;
    		text-align: center;
     	}
    	
    	a {
    		display: block;
    		width: 345px;
    		height: 30px;
    		background: url(blue-button-repeat.png) repeat-x;
    		text-decoration: none;
       	}
    </style>
     
    		
    		<div id="box">
    			<a href="#">
    				<h1>Manage Categories and Services</h1>
    			</a>
    		</div>
    The code below works but this is nothing but slop. I had to create an extra element and the left and right side aren't clickable because it expands beyond the width of link:

    Code:
    <style>
     
    	#box {
    		background: url(left-button.png) no-repeat top left;
    		padding-left: 6px;
    		width: 351px;
    	}
    
    	#inner {
    		background: url(right-button.png) no-repeat top right;
    		padding-right: 6px;
     	}
    	
    	a {
    		display: block;
    		width: 345px;
    		height: 30px;
    		background: url(blue-button-repeat.png) repeat-x;
    		text-decoration: none;
       	}
    
    	h1 {
    		font-size: 20px;
       		line-height: 1.5;
    		color: #fff;
    		text-align: center;
    	}
    </style>
     
    		
    		<div id="box">
    			<div id="inner">
    				<a href="#">
    					<h1>Manage Categories and Services</h1>
    				</a>
    			</div>
    		</div>
    Any suggestions?
    Last edited by johnmerlino; 02-16-2011 at 04:04 AM.

  • #6
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    Got what I want now:

    <style>

    #box {
    background: url(left-button.png) no-repeat top left;
    padding-left: 6px;
    width: 351px;
    }


    a {
    display: block;
    background: url(blue-button-repeat.png) repeat-x;
    text-decoration: none;
    color: #fff;
    }

    h1 {
    background: url(right-button.png) no-repeat top right;
    padding-right: 6px;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
    }
    </style>


    <div id="box">
    <h1>
    <a href="#">Manage Categories and Services</a>
    </h1>
    </div>
    Last edited by johnmerlino; 02-16-2011 at 04:50 AM.


  •  

    Tags for this Thread

    Posting Permissions

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