code

juliane · frontpage mioche

Bonjour,

je vous écris pour une question assez technique.

J'ai créé un site internet composé dans la partie centrale (en dessous de la bannière) d'un menu à gauche, à coté duquel (à droite) flotte à le corps (c'est à dire le texte principal) , à coté duquel ( à droite) flotte un menu d'actualité.

Jusque là tout va bien, les pages s'affichent bien, j'ai crée trois id, un id="menu_gauche", un id="corps" (float left) et un id="menu_actualite" (float left)

Le problème c'est dans ma page d'accueil. Je réutilise ces id et à chaque élément de menu j'associe un texte qui décrit ce qu'il y a dans ce menu. Pour des raisons de graphisme, chaque texte décrivant le menu a le même graphisme que l'élément corps.

Je m'explique:
j'utilise une succession de

<div id="menu_gauche"> dans lequel je mets un élément du menu
</div>
à cotéde cet élément du menu, je fais flotter le descriptif du menu associé
<div id="corps"> ...description du menu...</div>

et je répète <div id="menu_gauche" > élément du deuxième menu principal
</div>
<div id="corps> descriptif du deuxième menu</div>

etc pour tous les éléments du menu principal, puis je positionne en flottant sur la droite le menu d'actualité.

Voilà, le problème c'est que je n'ai pas le droit de utiliser le id plusieurs fois. Je ne suis pas totalement sure de ce qu'il vaut mieux modifier:
je mets un class à la place de tous mes id pour menu_gauche et corps dans ma feuille de menu principal (et donc cela s'appliquera à toutes mes pages, même celles ou menu_gauche et corps n'apparaissent qu'une fois.)? Y'a t'il une autre solution mieux?
La distinction entre class et id est elle importante?

Voilà,

j'espère c'est assez clair.

Je vous remercie par avance de votre réponse.

Bonne journée

albedo0 · supermioche

peux-tu poster ta feuille de style et ta page...

se serra plus simple à comprendre...

juliane · frontpage mioche

en xhtml.

Pages générales:

<div id="menu_gauche">
<div class="element_menu"> élément1 du menu</div>
<div class="element_menu">élément2 du menu </div>
</div>

<div id="corps">
texte principale (au centre)
</div>

<div id="actualite">
<div class="element_actualite"> élément1 menu actualite (à droite) </div>
<div class="element_actualite"> élément1 menu actualite (à droite)
</div>
</div>

avec la feuille de style:

#menu_gauche
{ float: left;
width: 22%;
margin-left:0.5em;
margin-right:0.8em;
}

.element_menu
{ padding-bottom: 0.5em;
margin-left:2em;
}

#corps
{ width:55%;
float:left

}
#actualite_strasbourg
{ width: 15%;
float: left;
margin-left:0.8em;
margin-top:2.5em;
}

.element_actualite
{
padding-bottom: 0em;
margin-bottom:1em;
}

Dans ma page d'accueil:

<div id="page_accueil">

<div id="actualite">
<div class="element_actualite"> élément1 menu actualite (à droite) </div>
<div class="element_actualite"> élément1 menu actualite (à droite </div>
</div>
(je suis obligée de le mettre avant les autres sinon il ne se positionne pas bien au niveau horizontal mais là ca marche)

<div id="menu_gauche">
<div class="element_menu_top"> nom du menu1 </div>
</div>
<div id= "corps"> description du menu 1
</div>

<div id="menu_gauche">
<div class="element_menu_top"> nom du menu2 </div>
</div>
<div id="corps"> description du menu 2
</div>

</div> 

Avec la même feuille de style,en ajoutant:

#page_accueil #actualite_strasbourg
{
width: 15%;
float: right;
margin-top:0;
margin-right:1.5em;
}
je met donc un float : right au lieu de un float:left pour la partie actualite_strasbourg dans le cas de la page d'accueil.

ce qui me donne, niveau graphique , chaque titre de menu accolé à coté de son descriptif , et le menu d'actualité indépendant, situé à droite. Et ainsi, je n'ai pas à redéfinir tous les id de ma feuille de style pour la page d'accueil, je peux prendre les même que pour mes pages générales. Sauf qu'on ne peux pas utiliser des id plusieurs fois... Donc je me demande si la solution la ,plus adaptée, c'est de remplacer ces id par des class.

Voilà, j'espère que c'est plus clair.

Merci beaucoup

albedo0 · supermioche

juliane · frontpage mioche

Bonjour,

merci de vous intérrésser à mon problème...

cette solution ne marche pas pour des questions de graphisme.
Je m'explique mieux, en prenant comme exemple l'accueil du site des sales mioches. http://www.salemioche.net/
Sur le site il y a:

mon menu gauche composé composé du titre de menu salemioche.net, avec un graphisme particulier, puis des titres de menu "Guide pas à pas", "HTML" , "CSS" etc... (juste à coté de "créer un site web").

Imaginons que le code soit:

<div id="menu_gauche">
<div class=titre_menu> salemioche.net </div>
<div class="element_menu"> Guide pas à pas</div>
<div class="element_menu"> HTML</div>
<div class="element_menu"> CSS </div>
</div>

<div id="corps">
texte principale (au centre) - ici le corps est un peu compliqué mais cela correspond à "créer un site web? etc.."
</div>

avec la feuille de style:

#menu_gauche
{ float: left;
width: 22%;
}

.titre_menu
{background:orange;
}

.element_menu
{ color:red;
}

#corps
{ width:55%;
float:left ;
border: 1px solid red;
}

dans le cas de mon site et de mon problème, je veux dans la page d'accueil que chaque titre de menu ai le graphisme de titre_menu (c'était le salemioche.net, donc chaque titre de menu a un fond orange), et que chaque descriptif du menu soit situé à droite du titre du menu et ai le graphisme de #corps (donc chaque descriptif a une bordure).

Ma solution pour ca, c'était écrire:

<div id="menu_gauche"> /**cela permet de faire floter à gauche le titre du menu***/
<div class="titre_menu"> nom du menu1 </div> /***cela permet de donner le graphisme de mon titre du menu à fond orange***/
</div>

<div id= "corps"> description du menu 1 /***cela me permet d'avoirn une bordure autour de mon descriptif***/
</div>

<div id="menu_gauche">
<div class="titre_menu"> nom du menu2 </div> /***ce titre a un fond orange et est situé sous le nom du menu 1***/
</div>

<div id="corps"> description du menu 2 /***ce descrptif a aussi une bordure et est situé à coté du titre du menu 2***/
</div>

Voilà, j'espère que c'est plus clair.
Alors, la solution est-ce de virer les id? (parce que y a t'il vraiment un intérét à utiliser les id par rapport aux class? Je suis novice, mais je n'en ai pas encore vu)

BOnne journée
Merci pour votre aide

albedo0 · supermioche

juliane · frontpage mioche

OK, j'essaye ca, cela me parait plutot prometteur. Je me demande juste par interêt intelectuel : quel est l'interêt de mettre des <li> avec un display? Est ce que au final je ne peux pas avoir la même chose en mettant:

albedo0 · supermioche

les balises li sont les balises standard des lignes de liste...