Horizontal CSS menu Rumi, August 16, 2009 1. Let’s begin! Create a new HTML document and save it as cssmenu.html. Although is better to put the CSS code in a external style sheet, in this tutorial we will put the whole CSS code in the HTML file to be easier to follow by readers. 2. Our menu is actually an unordered list element <ul> styled using CSS. So, in the body section of cssmenu.html put the following HTML code: <ul> <li><a href=”#”>Css</a></li> <li><a href=”#”>Flash</a></li> <li><a href=”#”>ActionScript</a></li> <li><a href=”#”>Javascript</a></li> <li><a href=”#”>SQL Server </a></li> <li><a href=”#”>PHP</a></li> </ul> 3. Great now, we have the list, let’s stylish it! Go in the HEAD section of your cssmenu.html document and put the next CSS code: <style type=”text/css”> ul{ list-style-type:none; } li{ display:inline; } a{ float:left; width:100px; text-decoration:none; color:white; font-weight:bold; background:#999900; padding:5px; border-right:1px solid #FFFFFF; } a:hover{ background:#CCCC00; } </style> In the code above the ul list-style-type was set to none (so we have no bullet before each list element). For having no line break between list element we set for li display property to inline. For the a element float was set to left left and some other properties was changed for a good-looking menu. For the a element background was set to #999900 and for hover pseudo-class of the a element background was set to #CCCC00. The HTML and CSS complete code is below: <html> <head> <style type=”text/css”> ul{ list-style-type:none; } li{ display:inline; } a{ float:left; width:100px; text-decoration:none; color:white; font-weight:bold; background:#999900; padding:5px; border-right:1px solid #FFFFFF; } a:hover{ background:#CCCC00; } </style> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ /> <title>CSS horizontal menu</title> </head> <body> <ul> <li><a href=”#”>Css</a></li> <li><a href=”#”>Flash</a></li> <li><a href=”#”>ActionScript</a></li> <li><a href=”#”>Javascript</a></li> <li><a href=”#”>SQL Server </a></li> <li><a href=”#”>PHP</a></li> </ul> </body> </html> Hope this tutorial was helpful! Related Scripts
URL Redirecting Script October 12, 2008October 12, 2008 Meta Refresh URL Redirect Meta Refresh URL Redirect is an example of a meta refresh URL redirect. The code is quite simple. <meta http-equiv=”refresh” content=”8;url=http://www.seocompany.ca/index.html” /> Meta tag refresh is known to not be very search engine friendly and is consider spammy because of its misuse. If you keep it… Read More
Auto-centering Popup Window July 8, 2011July 8, 2011 Step 1: Insert the below inside the <head> section of your page: <script language="javascript"> /* Auto center window script- Eric King (http://redrival.com/eak/index.shtml) Permission granted to Dynamic Drive to feature script in archive For full source, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com */ var win =… Read More
Zimbra Let’s Encrypt auto-renew SSL January 26, 2023 Required for this script to work is certbot package installed on email server and sudo rights to add script in crontab. You can add script in crontab at a weekly run like this: 0 0 * * 0 root /path_to_script. #!/bin/bash #Set domain for renew (in format openthreat.ro) DOMAIN=”” certbot… Read More