CSS / 3 columns / header / footer
no javascript, no table, no image
This page uses CSS. If you can see this message, CSS is not enabled in your browser options.
The page will not appear as intended.
no javascript, no table, no image
The menus of this page use an empty <span> tag which has been styled. Many other tags can be used.
As usual, cross browser compatibility is quite difficult to achieve. Konqueror, Safari, IE Mac or Opera until version 7.5 do not support the styles out of a link.
HTML tidy will display a warning as the tag is empty. We can insert , but MSIE may react unexpectedly.
Once a DOCTYPE has been chosen, margins and paddings have been set, Mozilla and Opera usually have quite the same rendering of CSS rules.
Thus we will need a few filters or "hacks" for MSIE users.
We will use a style for all the spans:
#maincol .content span {background-color: #D2E1FB;padding: 0 .5em;}
and make it compatible with MSIE:
* html #maincol .content span {display: block;position: absolute;}
In this context, the tag has no height, therefore we must set the container height for MSIE.
div.wrap {height: 1.5em;}
The result:
border: .2em solid #0A00B0;
border-left: .5em solid #0A00B0;padding: 0 .5em 0 0;
In this context only MSIE applies width.
<span> is much more useful in a link.
<a href="#"><span></span> Link<span></span></a>
Applied as it is on the right and on the left:
Linkwith MSIE in this context, there is a margin problem:
Link<a style="padding-left:1em;" href="#"><span style="margin-left:-1em;"></span> Link<span></span></a>
This code is not compatible with MSIE 5
Our HTML code:
<div class="menu_right">
<a href="#">
<span class="left"></span>
Link
<span class="right"></span>
</a>
</div>
The global setting of <span> must be reinitialized for our menu
#maincol .menu_right span {padding: 0;}
Here is the style for link containing our two tags:
div.menu_right a {
position: relative;
text-align: center;
text-decoration: none;
background-color: #D2E1FB;
color: #0A00B0;
font-family: "courier new", "sans serif";
display: block;
width: 9em;
height: 1em;
font-size: .9em;
padding: 5px;
border-bottom: 1px solid #0A00B0;
}
Then here is the style which is common to our two tags:
div.menu_right a span.left, div.menu_right a span.right {
position: absolute;
top: 0;
width: 0;
height: 0;
overflow: hidden;
border-top: 10px solid #E9F5FE;
}
Then let's style the one on the left
div.menu_right a span.right {left: 9em;border-left: 10px solid #D2E1FB;}
Then the right one
div.menu_right a span.left {left: 0;border-right: 10px solid #D2E1FB;}
As usual MSIE 5.5 needs width hacks:
/* start IE_Mac hide\*/
* html div.menu_right a{
width:auto;/*value for MSIE 5.x*/
}
* html div.menu_right a/**/{
width:/**/9em;/*value for MSIE 6*/
}
* html div.menu_right a span.left, div.menu_right a span.right{
width:1em;/*value for MSIE 5.x*/
}
* html div.menu_right a span.left, div.menu_right a span.right/**/{
width:/**/0;/*value for MSIE 6*/
}
/* end IE_Mac hide*/
The next pages will deal with the other methods to apply a style and animate a link.
Right Column
visits: 491382
at 5:20:50 utc+ on Tue Mar 19, 2024