Alignement horizontal des catégories

**netjet** · 24/09/2009, 16h29

Bonjour à tous,

Je suis novice en css, essayez d'être indulgents svp.

Voici le site que je suis entrain de faire : www.materieldepiscine.com

je sais il est extrêmement moche mais je n'ai pas encore commencé à travailler sur la partie graphique.

Mon problème est le suivant:

Lorsque vous naviguez sur une des catégories (piscines par exemple), les titres des sous-catégories ne sont pas alignés horizontalement.
j'ai essayé de bidouiller avec webdevelopper sur firefox, joué avec vertical-align:bottom mais cela ne fait rien, je n'ai peut etre pas trouver le bon endroit ou l'inserer...

Merci par avance

**Erwan31** · 24/09/2009, 21h22

Bonsoir,
si on considère que tu dois centrer tes intitulés de rubriques de largeur variables et les laisser au même niveau vertical en bas du bloc item en coservant l'image dans le HTML, tu t'attaques pas au plus simple.

Techniquement la solution la plus simple consisterait à passer par un background CSS pour chaque image mais c'est pas toujours très commode et pas toujours possible...
Comme c'est pas évident et que tu débutes, je suis sympa, je te donne le code tout cuit

Pour le CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#sousrub li {
	position: relative; 
	width: 120px; 
	height: 170px;
	}
#sousrub a {text-decoration:none}
#sousrub span {
	position: absolute; 
	right:50%;
	bottom: 0	
}
#sousrub span span {
	right: auto;
	position:relative;
	left: 50%;
}

XHTML (modèles sur 4 items de liste à reproduire)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<ul id="sousrub">
	<li><a href="http://90plan.ovh.net/%7Ehydratec/shopisc/categories/Piscines/Filtres/"><img src="a_data/filtres_top__28868.png" /><span><span>Filtres</span></span></a></li>
	<li><a href="http://90plan.ovh.net/%7Ehydratec/shopisc/categories/Piscines/Pompes/"><img src="a_data/big_discovery__18007.png" width="120" height="83" alt="" /><span><span>Pompes</span></span></a></li>
	<li><a href="http://90plan.ovh.net/%7Ehydratec/shopisc/categories/Piscines/Coffrets-%C3%A9lectriques/"><img src="a_data/coffret_piscine__58507.png" width="120" height="99" alt="" /><span><span>Coffrets électriques</span></span></a></li>
	<li><a href="http://90plan.ovh.net/%7Ehydratec/shopisc/categories/Piscines/Locaux-techniques/"><img src="a_data/local-technique__53572.png" width="120" height="120" alt="" /><span><span>Locaux techniques</span></span></a></li>
</ul>

Tu peux
> transférer la taille du li dans la règle CSS associée dans le fichier CSS
> supprimer l'attribut border de l'image (déconseillé)
> ajouter systématiquement un attribut alt vide (dans ce cas) aux image
> Ajouter les attribut de taille intrinsèque de l'image

Il faut éviter d'avoir 2 fois le même lien dans chaque LI, ça alourdit le code et c'est inutile ici...

Voilà vaut mieux pas que je t'explique le centrage, ça risque de t'embrouiller

Pose moi des questions si ce n'est pas clair.

PS: pourquoi utilises tu des frame?

**netjet** · 25/09/2009, 12h58

Erwan Merci beaucoup et encore merci merci!

Excuse moi mais je vais encore abuser

Ou dois je inserer ces codes?
Pour le css ok je suppose que je l'insere dans le style.css, mais à quel niveau? J'imagine que cela doit avoir une importance?

Pour le html, je n'ai aucune idée ou je dois l'inserer, j'ai des fichiers html dans le template, mais euh dans lequel? et à quel emplacement?

Merci encore de ton aide!

**Erwan31** · 25/09/2009, 13h57

Envoyé par netjet

Ou dois je inserer ces codes?
Pour le css ok je suppose que je l'insere dans le style.css, mais à quel niveau? J'imagine que cela doit avoir une importance?

Ah ça c'est à toi de voir selon l'organisation interne de ton fichier CSS

Ceci dit, pour être certain donner priorité des ces règles sur toutes les autres règle qui cible les même éléments, il est préférable de les placer à la fin.

Envoyé par netjet

Pour le html, je n'ai aucune idée ou je dois l'inserer, j'ai des fichiers html dans le template, mais euh dans lequel? et à quel emplacement?

Ben c'est le code de ton fichier HTML que j'ai repris et qu'il faut que tu remplace (en partie), je peux pas t'en dire plus.

**netjet** · 25/09/2009, 14h58

Envoyé par Erwan31

Ah ça c'est à toi de voir selon l'organisation interne de ton fichier CSS

Ceci dit, pour être certain donner priorité des ces règles sur toutes les autres règle qui cible les même éléments, il est préférable de les placer à la fin.

Ben c'est le code de ton fichier HTML que j'ai repris et qu'il faut que tu remplace (en partie), je peux pas t'en dire plus.

Ce que je n'ai pas dis c'est que j'ai utilisé un CMS, donc je n'ai rien eu à developper, le css été deja fait et l'arborescence des html est tres bizarre (pour un néophyte comme moi), d'habitude je vois des fichiers html mais la ce n'est que du php, et les fichiers html ont une structure tres particulieres, en fait il n'y a dedans que des appels vers les "panels"

**Erwan31** · 25/09/2009, 19h10

Envoyé par netjet

J'ai finalement redimensionné les deux premieres images des catégories à la même hauteur, et les titres sont alignés.
Les images sont un peu plus petites mais bon ca ne dérange pas trop je pense...Qu'en pense tu?

Dans la mesure ou la visualisation des détails de l'objet n'est pas nécessaire, des échelles d'objets non strictement identique ne devraient pas poser problème, en plus d'harmoniser les blanc tournant des images (l'espace vide autour)
Donc ma technique n'a pas lieu d'être dans ces conditions.

Pour améliorer encore l'esthétique de l'ensemble, je supprimerais les soulignement (inutile ici), j'ajouterais un filet léger (via un border CSS) au niveau du lien block,
pour permettre un changement de couleur/luminosité du filet au survol du lien
et ajouter ainsi un léger sentiment d'intéractivité et atténuer le sentiment de flottement des objets.

**netjet** · 25/09/2009, 19h24

Envoyé par Erwan31

Dans la mesure ou la visualisation des détails de l'objet n'est pas nécessaire, des échelles d'objets non strictement identique ne devraient pas poser problème, en plus d'harmoniser les blanc tournant des images (l'espace vide autour)
Donc ma technique n'a pas lieu d'être dans ces conditions.

Pour améliorer encore l'esthétique de l'ensemble, je supprimerais les soulignement (inutile ici), j'ajouterais un filet léger (via un border CSS) au niveau du lien block,
pour permettre un changement de couleur/luminosité du filet au survol du lien
et ajouter ainsi un léger sentiment d'intéractivité et atténuer le sentiment de flottement des objets.

Erwan,

Oui effectivement, il faut que j'arrange les cadres blancs autour, mais c'est à dire que je n'ai pas encore choisi le fond etc...J'attends qu'une copine me fasse une bannière en titre et je choisirais les couleurs en conséquent pour essayer d'avoir une certaine uniformité. Mais ce qui est sur c'est que je voudrais avoir quelque chose de très simple et léger.
Mais je me demande ce que cela donnerait si je virais le cadre carrement...

Pour le surlignage tu as raison je vais essayer de l'enlever, je pense que j'ai vu un "underligned" quelque part

Pour le léger filet, je ne sais pas vraiment comment faire, tu vois tu t'attires du boulot :p

Merci Erwan pour ton aide, je t'offre un verre (meme si c'est au singulier ca peut etre une bonne dizaine

), il y a juste un petit milliers de Km à faire, mais bon la vie est longue