Jesin's Blog

Welcome to the Portal of Technology

  • Facebook
  • GitHub
  • Google+
  • RSS
  • Twitter
  • Home
  • Categories
    • Domains
    • Linux
    • Networking
    • PHP
    • Virtualization
    • Web Design
    • Web Servers
    • Windows
  • WordPress Plugins
    • Custom Error Pages
    • HTTP Digest Authentication
    • Mailgun Email Validator
  • Toolbox
    • DNS Lookup Tool
    • htdigest Generator Tool Online
    • htpasswd Generator Tool Online
    • HTTP Headers Lookup Tool
    • MD5 Encryption Tool
    • Open Port Check Tool
    • SHA-1 Encryption Tool
    • URL Encoding/Decoding Tool
  • About Me
  • Contact Me
  • Sitemap
Home ›
html

How to create a horizontal drop down menu in CSS

November 2, 2011 Web Design Jesin A Leave a Comment

web design category thumbnail

Its been a long time since I wrote an article in this category (Web Design) so I decided to write an article on creating a horizontal drop down menu purely with HTML and CSS. To create a simple menu see CSS Horizontal Navigation Menu. Since the horizontal drop down menu uses only CSS and HTML it doesn’t work with Internet Explorer 6. The whole drop down menu concept makes use of the CSS pseudo class :hover, when you place the mouse pointer over a parent menu the CSS “display” attribute changes to “block” and displays the drop down menu, when you move the mouse pointer away from the menu the “display” attribute changes to “none” so the drop down menu disappears.Continue Reading…

Tags: css, html

CSS Tableless Design Tutorial

June 25, 2011 Web Design Jesin A 3 Comments

web design category thumbnail

This tutorial teaches you how to create your website neatly sans tables. All along people used tables to create column layouts and templates for their websites because they shied away from learning CSS and <div>s. If you thought creating web pages with divs are difficult you are about to change your mind after reading this tutorial, because HTML tables have many problems which can be overcome using divs. Take an example of changing the size of a column while using <table> tag, expanding a column also expands the column next to it. Of course you can use colspan and rowspan attributes to correct this to an extent but that makes it cumbersome and eats up precious bytes. With tableless design in CSS you can overcome all these problems and have complete control over your design, whats more search engines also start liking your website.Continue Reading…

Tags: css, html

Javascript Reload Image

January 22, 2011 Web Design Jesin A 3 Comments

web design category thumbnail

Using Javascript you can reload an image without reloading the page. This is extremely useful for reloading a captcha image if the user is unable to read the characters shown in it. Reloading an image using Javascript is just a simple matter of reassigning the same image location to the image src attribute. But the problem is the browser doesn’t call the image from the web server, since the name is same the browser just fetches the same image from the cache (Temporary Internet Files). So to overcome this we must add something with the image src attribute in such a way that it doesn’t affect the image location. The best way to do it is to add it like a query string to the image.Continue Reading…

Tags: html, javascript

CSS Horizontal Navigation Menu

January 4, 2011 Web Design Jesin A 2 Comments

web design category thumbnail

CSS Horizontal Navigation Menu is the basic menu sent on most of the websites just below theĀ  logo. It is very easy to create this type of menu using HTML unordered lists and CSS. It is search engine friendly and uses a tableless design. The CSS Horizontal Menu will be created with a hover effect to spice up things. This will change the color and style of a menu item when the mouse pointer is moved over it. Lets start step-by-step building the CSS Horizontal MenuContinue Reading…

Tags: css, html

Javascript Simple Slideshow

December 20, 2010 Web Design Jesin A 3 Comments

web design category thumbnail

Create a Simple slideshow using Javascript and HTML which is very easy to understand and implement. This is a no frills slideshow without any special effects and aims at beginners. As you learn more you can add more special effects. The Javascript Simple Slideshow works by changing the src attribute of the img tag to the list of image locations specified in an array variable. And finally I’ll show you how to preload the images so that the transition takes place smoothly.Continue Reading…

Tags: html, javascript

Get a wealth of information delivered to your inbox. Subscribe and never miss a single article.

  • Tutorials and howtos
  • Code, scripts and commands
  • Online Tools

* No spam, unsubscribe anytime

Hire Me

  • SSL installation and hardening (A+ on Qualys SSL test)
  • Apache & Nginx configuration
  • Email deliverability improvement (10/10 on Mail Tester & MailGenius)
  • WordPress customization, optimization and migration
  • and much more…

    Tools

    • DNS Lookup Tool
    • htdigest Generator Tool Online
    • htpasswd Generator Tool Online
    • HTTP Headers Lookup Tool
    • MD5 Encryption Tool
    • Open Port Check Tool
    • SHA-1 Encryption Tool
    • URL Encoding/Decoding Tool

    Nav

    • Home
    • About Me
    • Contact Me
    • Privacy Policy
    • Sitemap
    Vultr SSD VPS

    Creative Commons License
    Jesin's Blog by Jesin A is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
    Based on a work at websistent.com.