Step n°4
We add animation to the menu with a:hover, thus when the mouse is over a link.
/*we change colors*/
/*we modify the borders and spacing
to avoid jerks*/
/*darker right and left borders*/
#menugauche li a:hover{
background-color:#A9CFFE;
color:#FFFFFF;
border-bottom:3px solid #E9F5FE;
border-top:4px solid #E9F5FE;
border-left:8px solid #6600CC;
border-right:8px solid #5200A4;
padding-bottom:1px;
padding-top:1px;
padding-right:0;
width:135px;
}
From now on, old browsers get lost:
/*2 columns*/
/*float makes things incompatible*/
/*space between the 2 columns*/
/*real width 44+.8+.8*/
.demi{
border:1px solid #FAAAFF;/*pb Netscape*/
float:left;
display:inline;/*ie fix*/
margin-left:.8em;
margin-right:.8em;
width:44%;
background-color:#E7F3FE;
text-align:left;
text-indent:.5em;
}
/*we add space between text and border*/
.demi div.n{
line-height:1.2em;
padding:10px;/*same as padding:10px 10px 10px 10px;*/
}
/*3 columns*/
.tiers2{
width:31%;
}
/*2 columns here the narrow column*/
.used{
width:28%;
}
/*2 columns here the wide column*/
.useg{
width:66%;
}
/*borders for the 2 columns,
hide textif it overflows*/
/*do not wrap text*/
.used,.useg,.tiers2{
border:1px solid #FAAAFF;/*pb Netscape*/
float:left;
display:inline;/*ie fix*/
line-height:1.5em;
margin-bottom:-1px;
margin-right:-1px;
overflow:hidden;
padding-left:.8em;
text-align:left;
white-space:nowrap;
}
.useg br,
.used br,
.tiers2 br,
.demi{
line-height:1.5em;/*bug Opera ie*/
}
/*correction of a sum problem*/
.tiers2 div.r{
padding-right:2%;
}
After a float, clear is necessary to mark the end of the DIV which wraps some content.
.clear{
clear:both;
padding-bottom:1px;/*Netscape 6 & 7*/
}
Title for a table with 3 columns
Left
Center
Right
The text is hidden
if there is
an overflow
so that alignment
is not modified.
Title for a table with 2 columns
Wide column on the left
Narrow on the right
Centered text
Bold characters
Column on the left using half of the content part of the page with margins on both sides.
Column on the right using half of the content part of the page with margins on both sides.