4) Mitres, part 1: Rounded without image
A method exists to use mitres:portes coulissantes, but i used another one, but this one (Example 2, Horizontal).
It's a fantastic cheat ("Astuce"). With this, you can create a lot mitres without images. when you have understand the method, (css method), il is easy to create mitres with a lot of combinaisons :
- color,
- size (width) (small, normal and large mitres)
- dark mitres or not
I will try to explain to you:
<div id="navigation">
<ul>
<li>
<a class="menumini" href="http://monsite.fr/lien1.html" title="Mon lien 1">
<b class="BoxOnglet"><span class="BoxContenu couleur4">Lien 1</span><b class="b4 couleur4"></b><b class="b3 couleur4"></b><b class="b2 couleur4"></b></b>
</a>
</li>
</ul>
</div>
With this css lines (read the comments):
// localsation of mitres on the page
#navigation {
padding-left: 300px;
background: transparent no-repeat;
margin: 0px;
height: 4em; /* cache overflow:hidden de IE5/Mac */
overflow: hidden; /* */
background-image: url(images/fonds_blocnote_top.png);
height: 45px;
}
#navigation ul {
margin:0px;
padding:0;
list-style-type:none;
background:transparent;
}
#navigation li {
display:block;
float:left;
margin:15px 2px 0px 0px;
}
.BoxOnglet, .BoxOngletFonce {
background:transparent;
}
// mitres for dark text
.BoxOnglet span {
text-align: center;
color: #FFCC33;
margin: 0px;
font-family: verdana;
font-size: 80%;
font-weight: normal;
}
// Mitres for not dark text
.BoxOngletFonce span {
text-align: center;
color: #093F7D;
margin: 0;
font-family: verdana;
font-size: 80%;
font-weight: normal;
}
// Cheat for the rounded mitres
// b1 étant la base la plus large et b4 la plus petite
.b1, .b2, .b3, .b4 {
display:block;
font-size:xx-small;
/* cache overflow:hidden de IE5/Mac */
/* */
overflow: hidden;
/* */
}
.b1, .b2, .b3 {height:1px;}
.b2, .b3, .b4 {
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
}
.b1 {margin:0px 5px; background:#FFFFFF;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0 1px;}
// mitres contour
.BoxContenu {
display:block;
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
}
// normal size mitres
a.menu {
display:block;
text-decoration:none;
width:6.5em;
}
// small sire mitres
a.menumini {
display:block;
text-decoration:none;
width:3.5em;
}
// large size mitres
a.menugrand {
display:block;
text-decoration:none;
width:9.5em;
}
a.menu:hover, a.menumini:hover, a.menugrand:hover {
background:transparent;
cursor:pointer;
text-decoration: none;
}
a.menu:hover span, a.menumini:hover span, a.menugrand:hover span {
padding-top:8px;
}
// Color mitres
.rouge {background:#cc3333;}
.bleu {background:#093F7D;}
.jaune {background:#FFCC33;}
.comite{background:#3662a2;}
|
|
Login
Search
Recent Comments
Who's Online
Donat-O-Meter
| Stats | |
| Goal: | $100.00 |
| Due Date: | Apr 30 |
| Gross Amount: | $0.00 |
| Net Balance: | $0.00 |
| Left to go: | $100.00 |
 |
|