Jul082010

how z-index works in css

Published by Pete Celliers at 6:57 PM under CSS

z-index: 1;
position: absolute;

An object with a larger z-index than another will be in front of the other object

 



[KickIt] [Digg] [del.icio.us] [Facebook] [Google] [StumbleUpon]

Tags:

E-mail | Permalink | Post RSSRSS comment feed 0 Responses

Jun282010

readonly CheckBox or CheckBoxList

Published by Pete Celliers at 12:45 PM under c# | CSS | Javascript

Simply add the following to your declaration:
onclick="return false;" 

This will disable the javascript that ticks / unticks the box.

Examples of both readonly CheckBoxLists and readonly CheckBoxListes:

<asp:CheckBoxList ID="CheckBoxList1" runat="server" onclick="return false;">
<asp:CheckBox ID="CheckBox1" runat="server" onclick="return false;" Text="test" />

 

 



[KickIt] [Digg] [del.icio.us] [Facebook] [Google] [StumbleUpon]

Tags:

E-mail | Permalink | Post RSSRSS comment feed 0 Responses

Nov162009

simple navigation with CSS

Published by Pete Celliers at 4:55 PM under c# | CSS

The HTML

<div id="navigation">
<ul>
    <li><a id="Links_Home" accesskey="H" title="to home page." href="/Default.aspx">Home</a></li>
    <li><a id="Links_About" title="About us." href="/about.aspx">About us</a></li>
    <li><a id="Links_Contact" title="Contact form." href="/contact.aspx">Contact me</a></li>
</ul>
</div>

you can set the class of the selected node to current to highlight it

The CSS

#navigation
{
    /*the section that holds all the links to various parts of the site
    such as archives, categories, and blogroll */
    float:right;
}
#navigation ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: inline;
    height:22px;
}
#navigation ul li{
    list-style: inline;
    display: inline;
}
#navigation ul li a{
    padding: 5px 15px;
    text-decoration:none;
    color:#fff;
    font-weight:bold;   
}
#navigation ul li a:visited{
}
#navigation ul li a:hover, #navigation ul li.current a{
  background-image:url(Images/underlink.jpg);
    background-position:bottom;
    background-repeat:repeat-x;
    margin:0;
    padding-bottom:5px;
    border:0;
    /*border-bottom: 4px solid #fff;*/
}



[KickIt] [Digg] [del.icio.us] [Facebook] [Google] [StumbleUpon]

Tags:

E-mail | Permalink | Post RSSRSS comment feed 0 Responses

Nov122009

Heading and Div combination leaves a space in the middle

Published by Pete Celliers at 11:25 AM under CSS

If you have for example a <H1> tag inside a <Div> tag,
the webpage renders a empty space between the 2 div items ("header" and "menu" below)

        <div class="header">
            <h1>Website</h1>
        </div>
        <div class="menu">
            this is the next line
        </div>

 To resolve this issue try to add the following to your CSS.

h1  
{
    margin:0px;
    padding: 0px;
    }



[KickIt] [Digg] [del.icio.us] [Facebook] [Google] [StumbleUpon]

Tags:

E-mail | Permalink | Post RSSRSS comment feed 0 Responses

Nov122009

CSS Display webpage div in center of screen

Published by Pete Celliers at 10:38 AM under CSS

Here follows the minimum code you need to display your website in the middle of the screen:
(notice the importance of the "margin: auto" and "width: ___px" properties)

#main_div {
 margin: 0 auto;
 width: 200px;
}

Html:

<body>

 <div id="main_div">
  <p>My Page</p>
 </div>

</body>



[KickIt] [Digg] [del.icio.us] [Facebook] [Google] [StumbleUpon]

Tags: ,

E-mail | Permalink | Post RSSRSS comment feed 0 Responses

May292009

are you sure

Published by Pete Celliers at 1:43 PM under CSS | LINQ

add the following attributes:

OnClientClick="if(!confirm('Are you sure?'))return false;"

to your button / link button etc. e.g.

<asp:LinkButton ID="ButtonReset" runat="server" Text="Reset"

onclick="ButtonReset_Click" OnClientClick="if(!confirm('Are you sure?'))return false;" />

 



[KickIt] [Digg] [del.icio.us] [Facebook] [Google] [StumbleUpon]

Tags:

E-mail | Permalink | Post RSSRSS comment feed 0 Responses

May262009

CSS nowrap / no_break / single_line

Published by Pete Celliers at 2:59 PM under CSS

 

wrap your html that should remain in one line with the following div tag:

<div style = "display: inline; white-space: nowrap;">  YOUR HTML HERE </div>

alternatively:

<NOBR style = "display: inline;" >  YOUR HTML HERE </NOBR>

 

IF you have elements rather that the YOUR HTML HERE text you can also span your content (the xxxxxxxx in my case) as follow:

<span class="alltogether">
  xxxxxxxxxxxxx 
  </span> 

Then create a stylesheet as follow inside you <html><body> tag:

...
<html><body>
<style> 
.alltogether * { display: inline; }
</style>
</body> 
....

 

or simply a rule in your stylesheet file:

.alltogether * { display: inline; }

and that should keep any <span  class="alltogether"> ................. </span>  together for you.

 

  



[KickIt] [Digg] [del.icio.us] [Facebook] [Google] [StumbleUpon]

Tags:

E-mail | Permalink | Post RSSRSS comment feed 0 Responses

May122009

making checkbox/check box READONLY

Published by Pete Celliers at 4:41 PM under c# | CSS | LINQ

The easiest work around I guess is to do a javascript return false on trying to change the value, thus:

onclick="return false;"

Here are the ASP.Net and HTML versions:

<asp:CheckBox ID="Whatever" runat="server" onclick="return false;" />

<input type="checkbox" onclick="return false;" />



[KickIt] [Digg] [del.icio.us] [Facebook] [Google] [StumbleUpon]

Tags:

E-mail | Permalink | Post RSSRSS comment feed 0 Responses

Nov192008

Doc Types

Published by Pete Celliers at 8:19 PM under CSS

Choosing a good doctype

The three most frequently used doctypes are listed below.

They all cover HTML 4.01. Don't use doctypes refering to older versions of HTML.

XHTML is not covered below (a need for XHTML is rare on the web today).

Always place doctype on the first line of a document so that Internet Explorer 6 can select the correct rendering mode.

Option 1: HTML 4.01 Transitional (full version)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The above doctype is the best choice when:

  • You are building new pages and you are unsure what doctype to choose
  • You are using a tables-based layout or are placing images in tables
  • You want to use older (presentational) markup
  • You want to open links in new windows

    The "full" version of the HTML 4.01 Transitional doctype is the best all-rounder - it triggers Standards Compliance Mode in modern browsers ("Almost Standards Mode" in Firefox), it contains all the necessary elements and attributes including deprecated (older) features. If at all unsure, choose this doctype!

    Option 2: HTML 4.01 Transitional ("half" version)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    This doctype is different from the "full" version above in that the URL for the DTD is missing. This means that the page will be rendered in Quirks Mode in modern browsers. Quirks Mode means that the browser handles the markup in a compatible way with older browsers such as IE5 or Netscape 4.

    The "half" doctype is the best choice when:

  • You have an existing tables-based layout that you are trying to validate
  • Using a newer doctype breaks the page design, and you do not want to rewrite the page
  • Your tables-based layout needs to work in very old browsers (IE3/5, Netscape 3/4...)

    You should never use the "half" doctype when using CSS for layout, as the browser will not handle the the layout according to the established specifications. This will cause a lot of cross-browser headaches. Using the wrong doctype is an extremely common reason why CSS-positioned layouts fail. The "half" doctype is good for converting older pages when you don't want to recreate the whole thing - but for new pages, it is best to use the "full" version or HTML 4.01 Strict.

    If you have older pages but you don't want to clean them up or make them pass validation, then there is no advantage in adding any doctype at all. When a browser encounters a page without a doctype, it automatically selects Quirks Mode and handles the page like an older browser. So if you have legacy pages without a doctype, don't worry about it until you want to rework those pages - they will continue to function as before for the foreseeable future!

    Option 3: HTML 4.01 Strict

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    HTML 4.01 Strict is the recommended choice when:

  • You are using CSS for layout and presentation
  • You want to improve the accessibility of your page
  • You are catering for modern browsers (including IE6)
  • You want your page to work in alternative devices (mobile phones, consoles)
  • You want to improve your content-to-code ratio
  • You don't need presentational HTML

    HTML 4.01 Strict triggers full Standards Compliance Mode in all modern browsers including Firefox, IE6, IE7, Opera, Konqueror, Safari... It is the ideal long-term choice when writing new pages with clean, compliant markup, combined with CSS for positioning and presentation. HTML 4.01 Strict does not include older presentational HTML such as font elements: they will still work, but the page won't validate.

    Validation

    There are two reasons for adding a doctype: the first is to trigger the correct browser rendering mode for your pages. The second is to allow you to check your page for errors. You should always try to validate your basic templates for HTML compliance. Markup errors can cause display errors, and can affect the spidering of your site by search engines.

  • [url=http://validator.w3.org/]W3 HTML validator[/url]
  • [url=http://www.htmlhelp.com/tools/validator/]WDG HTML validator[/url]
  • [url=http://jigsaw.w3.org/css-validator/]W3 CSS validator[/url]
    		•


    [KickIt] [Digg] [del.icio.us] [Facebook] [Google] [StumbleUpon]

    Tags:

    E-mail | Permalink | Post RSSRSS comment feed 0 Responses

    Oct292008

    glowing text with CSS and styles

    Published by Pete Celliers at 4:47 PM under CSS

    The Inline style way:

    <span style="    FILTER: Glow(Color=#ff0000, Strength=1);" >Glowing Text Here</span>

    Or the CSS way:

    <span class="     glowtext" >Glowing Text Here</span>

    CSS file entry: 
    .glowtext {            filter: Glow(Color=#ff0000, Strength=1);}  



    [KickIt] [Digg] [del.icio.us] [Facebook] [Google] [StumbleUpon]

    Tags:

    E-mail | Permalink | Post RSSRSS comment feed 0 Responses

    Oct282008

    usefull CSS styles

    Published by Pete Celliers at 3:31 PM under CSS

     

    Here are some really usefull CSS styles: 

        text-decoration:none;  /*removes underlining etc*/
        cursor:help;  /*sets the cursor upon hovering*/
        text-transform: lowercase; /*lowercase the word*/



    [KickIt] [Digg] [del.icio.us] [Facebook] [Google] [StumbleUpon]

    Tags:

    E-mail | Permalink | Post RSSRSS comment feed 0 Responses

    Oct282008

    force an scrollbar with css

    Published by Pete Celliers at 3:28 PM under CSS

    To force e.g. a horizontal scrollbar with CSS, use the following CSS code: 

        overflow-y: scroll;

     

    to force vertical scrollbar use the following CSS code:

        overflow-x: scroll;

     

    to force them both off:

     

        overflow-y: none;
        overflow-x: none;

     

     



    [KickIt] [Digg] [del.icio.us] [Facebook] [Google] [StumbleUpon]

    Tags:

    E-mail | Permalink | Post RSSRSS comment feed 0 Responses

    Oct062008

    Gridview Databinding

    Published by Pete Celliers at 5:35 PM under CSS

    The following is a simple and good solution for a roll over bar for gridviews.
    No postbacks are done this way - only javascript redirection: 

     

        List<string> EventsToRegister = new List<string>();

     

        protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

        {

            if (e.Row.RowType == DataControlRowType.DataRow)

            {

                e.Row.Attributes.Add("onmouseover", "this.originalcolor=this.style.backgroundColor; this.style.backgroundColor='#B5B5FF'; this.style.cursor='pointer';");

                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalcolor; this.style.cursor='default';");

                EventsToRegister.Add(GridView1.UniqueID);

            }

        }

     

        protected override void Render(HtmlTextWriter writer)

        {

            foreach(GridViewRow gvr in GridView1.Rows)

                if (gvr.RowType == DataControlRowType.DataRow)

                {

                    string s = Page.ClientScript.GetPostBackEventReference(GridView1, "Select$" + gvr.RowIndex.ToString(), true);

                    this.Page.ClientScript.RegisterForEventValidation(s);

                    gvr.Attributes.Add("onclick", s);

                }

            base.Render(writer);

        }

     

        protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)

        {

        }

        protected void GridView1_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)

        {

        }

     

     

     


     

     

     

    also can use the following code in the gridview source:

                       <asp:templatefield>
                        <itemtemplate>
                           <asp:linkbutton ID="LinkbuttonSelect" runat="server" commandname="Select"  CommandArgument= '<%# Eval ( "ID" ) %>' text="Select"  BackColor="AliceBlue"/>
                        </itemtemplate>
                     </asp:templatefield>

    in conjunction with:

            protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
            {
                    if (e.CommandName == "Select")
                    {
                            Guid index = new Guid(e.CommandArgument.ToString());  // just an example - in this case the command argument was a GUID



    [KickIt] [Digg] [del.icio.us] [Facebook] [Google] [StumbleUpon]

    Tags:

    E-mail | Permalink | Post RSSRSS comment feed 0 Responses