Bonjour,
J'ai recherché quelques infos sur le sujet mais trop d'informations, tue l'information. Ou alors, rien de bien concluant.
J'ai "conçu" un menu horizontal (à l'aide de ce site : http://www.css3create.com/Navigation-a-onglets-fluides-avec-les-transitions-CSS ).
A ce niveau, aucun soucis tout fonctionne. Sauf, évidemment sous IE.
J'ai pourtant bien suivi les étapes, et explicité chaque info pour ce navigateur...
Si quelqu'un voit une de mes erreurs (très probable) je lui en serais grandement reconnaissant...
Merci à tous par avance !
Qui s'applique sur :
J'ai recherché quelques infos sur le sujet mais trop d'informations, tue l'information. Ou alors, rien de bien concluant.
J'ai "conçu" un menu horizontal (à l'aide de ce site : http://www.css3create.com/Navigation-a-onglets-fluides-avec-les-transitions-CSS ).
A ce niveau, aucun soucis tout fonctionne. Sauf, évidemment sous IE.
J'ai pourtant bien suivi les étapes, et explicité chaque info pour ce navigateur...
Si quelqu'un voit une de mes erreurs (très probable) je lui en serais grandement reconnaissant...
Merci à tous par avance !
<style type="text/css" media="screen,print">
html,
body {
margin:0;
padding:0;
height:auto;
}
html>body #wrap {height:100%;}
/* Gestion du cadre de la page */
#wrap {
width:60em;
margin:5px auto;
border: 1px solid #696;
padding:50px 0;
text-align: center;
/*Gestion des contours du cadre*/
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
}
#header {
/*En tête (Logo)*/
width:60em;
}
html>body #header {
position:absolute;
top:1em;
z-index:10;}
html>body #content-wrap {height:100%;}
html>body #content {padding:6em 1em;}
html>body #footer {
position:absolute;
bottom:0;
z-index:10;
}
html,
body {
color:#333;
}
h1,
h2 {
margin:0.25em 0;
font:normal 1.5em/1.1 "Century Gothic","Trebuchet MS",Helvetica,Arial,Geneva,sans-serif;
text-align:center;
letter-spacing:1px;
}
#header,
#footer {
color:#111;
text-align:center;
}
#footer a {color:#111;}
ul{
display: table;
width: 100%;
margin: 100px auto;
padding: 0;
font: 1.1em;
/* Dégradé de la barre*/
background: white;
background: linear-gradient(gold, dodgerblue);
/* Compatibilité */
background: -webkit-linear-gradient(gold, ForestGreen);
background: -moz-linear-gradient(gold, ForestGreen);
background: -ms-linear-gradient(gold, ForestGreen);
background: -o-linear-gradient(gold, ForestGreen);
background: linear-gradient(gold, ForestGreen);
/*Ombres et contours de la barre*/
border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .3),
0 3px 5px rgba(0, 0, 0, .2),
0 5px 10px rgba(0, 0, 0, .2),
0 20px 20px rgba(0, 0, 0, .15);
}
ul li{
display: table-cell;
}
ul li a{
display: block;
text-align: center;
color: rgba(0, 0, 0, .7);
text-decoration: none;
padding: 8px 8px 17px 8px;
text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
/* Ombres Lien */
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
/* Transition */
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-ms-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
position: relative;
}
ul li:first-child a{
border-radius: 3px 0 0 3px;
}
ul li:last-child a{
border-radius: 0 3px 3px 0;
}
ul li a:hover,
ul li a:focus{
background: rgba(255,255,255,.2);
box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset,
0 -1px 0 rgba(0%,0%,0%,1) inset,
0 -2px 0 rgba(0,0,0,1) inset,
0 -3px 0 rgba(0,0,0,1) inset,
0 -4px 0 rgba(0,0,0,1) inset,
0 -5px 0 rgba(0,0,0,1) inset;
padding: 8px 25px 17px 25px;
-webkit-transition: all .3s .0s;
-moz-transition: all .3s .0s;
-ms-transition: all .3s .0s;
-o-transition: all .3s .0s;
transition: all .3s .0s;
}
ul li a:active{
background: linear-gradient(rgba(0,153,0,.2),rgba(0,153,0,.1));
box-shadow: 0 0 2px rgba(0,0,0,.3) inset;
background: -webkit-linear-gradient(rgba(0,153,0,.2),rgba(0,153,0,.1));
background: -moz-linear-gradient(rgba(0,153,0,.2),rgba(0,153,0,.1));
background: -ms-linear-gradient(rgba(0,153,0,.2),rgba(0,153,0,.1));
background: -o-linear-gradient(rgba(0,153,0,.2),rgba(0,153,0,.1));
background: linear-gradient(rgba(0,153,0,.2),rgba(0,153,0,.1));
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
ul li a::before{
content: '';
position: absolute;
left: 50%;
bottom: 9px;
margin-left: -2px;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(0, 0, 0, .5);
}
ul li a:hover::before,
ul li a:focus::before{
background: yellow;
box-shadow: 0 0 2px yellow,
0 -1px 0 rgba(0, 0, 0, .4);
}
</style>Qui s'applique sur :
<body>
<div id="wrap">
<div id="header">
<img src="C:\Users\user\Jérémy\SKI\logo.gif"></img>
</div>
<div id="content-wrap">
<div id="content">
<ul>
<li><a href="#1">Accueil</a></li>
<li><a href="#2">Photos</a></li>
<li><a href="#3">Vidéos</a></li>
<li><a href="#4">Membres</a></li>
<li><a href="#5">Contact</a></li>
<li><a href="#6">Évenements</a></li>
</ul>
<p class="corpsdepage">
Ceci est le corps
</div>
</div>
</div>
</div>
</body></html>