In this tutorial, we will see how to add clickable area to a background image to create in css the effect of image mapping without using the html element <map>.
This method is used to render part of an image interactive with the mouse on click and is valid for rectangular area.
First, I created a background image representing a top picture (type header) and a bottom menu with 4 buttons:
To this image, I will ad 5 clickable area, the first being the picture of the frog, the other 4 being the 4 buttons of the bottom menu.
Continue to read >>
css map,
css mapping,
image map,
image mapping
In this tutorial, we will see how to create a basic horizontal drop down menu using unordered lists and nested lists.
We will use the css property visibility to hide the menu’s sub items and make them visible on the hover state of the buttons.
The css menu functions for the main browser of recent edition.
At the end of the article, I will explain how to adjust it to make it also works for Internet Explorer 6.
The basic html structure consists of unordered lists which contains a second list for the sub items:
Continue to read >>
css drop down menu,
css horizontal menu,
CSS Menu,
drop down menu
In this tutorial, we will see how to use a single background image applied to a button to create its 3 states normal, hover and selected.
This method allows to have a single image loaded and available right from the start instead of having more images (one per state) loaded only once called and causing a blink during the changes.
The idea will be realized using the css property background, moving the background image with the value top, center and bottom.
Continue to read >>
css background,
css button,
CSS Menu
Thanks to the css property z-index, we can easily add a flash background (swf) to an html element.
The basic steps to add an swf as background are…
To the div container which holds both swf then the other html element:
- the width and height of the main div container
- the position:relative; to allow to position the swf in a absolute mode in relation to its container
Continue to read >>
css background,
css flash,
css flash background
In this tutorial, I will explain how to avoid a problem that many beginners in css and Firefox users may encounter.
For internet Explorer users, the ‘problem’ is not visible due to an interpretation error of the browser.
The problem arises when we want to use the css property float on an item contained in a containing block (such as div) to which is applied a background or border.
The background/border of the container does not resize automatically in height to accommodate its ‘floated’ element and remains almost to say invisible while the ‘floated’ element is going to finish under its container.
Using a concrete example, I create a div ‘container’ into which I place 2 elements: one ‘floated’ to the left, the other one ‘floated’ to the right.
Continue to read >>
clearfix,
css background floated element,
css clear fix,
css clearfix
