Probléme d'héritage

Salut à tous,
J'débute un peu dans le css et jgalère sur un pbl donc j'aurais besoin de vous
Pour faire le menu qu'il y a sur l'image j'ai du faire sa:

a écrit :
ul.menu {
position: relative;
margin-top: 0;
margin-left: 0;
top: 20px;
left: 20px;
width: 90px;
background-color: #FFFFFF;
border: 1px solid #000000;
list-style-type: none;
text-align: center;
}
h1.menu {
font-size: small;
position: relative;
font-weight: bold;
border-bottom: 1px solid #000000;
}

avec ceci:

a écrit :
<ul class="menu">
<h1 class="menu">Rubrique</h1>
<li>Lien 1</li>
<li>Lien 2</li>
<li>Lien 3</li>
<li>Lien 4</li>
</ul>

Le truc deja c'est que j'aimerais savoir si ya pa mieu que mon system pour le <h1 class="menu">Rubrique</h1>
et ensuite mon véritable pbl c'est pk sa fait un espacement sous le trait j'aimerai que le "lien1" y soit kazi collé.
derniere petite question: comment jpourrais augmenté l'espacement verticale entre les lien1, lien2, lien3...

Merci à celui ou celle qui pourra m'aider.
Djoz4U

Pour ton espacement entre ton lien 1 et ton menu c'est à cause du <h1> avec une autre balise il ne devrait pas y avoir de problème.

Et pour ajouter un espacement entre tes liens il faut utiliser un "line-height: **px ; "

Voilà j'espère que je ne me suis pas planté dans ce que j'ai dit

Attention :

 <ul class="menu">
<h1 class="menu">Rubrique</h1>

Une balise <ul> ne peut pas contenir directement autre chose que des <li> :
http://www.alsacreations.com/blog/index.php?2004/09/09/58-parents-et-enfants

Sinon, il aurait simplement fallu supprimer les marges verticales de <h1>.

Evite également de mettre des classes inutiles (class="menu") partout :
Cf classite : http://www.alsacreations.com/blog/index.php?2004/08/15/51-maladies-exotiques-des-css

comment jpourrai faire alors si jveux mettre le mot "rubrique" en gras sans utiliser une autre balise que li ?

Djoz4U a écrit :
comment jpourrai faire alors si jveux mettre le mot "rubrique" en gras sans utiliser une autre balise que li ?

pourquoi ne pas utiliser un liste définition et tu mets <dt> en gras

c koi ke tu appelles une liste de définition ?

ca

<dl>
    <dt>Rubrique</dt>
    <dd>lien1</dd>
    <dd>lien1</dd>
</dl>

Modifié le 03 Nov 2004 - 00:52

se serait quoi le plus simple et le mieu ? entre:
ce que tu as di et ce que j'avais pensé faire:

  <ul class="menu">
  	<li class="menu">Rubrique</li>
    <li>Lien 1</li>
    <li>Lien 2</li>
    <li>Lien 3</li>
    <li>Lien 4</li>
  </ul>

Djoz4U a écrit :
se serait quoi le plus simple et le mieu ? entre:
ce que tu as di et ce que j'avais pensé faire:

  <ul class="menu">
  	<li class="menu">Rubrique</li>
    <li>Lien 1</li>
    <li>Lien 2</li>
    <li>Lien 3</li>
    <li>Lien 4</li>
  </ul>

moi je pense que c'est le mien car tu peux mettre dt en gras

Djoz4U a écrit :
se serait quoi le plus simple et le mieu ?

Si on enlève list-style-type: none; on verra dans un cas une liste à puce et dans le second cas une liste de définition (sans puce). Je pense que c'est ici une question de goût personnel.

Vue la présence d'un titre (rubrique), je serais personnellement tenté d'utiliser la liste de définition pour sa balise <dt> (definition title).

On peut effectivement faire la déclaration suivante :

dt { 
   font-weight: bold; 
}

Et si on cessait un peu d'utiliser les listes de définition à tort et à travers, et si possible surtout pour de la présentation ?

On se pose une question de présentation ou de structure, ici ?

Commençons par établir la structure du contenu, sans aucune considération de présentation : ce n'est PAS une liste de définition.

En effet, que ferait celle-ci, concrètement ? Elle dirait: le mot "rubrique" signifie lien1, lien2, etc"... Mettez ça en pratique avec du contenu réel, et vous verrez l'aberration. Et si Google:definition vous ressortait vos <dl> dans ses pages de résultats ?
La sémantique, c'est se demander d'abord "qu'est-ce que ça va donner si ce balisage est utilisé par une machine", pas "Ce serait joli ou diablement subtil de faire ça".

Une liste de liens n'est rien d'autre... qu'une liste. Utilisez <ul>, <div> si vous avez une raison de le faire, pourquoi pas <p>... mais pas une liste de définition pour un menu de navigation qui ne définit rien du tout.

Ce menu peut être une section du contenu, dotée d'un titre qui indique le sujet de la section qu'il introduit (pour reprendre une spécification HTML4.01 qu'on ne lit pas assez). Dans ce cas, utilisez <div> pour la section, et un vrai titre <h...> pour le titre.
Modifié le 03 Nov 2004 - 09:11

Encore un détail : si vous voulez absolument faire ce que le HTML4.01 n'a pas été prévu pour faire:
- attendez XHTML2.0
- ou bien oubliez le standard, enlevez le doctype, et utilisez la balise <menu>. Elle existe. Ou encore la balise <lh> du working draft d'HTML3.0...
Modifié le 03 Nov 2004 - 09:25

Une dernière couche: des liens placés dans des éléments <dd> successifs sont adjacents en l'absence de caractère de séparation extérieur au lien. Le résultat peut être catastrophique dans un lecteur d'écran.
Des liens placés dans des <li> seront au contraire assurés d'être clairement séparés à l'écoute de la page.

Bon Diou !

J'ai bien compris ton allergie à l'utilisation "détournée" des listes de déf, Laurent

Laurent Denis a écrit :
Commençons par établir la structure du contenu, sans aucune considération de présentation : ce n'est PAS une liste de définition.

En effet, que ferait celle-ci, concrètement ? Elle dirait: le mot "rubrique" signifie lien1, lien2, etc"

Sur ce point, il n'y a que les puristes et toi à vouloir restreindre l'emploi des listes de def.

Voici ce que propose le W3C lui-même : http://www.w3.org/TR/html4/struct/lists.html#edef-DL

W3C a écrit :
Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.

Cet exemple du W3C on voit bien qu'on ne se limite pas à "speaker" signifie "words qu'il dit".
Cela montre que les DL ne sont pas uniquement appliquées à dire "ceci signifie cela" mais que leur champ d'action est vague. Le W3C est imprecis et large, pourquoi serions-nous plus puriste que lui ?

Laurent Denis a écrit :
Et si Google:definition vous ressortait vos <dl> dans ses pages de résultats ?

Selon moi c'est tout simplement une erreur de Google s'il procédait ainsi : car en lui donnant à manger l'exemple même tiré du W3C, Google n'appliquerait pas les recommandations (ou plutôt la largesse donnée aux recommandations).

Pour résumer, je trouve très correct et sémantique pour structurer une liste possédant un titre.

Ce que je reproche aux couples Hn + ul, c'est qu'il n'y a rien qui témoigne de leur relation directe.
Hn est un titre général, de partie de page ou de paragraphe... mais rien ne spécifie explicitement qu'il s'agit d'un titre de menu, surtout si le menu est composé de plusieurs parties et plusieurs titres (ou encore dans le cas de menus déroulants).

En fait, je compare cela aux titres de tableaux (<th>) : s'il n'existait pas ces balises pour indiquer clairement les titres, il aurait fallu trouver des alternatives moins intéressantes.

A l'époque du HTML 2, la balise <lh> indiquait clairement que cet élément de liste était le titre de la liste : la relation était directe, imbriquée dans la liste elle-même.
C'est ce que je reproche aux couples Hn + ul et que je retrouve dans les listes de définitions.

Une dernière remarque, pas de moi, sur le Hub : http://www.webmaster-hub.com/index.php?showtopic=6835&view=findpost&p=51475

clb56 a écrit :
pour les listes de définitions je remarque quand même que si l'argument de la faiblesse sémantique et la non navigabilité entre titres sont des points incontournables, le rendu vocal de ces listes est néanmoins très efficace avec jaws et que le relation terme générique/termes associés est rendu avec une grande clarté. De plus sous lynx un h1 ne donne lieu à aucune visualisation particulière (moins que l'inline strong par exemple) alors que la relation <dt><dd> si.

Bref, je crois que le sujet va continuer à alimenter les forums

Laurent Denis a écrit :

- ou bien oubliez le standard, enlevez le doctype, et utilisez la balise <menu>. Elle existe. Ou encore la balise <lh> du working draft d'HTML3.0...

Il peut très bien utiliser la DTD Transitionnelle s'il veut se raccrocher à la balise <menu>... Cela reste standard

Dans la recommandation du strict, il est indiqué

a écrit :

The MENU element was designed to be used for single column menu lists. Both elements have the same structure as UL, just different rendering. In practice, a user agent will render a DIR or MENU list exactly as a UL list.

Il est dommage que cette balise ait été abandonnée...

Djoz4U a écrit :
Salut à tous,
J'débute un peu dans le css et jgalère sur un pbl donc j'aurais besoin de vous

@Laurent Denis
@Raphael
@Gilles
On est pas un peu hors sujet?

Stephan a écrit :


@Laurent Denis
@Raphael
@Gilles
On est pas un peu hors sujet?

Plus ou moins, c'est aussi le rôle d'une communauté de montrer qu'il existe d'autres moyens de procéder et d'élargir les horizons.

Ok!

Belle envolée!

Gilles a écrit :


Il peut très bien utiliser la DTD Transitionnelle s'il veut se raccrocher à la balise <menu>... Cela reste standard

Exact. On l'oublie souvent... car on ne s'en sert jamais ;)
Merci de l'avoir rappelé :)

cela dit, <menu> ne répond pas au problème du titrage d'une liste. (<lh> est invalide quelque-soit la norme choisie).