28173 sujets

CSS et mise en forme, CSS3

Bonjour,
à travers ce nom barbare, la question est bien simple.

J'ai une class CSS qui me permet d'afficher des petites icones.

.icones_gauche img{
	height: 40px;
	float: left;
	border: 0;
	padding-right: 10px;
}


A coté de ça, je souhaite mettre en forme une structure de type "Petite icone suivie d'un texte, centré verticalement par rapport à cette icone"

Bien sûr, il m'est facile de faire ce système par un vertical-align: middle sur la balise align_v référençant ce texte :

.icones_gauche.align_v h5{
	vertical-align: middle;
}


Mais mon texte ne sera pas toujours de type h5.

Ma question est : Est-il possible d'ajouter proprement (et simplement pour rendre le code CSS propre) toutes les autres balises (aussi bien de tailles, que les span...) à ce bout de CSS pour que la structure ci-dessus soit toujours appliquée ?
Je ne veux pas faire une class pour chaque balise non plus, plutôt tous les regrouper dans cet icone_gauche.align_v
Modifié par Killaman (07 Jun 2007 - 11:36)
EDIT : En fait, ce que j'expliquais au dessus ne semble pas fonctionner, alors ma question va être plus simple :

Comment réaliser la condition souhaitée : "Petite icone suivie d'un texte, centré verticalement par rapport à cette icone"

Et comment l'adapter à toutes les balises de taille de texte ?
Et bien sûr, j'aimerai toujours que cela ne tienne que sur un petit bout de code, et non plusieur code répétitifs pour chaque taille.
Salut,

j'aurais tendance à placer cette icône en image de fond, dans la feuille de style, et à utiliser une classe sur l'élément de texte concerné. Par exemple,
<h3 class="icon">bla bla bla</h3>
<p class="icon">blablabla</p>
.icon {
    background: #fff url(img/icon.png) 0 center no-repeat;
    padding-left: 24px;
}
Bonjour,

Comme le dit Thomas D., si l'icône est juste une icône et qu'elle n'apporte rien au contenu, il est plus pertinent de la mettre en image de fond.

Mais il faut garder à l'esprit que le centrage vertical d'un bloc de texte n'est possible que dans une cellule de tableau, ou un élément en display: table-cell; (propriété qui a évidemment la mauvaise idée de ne pas être implémenté sur les principaux navigateurs du marché).

D'une façon plus générale, centrer un texte à côté d'une image, c'est pas très joli, puisque le centrage est fonction de la longueur du texte. Ça crée des espaces de hauteur aléatoire entre les blocs de texte.
Modifié par Lanza (07 Jun 2007 - 12:06)
Huuum... Merci pour votre aide.

Mais d'après ce que dit Thomas D., il faudrait creer une nouvelle class pour chaque icone insérée en image de fond ?!?

.icon {

    background: #fff [b]url(img/icon.png)[/b] 0 center no-repeat;

    padding-left: 24px;

}


Moi je voudrai que ce code CSS s'applique soit à n'importe quelle taille de texte, soit, comme dans l'exemple que vous me montrez, à n'importe quelle icone... Sans pour autant écrire un bout de code pour chacun d'eux