18041 sujets

Questions générales et questions de débutants

Centrer des sliding doors ?

Bonjour à tous,

Voila j'ai des liens a href à faire qui vont avoir des tailles différentes, j'ai donc employé les sliding doors (portes coulissantes) pour que la largeur de mon image .gif (et le bord arrondi qui va avec) s'adaptent a la taille du texte de ce lien.

Mais un problème se pose, par exemple, j'ai sur beaucoup de pages, 2 liens auxquels je vais appliquer les sliding doors et ceux-ci doivent être sur la meme ligne et centrés horizontalement.

Je n'ai pas réussi à faire ça sauf en utilisant votre tutorial pour centrer des blocs mais le problème est que comme vous savez je dois absolument spécifié une largeur à l'élément à centrer pour que le centrage horizontal se fasse.

Ce qui fait que mes sliding doors sont donc limitées a la largeur que je définie et un peu inutiles en fin de compte...

MA question est donc : est-il possible de centrer horizontalement mes éléments sans perdre l'effet des sliding doors ?
Modifié par Chrisis (22 Feb 2007 - 16:57)
Tu peux toujours adapter la fameuse technique des slidings doors à des éléments en ligne, qui eux peuvent se centrer facilement.

Quelque chose comme ça :


ul{
text-align:center;
}
li{
display:inline;
padding:5px 0 5px 10px;
}
span{
padding:5px 10px 5px 0;
}

<ul>
<li><span>blabla</span></li>
<li><span>blabla</span></li>
</ul>


Par contre attention :
- ça implique que les retours chariots entre les <li> soit visibles comme des espaces, pas vraiment possible de coller les <li> entre eux sauf en les collant dans le code html.
- les paddings haut et bas des éléments en lignes imbriqués ne s'additionnent pas sauf sous IE (6 et 7)

Voilou
MrPatate a écrit :
Tu peux toujours adapter la fameuse technique des slidings doors à des éléments en ligne, qui eux peuvent se centrer facilement.

Quelque chose comme ça :


ul{
text-align:center;
}
li{
display:inline;
padding:5px 0 5px 10px;
}
span{
padding:5px 10px 5px 0;
}

<ul>
<li><span>blabla</span></li>
<li><span>blabla</span></li>
</ul>


Par contre attention :
- ça implique que les retours chariots entre les <li> soit visibles comme des espaces, pas vraiment possible de coller les <li> entre eux sauf en les collant dans le code html.
- les paddings haut et bas des éléments en lignes imbriqués ne s'additionnent pas sauf sous IE (6 et 7)

Voilou



Merci ta solution m'a l'air viable, je vais testé ca Smiley biggrin

Sinon le fait que les retours chariots entre les <li> soit visibles comme des espaces, ça me dérange pas , de toute facon mes 2 liens doivent etre espacés un minimum a cause du background que je leur applique

Et pour le padding je verrais bien Smiley biggol
Bon je viens testé, je n'arrive malheureusement pas à centrer horizontalement mes 2 liens Smiley decu , quand aux liens que tu m'a fourni et je t'en remercie, j'ai pas tout compris Smiley eek

sinon voici le code CSS concernant mes liens en rappelant que j'utilise les sliding doors donc une une classe css concerne le background(bckgrd.gif) et l'autre un bord arrondi de ce meme background ( left.gif) :


#account ul
{
text-align: center;

}

#account li
{
	display:inline;
	
}


#account .link
{
	/*padding:5px 10px 5px 0;*/	
	margin-left: 10px;	
	/*width: 125px;*/
	text-align: center; 
	float: left;
	background: #004178 url("../img/acc/bckgrd.gif") top right no-repeat;
	font-size: 23px;
	cursor: pointer;
	text-decoration: none;	
	border:0;
	
}

#account .link a
{
	
	border: 0;
	display: block;
	background: url("../img/acc/left.gif") left no-repeat;
	font:700 11px arial;
	color:#fff;
	height: 20px;
	text-decoration: none;
	cursor:pointer;
	padding:1px 5px 0px 5px;
}


et le code html de mes 2 liens : 



<ul>
<li><span class="link"><a href="#">Modifier le contact</a></span></li>
<li><span class="link"><a href="#">Nouveau contact</a></span></li>
</ul>


Faites pas attention aux bouts de code en doublon qui servent à rien ^^

Si qq'un à une solution je suis plus que preneur Smiley cligne

Merci d'avance
Attention, tout ce qui est à l'intérieur de la liste doit rester en ligne, tu ne peux pas utiliser de float:left, ni de display:block et d'ailleurs tu n'en as pas besoin.

Il te suffit juste de jouer sur les padding pour créer les marges internes et appliquer les images de fond, regarde bien l'exemple que j'ai posté plus haut.
Sujet clos
Aller à