Rounded corners with css
in [CSS]
|
Prev: How to wrap text in <p> tag if the text has no spaces and isvery long
Next: border-collapse in firefox
From: alex on 4 Apr 2008 14:24 Hey all, I did some searching and I can't find anything wrong with this code, so apologies for bringing it up again (I'm sure it's been covered before!) Trying to get a banner with rounded corners using a simple method of corner images found here: http://kalsey.com/2003/07/rounded_corners_in_css/ I created my own images for the corners and I can not figure out where I'm going wrong! Any help is appreciated. Site: http://www.redbrick.dcu.ie/~alex/acoustik/ css: http://www.redbrick.dcu.ie/~alex/acoustik/css/all.css images: http://www.redbrick.dcu.ie/~alex/acoustik/images/ Cheers all, Alex -- My only regret is that I have boneitis
From: John Hosking on 4 Apr 2008 21:11 alex wrote: > I did some searching and I can't find anything wrong with this code, so > apologies for bringing it up again (I'm sure it's been covered before!) Repeatedly. > > Trying to get a banner with rounded corners using a simple method of > corner images found here: > > http://kalsey.com/2003/07/rounded_corners_in_css/ > > I created my own images for the corners and I can not figure out where > I'm going wrong! Any help is appreciated. You'll be wanting transparent where you've got white on those corners. > > Site: > > http://www.redbrick.dcu.ie/~alex/acoustik/ A simplified test case would have been my preference, since I didn't see where on the page you were hoping for rounded corners, and I had to reverse-engineer it a little bit. As it happens, you seem to want it around the logo image rather than the whole banner area. (You might also validate the CSS: http://jigsaw.w3.org/css-validator/ ) You've got: <div class="bannertop"> <img src="images/banner-corner-tl.jpg" alt="" width="10" height="10" style="display: none;" /> </div> .... <div class="bannerbottom"> <img src="images/banner-corner-bl.jpg" alt="" width="10" height="10" style="display: none;" /> </div> where you hope the images will provide the left corners, with BG images in the CSS for the containing divs, which are to provide the right corners. But you've styled the FG images here to be not displayed, so you get no left corners. And because the img elements are the only contents for the two divs, they have no height, so the right corners go away, too. How your implementation matches that of the model URL you provided, or what you need to do to fix it, I leave as an exercise for you. The concept is flawed anyway, though, because you're mixing FG images (content) with BG images (presentation) at two different levels. Something like rounded corners ought to be in the CSS, since it's not critical content (it's only exceptionally critical presentation). > > css: > images: We got these when you gave us the page URL, thanks. HTH. GL. -- John Read about the UIP: http://improve-usenet.org/
From: Jeff on 5 Apr 2008 10:24
John Hosking wrote: > alex wrote: > >> I did some searching and I can't find anything wrong with this code, so >> apologies for bringing it up again (I'm sure it's been covered before!) > > Repeatedly. I must have missed that here. It seems to me that this should be done with background images (positioned and no repeat), and I'm in favor of the "sliding door" technique where the width is adjustable by having the earlier lower zIndex image slide underneath. But I haven't worked out all the techniques, particularly with regard to transparency. Care to give a synopsis or a good example? Jeff > >> >> Trying to get a banner with rounded corners using a simple method of >> corner images found here: >> >> http://kalsey.com/2003/07/rounded_corners_in_css/ >> >> I created my own images for the corners and I can not figure out where >> I'm going wrong! Any help is appreciated. > > You'll be wanting transparent where you've got white on those corners. > >> >> Site: >> >> http://www.redbrick.dcu.ie/~alex/acoustik/ > > A simplified test case would have been my preference, since I didn't see > where on the page you were hoping for rounded corners, and I had to > reverse-engineer it a little bit. As it happens, you seem to want it > around the logo image rather than the whole banner area. > > (You might also validate the CSS: http://jigsaw.w3.org/css-validator/ ) > > You've got: > > <div class="bannertop"> > <img src="images/banner-corner-tl.jpg" alt="" width="10" height="10" > style="display: none;" /> > </div> > > ... > <div class="bannerbottom"> > <img src="images/banner-corner-bl.jpg" alt="" width="10" height="10" > style="display: none;" /> > </div> > > where you hope the images will provide the left corners, with BG images > in the CSS for the containing divs, which are to provide the right corners. > > But you've styled the FG images here to be not displayed, so you get no > left corners. And because the img elements are the only contents for the > two divs, they have no height, so the right corners go away, too. > > How your implementation matches that of the model URL you provided, or > what you need to do to fix it, I leave as an exercise for you. > > The concept is flawed anyway, though, because you're mixing FG images > (content) with BG images (presentation) at two different levels. > Something like rounded corners ought to be in the CSS, since it's not > critical content (it's only exceptionally critical presentation). > >> >> css: > >> images: > > We got these when you gave us the page URL, thanks. > > HTH. GL. > |