Sujet Précédent Sujet Suivant

Repositionner un slider

Fermé
Helenedu39 Messages postés 121 Date d'inscription dimanche 21 octobre 2012 Statut Membre Dernière intervention 1 juillet 2014 - 15 mai 2014 à 14:16
bg62 Messages postés 23649 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 18 octobre 2024 - 20 mai 2014 à 12:06
bonjour,

voila je souhaiterais comprendre pourquoi mon slider apparaît dans le header et non en dessous voici le code Css :

header{
background-image: url(images/ufc.jpg);
}
body {
margin:0px;
padding:0px;
font-size:12px;
background-color: black;
font-family: arial;
color:#999;
text-shadow:0px 1px 1px #000;
text-align: justify;
}

a {
text-decoration:none;
color:#a62828;
}

a img {
border:none; /*Contre bug IE*/
}

#top {
width:100%;
background-image: -webkit-linear-gradient(top, #222222, #1f2226);
background-image: -moz-linear-gradient(top, #222222, #1f2226);
background-image: -o-linear-gradient(top, #222222, #1f2226);
background-image: -ms-linear-gradient(top, #222222, #1f2226);
height:50px;
}

nav {
width:950px;
margin:auto;
padding-top:15px;
}

nav ul, nav ul li, nav ul li ul, nav ul li ul li {
margin:0px;
padding:0px;
list-style-type: none;
}

nav ul li{
display:inline-block;
float:left;
}

nav ul li a {
display:block;
width:110px;
text-align:center;
font-size:12px;
font-family:arial;
font-weight:bold;
border-left:1px solid #31363c;
color:red;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}

nav ul li a:hover {
color:black;
}

nav ul li ul {
display:none;
padding:5px 0px 5px 0px;
}

nav ul li ul li{
display:list-item;
float:none;
}

nav ul li:hover ul {
position:absolute;
display:block;
/*background-image: -webkit-linear-gradient(top, #1f2226, #222);
background-image: -moz-linear-gradient(top, #1f2226, #222);
background-image: -o-linear-gradient(top, #1f2226, #222);
background-image: -ms-linear-gradient(top, #1f2226, #222);*/
background-color:black;
color : red;
-webkit-border-radius:10px;
-moz-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
z-index:999;
}

nav ul li ul li a {
border:none;
padding-top:5px;
padding-bottom:5px;
font-size:10px;
border-bottom:1px solid black;
}

nav li:last-child a{ border-right: none; }
nav li:first-child a {border-left:none;}

#connexion {
float:right;
}

#connexion input {
padding:2px 10px 2px 10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
background-image: -webkit-linear-gradient(top, #540f0f, #370a0a);
background-image: -moz-linear-gradient(top, #540f0f, #370a0a);
background-image: -o-linear-gradient(top, #540f0f, #370a0a);
background-image: -ms-linear-gradient(top, #540f0f, #370a0a);
border:1px solid #1f0606;
color:#999;
font-size:11px;
}

/*Le contenu en haut*/

#content_top {
width:100%;
min-height:300px;
/* background-image:url(../images/bg.jpg);*/
background-color : black;
border-bottom:1px solid #131416;
padding-top:30px;
}

#content_top_center {
width:900px;
margin-right:auto;
margin-left:auto;
height:300px;
}

.content_gauche {
width:200px;
height:300px;
}

.content_droite {
width:700px;
float:right;
height:300px;
margin-top:-300px;
}

.content_droite_gauche {
float:left;
width:430px;
padding:10px;
height:280px;
overflow:auto;
}

.content_droite_droite {
float:right;
width:230px;
padding:10px;
height:280px;
overflow:auto;
}

/*Bouton rechercher*/
#search input[type="text"] {
background: url(../images/search.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 9px Arial,Helvetica,Sans-serif;
color: #777;
width: 130px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
margin-top:20px;
}

#search input[type="text"]:focus {
width: 135px;
}

/*Slider*/
*{
padding:0;
margin:0;
list-style-type:none;
}

#slider{
width:400px;
height:250px;
position:relative;
-webkit-box-shadow: 0 10px 6px -6px #101010;
-moz-box-shadow: 0 10px 6px -6px #101010;
-o-box-shadow: 0 10px 6px -6px #101010;
box-shadow: 0 10px 6px -6px #101010;
border:2px solid #101010;

}

#mask{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}

.fleche{
position:absolute;
top:115px;
cursor:pointer;
}

#fleche_gauche{
left:-10px;
}

#fleche_droite{
right: -10px;
}

#image_container{
position:absolute;
width:400%;
height:100%;
-webkit-transition-property:all;
-webkit-transition-duration:1s;
-moz-transition-property:all;
-moz-transition-duration:1s;
-o-transition-property:all;
-o-transition-duration:1s;
transition-property:all;
transition-duration:1s;
}

/* Les différentes positions du slider */

.image1 #image_container{
left:0;
}

.image2 #image_container{
left:-100%;
}

.image3 #image_container{
left:-200%;
}

/* Les images */
#image_container li{
float:left;
width:400px;
}

.combatsfinis {
width:240px;
height:230px;
padding:0px 0px 10px 0px;
background:#444;
-webkit-border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;
border-radius:15px;
overflow:auto;
-webkit-box-shadow:0px 5px 1px #222222;
-o-box-shadow:0px 5px 1px #222222;
-moz-box-shadow:0px 5px 1px #222222;
box-shadow:0px 5px 1px #222222;
}

.combatsfinis p {
display:block;
margin-top:5px;
}

.combatsfinis p a {
display:block;
font-size:10px;
padding:5px;
width:30px;
background-image: -webkit-linear-gradient(top, #222222, #1f2226);
background-image: -moz-linear-gradient(top, #222222, #1f2226);
background-image: -o-linear-gradient(top, #222222, #1f2226);
background-image: -ms-linear-gradient(top, #222222, #1f2226);
margin:auto;
text-align:center;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}

.combatsfinis h1 {
display:block;
color:#a62828;
text-shadow:0px 1px 1px ;
text-align:center;
border-bottom: 1px solid #363636;
padding-top:5px;
padding-bottom:5px;
font-size:16px;
font-family:arial;
background:#222222;
}

.combatfinisresultats {
display:block;
background-color:#595959;
padding:5px 30px 5px 5px;
background-image:url(images/vs.png);
background-position:right center;
background-repeat:no-repeat;
border-bottom:1px dashed #696969;
height:30px;
}

.combatfinisresultats:hover {
background-color:#6b6b6b;
}

.gagnant {
background:#2f470a;
text-transform:uppercase;
font-family:verdana;
padding:2px;
color:#c5c5c6;
font-size:10px;
}

.perdant {
background:#7b2424;
text-transform:uppercase;
font-family:verdana;
padding:2px;
font-size:10px;
color:#c5c5c6;
}
/*Contenu*/

#content_principal {
width:900px;
margin:auto;
margin-top:50px;
min-height:50px;
}

#content_principal h1 {
display:block;
color:#a62828;
text-shadow:0px 1px 1px ;
border-bottom: 1px solid #363636;
padding-top:5px;
padding-bottom:5px;
font-size:16px;
font-family:arial;
}

#content_principal_gauche {
width:280px;
min-height:50px;
float:left;
padding:10px;
}

.calendrier, .combat_du_mois, .sondage {
width:240px;
min-height:230px;
padding:0px 0px 10px 0px;
background:#444;
-webkit-border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;
border-radius:15px;
overflow:auto;
-webkit-box-shadow:0px 5px 1px #222222;
-moz-box-shadow:0px 5px 1px #222222;
-o-box-shadow:0px 5px 1px #222222;
box-shadow:0px 5px 1px #222222;
margin-bottom:50px;
}

.calendrier h1, .combat_du_mois h1, .sondage h1 {
display:block;
color:#a62828;
text-shadow:0px 1px 1px ;
text-align:center;
border-bottom: 1px solid #363636;
padding-top:5px;
padding-bottom:5px;
font-size:16px;
font-family:arial;
background:#222222;
}

#content_principal_droite, #news {
width:580px;
min-height:50px;
float:right;
padding:10px;
}

#news h1{
color:#a62828;
display:block;
padding:5px;
margin-bottom:5px;
border:1px solid #131416;
font-size:15px;
text-align:right;
background-color: red;
-webkit-border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;
border-radius:15px;
}

#news h1 img {
float:left;
}

.infos_news {
width:100px;
float:left;
text-align:center;
font-style:italic;
font-size:11px;
}

.contenu_news {
width:465px;
float:right;
padding-left:15px;
}

.contenu_news p {
border-left:1px solid #444;
padding-left:5px;
}

.comments {
display:block;
width:100%;
text-align:right;
margin-top:5px;
padding-top:5px;
color:#767676;
}

.archives {
width:100%;
text-align:center;
font-size:10px;
}
/*Footer*/

footer {
clear:both;/*Pour que le conteneur des news s'adapte au texte*/
width:100%;
background-image: -webkit-linear-gradient(top, #222222, #1f2226);
background-image: -moz-linear-gradient(top, #222222, #1f2226);
background-image: -o-linear-gradient(top, #222222, #1f2226);
background-image: -ms-linear-gradient(top, #222222, #1f2226);
height:200px;
margin-top:50px;
border-top:1px solid #131416;
}

#footer_center {
width:880px;
margin:auto;
padding:10px;
font-size:11px;
}

.footer_center_gauche {
width:230px;
height:160px;
padding:10px;
border-right:1px solid #272b30;
overflow:auto;
}

.footer_center_gauche h1 {
display:block;
text-align:center;
width:100%;
border-bottom:1px solid #272b30;
padding-bottom:5px;
margin-bottom:5px;
}

.footer_center_center {
width:360px;
height:160px;
margin:auto;
margin-top:-180px;
padding:10px;
border-right:1px solid #272b30;
overflow:auto;
}

.footer_center_center h1 {
display:block;
text-align:center;
width:100%;
border-bottom:1px solid #272b30;
padding-bottom:5px;
margin-bottom:5px;
}

.footer_center_center a {
display:block;
text-align:center;
width:100%;
padding-bottom:5px;
margin-bottom:1px;
color:#999;
background:#272b30;
}

.footer_center_center a:hover {
font-style:italic;
background:#2f343a;
}

.footer_center_droite {
width:230px;
float:right;
height:160px;
margin-top:-180px;
padding:10px;
overflow:auto;
text-align:center;
}

.footer_center_droite h1 {
display:block;
text-align:center;
width:100%;
border-bottom:1px solid #272b30;
padding-bottom:5px;
margin-bottom:5px;
}

/*Recherches avancées*/

.recherches_avancees h2{
display:block;
margin:15px;
}

/*Interface membre et admin*/
.unefoisco {
text-decoration: italic;
font-size:11px;
color:#a62828;
}

.unefoisco2 {
font-size:8px;
text-transform:uppercase;
}

#content_principal_gauche ul li a {
display:block;
width:100%;
text-align:center;
padding-top:15px;
padding-bottom:15px;
background:#202225;
margin-bottom:1px;
}

#tab_combattant td{
height:200px;
width:141px;
margin-top:40px;
text-align:center;
}
#tab_combattant td img{
display:solid;
border:2px solid #be0000;
height:150px;
width:100px;
border-radius:6px;
-webkit-box-shadow: 1px 1px 10px black inset;
-moz-box-shadow: 1px 1px 10px black inset;
-o-box-shadow: 1px 1px 10px black inset;
box-shadow: 1px 1px 10px black inset;
}

#trie{
text-align:center;
height:30px;
background-color:#272b32;
border:2px solid #be0000;
border-radius:6px;
-webkit-box-shadow: 1px 1px 10px black inset;
-moz-box-shadow: 1px 1px 10px black inset;
-o-box-shadow: 1px 1px 10px black inset;
box-shadow: 1px 1px 10px black inset;
}
#trie h1{
border-bottom:2px solid #363636;
}
#trie:active{
height:120px;
}
#trie_cache{
display:none;
}
#trie:active #trie_cache{
display:block;
}
.form_col {
display: inline-block;
margin-right: 15px;
padding: 3px 0px;
width: 200px;
min-height: 1px;
text-align: right;
}

input {
padding: 2px;
border: 1px solid #CCC;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}

input:focus {
border-color: rgba(82, 168, 236, 0.75);
-moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
-webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
}

.correct {
border-color: rgba(68, 191, 68, 0.75);
}

.correct:focus {
border-color: rgba(68, 191, 68, 0.75);
-moz-box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
-webkit-box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
box-shadow: 0 0 8px rgba(68, 191, 68, 0.5);
}

.incorrect {
border-color: rgba(191, 68, 68, 0.75);
}

.incorrect:focus {
border-color: rgba(191, 68, 68, 0.75);
-moz-box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
-webkit-box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
box-shadow: 0 0 8px rgba(191, 68, 68, 0.5);
}

.tooltip {
display: inline-block;
margin-left: 20px;
padding: 2px 4px;
border: 1px solid #555;
background-color: #CCC;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

#tablecommentaire {
width:100%;
border:1px solid #888;
}

#tablecommentaire td {
border:1px solid #888;

}

.contenucomm{
width:400px;
padding:5px;
}

Voila j'espère que vous pourrez m'aider

Helenedu39
A voir également:

2 réponses

Réponse 1 / 2
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
16 mai 2014 à 15:05
Bonjour

donne l'url du site
la, personne ne peux te reopndre car pas de html
0
bg62 Messages postés 23649 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 18 octobre 2024 2 384
16 mai 2014 à 15:20
ah bon ... une histoire de 'clown' alors :)
@+
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
16 mai 2014 à 15:43
c'est exact ! mais une histoire de clown ne sortira pas un slider du header meme avec un tour de magie ! lol
0
bg62 Messages postés 23649 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 18 octobre 2024 2 384
16 mai 2014 à 16:19
et pourtant .... c'est peut-être ce qu'il attend :)
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
16 mai 2014 à 22:09
bah la petite souris de une sourisetmoi va passer pour sortir le html de <div id="slider"> de <header></header> et elle mettra peut être une dent à la place
0
bg62 Messages postés 23649 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 18 octobre 2024 2 384
17 mai 2014 à 12:23
oui ... peut-être, mais pour l'instant aucun signe de vie de l'auteur de la demande ...
0
Réponse 2 / 2
Helenedu39 Messages postés 121 Date d'inscription dimanche 21 octobre 2012 Statut Membre Dernière intervention 1 juillet 2014 111
20 mai 2014 à 08:36
je veu bien lherberger mais je sais pa encore faire
-_-
0
bg62 Messages postés 23649 Date d'inscription samedi 22 octobre 2005 Statut Modérateur Dernière intervention 18 octobre 2024 2 384
20 mai 2014 à 12:06
il y a pourtant des ... milliers de réponse sur le net et ici aussi :
https://www.commentcamarche.net/faq/s/
;)
0

Discussions similaires

Problème de transfert slider qui ne veut plus se charger
On3x -
On3x -

13 réponses
Slider Avant / Après
litcheetuyet -
CCMBot -

1 réponse
mon slider ne marche pas
Pacho001 -
Pacho001 -

4 réponses
Google slides sur usb
MIKEMADROSAT -
jf -

1 réponse
Décrocher sans glisser
soeusoeur -
Jeanpierreisbg -

15 réponses