Discussion :

[netjet]

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]

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]

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]

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.

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]

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]

Bonjour,
je peux pas t'aider là-dessus, je connais pas ce CMS. Il te faudrait apprendre à l'utiliser, c'est tout.

[netjet]

Bonjour,
je peux pas t'aider là-dessus, je connais pas ce CMS. Il te faudrait apprendre à l'utiliser, c'est tout.

En tout cas merci encore pour ton temps.
L'utilisation du CMS est plutôt simple mais sa personnalisation graphique est relativement compliquée par rapport à tous les autres...arf

En fait ce que je ne comprends pas:
- Je ne vois pas ou sont générées les pages html, cad lorsque je veux editer les html je ne les trouve nulle part...
- Dans la barre d'adresses du navigateur, je ne vois que du php 98% du temps.


Je vais essayer de me débrouiller avec ce que tu m'as écris plus haut...je te tiens au courant

merci encore

[EDIT]
J'ai compris ce que tu as fais (je suis presque fier )
En fait tu as défini une sous rubrique et tu la force à se positionner au milieu (50% à partir de la droite et 50% à partir de la gauche) et sans marge en bas.

Le truc c'est que dans le css j'ai vu un "sub category" qui doit correspondre à ca...je vais essayer de comprendre un peu plus...

Et si je forcais toutes les images des catégories que je charge de l'interface backend a etre toutes de la meme hauteur?

Je vais essayer ca...

[EDIT]

Merci beaucoup pour ton support cela m'a encouragé pour trouver une solution, de bricolage certes mais comme je ne suis pas suffisament calé, je fais comme je peux.

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 penses tu?

[Erwan31]

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]

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

[Erwan31]

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

Les liens sont soulignés par défaut

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

Tu met tes lien en display:block et tu ajoutes un height: 100% dessus (en supposant que tu conserves une hauteur fixe pour les li)

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

Mais de rien

[netjet]

Les liens sont soulignés par défaut


Tu met tes lien en display:block et tu ajoutes un height: 100% dessus (en supposant que tu conserves une hauteur fixe pour les li)


Mais de rien

Tu as oublié que j'étais débutant
Mais je t'ai suffisament embêté aujourdhui!

[Erwan31]

Tu as oublié que j'étais débutant

Oups en effet J'ai la mauvaise habitude d'être un peu trop expéditif
Tu me diras sur quoi tu bloques.
Bon week-end

[netjet]

Oups en effet J'ai la mauvaise habitude d'être un peu trop expéditif
Tu me diras sur quoi tu bloques.
Bon week-end

Ça marche! Merci encore!
Bon WE

[netjet]

Tu as oublié que j'étais débutant
Mais je t'ai suffisament embêté aujourdhui!

Erwan, je reviens à la charge, j'ai "bien" avancé sur le graphisme du site, à vrai dire pas trop mais j'ai surtout "bien" appris.

Je voudrais enlever le surlignage des fameuses catégories (ca je sais faire maintenant) mais je voudrais faire l'effet dont tu m'avais parlé.
Comment dois je faire?

[Erwan31]

Bonjour,
déjà tu dois supprimer .Left li a:hover {text-decoration: underline;}
Et pour l'effet je vois pas ce que tu souhaites faire.

[netjet]

Erwan,

j'ai essayé de faire une sorte d'arborescence du site, pour l'instant c'est sur la page d'accueil, mais je voudrais l'integrer dans le footer, comme sur ce site http://www.madein-marrakech.com/

Tu vois l'effet dont je veux parler?
En fait le texte est comme en surbrillance et quand tu le survole avec la souris il s'éclaire en quelque sorte.

Je me dis le fait d'avoir toute l'arborescence dans le footer en permanence faciliterait la navigation avec peut être comme avantage collatéral un meilleur référencement, peut être que je me trompe.
L'inconvenient c'est que je vais avoir en permanence un site qui ne tient pas sur une page, mais bon on ne peut pas tout avoir...

[Erwan31]

Bonsoir,
pour le lien c'est tout simple, il te suffit de changer la couleur du lien sur la pseudo-class :hover (a:hover {}). Si tu souhaites être autonome, je te conseil vivement de te former, CSS est un langage relativement simple d'accès.

Avant de te lancer dans la mise en place d'un big footer (comme celui que tu donnes en exemple), il te faudrait commencer par améliorer l'ergonomie et le design de ton site encore défaillant sur de nombreux points. La présence d'un big footer ne rattrapera jamais un site globalement peu soigné.

Ensuite tu dois tester ton site dur IE6, tu as utiliser des png32 bits alors qu'IE6 ne sait pas lire le canal alpha de transparence des PNG32
Ca peut se régler avec une ou deux bricoles mais c'est pas le plus simple.
Si c'est possible je te conseil de t'en tenir à un PNG 8 bits.

Malgré tout tu as quelques éléments assez réussis comme la colonne de gauche, la champ de recherche et le fond est assez sympathique.

En l'état ça fait pas du tout fini, le placement des éléments graphiques (logo...) est trop hasardeux et la largeur de l'interface utile est trop importante sur de grand écrans, ce qui implique un parcours de l'œil assez inhabituel, les textes manquent de hiérarchisation visuelle...

Juste une dernière remarque, mieux vaut mettre Accueil plutôt que Home, c'est pas un site en anglais

[netjet]

Bonsoir,
pour le lien c'est tout simple, il te suffit de changer la couleur du lien sur la pseudo-class :hover (a:hover {}). Si tu souhaites être autonome, je te conseil vivement de te former, CSS est un langage relativement simple d'accès.

Avant de te lancer dans la mise en place d'un big footer (comme celui que tu donnes en exemple), il te faudrait commencer par améliorer l'ergonomie et le design de ton site encore défaillant sur de nombreux points. La présence d'un big footer ne rattrapera jamais un site globalement peu soigné.

Ensuite tu dois tester ton site dur IE6, tu as utiliser des png32 bits alors qu'IE6 ne sait pas lire le canal alpha de transparence des PNG32
Ca peut se régler avec une ou deux bricoles mais c'est pas le plus simple.
Si c'est possible je te conseil de t'en tenir à un PNG 8 bits.

Malgré tout tu as quelques éléments assez réussis comme la colonne de gauche, la champ de recherche et le fond est assez sympathique.

En l'état ça fait pas du tout fini, le placement des éléments graphiques (logo...) est trop hasardeux et la largeur de l'interface utile est trop importante sur de grand écrans, ce qui implique un parcours de l'œil assez inhabituel, les textes manquent de hiérarchisation visuelle...

Juste une dernière remarque, mieux vaut mettre Accueil plutôt que Home, c'est pas un site en anglais

Salut Erwan,

Je t'ai écouté et fais pas mal de changements.
J'ai changé le design du layout, effectivement c'est mieux quand la page ne prends pas toute la largeur.
Il ne faut pas faire attention à la bannière dans le header c'est une horreur je n'ai pas encore bossé dessus. Je n'ai pas de bases suffisantes en graphisme pour en faire une belle, mais je me débrouillerais si je trouve des gens pour me donner un coup de main.


Pour l'effet que je veux avoir sur un certains de liens, je n'ai pas compris ton explication, tu pourrais me réexpliquer stp en plus simple?

Pour la formation css, je trouve ca tres interessant, je vais essayer de trouver un bon manuel et m'y atteller tu as raison, c'est beaucoup mieux que de tatonner.

Quels problèmes voit tu sur le site? (mis à part l'horrible banniere)

Pour les png, merde je ne savais pas que ca pourrait poser problème avec les anciennes versions de IE, je vais devoir tout reenregistrer en png 8...Ca va me prendre un certain temps

Quand tu dis "hierarchisation visuelle" tu penses à quoi?

Et une dernière chose, franchement MERCI pour tes conseils et tes encouragements!!

[Erwan31]

Je t'ai écouté et fais pas mal de changements.

Oui je vois c'est mieux comme ça

J'ai changé le design du layout, effectivement c'est mieux quand la page ne prends pas toute la largeur.

La largeur de ton contenu textuel est encore trop importante.
Pense à marger un peu plus tes texte (à gauche et à droite).

Pour l'effet que je veux avoir sur un certains de liens, je n'ai pas compris ton explication, tu pourrais me réexpliquer stp en plus simple?

a:hover {color:...}

Quels problèmes voit tu sur le site? (mis à part l'horrible banniere)

Désolé par le temps pour ça. Je te conseil de soumettre ton site à la critique dans le salon adéquate une fois que tu estimes l'avoir globalement terminé.
Mais sinon commence par supprimer tes frames, ça n'a aucune utilité ici en plus d'occasionner des problème de référencement (antre autres).

Pour les png, merde je ne savais pas que ca pourrait poser problème avec les anciennes versions de IE, je vais devoir tout reenregistrer en png 8...Ca va me prendre un certain temps

2 solution possibles:
> soit tu réserves les png8 bits (avec une dégradation acceptable) uniquement à IE6 via des commentaires conditionnels (faire une recherche sur "commentaires conditionnels IE")

> Soit tu utilises cette méthode http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html pour afficher aussi du PNG32 sur IE6, ce que je te déconseille au regard de ce que cela apporte...

Quand tu dis "hierarchisation visuelle" tu penses à quoi?

Je faisais référence aux tailles de titre peu différenciées du texte courant.
Par exemple un titre de premier niveau devrait être visuellement plus saillant
(par la taille, la couleur...) que ce qui suit. Penser en terme de contraste visuelle...

Bon courage pour la suite