.

Nice dynamic menu (wordpress)

#menu {
    background: #222; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#252525, #0a0a0a);
    background: -o-linear-gradient(#252525, #0a0a0a);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
    background: -webkit-linear-gradient(#252525, #0a0a0a);
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;
}
#menu ul {
    font-size: 13px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
}
#menu li {
    float: left;
    position: relative;
}
#menu a {
    color: #eee;
    display: block;
    line-height: 3.333em;
    padding: 0 1.2125em;
    text-decoration: none;
}
#menu ul ul {
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    display: none;
    float: left;
    margin: 0;
    position: absolute;
    top: 3.333em;
    left: 0;
    width: 188px;
    z-index: 99999;
}
#menu ul ul ul {
    left: 100%;
    top: 0;
}
#menu ul ul a {
    background: #f9f9f9;
    border-bottom: 1px dotted #ddd;
    color: #444;
    font-size: 13px;
    font-weight: normal;
    height: auto;
    line-height: 1.4em;
    padding: 10px 10px;
    width: 168px;
}
#menu li:hover > a,
#menu ul ul :hover > a,
#menu a:focus {
    background: #efefef;
}
#menu li:hover > a,
#menu a:focus {
    background: #f9f9f9; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#f9f9f9, #e5e5e5);
    background: -o-linear-gradient(#f9f9f9, #e5e5e5);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */
    background: -webkit-linear-gradient(#f9f9f9, #e5e5e5);
    color: #373737;
}
#menu ul li:hover > ul {
    display: block;
}
#menu .current_page_item > a,
#menu .current_page_ancestor > a {
    font-weight: bold;
}

 

 

<div class="menu_wrapper">
    <div id="menu">
        <ul class="ddsmoothmenu">
            <li class="page_item page-item-167"><a href="http://127.0.0.1:4001/wordpress/">Home</a></li>
            <li class="page_item page-item-2"><a href="http://127.0.0.1:4001/wordpress/services/">
                Services</a></li>
            <li class="page_item page-item-156"><a href="http://127.0.0.1:4001/wordpress/portfolio-3/">
                Portfolio</a></li>
            <li class="page_item page-item-20"><a href="http://127.0.0.1:4001/wordpress/support/">
                Support</a></li>
            <li class="page_item page-item-24"><a href="http://127.0.0.1:4001/wordpress/contact-us/">
                Contact Us</a>
                <ul class='children'>
                    <li class="page_item page-item-28"><a href="http://127.0.0.1:4001/wordpress/contact-us/our-location/">
                        Our Location</a></li>
                    <li class="page_item page-item-79"><a href="http://127.0.0.1:4001/wordpress/contact-us/articles/">
                        Competition</a></li>
                </ul>
            </li>
            <li class="page_item page-item-26 current_page_ancestor current_page_parent"><a href="http://127.0.0.1:4001/wordpress/news/">
                News</a>
                <ul class='children'>
                    <li class="page_item page-item-13"><a href="http://127.0.0.1:4001/wordpress/news/our-company/">
                        Our Company</a></li>
                    <li class="page_item page-item-15"><a href="http://127.0.0.1:4001/wordpress/news/our-staff/">
                        Our Staff</a>
                        <ul class='children'>
                            <li class="page_item page-item-30"><a href="http://127.0.0.1:4001/wordpress/news/our-staff/employment-opportunities/">
                                Employment Opportunities</a></li>
                        </ul>
                    </li>
                    <li class="page_item page-item-111 current_page_item"><a href="http://127.0.0.1:4001/wordpress/news/archives/">
                        Archives</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

hiding H1 and H2 headers

.header h1, .header h2
{
    position: absolute;
    text-indent: -9999px;   
}

seeing dots when clicking an image / button

If you notice dots when clicking an image as button, try the following in your CSS

 

:focus
{
    outline:none;
}

rgb colors in the css style

 

color: rgb(102, 51, 153);

 

how z-index works in css

z-index: 1;
position: absolute;

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

 

readonly CheckBox or CheckBoxList

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 in ASP.Net:

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

Or straight forward in simple HTML:

<input type="CheckBox" onclick="return false;" > Cant tick me</input>
<input type="CheckBox" onclick="return false;" checked="checked" > or untick me</input>
Cant tick me or untick me

simple navigation with 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;*/
}

Heading and Div combination leaves a space in the middle

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;
    }

CSS Display webpage div in center of screen

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>

are you sure

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;" />