Plan de site en arborescence

Bonjour,
je recherche des idées pour réaliser un plan de site.
j'ai bien aimé le plan du site de la caisse d'épargne hormis l'utilisation d'images.

Comment en réaliser un au rendu visuel similaire mais en utilisant des boites flottantes de couleurs pour les titres des rubriques et les sous-catégories en liens à la mise en forme basique?
Modifié par Florent V. (23 Jul 2007 - 09:25)

Bonjour,

Avec une structuration en listes non ordonnées (ul) imbriquées et une gestion fine des images de fond pour dessiner les liens, il devrait y avoir quelque chose de jouable.

Si tu n'as pas une bonne connaissance de la structure HTML à adopter, du positionnement CSS et de l'utilisation fine des images de fond et du padding en CSS, je crois qu'il faudra commencer par se familiariser avec tout ça. Si tu connais un peu tout ça, lance-toi et montre-nous ce que ça donnes, quitte à demander de l'aide si ça bloque.

salut!
pour l'instant sans les float, j'ai fait ca avec des listes ul..

j'aurais bien aligné de gauche a droite les 4 rubriques mais je souhaiterais éviter de mettre un tableau
Modifié par Jen (24 Jul 2007 - 10:24)

Déjà, sur la structure, c'est un peu trop imbriqué inutilement, je trouve. Et tu as un lien en double (les deux premiers liens pointent vers la même page).

Je ferais quelque chose comme ça:

<p>Nom de l'entreprise et descriptif (la phrase que tu utilises pour le premier lien)</p>

<h1>Plan du site de Machin Truc</h1>

<p>Lien vers la page d'accueil (intro, contact, choix de la langue)</p>

<h2>Version anglaise (pas de lien)</h2>
<ul>
<li>page d'accueil</li>
<li>nos services</li>
<li>bla bla</li>
</ul>

<h2>Version moldave</h2>
<ul>...</ul>

<h2>Version ouzbèque</h2>
<ul>...</ul>

Pour la mise en page, tu peux mettre chaque couple h2+ul dans une div avec un identifiant propre, si tu veux réaliser des colonnes (div flottants).

Pour jouer sur les bordures (cadres) et images de fond (filets) des éléments , il sera peut-être nécessaire de doubler certains éléments par un span:

<h2><span>Bla bla</span></h2>

j'ai créer et réglé les div.. enfin
voila ce que ca donne


Pff reste plus qu'a lier la page Home au 4 listes maintenant la je bloques parce qu'en redimensionnant la page (+ petite) probleme si j'adopte une image en ligne contenant les fleches??!
Modifié par Jen (24 Jul 2007 - 16:39)

Hello,

Déjà, supprime les <br> inutiles... ta feuille de style te permet de rajouter ce genre d'espacement.

Ensuite, il va falloir jouer sur les padding et images de fond des blocs, pour construire les chemins petit bout par petit bout.

Ça serait plus long de décrire comment le faire que de le faire carrément, par contre. Et si tu n'as pas une bonne connaissance du positionnement CSS, de la gestion du padding, du positionnement des images de fond... ça va être difficile.

Pistes : mettre les marges des h2 et ul (au moins) à zéro, pour pouvoir joindre les images de fond. Utiliser du padding à la place pour l'espacement.

Excuses, je débute encore:

Florent V. a écrit :
Hello,

Déjà, supprime les <br> inutiles... ta feuille de style te permet de rajouter ce genre d'espacement.

ah oui, comment?! parce-que quand je les supprimes le menu vient se commencer dans la partie droite du titre <h2>

quelle est la solution incluse dans le css pour les remplacer?

Jen a écrit :
Excuses, je débute encore

Tu es tout excusé. Par contre, je t'avertis juste qu'en tant que débutant tu vas avoir du mal à faire quelque chose qui demande une gestion fine de diverses propriétés de positionnement et de mise en forme CSS. Peut-être faudra-t-il viser un rendu plus simple.

Jen a écrit :
ah oui, comment?! parce-que quand je les supprimes le menu vient se commencer dans la partie droite du titre <h2>

C'est parce que tu fais flotter tes h2. Donc:
- soit tu ne fais pas flotter les h2 (et pour obtenir le même rendu on appliquera la couleur de fond sur un span à l'intérieur du h2 plutôt que sur le h2 lui-même);
- soit tu mets un clear: left sur les ul.

Jen a écrit :
quelle est la solution incluse dans le css pour les remplacer?

Ceci par exemple: ul {margin-top: 30px;}.

Pour les float sur les h2 c'était volontaire. Enfin c'est bon j'ai trouvé ca hier soir pour remplacer les BR:

1. dans le css, creation d'une classe space {clear: inherit

.space {
	clear: inherit;
}

2. dans le doc, insertion d'une div class space (juste apres mes titres de rubriques h2)

<div
 class="space">&nbsp;</div>

Aussi j'ai mis un fond aux div des categories ce que je ne pensais pas faire mais c'est pas mal je trouve.

Maintenant comment vais-je m'organiser pour faire les lignes tout en restant simple. Je pensais seulement a une grande ligne horizontale sous le menu principal et des plus petites verticales seulement pour lier aux titres des categories.. image ou code??!

.space {
	clear: inherit;
}

C'est assez bricolé cette histoire. Et ça m'étonne que la valeur "inherit" fonctionne.
Plus simplement, on aurait pu mettre un clear: left sur les ul. Et, comme je le disais, le float sur les h2 n'est pas nécessaire (qu'il soit volontaire ou pas n'est pas la question: il est inutile... cf. l'utilisation de span pour dessiner un bloc qui aurait la largeur du texte).

Jen a écrit :
comment vais-je m'organiser pour faire les lignes tout en restant simple

Il n'y a pas de moyen simple, car rien n'est prévu en CSS pour ce type de dessin.

Jen a écrit :
Je pensais seulement a une grande ligne horizontale sous le menu principal et des plus petites verticales seulement pour lier aux titres des categories.. image ou code??!

Images de fond.

Salut Florent,

A regarder le code html sur le site "modele", c'est une image map:
un immense tableau et une image de reference. Ce qui m'incite à rester bien plus simple dans mon propre plan.

Je corrige la propriete clear..

Concernant le float sur les h2: si tu jettes un coup d'oeil dans le site, tu verras que je souhaitait rester dans la charte graphique.
Si tu as une autre solution tant mieux mais je ne croyais pas qu'en span on pouvait mettre un fond aussi. Surtout, en incluant toutes les propriétés ds la definition h2 de ma css, je voulais éviter de charger la page html en code répétitifs.

Jen a écrit :
Si tu as une autre solution tant mieux mais je ne croyais pas qu'en span on pouvait mettre un fond aussi.

Ben si, on peut.

[b]HTML:[/b]
<h2><span>Texte</span></h2>

[b]CSS:[/b]
h2 span {
background: blue;
color: white;
padding: 5px 8px;
}

Jen a écrit :
Surtout, en incluant toutes les propriétés ds la definition h2 de ma css, je voulais éviter de charger la page html en code répétitifs.

Ben à toi de voir si tu préfères ceci:

<h2><span>Texte</span></h2>

ou ceci:

<h2><span>Texte</span></h2>
<div class="space">

De plus:
- ton div de classe "space" ne fonctionne pas du tout de la manière que tu penses (la propriété clear n'est pas appliquée)... donc en gros tu ne sais pas exactement ce qui se passe, ce qui n'est jamais très bon...;
- tu peux continuer à utiliser float sur les h2 (donc te passer de span), et ne pas rajouter de <br /> ou <div class="space"> ou autre joyeuseté... en te contentant d'un clear: left sur les ul (trois fois que je le dis, l'info va finir par passer ).

Salut!

j'ai suivi tes conseils et utilisé un span pour les titres des rubriques par langue:

H2 {
font-size : 120%;
margin : auto;
text-align : center;
border : 0;
text-decoration : none;
color : yellow;
}

h2 span {
background: blue;
color: yellow;
padding: 5px 8px;
float:left;
}

par-contre, j'avais une ligne plus fine continue dans tout le cadre pour le titre HOMEPAGE (principal) et je ne sais pas trop comment mais comme ca, je l'ai fait disparaitre:

H4 {
font-size : 120%;
margin: auto;
text-align : center;
border : 0;
text-decoration : none;
color : yellow;
}

h4 span {
background: blue;
color: yellow;
padding: 5px 10px;
float:center;
}

j'espère que mon code est correcte cette fois-ci.

Grace à ton astuce: adieu les br, et les div class space (j'avais trouvé cette solution sur un autre forum) donc Alsa.. is the best

voila je crois que je vais en rester là pour ce plan je laisse tomber les lignes finalement.

Merci bien