Forum Développeur - Administration serveur, programmation et base de données > Menu (XHTML <ul><li></li></ul>) et les id des CSS

Version complète : Menu (XHTML <ul><li></li></ul>) et les id des CSS

Forum Développeur - Administration serveur, programmation et base de données > Programmation > xHTML et CSS

manumanu17

Jul 24 2005, 08:23 AM

Bonjour,

Ave une jolie petite boucle je crée ainsi un menu vertical composé de plusieurs blocs les uns en dessous des autres. Sur la page dans un navigateur cela semble sans problème, par contre sous le capot et sous un validateur je me retrouve avec une duplication des "id" de mes balises <ul> ! Ma question serait donc de savoir ce que je devrais modifier dans mon bout de code point de vue html et css pour que cela soit mieux gérer et également le pourquoi du comment.

La source générée du menu :

Code

<div id="menugauche">
<ul id="gauche">
<li class="titremenu" title="L'une de nos catégories de produits">Logiciels</li>
<li><a href="/index.php?what=price" class="menu">Top Software : Gestion - Devis - Facturation</a></li>
<li><a href="/index.php?what=price" class="menu">Tout autres logiciels</a></li>
<li class="menbas"></li>
</ul>
<ul id="gauche">
<li class="titremenu" title="L'une de nos catégories de produits">Logiciels</li>
<li><a href="/index.php?what=price" class="menu">Top Software : Gestion - Devis - Facturation</a></li>
<li><a href="/index.php?what=price" class="menu">Tout autres logiciels</a></li>
<li class="menbas"></li>
</ul>
</div>
et ainsi de suite.

Le bout de CSS :

Code

.titremenu {
width: 175px;
padding-top: 8px;
padding-bottom: 8px;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
padding-left: 15px;
height: 15px;
text-align:left;
float:left;
background-image:url(images/menu_15.jpg);
background-repeat:no-repeat;
}
.menbas {
width:185px;
height: 24px;
text-align:left;
float:left;
background-image:url(images/menu_19.jpg);
}
#gauche {
position: relative;
width: 185px;
height: auto;
float: left;
background-color: #CCCCCC;
}
ul#gauche
{
margin: 0;
padding: 0;
list-style-type: none;
}
ul#gauche li
{
float: left;
text-align: left;
display: block;
}
ul#gauche li a
{
background-image:url(images/menu_17.jpg);
float:left;
width: 155px;
line-height: 25px;
padding-left: 30px;
display: block;
overflow: visible;
}/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block; */

ul#gauche li a:hover
{
/*background: url(bg_menu.gif) repeat-x 0 0;*/
}

tyx

Jul 24 2005, 11:13 AM

Plop,

Un id qui vient à se répéter devrait être alors remplacer une classe du type

Code

.gauche { ton code css }

Et que tu utiliseras

Code

Au passage, ton utilisation d'un <li> stylé pour le titre de tes menus n'est pas très à propos, et l'emploi d'un élément de titre de type <hX> serait plus à propos du style

Html

<h2>Mon Titre</h2>
<ul class="gauche">
<li>Lien1</li>
<li>Lien1</li>
<li>Lien1</li>
</ul>

Dernier point tu utilise aussi un <li> pour positionner une image en bas de ton menu, mais ne pourrais tu pas la faire passer dans background de tes ul et la forcer à rester en bas grâce a la propriété

Code

background-position: left bottom;

Voilà si tu as des questions sur mes remarques n'hésite pas

manumanu17

Jul 24 2005, 11:34 AM

Ok, je regarderais et testerais ca un rien plus tard (des clients à satisfaire pour le moment).

Sinon toujours concernant ce sujet, est ce normal que sur une page de test http://test.oneshop.be il y ait des problèmes de positionnement :
Si l'on clique sur les menus (accueil, infos, ...) du haut ils se placent dans un "cadre" principal sur ma page (via php bien sur et du contenu dynamique) et se placent bien si le contenu central n'est que du texte mais par contre (pour les listes de produits c'est flagrant) s'en vont totalement dans le bas sous le menu de gauche pour les listes de produits qui est une page utilisant les tableaux !

Peut on aussi éviter lors du redimensionnement de la page en largeur que les éléments se distordent complètement pour passer les uns en dessous des autres car j'utilise une largeur en pourcent.
Quel solution existe-il aussi pour que le menu descende à fond dans le bas et prend ainsi la même hauteur que le plus long des cadres du centre de la page (les % ne veulent pas aller en hauteur pour le background).

@

manumanu17

Jul 26 2005, 10:29 AM

Visiblement ces problèmes de mise en page (le décallage du contenu) se passe surtout sur internet explorer mais pas su d'autres tels que FireFox ou Netscape !?

manumanu17

Jul 28 2005, 03:29 PM

Bon, je continue ce qui a peu de choses est un monologue

En fait les tableaux mis à 100% dans les pages font que la mise en page en question déconne complètement. Par contre si je mes le même tableau à 99% ou moins ... tout vas bien et je ne sais le pourquoi du comment !

Par contre les autres choses restent d'actualité !

Guizbizet

Jul 28 2005, 03:35 PM

Salut

ce que tu veux faire n'est pas adapté à la forme ul li je te conseille des listes de définition (dl dt dd) et voici un bon exemple sur le site de Pompage

Bon courage

a+

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.