Archives
You are currently viewing archive for May 2009
Posted By Doteasy

There was a time with it was necessary to use JavaScript to create dynamic menus. But, the wide support of the :hover pseudo-class has changed that.

To create the dropdown menu, we will first need to add a nested list to our basic list menu.

<ul id="mainmenu">
    <li><a href="home.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="support.html">Support</a></li>
    <li><a href="about.html">About</a>
        <ul>
        <li><a href="history.html">Company History</a></li>
        <li><a href="staff.html">Staff</a></li>
        <li><a href="press.html">Press Releases</a></li>
        </ul>

    </li>
    <li><a href="contact.html">Contact</a></li>
</ul>

With this nested list in place and without changing the CSS, the menu will display as follows:

dropdown menu 1

By modifying the CSS, we can hide the submenus until the user hovers over one of the parent menu items. Here are the steps:

1. Set the position of the main menu item to relative.

#mainmenu li {
    position: relative;
    }

2. We will also need to set the position of the submenus to absolute. Submenus are contained in the ul elements within the li element.

#mainmenu li ul {
    position: absolute;
    margin: 0px;
    padding: 0px;
    left: -3px;
    top: 22px;
    }

3. Hide the submenus by adding the display:none; to the submenu rule.

#mainmenu li ul {
    position: absolute;
    margin: 0px;
    padding: 0px;
    left: -3px;
    top: 22px;
    display: none;
    }

4. Style the submenu options. We can turn the top border off for all but the first submenu item with the :first-class pseudo-class.

#mainmenu li ul li {
    width: 150px;
    font-size: smaller;
    border-top: none;
    }

#mainmenu li ul li:first-child {
    border-top: 1px solid #333333;
    }

5. Display the submenu when the user hovers over the main option. Modern browsers allow the :hover pseudo-class for almost all elements, including list items.

#mainmenu li:hover ul {
    display: block;
    }

The Full CSS Code

So, to achieve the vertical menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between <style type="text/css"> and </style> to your CSS file.

<head>

        <style type="text/css">

            ol, ul {
                 list-style: none;
                }

             #mainmenu li {
                position:relative;
                  display:block;
                  width:120px;
                  float:left;
                  margin-left:2px;
                  border:1px solid #333333;
                 }

            #mainmenu li {
                  display:block;
                  width:120px;
                  float:left;
                  margin-left:2px;
                  border:1px solid #333333;
                 }
 
             #mainmenu a {
                  display:block;
                  padding:3px;
                  text-decoration:none;
                  background-color:#333333;
                  color:#FFFFFF;
                 }
 
             #mainmenu a:hover {
                  background-color:#8CC919;
                  color:#FFFFFF;
                 }

            #mainmenu li ul {
                position: absolute;
                margin: 0px;
                padding: 0px;
                left: -3px;
                top: 25px;
                display: none;
                }
           
            #mainmenu li ul li {
                width: 150px;
                font-size: smaller;
                border-top: none;
                }

            #mainmenu li ul li:first-child {
                border-top: 1px solid #333333;
                }

            #mainmenu li:hover ul {
                display: block;
                }

        </style>

    </head>

And your dropdown menu now looks like this:

dropdown menu 2

Resources:

Next time, we will take a look at pop-out menus.


 
Posted By Doteasy

We have recently launched a new anti-spam filtering system - the Doteasy Email Protection System. This new anti spam service has now replaced the previous Doteasy Spam and Email Virus Protection Service.

Why is the Doteasy Email Protection System better?

The Doteasy Email Protection System is a versatile rule-based enterprise level anti-spam system. It is more flexible and scalable than the previous Doteasy Spam and Email Virus Protection Service.

One of the key features of the Doteasy Email Protection System is that it allows you the ability to allow each of your email users to set their custom spam threshold.

Powerful features include:

  • Simple-to-use - The web based interface comes in both Simplified and Advanced modes, allowing you to easily set custom filter policies and review spam quarantine.
  • Customizable - Each user quarantine account has the ability to customize their own spam threshold.
  • Flexible - In addition to black and white-list, you can set different domain, sender, host and file extensions filtering and deposition rules.
  • Reliable - The system can correctly identify and effectively block spam and emails due to virus or suspicious attachments. You can also generate interesting statistics on where spam is coming from.
  • Complete control - You control the frequency of notification emails as well as the display of your account web interface (quick-links, date format, number of spam quarantine messages displayed, message order, and much more).


If you are looking for a easy-to-use solution for anti-spam filtering and day-to-day email maintenance, then the Doteasy Email Protection System is perfect for you. The service is compatible with all Doteasy web hosting packages and is only US$6.95/month (on a 6-month billing term).

You can order the Doteasy Email Protection System through your Member Zone, or you can contact us at: https://www.doteasy.com/ContactUs/SMS

Not sure if the Doteasy Email Protection System suits your needs? Try it first on our 30-day full money-back guarantee!

For more information on the Doteasy Email Protection System, please visit http://doteasy.com/EasyBox/EmailProtection/index.cfm.


 
Posted By Doteasy

Vertical menus are created in much the same way as horizontal menus, but they are even easier.

vertical menu

This menu:

  • items aligned vertically
  • items are displayed as blocks
  • block background color changes upon hover

To create the above menu, we will use CSS to style our basic list menu:

1. Remove all the default list styling.

ol, ul {
    list-style: none;
    }

2. Set the width and margin of the menu.

#mainmenu {
    margin: 10px;
    width: 120px;
    font-family: Tahoma;
    }

This time, the width will be much narrower as we are creating a vertical menu.

3. Set the list items to display as blocks. We will set the border properties by adding borders to the left, right and bottom edges. We will also add a border to the top of the first list item only. We will use the :first-child pseudo-class to do this.

#mainmenu li {
    display: block;
    border: 1px solid #333333;
    border-top: 0px;
    }

#mainmenu li:first-child {
    border-top: 1px solid #333333;
    }

4. Change the a element to block-level elements. We will also add some formatting styles and remove the underline with text-decoration: none.

#mainmenu a {
          display:block;
          padding:3px;
          text-decoration:none;
          color:#FFFFFF;
         }

5. Finally, we will change the hover state of the links so that they highlight when a user points to them.

#mainmenu a:hover {
          background-color:#8CC919;
          color:#FFFFFF;
         }

The Full CSS Code

So, to achieve the vertical menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between <style type="text/css"> and </style> to your CSS file.

<head>
<style type="text/css">

            ol, ul {
                 list -style: none;
                }

             #mainmenu {
                margin: 10px;
                width: 120px;
                font- family: Tahoma;
                }

            #mainmenu li {
                display: block;
                border: 1px solid #333333;
                border-top: 0px;
                }
           
            #mainmenu li:first-child {
                border-top: 1px solid #333333;
                }

             #mainmenu a {
                  display:block;
                  padding:3px;
                  text-decoration:none;
                  background-color:#333333;
                  color:#FFFFFF;
                 }
 
             #mainmenu a:hover {
                  background-color:#8CC919;
                  color:#FFFFFF;
                 }
    </style>

</head>

Resources:

> Next time, we will try our hands on the dropdown menu.


 
Posted By Doteasy

Everyone should backup their websites regularly! It is quick and easy and will give you peace of mind.


But why should I back up my own site? Doesn’t Doteasy backup my website anyways?

Yes, we do backups of your website, but the backups are mainly for our benefit, for example, the server crashes completely and we need to restore all the websites from that server onto a new one. All of the files from a server backup would be jumbled together.

Basically, our requirements for keeping backups of your server are different from your requirements for keeping a backup of your website. So, it is always good to make your own backups.

There are a few ways to backup your Doteasy website:

  • FTP
  • Site Admin Panel
  • phpMyAdmin

FTP

Start your FTP client as you would to upload your files. However, with a backup, you will be transferring (or downloading) files from your server to your computer.

FTP


Site Admin Panel (Ultra/Unlimited Hosting AND websites less than 500mb)

With this option, you will be using the Export function in your Site Admin Panel to backup your website (including web files and database).

You can login to your Site Admin Panel via the login link in your Member Zone.

Site Admin Panel

1. Once you have logged into your Site Admin Panel, select the Export/Import function from the Menu.

export

2. On the Export tab, select the type of export and the mode of transfer desired.

*Note* The Download mode is recommended for exporting small files to your local computer. Large files may take a long time to transfer depending on the quality of your Internet connection. Use the FTP mode for a faster and more reliable transfer for larger files.


Manual Download (for websites larger than 500MB)

If your website is larger than 500MB, you can contact us to schedule a manual monthly backup for your website. This manual backup is free and once started, will run monthly.

Once you have contacted us, our scheduler will backup your entire website (including web files and database) every month. The backup file will then be uploaded to your FTP account for you to download.


MySQL Database-only (PHP/MySQL, Ultra/Unlimited Hosting)

For clients with the PHP/MySQL optional feature or are on the Ultra or Unlimited Hosting plans, if you need to backup your databases only, you can easily do so using phpMyAdmin.

1. Login to phpMyAdmin via the MySQL Administration Tool link in your Site Admin Panel.

MySQL

2. Click on the Export link

phpMyAdmin

3. In the Export box in the upper left corner, select all databases you wish to back up.

4. Check the box next to Save as file and click on the Go button.

5. A download window should pop up asking you where you’d like to save the file, choose a location, rename the file to something suitable and click OK.

*Note* If your database is large, it may be a good idea to save each of the databases individually. Also, saving them all in one file means you'll need to separate them if you don’t want to restore them all at the same time


Installed Applications

If you have installed Wordpress, Drupal and/or Joomla on your website, you can refer to the following sites for more information on backups:


 
Posted By Doteasy

horizontal_menu

This menu:

  • items aligned horizontally
  • items are displayed as blocks
  • block background color changes upon hover

To create the above menu, we will use CSS to style our basic list menu:

1. Remove all the default list styling.

ol, ul {
    list-style: none;
    }

2. Set the width and margin of the menu.

#mainmenu {
    margin: 10px;
    width: 750px;
    font-family: Tahoma;
    }

Setting the width prevents the menu from wrapping when the user shrinks the browser window.

3. Set the list items to display as blocks. We will also give them a width and float them to the left so they will be displayed to the right of the preceding item. We will also give them a margin border.

#mainmenu li {
    display: block;
    width: 120px;
    float: left;
    margin-left: 2px;
    border: 1px solid #333333;
    }

4. Change the a element to block-level elements. We will also add some formatting styles and remove the underline with text-decoration: none.

#mainmenu a {
          display:block;
          padding:3px;
          text-decoration:none;
          background-color:#333333;
          color:#FFFFFF;
         }

5. Finally, we will change the hover state of the links so that they highlight when a user points to them.

#mainmenu a:hover {
          background-color:#8CC919;
          color:#FFFFFF;
         }

 

The Full CSS Code

So, to achieve the horizontal menu, you will add the following lines to your CSS code. The below example is for an internal stylesheet, if you are using an external stylesheet, simply add the lines between <style type="text/css"> and </style> to your CSS file.

<head>
<style type="text/css">

            ol, ul {
                 list-style: none;
                }

             #mainmenu {
                 margin:10px;
                 width:750px;
                 font-family: Tahoma;
                 }
 
            #mainmenu li {
                  display:block;
                  width:120px;
                  float:left;
                  margin-left:2px;
                  border:1px solid #333333;
                 }
 
             #mainmenu a {
                  display:block;
                  padding:3px;
                  text-decoration:none;
                  background-color:#333333;
                  color:#FFFFFF;
                 }
 
             #mainmenu a:hover {
                  background-color:#8CC919;
                  color:#FFFFFF;
                 }
        </style>
</head
>


Resources:

>> Stay tuned as next time, we will be creating a vertical menu.


 


 
Google

Recent Entries
 
Category
 
Latest Comments
 
Archives
 
Free Tools and Applications
 
Doteasy Knowledge Base
 
 
Links
 
Doteasy Reviews
 
Visitors

You have 2047670 hits.

 
$0 Web Hosting

$0 Web Hosting
 
 

Add to Technorati Favorites



Add to Google Reader or Homepage

Add to My AOL

Add to netvibes

Subscribe in Bloglines

Powered by FeedBurner