Archive for the ‘CSS’ Category

Recently I encountered a positioning error in AJAX calendar extender. When I use the calendar extender inside of other container controls the popup calendar started appearing few inches above the button. You will be able to get an idea of the problem by the following image.

image

Since I couldn’t get it fixed by changing the properties I thought to find a solution for this.

One way to correct this is by applying a CSS style sheet to change the calendar positioning manually. I found this method while searching the web. This way since you need to enter the location of the calendar you need to try several times to get the correct positioning. If you are using this method simply place the following CSS style in your page and apply the style as shown. Remember you need to change the value to suit your form.

  1. <style type="text/css">
  2.     .fromDtPos
  3.     {
  4.         left: 245px !important;
  5.     }
  6. </style>

Apply the style to your calendar extender.

  1. <cc2:calendarextender id="calExpiry" runat="server" targetcontrolid="txtExpiry"
  2.     format="dd MMM yyyy" popupbuttonid="imgExpiry" enabled="True" cssclass="ajax__calendar fromDtPos">
  3. </cc2:calendarextender>

My preferred way to do this is by using the JavaScript that I wrote below. Since you do not need to enter the position manually this will be easier. Also this code will work irrespective of the number of parent containers it is having above of the control.

Insert the below JavaScript into your page.

  1. <script type="text/javascript" language="javascript">
  2.     function showCalendar(sender, args) {
  3.         var processingControl = $get(sender._button.id); // Getting the control which triggered the calendar.
  4.         sender._popupDiv.parentElement.style.top = processingControl.offsetTop + processingControl.height + ‘px’;
  5.         sender._popupDiv.parentElement.style.left = processingControl.offsetLeft + ‘px’;
  6.  
  7.         var positionTop = processingControl.height + processingControl.offsetTop;
  8.         var positionLeft = processingControl.offsetLeft;
  9.         var processingParent;
  10.         var continueLoop = false;
  11.  
  12.         do {
  13.             // If the control has parents continue loop.
  14.             if (processingControl.offsetParent != null) {
  15.                 processingParent = processingControl.offsetParent;
  16.                 positionTop += processingParent.offsetTop;
  17.                 positionLeft += processingParent.offsetLeft;
  18.                 processingControl = processingParent;
  19.                 continueLoop = true;
  20.             }
  21.             else {
  22.                 continueLoop = false;
  23.             }
  24.         } while (continueLoop);
  25.  
  26.         sender._popupDiv.parentElement.style.top = positionTop + ‘px’;
  27.         sender._popupDiv.parentElement.style.left = positionLeft + ‘px’;
  28.     }
  29. </script>

Then call the function showCalendar on onClientShown event of the calendar extender as seen below.

  1. <cc2:calendarextender id="calExpiry" runat="server" targetcontrolid="txtExpiry"
  2.     format="dd MMM yyyy" popupbuttonid="imgExpiry" enabled="True" onclientshown="showCalendar">
  3. </cc2:calendarextender>

Both of the above methods will correct the appearance of the popup calendar of the AJAX Calendar Extender as seen below.

image

When you put an Ajax Calendar Extender inside of a GridView you will see the calendar without any styling on it meaning the calendar will show only the dates overlapping with other items on your form. Sometimes some dates might even be missing. See the sample appearances below.

imageimageimage

This happens because the style sheets are not loaded at the correct time due to a bug in toolkit, there are several ways to fix this.

One is to add another calendar extender outside of the update panel and keep it hidden.

Another is to disable partial rendering in the script manager. But this will slow down your site reducing the benefits gained from AJAX.

  1. <asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="false" runat="server">
  2. </asp:ScriptManager>

My chosen method is to add the styles manually to the style sheet. To move forward this way simply copy the following styles which are used by the calendar extender to your style sheet.

  1. .ajax__calendar_container {padding:4px;cursor:default;width:170px;font-size:11px;text-align:center;font-family:tahoma,verdana,helvetica;}
  2. .ajax__calendar_body {height:139px;width:170px;position:relative;overflow:hidden;margin:auto;}
  3. .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years {top:0px;left:0px;height:139px;width:170px;position:absolute;text-align:center;margin:auto;}
  4. .ajax__calendar_container TABLE {padding:0px;margin:0px;font-size:11px;}
  5. .ajax__calendar_container TD {padding:0px;margin:0px;font-size:11px;}
  6. .ajax__calendar_header {height:20px;width:100%;}
  7. .ajax__calendar_prev {cursor:pointer;width:15px;height:15px;float:left;background-repeat:no-repeat;background-position:50% 50%;background-image:url(../images/arrow-left.gif);}
  8. .ajax__calendar_next {cursor:pointer;width:15px;height:15px;float:right;background-repeat:no-repeat;background-position:50% 50%;background-image:url(../images/arrow-right.gif);}
  9. .ajax__calendar_title {cursor:pointer;font-weight:bold; margin-left:15px; margin-right:15px;}
  10. .ajax__calendar_footer {height:15px;}
  11. .ajax__calendar_today {cursor:pointer;padding-top:3px;}
  12. .ajax__calendar_dayname {height:17px;width:17px;text-align:right;padding:0 2px;}
  13. .ajax__calendar_day {height:17px;width:18px;text-align:right;padding:0 2px;cursor:pointer;}
  14. .ajax__calendar_month {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
  15. .ajax__calendar_year {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
  16.  
  17. .ajax__calendar .ajax__calendar_container {border:1px solid #646464;background-color:#ffffff;color:#000000;}
  18. .ajax__calendar .ajax__calendar_footer {border-top:1px solid #f5f5f5;}
  19. .ajax__calendar .ajax__calendar_dayname {border-bottom:1px solid #f5f5f5;}
  20. .ajax__calendar .ajax__calendar_day {border:1px solid #ffffff;}
  21. .ajax__calendar .ajax__calendar_month {border:1px solid #ffffff;}
  22. .ajax__calendar .ajax__calendar_year {border:1px solid #ffffff;}
  23.  
  24. .ajax__calendar .ajax__calendar_active .ajax__calendar_day {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
  25. .ajax__calendar .ajax__calendar_active .ajax__calendar_month {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
  26. .ajax__calendar .ajax__calendar_active .ajax__calendar_year {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
  27.  
  28. .ajax__calendar .ajax__calendar_today .ajax__calendar_day {border-color:#0066cc;}
  29. .ajax__calendar .ajax__calendar_today .ajax__calendar_month {border-color:#0066cc;}
  30. .ajax__calendar .ajax__calendar_today .ajax__calendar_year {border-color:#0066cc;}
  31.  
  32. .ajax__calendar .ajax__calendar_other .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff;color:#646464;}
  33. .ajax__calendar .ajax__calendar_other .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff;color:#646464;}
  34.  
  35. .ajax__calendar .ajax__calendar_hover .ajax__calendar_day {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
  36. .ajax__calendar .ajax__calendar_hover .ajax__calendar_month {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
  37. .ajax__calendar .ajax__calendar_hover .ajax__calendar_year {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
  38.  
  39. .ajax__calendar .ajax__calendar_hover .ajax__calendar_title {color:#0066cc;}
  40. .ajax__calendar .ajax__calendar_hover .ajax__calendar_today {color:#0066cc;}
  41.  
  42. /* styles for invalid dates as defined by startDate and endDate*/
  43. .ajax__calendar .ajax__calendar_invalid .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff; color:#646464; text-decoration:line-through; cursor:default;}
  44. .ajax__calendar .ajax__calendar_invalid .ajax__calendar_month {background-color:#ffffff;border-color:#ffffff; color:#646464; text-decoration:line-through; cursor:default;}
  45. .ajax__calendar .ajax__calendar_invalid .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff; color:#646464; text-decoration:line-through; cursor:default;}
  46.   .ajax__calendar .ajax__calendar_invalid .ajax__calendar_today{visibility:hidden; cursor:default;}

Note that the above CSS uses the “arrow-left.gif” and “arrow-right.gif” for the previous and next buttons. If you want, you can use any other image which suits you. In case you need the originals they are below. To correctly show the previous and next buttons you need to place these images on to the “Images” folder under your project. If the folder is different in your project please change the image paths in the above CSS.

  • arrow-left.gif – arrow-left
  • arrow-right.gif – arrow-right

After doing all this remember to link the style sheet to your web page.

  1. <link href="Styles/Site.css" rel="stylesheet" type="text/css" />

If you have done everything correctly your calendar will be shown properly while residing inside of the grid.

image

You can create nice looking expandable regions using just HTML and some Java scripting. This is specially useful if you are to create a site without any major programming languages. Today I thought to share an expandable region that I created to give you an idea to get it done.

When the code works it will look like the following.

imageimage

You should be excited by now, to get it working you need the following code inserted into a body section of a HTML file. Please note I have added the CSS also in to the page body, but if you have a separate CSS file please separate the CSS .

  1. <style type="text/css">
  2.     a.headingStyle
  3.     {
  4.         text-decoration: none;
  5.         margin-left: 0.5em;            
  6.     }
  7.     a.headingStyle:hover
  8.     {
  9.         text-decoration: underline;
  10.     }
  11.     a.headingStyle span.charStyle
  12.     {
  13.         font-family: monospace;
  14.         font-weight: normal;
  15.     }
  16.     .contentStyle
  17.     {
  18.         display: none;
  19.         margin-left: 1.5em;
  20.         margin-right: 0.5em;
  21.         margin-bottom: 0.5em;
  22.         border-width: thin;
  23.         border-style: outset;
  24.         background-color:#D2E3FF;
  25.     }
  26.     .upArrowStyle
  27.     {
  28.         height:32px;
  29.         background-image: url('Up_Arrow_32x32.png');
  30.         background-repeat:no-repeat;
  31.     }
  32.     .downArrowStyle
  33.     {
  34.         height:32px;
  35.         background-image: url('Down_Arrow_32x32.png');
  36.         background-repeat:no-repeat;
  37.     }
  38. </style>
  39.  
  40. <script type="text/javascript">
  41.     function display(item) {
  42.         if (document.getElementById) {
  43.             // Retrieving the first child item.
  44.             var firstChildItem = item.firstChild;
  45.             // Getting the correct child item with inner HTML text.
  46.             firstChildItem = item.firstChild.innerHTML ? item.firstChild : item.firstChild.nextSibling;
  47.             // Toggling the + or – according to the state after click.
  48.             firstChildItem.innerHTML = firstChildItem.innerHTML == '+' ? '-' : '+';
  49.             // Toggling the display image after click.
  50.             item.className = item.className == "downArrowStyle" ? "upArrowStyle" : "downArrowStyle";
  51.             // Get the sub item to toggle visibility.
  52.            var nextSubItem = item.parentNode.nextSibling.style ? item.parentNode.nextSibling : item.parentNode.nextSibling.nextSibling;
  53.             // Toggle visibility of the sub item.
  54.             nextSubItem.style.display = nextSubItem.style.display == 'block' ? 'none' : 'block';
  55.         }
  56.     }
  57.  
  58.     // Displaying everything if item could not be found.
  59.     if (!document.getElementById)
  60.         document.write('<style type="text/css"><!–\n .dspcont{display:block;}\n //–></style>');
  61. </script>
  62.  
  63. <!– If Java scripts are blocked, display everything expanded. –>
  64. <noscript>
  65.     <style type="text/css">
  66.         .dspcont
  67.         {
  68.             display: block;
  69.         }
  70.     </style>
  71. </noscript>
  72. <div>
  73.     <!– If + or – is required to be displayed besides the image simply change display:none; to display:block; in following sections. –>
  74.     <h1>
  75.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
  76.             <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 1</span>
  77.         </a>
  78.     </h1>
  79.     <div class="contentStyle">Title 1 content goes here.</div>
  80.     <h1>
  81.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
  82.             <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 2</span>
  83.         </a>
  84.     </h1>
  85.     <div class="contentStyle">
  86.         <h2>
  87.             <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
  88.             <span style="display:none;">+</span><span style="margin-left:34px;">Sub Title 1</span></a></h2>
  89.         <div class="contentStyle">
  90.             Sub title 1 content goes here.</div>
  91.         <h2>
  92.             <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
  93.             <span style="display:none;">+</span><span style="margin-left:34px;">Sub Title 2</span></a></h2>
  94.         <div class="contentStyle">
  95.             Sub title 2 content goes here.</div>
  96.     </div>
  97.     <h1>
  98.         <a href="javascript:void(0)" class="downArrowStyle" onclick="display(this)">
  99.         <span style="display:none;">+</span><span style="margin-left:34px;">Main Title 3</span></a></h1>
  100.     <div class="contentStyle">Title 3 content goes here.</div>
  101. </div>

Remember to correct the image URLs, otherwise they will go missing.

I need to thank M. C. Matti for his great article which gave me this idea. Also you can use this method to create expandable regions in other sites which use different technologies. For example if you need to add this to a SharePoint site, just use a Content Editor web part and paste the code using Source Editor in web part properties.

Hope this helps.

HTML Menu

Posted: November 15, 2011 in CSS, HTML, Web

Today I thought to share with you, how to create menus using HTML only. These menus will be very useful if you need to create web sites using only HTML.

image

Above menu is created using basic unordered list (UL), list items (LI), links and some CSS.

Below is the HTML code for the menu. In the code I have created the full menu using HTML lists and used CSS to format the list to work as a menu.

  1. <ul class="mainMenu">
  2.     <li class="mainMenuItem"><a href="Home.html" class="mainMenuLink">Home</a>
  3.         <ul class="subMenu">
  4.             <li class="subMenuItem"><a href="Page1.html" class="subMenuItemLink">e</a></li>
  5.             <li class="subMenuItem"><a href="Page2.html" class="subMenuItemLink">ee</a></li>
  6.         </ul>
  7.     </li>
  8.     <li class="mainMenuItem"><a href="Module1.html" class="mainMenuLink">Module 1</a>
  9.         <ul class="subMenu">
  10.             <li class="subMenuItem"><a href="Module1_Page1.html" class="subMenuItemLink">dd</a></li>
  11.             <li class="subMenuItem"><a href="Module1_Page2.html" class="subMenuItemLink">ddd</a></li>
  12.             <li class="subMenuItem"><a href="Module1_Page3.html" class="subMenuItemLink">dddd</a></li>
  13.         </ul>
  14.     </li>
  15.     <li class="mainMenuItem"><a href="Module2.html" class="mainMenuLink">Module 2</a>
  16.         <ul class="subMenu">
  17.             <li class="subMenuItem"><a href="Module2_Page1.html" class="subMenuItemLink">c</a></li>
  18.             <li class="subMenuItem"><a href="Module2_Page2.html" class="subMenuItemLink">cc</a></li>
  19.             <li class="subMenuItem"><a href="Module2_Page3.html" class="subMenuItemLink">ccc</a></li>
  20.         </ul>
  21.     </li>
  22.     <li class="mainMenuItem"><a href="Module3.html" class="mainMenuLink">Module 3</a>
  23.         <ul class="subMenu">
  24.             <li class="subMenuItem"><a href="Module3_Page1.html" class="subMenuItemLink">bb</a></li>
  25.             <li class="subMenuItem"><a href="Module3_Page2.html" class="subMenuItemLink">bbb</a></li>
  26.             <li class="subMenuItem"><a href="Module3_Page3.html" class="subMenuItemLink">bbbb</a></li>
  27.         </ul>
  28.     </li>
  29.     <li class="mainMenuItem"><a href="Module4.html" class="mainMenuLink">Module 4</a>
  30.         <ul class="subMenu">
  31.             <li class="subMenuItem"><a href="Module4_Page1.html" class="subMenuItemLink">aa</a></li>
  32.             <li class="subMenuItem"><a href="Module4_Page2.html" class="subMenuItemLink">aaa</a></li>
  33.             <li class="subMenuItem"><a href="Module4_Page3.html" class="subMenuItemLink">aaaa</a></li>
  34.         </ul>
  35.     </li>
  36. </ul>

Below is the CSS that you need to make the above HTML work as a menu.

  1. .subMenu
  2. {
  3.     padding: 1px;
  4.     position: absolute;
  5.     visibility: hidden;
  6. }
  7. .subMenuItem
  8. {
  9.     list-style: none;
  10.     float: left;
  11.     position: relative;
  12.     margin: 0px;
  13.     display: block;
  14.     width: 92px;
  15. }
  16. .subMenuItemLink
  17. {
  18.     color: White;
  19.     text-align: left;
  20.     text-decoration: none;
  21.     padding-left: 5px;
  22.     display: block;
  23.     height: 32px;
  24.     width: 92px;
  25.     background-image: url('./Images/menuButtonSelected.jpg');
  26. }
  27. <! Changing the menu when mouse is over the menu.>
  28. .mainMenuItem:hover .mainMenuLink
  29. {
  30.     color: White;
  31.     background-color: Blue;
  32.     background-image: url('./Images/menuButtonSelected.jpg');
  33. }
  34. <! Changing the menu when it is selected.>
  35. .mainMenuItem:active .mainMenuLink
  36. {
  37.     background-image: url('./Images/menuButtonSelected.jpg');
  38. }
  39. <! Showing the sub menu items when mouse is over the main menu.>
  40. .mainMenuItem:hover .subMenu
  41. {
  42.     visibility: visible;
  43.     z-index: 100;
  44. }

Do not forget to import the CSS into the HTML page by using a link as shown below.

  1. <link rel="stylesheet" type="text/css" href="DefaultStyles.css" />

I used the following images as the background images of the links.

menuButton11  menuButtonSelected11

I think the code is not that complex, so hope this helps, let me know if you need any help on this, I will try to help you out.

Menu Overlapping with Report

Posted: April 3, 2011 in .Net, CSS, Web
Tags: , ,

If you had lengthier menus in you ASP.Net application and had used report viewer control you may have faced the problem of report and menu overlapping when ever the report is loaded with data. For example in my sample application it appeared as below.

image

To correct this behavior you need to set the z-index for menu and report viewer using CSS class property. For this I have used the following CSS classes in the Style.CSS.

  1. /* CSS Class for the Menu. */
  2. div.menu
  3. {
  4.     padding: 4px 0px 4px 8px;
  5. }
  6.  
  7. /* CSS Class for a Menu Item. */
  8. div.menu ul
  9. {
  10.     list-style: none;
  11.     margin: 0px;
  12.     padding: 0px;
  13.     width: auto;
  14.     z-index: 1; /* Setting the control to appear on top of level 0 controls for e.g. report viewer. */
  15. }
  16.  
  17. /* CSS Class for the Report Viewer. */
  18. .report
  19. {
  20.     z-index: 0; /* Setting the control to appear below the level 1 controls for e.g. menu items. */
  21. }

To apply the CSS use a code similar to following.

Appling CSS Class to menu in master page.

  1. <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
  2. EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
  3.     <Items>
  4.         <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
  5.         <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
  6.         <asp:MenuItem Text="New Item" Value="New Item">
  7.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
  8.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
  9.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
  10.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
  11.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
  12.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
  13.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
  14.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
  15.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
  16.         </asp:MenuItem>
  17.         <asp:MenuItem Text="New Item" Value="New Item">
  18.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
  19.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
  20.             <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
  21.         </asp:MenuItem>
  22.         <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
  23.         <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
  24.     </Items>
  25. </asp:Menu>

Appling CSS Class to report viewer.

  1. <rsweb:ReportViewer ID="ReportViewer1" runat="server" Font-Names="Verdana" CssClass="report"
  2.     Font-Size="8pt" InteractiveDeviceInfos="(Collection)" WaitMessageFont-Names="Verdana"
  3.     WaitMessageFont-Size="14pt" Width="636px">
  4.     <LocalReport ReportPath="Report1.rdlc">
  5.         <DataSources>
  6.             <rsweb:ReportDataSource DataSourceId="ObjectDataSource1" Name="DataSet1" />
  7.         </DataSources>
  8.     </LocalReport>
  9. </rsweb:ReportViewer>

This will correct the overlapping issue as seen below.

image

Creating Rounded Corners

Posted: June 17, 2010 in CSS, Web
Tags: ,

When designing web sites it always looks nicer if you could round the sharp corners, for example see below, what looks nicer to you?

Sharp Corners

Rounded Corners

My feeling is the rounded corners are better looking than the normal one. But the problem is, there is no easy way to create this. You need some Cascade Style Sheet (CSS) knowledge to do this. The easy way to round the required corners is to use the following code.

  1. <html xmlns="http://www.w3.org/1999/xhtml"&gt;
  2. <head runat="server">
  3.     <title></title>
  4.     <style type="text/css">
  5.         .CornerTopLeft
  6.         {
  7.             float: right;
  8.             width: 100%;
  9.             margin-top: 10px;
  10.             background: url(../Images/TopLeft.png) 0 0 no-repeat rgb(237,28,36);
  11.             border: 1px double #f1f1f1;
  12.         }
  13.         .CornerTopRight
  14.         {
  15.             float: right;
  16.             width: 100%;
  17.             background: url(../Images/TopRight.png) 100% 0 no-repeat;
  18.         }
  19.         .CornerBottomLeft
  20.         {
  21.             float: right;
  22.             width: 100%;
  23.             background: url(../Images/BottomLeft.png) 0 100% no-repeat;
  24.             height: 100%;
  25.         }
  26.         .CornerBottomRight
  27.         {
  28.             float: right;
  29.             width: 100%;
  30.             background: url(../Images/BottomRight.png) 100% 100% no-repeat;
  31.         }
  32.         div#Content
  33.         {
  34.             margin: 15px;
  35.         }
  36.     </style>
  37. </head>
  38. <body bgcolor="rgb(232,232,232)">
  39.     <form id="form1" runat="server">
  40.     <div class="CornerTopLeft">
  41.         <div class="CornerTopRight">
  42.             <div class="CornerBottomLeft">
  43.                 <div class="CornerBottomRight">
  44.                     <div id="Content">
  45.                         Your content here…..
  46.                         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  47.                         <asp:Button ID="Button1" runat="server" Text="Button" />
  48.                     </div>
  49.                 </div>
  50.             </div>
  51.         </div>
  52.     </div>
  53.     </form>
  54. </body>
  55. </html>

The above code is self explanatory so I didn’t put any comments there. To make it work you need the following 4 images placed on your Images directory.

TopLeft.png –

TopRight.png –

BottomLeft.png –

BottomRight.png –

If I am to explain the code, the corners are curved by using 4 different DIVs and placing the above images on them. For example the following DIVs does the trick.

<div class="CornerTopLeft">
<div class="CornerTopRight">
<div class="CornerBottomLeft">
<div class="CornerBottomRight">

  1. <div class="CornerTopLeft">
  2.         <div class="CornerTopRight">
  3.             <div class="CornerBottomLeft">
  4.                 <div class="CornerBottomRight">
  5.                     <div id="Content">
  6.                         Your content here…..
  7.                         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  8.                         <asp:Button ID="Button1" runat="server" Text="Button" />
  9.                     </div>
  10.                 </div>
  11.             </div>
  12.         </div>
  13.     </div>

The content you need to put in the middle should be wrapped by these DIVs. In the above code I used another DIV for placing content having the ID Content.

Inserting curved images to the corners of the DIVs are done by using a style per DIV. The CSS classes which are used to change these DIVs are as of below.

  1. <style type="text/css">
  2.         .CornerTopLeft
  3.         {
  4.             float: right;
  5.             width: 100%;
  6.             margin-top: 10px;
  7.             background: url(../Images/TopLeft.png) 0 0 no-repeat rgb(237,28,36);
  8.             border: 1px double #f1f1f1;
  9.         }
  10.         .CornerTopRight
  11.         {
  12.             float: right;
  13.             width: 100%;
  14.             background: url(../Images/TopRight.png) 100% 0 no-repeat;
  15.         }
  16.         .CornerBottomLeft
  17.         {
  18.             float: right;
  19.             width: 100%;
  20.             background: url(../Images/BottomLeft.png) 0 100% no-repeat;
  21.             height: 100%;
  22.         }
  23.         .CornerBottomRight
  24.         {
  25.             float: right;
  26.             width: 100%;
  27.             background: url(../Images/BottomRight.png) 100% 100% no-repeat;
  28.         }
  29.         div#Content
  30.         {
  31.             margin: 15px;
  32.         }
  33.     </style>

The filling of the required area is done by assiging a color at the background tag in CornerTopLeft style which will be applied to CornerTopLeft DIV.

background: url(../Images/TopLeft.png) 0 0 no-repeat rgb(237,28,36);

Note the last div#Content which was placed to style the Content DIV making the contents placed centered so the final output will be nicer.