...

View Full Version : rounded corner effect not rendering as expected



johnmerlino
02-14-2011, 12:08 AM
Hey all,

I wanted to create a simple rounded corner effect:



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

Excavator
02-14-2011, 01:41 AM
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?

johnmerlino
02-14-2011, 06:29 PM
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.

johnmerlino
02-16-2011, 02:42 AM
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.

johnmerlino
02-16-2011, 02:56 AM
THis right here will reveal the left corner but not the right corner:



<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:



<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?

johnmerlino
02-16-2011, 03:25 AM
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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum