Site dans le domaine ferroviaire

[tom-over]

Bonjour,

Voici ma nouvelle créa sous Contao !
C'est un site sur traitant de la sécurité des accès dans le domaine ferroviaire.
http://www.train-denyfontaine.com

Ce site est disponible en Français et en Anglais.

J'utilise les modules suivant :

- Catalogue
- subcolumns
- changelanguage
- wcslider couplé à ce_slider

La recherche de plan n'est pas une extension Contao mais un "ZoomTour" en Jquery...

Encore un bug à corriger dans .htaccess pour éviter le duplicate content de la page d'accueil...
Voir le post : tutoriels-contao/tuto-realiser-fichier-htaccess-professionnel-contao-t1737-15.html#p12203

Bonne visite !

[tom-over]

- Page d'accueil, changer les paramètres du slider pour mettre un effet de transition en fondu (à la place du défilement gauche > droite)... mais ça c'est une question de goût !

En effet c'est une question de goûts ! Je préfère le défilement ça donne du dynamisme à la page... et j'ai fait plein de site en fondu donc ça change un peu

- Page d'accueil, faire en sorte que les blocs "Vos applications... nos solutions !" et "INNOTRANS 2012" soient identiques au niveau de la hauteur ou encore du style de titres (MAJ/min)

En effet j'avai oublié que les blocs n'étaient pas identiques sur IE9.. ah merde Mozilla aussi ... pas facile de gérer avec tt les navigateurs. Je vais voir si il est possible de rendre ça compatible sachant qu'en septembre le contenu va de nouveau changer... sans parler de la version anglaise qui ne contient pas la même quantité de texte !

- Page Solutions, mettre un padding/margin sur le texte "Quelques références"... trop collé sur les bords

ah yes j'ai oublié de le faire... comme j'utilise l'élément de contenu "Liste" et le padding n'est visiblement pas respecté !

- Sur l'ensemble des pages, soigner le footer... qui selon moi n'est pas correctement intégré et n'apporte rien au niveau visuel... ça "gâche" même le site + manque les liens vers la page "Mentions légales" sur toutes les pages... sauf la page d'accueil

Je n'ai pas compris.. tu trouves que le footer dans la home page n'est pas bien intégré au site ?

Merci Fix d'apporter un oeil neuf sur le site afin que je puise le fignoler

BIZARRE ! ! ma réponse s'affiche avant ton post ?

[FiX']

Hello,

Le site est pas mal, même si il faudrait modifier quelques petits détails :

- Page d'accueil, changer les paramètres du slider pour mettre un effet de transition en fondu (à la place du défilement gauche > droite)... mais ça c'est une question de goût !

- Page d'accueil, faire en sorte que les blocs "Vos applications... nos solutions !" et "INNOTRANS 2012" soient identiques au niveau de la hauteur ou encore du style de titres (MAJ/min)

- Page Solutions, mettre un padding/margin sur le texte "Quelques références"... trop collé sur les bords

- Sur l'ensemble des pages, soigner le footer... qui selon moi n'est pas correctement intégré et n'apporte rien au niveau visuel... ça "gâche" même le site + manque les liens vers la page "Mentions légales" sur toutes les pages... sauf la page d'accueil

Voilà, voilà !

A+

[FiX']

En effet j'avai oublié que les blocs n'étaient pas identiques sur IE9.. ah merde Mozilla aussi ... pas facile de gérer avec tt les navigateurs. Je vais voir si il est possible de rendre ça compatible sachant qu'en septembre le contenu va de nouveau changer... sans parler de la version anglaise qui ne contient pas la même quantité de texte !

C'est sûr c'est pas toujours facile !

ah yes j'ai oublié de le faire... comme j'utilise l'élément de contenu "Liste" et le padding n'est visiblement pas respecté !

Pas de soucis, on ne peut pas toujours tout voir !

Je n'ai pas compris.. tu trouves que le footer dans la home page n'est pas bien intégré au site ?

Je trouve que le footer n'est pas correctement intégré au site de façon générale.

Il s'affiche différemment sur les pages. La structure n'est pas la même sur la page d'accueil que sur les autres pages (plus de textes / plus de liens sur la page d'accueil).

En gros, je pense qu'il faudrait espacer le footer du contenu (ex : page Produits, les crédits sont trop collés au contenu) et pourquoi ne pas reprendre l'idée du background du menu afin de finaliser complétement le site... ou alors mettre les crédits dans une couleur de texte moins visible... plus discrète (ex: gris clair, au lieu du gris/noir)

Merci Fix d'apporter un oeil neuf sur le site afin que je puise le fignoler

Pas de soucis, je suis là pour ça !

BIZARRE ! ! ma réponse s'affiche avant ton post ?

En effet, bizarre ! mdr

[audrey]

En effet j'avai oublié que les blocs n'étaient pas identiques sur IE9.. ah merde Mozilla aussi ... pas facile de gérer avec tt les navigateurs. Je vais voir si il est possible de rendre ça compatible sachant qu'en septembre le contenu va de nouveau changer... sans parler de la version anglaise qui ne contient pas la même quantité de texte !

Quand je peux j'utilise les propriétés de tableau en css. Le display:table-cell est pratique pour ça, surtout quand il n'y a pas beaucoup de blocs. Ca permet de garder des blocs homogénes, mais à l'agrandissement de la police de caractère.
Ça passe partout, sauf sur IE avant IE9 (sans blague ), mais un min-height pour IE peut aider.

http://www.w3schools.com/cssref/pr_class_display.asp

[tom-over]

Quand je peux j'utilise les propriétés de tableau en css. Le display:table-cell est pratique pour ça, surtout quand il n'y a pas beaucoup de blocs. Ca permet de garder des blocs homogénes, mais à l'agrandissement de la police de caractère.
Ça passe partout, sauf sur IE avant IE9 (sans blague ), mais un min-height pour IE peut aider.

http://www.w3schools.com/cssref/pr_class_display.asp

Je n'utilise plus de tableau pour la mise en page depuis environ 6 ans ! !
J'utilise déjà le min-height mais comme tu vois il n'est pas géré de la même manière dans les déférents navigateurs...

[audrey]

Moins non plus je n'utilise pas les tableaux :p
Je n'en n'ai d'ailleurs jamais utilisé.

les display:table-cell / table / table-row permet d'attribuer à un élément block (div/p et même inline en fait je crois) les propriétés d'un tableau html.

Code : Tout sélectionner

<div class="table">
<div class="table-cell">
</div>
<div class="table-cell">
</div>
</div>

et en css

Code : Tout sélectionner

.table {display:table}
.table-cell{display:table-cell}

Et puisque les cellules d'une même ligne d'un tableau html ont toujours la même hauteur,
là, ça fera pareil

[tom-over]

J'utilise l'extension subcolumns pour intégrer les éléments en colonne. Donc ça va être différent mais je vais regarder ça de plus près !

[FiX']

Moins non plus je n'utilise pas les tableaux :p
Je n'en n'ai d'ailleurs jamais utilisé.

les display:table-cell / table / table-row permet d'attribuer à un élément block (div/p et même inline en fait je crois) les propriétés d'un tableau html.

Code : Tout sélectionner

<div class="table">
<div class="table-cell">
</div>
<div class="table-cell">
</div>
</div>

et en css

Code : Tout sélectionner

.table {display:table}
.table-cell{display:table-cell}

Et puisque les cellules d'une même ligne d'un tableau html ont toujours la même hauteur,
là, ça fera pareil

Avec cette technique, la hauteur des deux blocs est identique, et ce, même si un bloc a plus de contenu (et donc plus haut) que l'autre... enfin il me semble !

Ça revient au même que de mettre une hauteur fixe pour les deux blocs et d'adapter le contenu à cette hauteur, sauf que ça l'avantage de s'adapter automatiquement d'un changement de contenu à l'autre (mise à jour, etc...)... sans rien faire.

Vous voyez ce que je veux dire

[audrey]

Non ça revient pas exactement au même
Enfin, si je crois avoir compris ce que tu dis.

Tu ne spécifies pas de hauteur de cellule dans ce cas, sinon un height:100%, mais pas de px ou em, la hauteur n'est absolument pas fixe avec un display:table.
Au contraire, plus un bloc aura de contenu, plus son bloc s'agrandira, plus les blocs appartenant à la même ligne aussi (sauf si on met du float à l'intérieur, là ça ne marche plus évidemment).
Je l'utilise pour prévenir les problèmes liés aux tailles de police, variable client complétement aléatoire.

http://www.culture-ethique.fr/ -> sur la page d'accueil j'utilise ces propriétés, les deux blocs (gris et violet). Si tu agrandis la taille de la police, tu verras que la hauteur des blocs reste constamment la même

[FiX']

Non ça revient pas exactement au même
Enfin, si je crois avoir compris ce que tu dis.

Tu ne spécifies pas de hauteur de cellule dans ce cas, sinon un height:100%, mais pas de px ou em, la hauteur n'est absolument pas fixe avec un display:table.
Au contraire, plus un bloc aura de contenu, plus son bloc s'agrandira, plus les blocs appartenant à la même ligne aussi (sauf si on met du float à l'intérieur, là ça ne marche plus évidemment).
Je l'utilise pour prévenir les problèmes liés aux tailles de police, variable client complétement aléatoire.

http://www.culture-ethique.fr/ -> sur la page d'accueil j'utilise ces propriétés, les deux blocs (gris et violet). Si tu agrandis la taille de la police, tu verras que la hauteur des blocs reste constamment la même

Pour résumer :

- La technique du height : le contenu doit s'adapter à la hauteur du bloc (et donc faire en sorte de ne pas mettre trop de texte, sous peine de devoir augmenter/diminuer la hauteur à chaque mise à jour)

- La technique du table : la hauteur s'adapte au contenu du bloc (et donc permet de ne pas se soucier de la quantité de contenu, car le bloc s'adaptera toujours à celui-ci !)

A+

[tom-over]

Merci pour cette info je ne connaissais pas cette technique CSS ! !
je vais tester ça

alors verdict : ma marge qui me permet d'espacer mes blocs à disparu... ça fait moche ! !

[FiX']

Merci pour cette info je ne connaissais pas cette technique CSS ! !
je vais tester ça

alors verdict : ma marge qui me permet d'espacer mes blocs à disparu... ça fait moche ! !

Et si tu augmentes l'épaisseur de la bordure ?

[tom-over]

Mon marging:5px; n'a plus d'impact pour espacer mes blocs !
La bordure est de 1 px.. je ne veux pas l'élargir elle est très bien comme ça...

[FiX']

Mon marging:5px; n'a plus d'impact pour espacer mes blocs !
La bordure est de 1 px.. je ne veux pas l'élargir elle est très bien comme ça...

L'augmentation de la bordure, c'était pour simuler un espace plus grand... c'est pas très propre mais ça peu peut-être t'aider.

Sinon, je viens de tester sur ton site, les propriétés ne fonctionnent pas correctement car si tu augmentes virtuellement la quantité de texte, les deux blocs devraient augmenter en hauteur... hors seul un des deux blocs augmente.

Je n'arrive pas à trouver le bug.

Pour augmenter le margin, il faut séparer les sélecteurs .subcl et .subcr et mettre :

Code : Tout sélectionner

.subcr {
    background-color: none repeat scroll 0 0 #FFFFFF;
    margin-left: 5px;
    padding: 0;
+ autres styles (couleur bordure etc...)
}


Cela va augmenter l'espace mais la hauteur des deux blocs ne sera pas identique... ce qui reviendra au même qu'avant.

Si j'ai un peu de temps je regarderai ça de plus près.

A+