The css property list-style allows to specify the type of markings for our list, changing the default bullet with an image (list-style-image), chosing its position (list-style-position) or the type of bullets using specific names (list-style-type).
Even if the style is applied to the list itself - html element <ul> or <ol> - the property list-style is about its inner elements <li> and to be more precised, its lateral marking.
Css rules for list-style:
ul {list-style: <value list-style-type> <value list-style-position> <value list-type-image>;}
Continue to read >>
css bullets,
css list,
css list-style,
css list-style-image,
css list-style-type-style,
css list-type-position,
css marking,
css property
Although, this italian map created in css could not be of as much interest for international users as for the italian’s one, I will post anyway this example here to give you an idea for future use and maybe the creation of other country’s map.
This css italian map uses an image for each province positioned in an absolute way to the pixel to rebuild the complete italian map. The css property ‘opacity’ is used on the hover state of the links and render the relative information to the province visible using the property display.
Continue to read >>
caa mapping,
css italian map,
css map
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
With the css property text, we can specify the css style of an element’s text:
- color: the text color
- text-align: the text align to the left, right, centered or justified
- text-decoration: the text ‘decoration’ like underlined, overlined, lined-trough or also blinking
- text-transform: the transformation of each word’s first letter or of all the text in capital or lower case
- text-indent: the indent of the first line of a paragraph
- letter-spacing: the space in between each letter
- word-spacing: the space in between each word
- line-height: the space in between each line of text
- white-space: the interpretation of the blank space in the text
- direction: the direction of the text from left to right or right to left
Continue to read >>
css line-height,
css nowrap,
css space,
css text,
css text-align,
css text-decoration,
css text-indent,
css underline,
css white-space,
css word-spacing,
text color
In the working draft of the css3 module ‘background’, the css3 gives the possibility to apply more background images to a single element and not just the single one as specified in the css2 property background.
The css rules to apply multiple background image to an element are simple.
As for the css2, we specify an url for each images to use as background and their position separated by a comma.
An example of css rule to apply the multiple images background in css3:
#multiple_background{
background:url(background1.jpg) no-repeat top right, url(background2.jpg) repeat-x bottom;
}
Next, the test I done to create a banner using 6 images applied to an element 400px wide, 150px high and with a 2px gray border.
Here is an image preview of the result obtained with Safari3.1:
Continue to read >>
CSS3,
css3 background,
css3 multiple background,
css3 property
The css property min-width applies a minimum width to a selected element.
If the browser’s windows is resized by the user, the content will follow the movement and resize itself until a certain width. Passed that limit, the window’s scrollbars will appear.
This property is useful in the case of a fluid layout or when applying to the content the float property to avoid that the block elements move downwards if the space is limited.
Unfortunately, the min-width is not supported by Internet Explorer 6.
Next, 2 solutions to specify a minimum width for IE6.
Continue to read >>
Internet explorer 6,
min-width,
minimum width
