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="">Home</a></li>
            <li class="page_item page-item-2"><a href="">
            <li class="page_item page-item-156"><a href="">
            <li class="page_item page-item-20"><a href="">
            <li class="page_item page-item-24"><a href="">
                Contact Us</a>
                <ul class='children'>
                    <li class="page_item page-item-28"><a href="">
                        Our Location</a></li>
                    <li class="page_item page-item-79"><a href="">
            <li class="page_item page-item-26 current_page_ancestor current_page_parent"><a href="">
                <ul class='children'>
                    <li class="page_item page-item-13"><a href="">
                        Our Company</a></li>
                    <li class="page_item page-item-15"><a href="">
                        Our Staff</a>
                        <ul class='children'>
                            <li class="page_item page-item-30"><a href="">
                                Employment Opportunities</a></li>
                    <li class="page_item page-item-111 current_page_item"><a href="">

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



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


<div id="navigation">
    <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>

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


    /*the section that holds all the links to various parts of the site
    such as archives, categories, and blogroll */
#navigation ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: inline;
#navigation ul li{
    list-style: inline;
    display: inline;
#navigation ul li a{
    padding: 5px 15px;
#navigation ul li a:visited{
#navigation ul li a:hover, #navigation ul li.current a{
    /*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">
        <div class="menu">
            this is the next line

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

    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;



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


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