| Re: barre navigation et slider |
Titre du sujet : Re: barre navigation et slider
par papi sur 13/09/2013 19:58:42
J'ai beau chercher je ne comprends pas.
Voilà la partie du thème concernée :
<!--- Module Header --->
<script type="text/javascript" src="<{xoAppUrl /jseffects/others/textsizer.js}>"></script>
<script language="" src="/saigiasso/jseffects/browserdetect.js" type="text/javascript"></script>
<!-- Sheet Css -->
<link rel="stylesheet" type="text/css" media="all" title="Style sheet" href="<{xoAppUrl xoops.css}>" />
<link rel="stylesheet" type="text/css" media="all" title="Style sheet" href="/saigiasso/themes/XDPerpetual/css/style.css" />
<!--- Start xo_slidorion --->
<link href="/saigiasso/themes/XDPerpetual/slidorion/css/slidorion.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,700' rel='stylesheet' type='text/css'>
<script src="/saigiasso/themes/XDPerpetual/Slidorion/dist/jquery.min.js"></script>
<script src="/saigiasso/themes/XDPerpetual/Slidorion/js/jquery.easing.js"></script>
<script src="/saigiasso/themes/XDPerpetual/Slidorion/dist/jquery.slidorion.min.js"></script>
<script>
$(function() {
$('#slidorion').slidorion({
interval: 9000,
effect: 'slideRandom'
});
});
</script>
<!--- End xo_slidorion --->
<{$xoops_module_header}>
</head>
J'appelle plus loin la barre de navigation et le slider par :
<!--- INCLUDE HORIZONTAL MENU -->
<{includeq file="$theme_name/xo_barrenav.html"}>
<!-- INCLUDE SLIDORION -->
<{includeq file="$theme_name/xo_slidorion.html"}>
Le CSS du slider :
/* Slidorion Stylesheet */
.slidorion {
position: relative;
width: 980px; /* Set to slidorion width. Is equal to .slider + .accordion width */
height: 340px; /* Set to slidorion height. Equal to .slider and .accordion height */
left: 50%;
background-color: #B6BFEF;
padding: 20px;
border: 1px solid #BBB;
box-shadow: 0 0 34px #bbb;
margin-left: -511px;
}
.slider {
width: 68%;
height: 100%;
position: relative;
float: left;
overflow: hidden; /* Hides the animations */
}
.slider .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.accordion {
width: 32%;
height: 100%;
font-family: helvetica;
background-color: #B6BFEF;
box-shadow: -3px 0px 3px -1px rgba(51,51,51,0.3);
position: relative;
z-index: 999;
overflow: hidden;
float: left;
}
.accordion .header {
padding: 8px 14px;
font-size: 12px;
font-weight: bold;
color: #99113e; /*#8090e2;*/
background: #ededed;
/* background: -moz-linear-gradient(top, #ededed 59%, #dcdcdc 100%);
background: -webkit-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
background: -o-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
background: -ms-linear-gradient(top, #ededed 59%,#dcdcdc 100%);
background: linear-gradient(top, #ededed 59%,#dcdcdc 100%); */
border-top: 1px solid #ccc;
}
.accordion .header:first-child {
border-top: none;
}
.accordion .header:hover {
background: #EDEDED;
cursor: pointer;
}
.accordion .header.active {
border-bottom: none;
background: #676767 !important;
color: #FFF;
}
.accordion .content {
height: 200px; /* hauteur à changer en fonction du nbre de lignes et de photos */
font-weight: normal;
font-size: 12px;
line-height: 20px;
text-align: justify;
margin: 0;
padding: 16px;
border: none;
background: #d6d6d6;
background: -moz-linear-gradient(top, #d6d6d6 0%, #ffffff 10%);
background: -webkit-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
background: -o-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
background: -ms-linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
background: linear-gradient(top, #d6d6d6 0%,#ffffff 10%);
overflow: auto;
}
.accordion .content p {
margin-bottom: 10px;
}
.slidorion .slidorion-nav {
position: absolute;
top: 200px;
width: 16px;
height: 27px;
z-index: 9999;
background: url(/saigiasso/themes/XDPerpetual/slidorion/img/arrows.png) 0 0 no-repeat;
cursor: pointer;
}
.slidorion .slidorion-nav-left {
left: 30px;
}
.slidorion .slidorion-nav-right {
right: 310px;
background-position: -16px 0;
}
<!--- End slidorion --->
et le CSS de la barre de navigation !
/*============= Style for barrenav.html ================*/
#xo_barrenav {
height: 30px !important;
width: 100%;
margin: 0;
background : url(../XDimages/navbar.gif) repeat-x left top; *
}
* html #xo_barrenav {
height: 30px;
}
#xo_barrenav .xo-label {
display: none;
}
#xo_barrenavmenu {
display: block;
float: left;
width: 100%;
}
/**** horizontal menu ***/
#xo_barrenav {
background : url(../XDimages/navbar.gif) repeat-x left top;
color: #99113e;
font-size: 12px;
height: 30px !important;
margin: 0;
width: 100%;
vertical-align: central;
text-shadow: 2px 2px 3px #aaa;
}
#menu {
font-style : normal;
font-size : 12px;
text-align: center;
}
#menu, #menu ul {
padding : 0;
margin : 0;
list-style : none;
line-height : 21px;
text-align : left;
}
#menu a {
display : block;
padding : 0;
background : #fff;
color : #99113e;
text-decoration : none;
width : 168px;
text-align : center;
font-style: bold;
}
#menu li {
float : left;
/* border-right : 1px solid #333; /* on met une bordure blanche à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li {
/* border-right: 1px solid #333 ; /* on met une bordure transparente à droite de chaque élément */
}
#menu li ul {
position: absolute;
width: 168px;
left: -999em; /
}
#menu li ul li {
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-top : 1px solid #333; /* on met une bordure blanche en haut de chaque élément d'une sous liste */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li {
border-top : 1px solid #333; /* on met une bordure transparente en haut de chaque élément */
}
#menu li ul ul {
margin : -22px 0 0 140px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
/* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
border-left : 1px solid #333 ; /* Petite bordure à gauche pour ne pas coller ... */
}
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète  */
html>body #menu li ul ul {
border-left : 1px solid #333 ; /* on met une bordure transparente sur la gauche de chaque élément */
}
#menu a:hover {
color: #fff; /* On passe le texte en noir... */
background-color: #99113e; /* ... et au contraire, le fond en blanc */
}
#menu li:hover ul ul, #menu li.sfhover ul ul {
left: -999em;
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul {
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}
/***** End Barrenav css ****/
Merci de ton aide/
Si je gagne au super-loto ce soir je donne un pourcentage à celui qui me dépatouille de cela
|
|
