28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai réalisé un carrousel avec WowSlider que j'ai intégrer à mon logiciel de programmation Nvu.
J'aimerai déplacer ce dernier vers la gauche comme ceci :

upload/54409-Capture.JPG

Je ne sais pas trop comment m'y prendre, je ne suis pas à l'aise avec le CSS, alors si quelqu'un pourrait m'éclaircir. Merci bien !!!

Si dessous, un Un document de feuille "style" qui s'est installé en même temps que mon carrousel, cela pourrait être utile

#wowslider-container { 
/*	overflow: hidden; */
	zoom: 1; 
	position: relative; 
	width:630px;
	margin:0 auto;
	z-index:100;
}
#wowslider-images{
	width:630px;
	height:350px;
}
#wowslider-images a{
	color:transparent;
}

#wowslider-images img{
	position:absolute;
	visibility:hidden;
	top:0;
	left:0;
	border:none 0;
}
#wowslider-container a{ 
	text-decoration: none; 
	outline: none; 
	border: none; 
}

#wowslider-container  .ss_bullets { 
	font-size: 0px; 
	padding: 10px; 
	float: left;
	position:absolute;
	top:0;
	right: 0;
	z-index:1001;
}
#wowslider-container .ss_bullets a { 
	margin-left: 5px; 
	height: 10px; 
	width: 10px; 
	float: left; 
	border: 1px solid #d6d6d6; 
	color: #d6d6d6; 
	text-indent: -1000px; 
	background-image:url("data:image/gif;base64,");
}
#wowslider-container .ss_selbull { 
	background-color: #d6d6d6; 
	color: #FFFFFF; 
}
#wowslider-container a.ss_next, #wowslider-container a.ss_prev {
	position:absolute;
	display:block;
	top:50%;
	margin-top:-16px;
	position:absolute;
	z-index:1001;
	height: 67px;
	width: 32px;
	background-image: url(./arrows.png);
}
#wowslider-container a.ss_next{
	background-position: 0 0; 
	right:-7px;
}
#wowslider-container a.ss_prev {
	left:-7px;
	background-position: 0 100%; 
}
#wowslider-container a.ss_next:hover{
	background-position: 100% 0; 
}
#wowslider-container a.ss_prev:hover{
	background-position: 100% 100%; 
}
#wowslider-container .ws-title{
	position: absolute;
	bottom:7%;
	left: 0;
	margin-right:5px;
	z-index: 50;
	background-color:#FFF;
	color:#1E4553;
	padding:10px;
	opacity:0.7;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);	
	font-family: Tahoma,Arial,Helvetica;
	font-size: 14px;
}
#wowslider-container .ws-title div{
	padding-top:5px;
	font-size: 12px;
}

J'ai d'autres fichiers qui se sont installé aussi, si vous en avez besoin demander moi.

Merci d'avance!
Modifié par judith1706 (26 Apr 2014 - 18:58)
Bonjour,

Si d'autres règles ont une influence sur ton carrousel, il va être difficile de te venir en aide de façon efficace, une page en ligne nous donne accès à l'ensemble des codes et permet des réponses plus fines Smiley cligne
A priori, le slider est centré sur ta page (ou dans son conteneur) grâce au dimensionnement et aux marges latérales automatiques :
#wowslider-container { 
/*	overflow: hidden; */
	zoom: 1; 
	position: relative; 
	width:630px; /* ici */
	margin:0 auto; /*et ici */
	z-index:100;
}

Il devrait suffire de modifier ces marges, et/ou de positionner d'une autre manière ce conteneur.
Guide de survie du positionnement CSS

Bon courage Smiley cligne