28220 sujets

CSS et mise en forme, CSS3

Bonjour,
une nouvelle semaine, l'espoir est revenu. Mon code n'est pas propre mais je vais régler avec votre aide quelques imperfections d'apparence et le retravaillerais plus tard pour le mettre conforme.

J'ai besoin de vous pour :
1/ espacer Hist et Dia quand on passe sur Mag par exemple.
2/ m'expliquer ce qui décale petit à petit menu 2, menu 3 et menu 4 vers le bas au lieu qu'ils soient centrés au milieu des zones parmes.
3/ Supprimer l'espace qui se trouve devant les sous menus ( - Sous-Menu 1.2, - Sous-Menu 1.3 par exemple)

Merci de votre aide.
J'ai déjà essayé plusieurs choses pour régler ces 3 problèmes mais n'ai pas trouvé de solution.
Pouvez vous m'aider ? Smiley ohwell
Modifié par la ptiote (30 Mar 2005 - 11:49)
Bonjour la ptiote Smiley smile

Pour les futures recherches sur les forums, pourrais-tu, stp, mettre un titre plus explicite Smiley cligne ... merci d'avance !
Modifié par dominique (21 Mar 2005 - 13:59)
Bonjour ;
je ne voudrais pas te décourager, mais tu as un peu de ménage à faire entre tes classes et tes id(entités)... En effet, tu appelles en même temps :
<DIV id=menuA> 
    <DL class="menuA"> 


et dans ta css, tu définis :
#menuA {

	LEFT: 0px; WIDTH: 10.8em; POSITION: absolute; TOP: 1em

}

#menuA DT 
/*et en même temps :*/
DL.menuA {

	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 160px; LIST-STYLE-TYPE: none

}

DT.menuA ...

Tout ça me semble bien confus : sais-tu sur quels éléments va s'appuyer un gentil navigateur pour nous faire quand même un rendu de page ?
Il doit y avoir quelque tutoriel qui devrait pouvoir t'aider à remettre un peu d'ordre dans tout ça...
tutoriel classes versus id
Et quelques autres autour...
Bon courage
Modifié par Macpom (21 Mar 2005 - 14:46)
Déjà, la façon dont tu identifie tes menus me semble pour le moins compliquée (et pour certaine parties totalement erronée) :


<DIV id=menuB>
<DL class=menuB>
  <DT><A href="http://www.aliane.fr/test/css3/menu14.htm#"><B>Accueil</B></A> 
  </DT></DL>
<DL class=menuB>
  <DT onmouseover="montre('smenu2');"><A 
  href="http://www.aliane.fr/test/css3/menu14.htm#"><B>Mag</B></A> </DT>
  <DD id=smenu2>
  <UL>
    <LI><A href="http://www.aliane.fr/test/css3/menu14.htm#">Hist</A> 
    <LI><A href="http://www.aliane.fr/test/css3/menu14.htm#">Dia</A> 
  </LI></UL></DD></DL>
...
</DIV>


Tu pourrais plus simplement avoir un id appliqué à ton div contenant le menu et... c'est tout!


<div id=menuB>
<dl>
  <dt><a href="http://www.aliane.fr/test/css3/menu14.htm#">Accueil</a> 
  </dt></dl>
<dl>
  <dt onmouseover="montre('smenu2');"><a 
  href="http://www.aliane.fr/test/css3/menu14.htm#">Mag</a> </dt>
  <dd id=smenu2>
  <ul>
    <li><a href="http://www.aliane.fr/test/css3/menu14.htm#">Hist</a> 
    <li><a href="http://www.aliane.fr/test/css3/menu14.htm#">Dia</a> 
  </li></ul></dd></dl>
...
</div>


Et tu applique ensuite tes propriétés CSS avec des sélecteurs du genre :


div#menuB dl {
 /* ta liste de définition */
} 

div#menuB dl dt a {
 /* pour les liens principaux */
}

div#menuB dl dd ul li {
 /* tes éléments de listes pour les sous menus */
}


Etc...

Tu n'as pas besoin d'avoir un id "menuB" plus une classe "menuB", ni d'appliquer ces classes et id de multiple fois, seul le conteneur parent de ton menu (dans ton cas <div id="menuB">) doit être identifié.

Tu devrais aussi supprimer tes <b> </b> et les remplacer par des équivalent CSS, par exemple :


div#menuB dl dt a {
 font-weight: bold;
}


Je m'arrêtes là, essai de voir ce qui cloche, et de corriger déjà ces parties. On regardera la suite plus tard Smiley cligne
Ce que je ne comprends pas par rapport à vos différentes remarques, c'est que je suis partie de menus présents dans la galerie de menu de ce site (menus n°6 et 7 en partant du haut).
Les 9/10ème de mes faibles connaissances en CSS viennnent églement des tutos de Alsacreations. Ils sont généralement très bein faits, mais pourquoi cela irait avec les menus de Raphael et pas les miens ?

Je n'ai pourtant pas modifié le code énormément, juste voulu en mettre 2 sur un m^me page et les ai donc identifié en menuA et B.

Je vais quand m^me essayé de refaire de nouveau mon code.
A dans 2 ans ....
toujours à la même adresse (http://www.aliane.fr/test/css3/menu14.htm) j'ai refais ma page htm selon les conseils éclairés de jb_gfx.

Je pense que de ce côté là c'est bon.
Pour la feuille de style c'est plus la misère.
J'essaie de travailler sur le style du menu B.
J'ai fait des modifs mais ne sais pas si c'est correct.
Dîtes moi si c'est la bonne voie (menu B only pour le moment) http://www.aliane.fr/test/css3/style2.css
Merci
dominique a écrit :
Bonjour la ptiote Smiley smile

Pour les futures recherches sur les forums, pourrais-tu, stp, mettre un titre plus explicite Smiley cligne ... merci d'avance !


C'est toujours d'actualité Smiley biggrin
la ptiote a écrit :
Ce que je ne comprends pas par rapport à vos différentes remarques, c'est que je suis partie de menus présents dans la galerie de menu de ce site (menus n°6 et 7 en partant du haut).
Les 9/10ème de mes faibles connaissances en CSS viennnent églement des tutos de Alsacreations. Ils sont généralement très bein faits, mais pourquoi cela irait avec les menus de Raphael et pas les miens ?

Je n'ai pourtant pas modifié le code énormément, juste voulu en mettre 2 sur un m^me page et les ai donc identifié en menuA et B.


Comme Macpom et moi te l'avons indiqué (par des voies différentes mais le fond reste le même) tu as des problèmes de selection CSS (entre autre). Tu as un mélange d'id et de class portant le même nom (menuA, menuB) et qui semble t'induire en erreur. Ces erreurs ne sont pas présentes dans le code que Raphaël à mis à disposition sur le site.

Du coup tu te retrouve avec des class et des id que tu appelle dans ton HTML comme ceci :


  <DIV id="menuB"> 
    <DL class="menuB">
    ...


Et dans ta CSS :


 DT.menuB
 DL.menuB
 DD.menuB
 UL.menuB
 LI.menuB


Pourtant si tu as bien un dl.menuB dans to HTML, tu n'as pas les autres, ces propriétés ne seront donc pas prisent en compte.

Je vais me repeter mais tu devrais reprendre ce tutoriel de Rapahël à propos de la différence entre id et class.

J'ai remarqué quelques erreurs faciles à corriger dans ton code HTML, notament des balises <li> non fermées.

 
          <LI><A href="#">Tata</A> 
          <LI><A href="#">Toto</A> 
          <LI><A href="#">Tutu</A> </LI>


(il y en a d'autres)

Bon courage pour la suite.