Border-right et margin

hello tout le monde

Bon là je galère sur un truc tout con mais je ne sais pas je bloque...

En fait, j'utilise un caroussel bootstrap, jusqu'ici tout va bien...

Je dois mettre un border-right sur les 4 premiers li qui me servent de repaires pour le faire défiler.

Quand c'est vert, c'est qu'on est sur la bonne image du caroussel

Sauf que ce border-right, prend la hauteur, le height donc, de mon .carousel-indicators .active et non de mon li de base.. et en plus le vert est collé à mon border-right, à droite..

Voici l'url pour mieux comprendre : vaurel.free.fr/shoes/index.html

Pour l'instant, je n'ai pas encore géré les @media...

Si vous avez une idée, je suis preneur !

Merci beaucoup

voici une image du problème :

J'ai fait quelques modifs (toujours sur la même url : vaurel.free.fr/shoes/index.html)
J'ai testé un border-right, un background-image et là je teste un background-color... mais impossible d'avoir ce que je veux

Voilà ce que je voudrai :




Alors si vous avez une idée pour m'aiguiller, ce n'est absolument pas de refus
J'en peux plus de ce problème et j'ai vraiment besoin de votre aide

Bonjour,
une solution serait d'utiliser du :before et :after sur l'élément class="actif"

par exemple pour l’espace noir avant (au début de la bare verte)

.carousel-indicators .active:before {
    background: none repeat scroll 0 0 #000;
    content: " ";
    height: 10px;
    left: 0;
    position: absolute;
    top: 0;
    width: 5px;
}

Avec biensur l'ajout de

.carousel-indicators .active {position : relative}

Résultat (uniquement pour l'élément de gauche): http://imageshack.com/a/img540/9435/imA0Es.png

A toi de réaliser l'élément de droite avec du :after sur .carousel-indicators .active
Modifié par Cr2a (10 Feb 2015 - 17:38)

Une solution :

.carousel-indicators li {
    background-color: #000;
    border: medium none;
    border-radius: 0;
    float: left;
    height: 12px;
    margin: 1px 1px 0 0; <!-- On modifie le margin -->
    padding-right: 1px !important;
}

on pourrait supprimer le border sur le :lastchild de ce li cela serait plus propre.

en plus :

.carousel-indicators .active:after {
    background: none repeat scroll 0 0 #000;
    border-right: 1px solid #595858; <!-- On rétabli le border -->
    content: " ";
    height: 12px;
    position: absolute;
    right: 0;
    top: -1px;
    width: 6px; <!-- On ajuste la taille -->
}

Cela semble pas mal ?
pour le texte il faut faire du JS

En fait il fallait enlever les padding ici (en commentaire):

.carousel-indicators {
	bottom:-21px;
	width:auto;
	left:-14px;
	overflow:hidden;
	/*padding-left:3px;*/
	/*padding-right:3px;*/
	
}

Donc en gros, j'ai :

.carousel-indicators {
	bottom:-21px;
	width:auto;
	left:-14px;
	overflow:hidden;
	
	/*padding-left:3px;*/
	/*padding-right:3px;*/
	
}

.carousel-indicators .active {
	 background-color: #57c5a0;
  	 border-color: #57c5a0;
	 height:12px;
	 float:left;
	/* margin-top:3px;*/
	margin-top:1px;
	 width:205px;
	 position : relative;
	
}

.carousel-indicators li {
   background-color: #000;
    border: medium none;
    border-radius: 0;
    float: left;
    height: 12px;
    margin:1px 1px 0 0;
    padding-right: 1px !important;
   
}

.carousel-indicators .active:before {
	 background: none repeat scroll 0 0 #000;
    border-right: 1px solid #595858;
    content: " ";
    height: 12px;
    position: absolute;
    left: 0;
    top:0px;
    width: 6px;
}

.carousel-indicators .active:after {
	 background: none repeat scroll 0 0 #000;
    border-right: 1px solid #595858;
    content: " ";
    height: 12px;
    position: absolute;
    right: 0;
    top: 0px;
    width: 6px;
}

Et pour les especes de margin qu'il y a au dessus et en dessous de .active (cf l'image), je dois directement toucher à cette classe ou au li directement?




Donne moi un indice

Cr2a a écrit :
Je ne vois pas ces marges sur ton site ...

Cette image sort du PSD que j'ai téléchargé!
Je me base donc sur celui-ci pour faire l'intégration