Archive for the ‘CSS’ Category

Using CSS Friendly Control Adapter to existing project

What it is: http://aspnet.4guysfromrolla.com/articles/112906-1.aspx
Download and Install: http://www.codeplex.com/cssfriendly

1. Downloading the current release. Go to the Releases tab. You should see three prominent links to files. The zip file contains the source code, the CSSFriendly.dll file contains the compiled source code, and the the CSSFriendlyAdapters.browser file is a configuration file. You only need the dll and browser files.
2. Add a reference to CSSFriendly.dll. This is typically done by right-clicking your web project, choosing the Add References command, browsing for the CSSFriendly.dll file, and clicking OK.
3. Add the CSSFriendlyAdapters.browser file to the AppBrowsers folder in the root of your web project. If the AppBrowsers folder doesn’t exist, create it.

Note:
You may notice the autoFormat you selected for your gridview or other controls is not working anymore. You will have to use the cssclass property of the control to specify the style you want.

Advertisements

Putting corners using a single image with CSS

  1. The corner image (26 x 26 pixels)
  2. In the CSS file, it only display 13 x 13 pixels of the background image. The background-position property chooses which portion to be displayed.:

    .box .tl, .box .tr, .box .bl, .box .br
    {background-image:url(Images/corners.gif); background-repeat:no-repeat; width:13px; height:13px}
    .box
    .tl {background-position: left top}
    .box
    .tr {background-position: right top}
    .box
    .bl {background-position: left bottom}
    .box
    .br {background-position: right bottom}

  3. In the web page:

    <table cellpadding=”0″ cellspacing=”0″ class=”box”>
    <
    tr>
    <
    td class=”tl”></td>
    <
    td class=”t”></td>
    <
    td class=”tr”></td>
    </
    tr>
    <
    tr>
    <
    td class=”l”></td>
    <
    td class=”c”>
    <
    asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server” />
    </
    td>
    <
    td class=”r”></td>
    </
    tr>
    <
    tr>
    <
    td class=”bl”></td>
    <
    td class=”b”></td>
    <
    td class=”br”></td>
    </
    tr>
    </
    table>

Other thought:
I should have used <div> instead of <td>…Now I know more.

No javascript detection message

Below is the html code that I have been using for many website to tell the visitor to enable the Javascript. Any code between the <noscript> tag will only be displayed if user’s browser doesn’t support Javascript. It will put the message fixed at the top of the website. The message will take about 3.5em, that is why I have the top margin in the <noscript> tags.

In the aspx page:
<noscript>
<style type=”text/css”>
body { margin-top:3.5em; }
</style>
<div id=”noscript-warning” style=””> This website works best with JavaScript enabled </div>
</noscript>

In the css file:
#noscript-warning {
background-color:#AE0000;
color:white;
font-family:Arial,Helvetica,sans-serif;
font-size:140%;
font-weight:bold;
left:0;
padding:10px 0;
position:fixed;
text-align:center;
top:0;
width:100%;
z-index:101;
}