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…
CSS Tableless Design Tutorial
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…
Javascript Reload Image
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…
CSS Horizontal Navigation Menu
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…
Javascript Simple Slideshow
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…
