Can anyone advise or supply example code for ROUNDED CORNER background boxes [sorry - not sure of correct terminology here!] into which text and images can be inserted, as in highlighted ads. Many thanks.
Just to get a rounder corner effect to block level element (div) add following CSS attributes to your element to make its corner round. div #selector { moz-border-radius: 10px; webkit-border-radius: 10px; border-radius: 10px; } However, it has browser limitations, not all the browser(IE) support this. The other method can be assign a background image to block level element in the CSS, For example, if you have an image (some-bg.gif) of 300px * 200px dimensions, div #selector { background: url (some-background.gif) no-repeat; width : 300px height:200px; }
Many thanks for your reply. I tried these but couldn't get them to work - probably my fault! I've put an example here - please can you apply your code to the "content" DIV, for example, please? index.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" xml:lang="en" lang="en"> <head> <title>Test</title> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1" /> <link href="div.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="headertop"><p>headertop</p> </div> <div id="headerbottom"><p>headerbottom</p> </div> <div id="contentintro"><p>contentintro</p> </div> <div id="content"><p>content</p> <p> </p> <p> </p> <p> </p> <p> </p> <p>more content</p> </div> </body> </html> div.css body{ font-family: Arial,verdana; margin: 0; } #headertop{ background-image: url(images/header_top.png); width : 300px; height:200px; border: none; margin-top: 0; padding-left: 0; } #headerbottom{ background-image: url(images/header_bottom.png); width: 100%; height: 50px; } #contentintro{ background-image: url(images/content_top.png); width: 100%; height: 116px; } #content{ background-image: url(images/content.png); height: 100%; width: 400px; margin-left: auto; margin-right: auto; padding-left: 5px; padding-right: 5px; } Thanks very much.
Use spiffycorners (Google for spiffycorners) . It has all the features you want. works in all browsers and there is no background images required.
Either Use CSS3 to make rounded corners or Use images. radiant_luv has shown u how to use image... Here are the CSS3 code which you can also use: #content{ height: auto; /*Automatic height*/ width: 400px; margin: 10px auto; /*10px for top/bottom; auto for left/right */ padding: 5px; /* CSS3 border radius code */ moz-border-radius: 10px; webkit-border-radius: 10px; border-radius: 10px; } Code (markup): Basically that's it.... Change all the radius value[moz-border-radius, webkit-border-radius, border-radius] if you want your border radius to be different. If all three sets are not identical, then it be shown differently on different browsers! Also don't use both CSS3 and background image. If you need adjustable width and height of a box, with background image only, then also there is a technique which will require to change some HTML markups.... Do let me know if you want such code!
To radiant_luv, Many thanks for your help, - that works! Much appreciated. To swashata, Many thanks for your reply. Very interesting - I didn't realise that CSS3 was out yet. I don't think that my editor [Expression Web3] supports it yet [if indeed that is necessary!], but I shall investigate. Thanks again.
You are welcome, post anytime your queries Your editor might have a text editor along with GUI and I believe any text based editor can write CSS or HTML; doesn't matter the version of CSS/ HTML is out. However properties or selectors of CSS3 is not supported by IE8.