Smon a écrità Alexandre P : Envoie moi une archive de ton mockup HTML, je m'occupe de le finir 🙂 Si tu fais vite, je propose une pré-version pour 18h
AlexandreP a écritJ'ai même fait
une 'tite archive pour récupérer le tout facilement !
Nanméoh ! :o :lol:
Merci !
Ner0lph a écritIl y a aussi l'utilisation de -moz-border-radius, mais ça ne marchera qu'avec Firefox (c'est ce qui est utilisé pour l'arrondi des notes dans la doc). Pour les autres, c'est -webkit-border-radius, -khtml-border-radius, -o-border-radius (de la propriété CSS border-radius, non finalisée).
Y'a toujours le problème que ça passe pas sous IE (7 et ultérieur), non ?
Ner0lph a écritSinon, pour les effets au survol des images, il vaut mieux utiliser la technique des portes coulissantes, ça évitera un désagréable effet lors du premier survol d'une image non chargée.
Les "portes coulissantes", c'est pratique pour un élément ayant une taille fixe. Dans l'exemple de Smon, ce serait probablement possible à utiliser, puisqu'il assigne une image d'arrière-plan différente à chacun des onglets. Dans mon exemple, ce n'est pas possible parce que j'utilise une même image pour l'ensemble des onglets :
<div id="tabs-content" class="tabs">
<ul>
<li class="active">[URL=#presentation]À propos d'Ubuntu[/URL]</li>
<li>[URL=#site]À propos du site[/URL]
<li>[URL=#soutien]Soutien[/URL]
</ul>
</div>
<div id="tabs-sidebar" class="tabs">
<ul>
<li class="active">[URL=#events]<span>En ce moment</span>[/URL]</li>
<li>[URL=#news]<span>Activités récentes</span>[/URL]
</ul>
</div>
.tabs {
float: left;
background: url('images/tabs-left.png') no-repeat top left;
padding-left: 10px;
padding-bottom: 3em;
min-height: 35px;
}
.tabs ul {
padding: 0;
padding-right: 10px;
margin: 0;
background: url('images/tabs-right.png') no-repeat top right;
min-height: 35px;
}
.tabs ul li {
float: left;
list-style: none;
background: url('images/tabs.png') repeat-x top left;
padding: 1em;
}
.tabs ul li:hover, .tabs ul li.active {background: url('images/tabs-hover.png') repeat-x top left;}
