28234 sujets

CSS et mise en forme, CSS3

[Résolu] Slider pas fixer a la page

Bonjour,

je suis pas une pro dans le html et css mais je me débrouille,
mon problème c'est que mon slider bouge quand je descend dans ma page web il n'est pas fixe.

j'ai réaliser ce slider grâce a un logiciel trouver sur le net.
je dois mettre la balise fixed mais ou je sais pas, j'ai déjà fais des essaies sans succés.

Merci pour votre aide Smiley smile

voici ma feuille css;


/* blue button large */
.as-btn-blue-large {
  	display: inline-block;
  	border: none;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: #009cde;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #fff;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 10px 16px;
	font-size: 24px;
	font-weight: 300;
  	-webkit-border-radius: 4px;
  	-moz-border-radius: 4px;
  	border-radius: 4px;
}


.as-btn-blue-large:hover {
  	color: #fff;
  	background: #0285d2;
}

.as-btn-blue-large:focus {
  	outline: 0;
}

/* blue button medium */
.as-btn-blue-medium {
  	display: inline-block;
  	border: none;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: #009cde;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #fff;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: normal;
  	-webkit-border-radius: 2px;
  	-moz-border-radius: 2px;
  	border-radius: 2px;
	
}

.as-btn-blue-medium:hover {
  	color: #fff;
  	background: #0285d2;
}

.as-btn-blue-medium:focus {
  	outline: 0;
}

/* blue button small */
.as-btn-blue-small {
  	display: inline-block;
  	border: none;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: #009cde;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #fff;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: normal;
  	-webkit-border-radius: 0px;
  	-moz-border-radius: 0px;
  	border-radius: 0px;

}

.as-btn-blue-small:hover {
  	color: #fff;
  	background: #0285d2;
}

.as-btn-blue-small:focus {
  	outline: 0;
}

/* blue border large */
.as-btn-blueborder-large {
  	display: inline-block;
  	border: 2px solid #009cde;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: transparent;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #009cde;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	vertical-align: baseline;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 10px 16px;
	font-size: 24px;
	font-weight: 300;
  	-webkit-border-radius: 4px;
  	-moz-border-radius: 4px;
  	border-radius: 4px;

}

.as-btn-blueborder-large:hover {
  	color: #fff;
  	background: #009cde;
}

.as-btn-blueborder-large:focus {
  	outline: 0;
}

/* blue border medium */
.as-btn-blueborder-medium {
  	display: inline-block;
  	border: 2px solid #009cde;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: transparent;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #009cde;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	vertical-align: baseline;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: normal;
  	-webkit-border-radius: 2px;
  	-moz-border-radius: 2px;
  	border-radius: 2px;
	
}

.as-btn-blueborder-medium:hover {
  	color: #fff;
  	background: #009cde;
}

.as-btn-blueborder-medium:focus {
  	outline: 0;
}

/* blue border small */
.as-btn-blueborder-small {
  	display: inline-block;
  	border: 2px solid #009cde;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: transparent;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #009cde;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	vertical-align: baseline;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: normal;
  	-webkit-border-radius: 0px;
  	-moz-border-radius: 0px;
  	border-radius: 0px;

}

.as-btn-blueborder-small:hover {
  	color: #fff;
  	background: #009cde;
}

.as-btn-blueborder-small:focus {
  	outline: 0;
}

/* orange button large */
.as-btn-orange-large {
  	display: inline-block;
  	border: none;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: #f7a020;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #fff;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 10px 16px;
	font-size: 24px;
	font-weight: 300;
  	-webkit-border-radius: 4px;
  	-moz-border-radius: 4px;
  	border-radius: 4px;

}

.as-btn-orange-large:hover {
  	color: #fff;
  	background: #ffc030;
}

.as-btn-orange-large:focus {
  	outline: 0;
}

/* orange button medium */
.as-btn-orange-medium {
  	display: inline-block;
  	border: none;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: #f7a020;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #fff;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: normal;
  	-webkit-border-radius: 2px;
  	-moz-border-radius: 2px;
  	border-radius: 2px;
}

.as-btn-orange-medium:hover {
  	color: #fff;
  	background: #ffc030;
}

.as-btn-orange-medium:focus {
  	outline: 0;
}

/* orange button small */
.as-btn-orange-small {
  	display: inline-block;
  	border: none;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: #f7a020;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #fff;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: normal;
  	-webkit-border-radius: 0px;
  	-moz-border-radius: 0px;
  	border-radius: 0px;
}

.as-btn-orange-small:hover {
  	color: #fff;
  	background: #ffc030;
}

.as-btn-orange-small:focus {
  	outline: 0;
}

/* orange border large */
.as-btn-orangeborder-large {
  	display: inline-block;
  	border: 2px solid #f7a020;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: transparent;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #f7a020;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	vertical-align: baseline;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 10px 16px;
	font-size: 24px;
	font-weight: 300;
  	-webkit-border-radius: 4px;
  	-moz-border-radius: 4px;
  	border-radius: 4px;
}

.as-btn-orangeborder-large:hover {
  	color: #fff;
  	background: #f7a020;
}

.as-btn-orangeborder-large:focus {
  	outline: 0;
}

/* orange border medium */
.as-btn-orangeborder-medium {
  	display: inline-block;
  	border: 2px solid #f7a020;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: transparent;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #f7a020;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	vertical-align: baseline;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: normal;
  	-webkit-border-radius: 2px;
  	-moz-border-radius: 2px;
  	border-radius: 2px;
}

.as-btn-orangeborder-medium:hover {
  	color: #fff;
  	background: #f7a020;
}

.as-btn-orangeborder-medium:focus {
  	outline: 0;
}

/* orange border small */
.as-btn-orangeborder-small {
  	display: inline-block;
  	border: 2px solid #f7a020;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: transparent;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #f7a020;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	vertical-align: baseline;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: normal;
  	-webkit-border-radius: 0px;
  	-moz-border-radius: 0px;
  	border-radius: 0px;

.as-btn-orangeborder-small:hover {
  	color: #fff;
  	background: #f7a020;
}

.as-btn-orangeborder-small:focus {
  	outline: 0;
}

/* white button large */
.as-btn-white-large {
  	display: inline-block;
  	border: none;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: #fff;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #444;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 10px 16px;
	font-size: 24px;
	font-weight: 300;
  	-webkit-border-radius: 4px;
  	-moz-border-radius: 4px;
  	border-radius: 4px;
}

.as-btn-white-large:hover {
  	color: #fff;
  	background: #444;
}

.as-btn-white-large:focus {
  	outline: 0;
}

/* white button medium */
.as-btn-white-medium {
  	display: inline-block;
  	border: none;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: #fff;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #444;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: normal;
  	-webkit-border-radius: 2px;
  	-moz-border-radius: 2px;
  	border-radius: 2px;
}

.as-btn-white-medium:hover {
  	color: #fff;
  	background: #444;
}

.as-btn-white-medium:focus {
  	outline: 0;
}

/* white button small */
.as-btn-white-small {
  	display: inline-block;
  	border: none;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: #fff;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #444;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: normal;
  	-webkit-border-radius: 0px;
  	-moz-border-radius: 0px;
  	border-radius: 0px;
}

.as-btn-white-small:hover {
  	color: #fff;
  	background: #444;
}

.as-btn-white-small:focus {
  	outline: 0;
}

/* white border large */
.as-btn-whiteborder-large {
  	display: inline-block;
  	border: 2px solid #fff;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: transparent;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #fff;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	vertical-align: baseline;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 10px 16px;
	font-size: 24px;
	font-weight: 300;
  	-webkit-border-radius: 4px;
  	-moz-border-radius: 4px;
  	border-radius: 4px;
}

.as-btn-whiteborder-large:hover {
  	color: #444;
  	background: #fff;
}

.as-btn-whiteborder-large:focus {
  	outline: 0;
}

/* white border medium */
.as-btn-whiteborder-medium {
  	display: inline-block;
  	border: 2px solid #fff;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: transparent;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #fff;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	vertical-align: baseline;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: normal;
  	-webkit-border-radius: 2px;
  	-moz-border-radius: 2px;
  	border-radius: 2px;
}

.as-btn-whiteborder-medium:hover {
  	color: #444;
  	background: #fff;
}

.as-btn-whiteborder-medium:focus {
  	outline: 0;
}

/* white border small */
.as-btn-whiteborder-small {
  	display: inline-block;
  	border: 2px solid #fff;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: transparent;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #fff;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	vertical-align: baseline;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: normal;
  	-webkit-border-radius: 0px;
  	-moz-border-radius: 0px;
  	border-radius: 0px;
}

.as-btn-whiteborder-small:hover {
  	color: #444;
  	background: #fff;
}

.as-btn-whiteborder-small:focus {
  	outline: 0;
}

/* navy button large */
.as-btn-navy-large {
  	display: inline-block;
  	border: none;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: #334455;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #fff;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 10px 16px;
	font-size: 24px;
	font-weight: 300;
  	-webkit-border-radius: 4px;
  	-moz-border-radius: 4px;
  	border-radius: 4px;
}

.as-btn-navy-large:hover {
  	color: #fff;
  	background: #445566;
}

.as-btn-navy-large:focus {
  	outline: 0;
}

/* navy button medium */
.as-btn-navy-medium {
  	display: inline-block;
  	border: none;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: #334455;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #fff;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: normal;
  	-webkit-border-radius: 2px;
  	-moz-border-radius: 2px;
  	border-radius: 2px;
}

.as-btn-navy-medium:hover {
  	color: #fff;
  	background: #445566;
}

.as-btn-navy-medium:focus {
  	outline: 0;
}

/* navy button small */
.as-btn-navy-small {
  	display: inline-block;
  	border: none;
  	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 0;
  	background: #334455;
  	font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif,Arial;
  	color: #fff;
  	cursor: pointer;
  	text-align: center;
  	text-decoration: none;
  	text-shadow: none;
  	text-transform: none;
  	white-space: nowrap;
  	-webkit-font-smoothing: antialiased;
	padding: 5px 10px;
	font-size: 12px;
	font-weight: normal;
  	-webkit-border-radius: 0px;
  	-moz-border-radius: 0px;
  	border-radius: 0px;
}

.as-btn-navy-small:hover {
  	color: #fff;
  	background: #445566;
}

.as-btn-navy-small:focus {
  	outline: 0;
}

Modifié par 6l20 (27 Apr 2016 - 17:44)
Bonjour,

Et tu crois qu'on va lire tout ça sans coloreur syntaxique ?
Pourrais-tu insérer les balises [ code = css ] et [ /code ] sur ton code stp ?

D'autre part, c'est bien joli tout ce css mais où est la partie Html ?

Un autre conseil qui nous aiderais en tant que contributeur serait de poster ton code sur Codepen ou consœur.

Merci.
Bonjour Greg_lumiere,

mille excuse je suis nouvelle sur ce forum et je sais pas trop comment sa marche j'ai pourtant cliquer sur Code en dessous Smiley sweatdrop je réctife tout sa tout de suite Smiley decu
Ele80 a écrit :
mille excuse
Ok alors j'en prends une et laisse le reste pour les autres Smiley cligne

Ele80 a écrit :
je suis nouvelle sur ce forum
Soie la bienvenue !

Ele80 a écrit :
et je sais pas trop comment sa marche
T'inquiète ça va venir.

Ele80 a écrit :
je réctife tout sa tout de suite
Prends ton temps, Précipitation est mère de tous les vices !
D'ailleurs c'était qui la mère de Précipitation ?!

Blague à part, ce qui nous aide aussi à nous pencher sur un problème est d'avoir de l'avoine à manger.
L'avoine c'est du code, plus c'est propre plus ça attire. Plus c'est facile d'accès.. plus ça attire. Plus t'en fais plus et plus nous répondons plus plus.

Tout ça pour dire qu'au vu de la lourdeur de ton code, un exemple sur une plateforme en ligne n'est pas un caprice de star. Pour ce faire il existe Codepen.io et JSFiddle.com (.com je crois) entre-autre qui permettent de publier un bout de code et d'avoir accès à la prévisualisation du code en directe. Ainsi chacun d'entre nous peut faire joujoux avec les paramètres avant de te dire la solution qu'il retient.
Modifié par Greg_Lumiere (26 Apr 2016 - 19:20)
Salut et bienvenue,

Pour colorer ton code sur le forum, tu sélectionnes l'ensemble de la partie de code que tu veux et ensuite tu clique sur le bouton en dessous correspondant à ton langage (CSS en l'occurence).
Tu auras automatiquement une balise ouvrante[ code=css ] et une fermante [ /code ] (sans espace).
Tu pourras vérifier la bonne prise en compte quand tu valideras ton post, essaie !

Greg a été un peu sec mais c'est vrai que ton post est très long et sans coloration ça sera difficile de t'aider Smiley biggrin mais dès que tu auras rectifié ça il sera ravi de t'aider !

En effet, l'idéal sur ce genre de demande avec beaucoup de code est de reproduire ton cas qui pose problème sur un site tel que codepen.io (je ne te parle que de celui-ci car j'en suis juste fan). Tu crées un compte gratuit (ou pas mais c'est mieux), tu crées un nouveau Pen, tu écris ton code HTML, CSS et éventuellement JS puis tu copies l'url du Pen et tu viens la coller ici.
Tu es pleine de surprises...
Je ne sais pas comment tu as mis ce code sur github... mais bon j'ai fait le lien vers Codepen et ai regardé mais on va pas pouvoir faire grand chose, le code n'est vraiment pas assez complet.

Le plus compliqué c'est que le code est généré par un logiciel (que j'ai trouvé... Amazing Slider) et ce code est pas top top.
Il y a plein de <br>, c'est inutile, le CSS est très répété etc...
Je ne sais pas ce que tu veux faire mais si tu veux faire un slider pour tes images assez simple il faudrait plutôt t'orienter vers des solutions plus simples à intégrer et à utiliser. Par exemple swiper, owl ou encore lightSlider... enfin bon il y en plein, plus ou moins complexes.
Smiley confused je ne trouvé pas comment faire le lien puis j'ai appuyé sur un lien en bas de page et j'ai été redirigé vers github Smiley rolleyes je pensais que c'été comme sa Smiley decu

ok je vais refaire mon slider Smiley smile

Merci MatthieuR Smiley smile
Sujet clos
Aller à