Dimensionner des <span>

[Bob]

Bonjour à tous,

Je cherche à fixer la largeur et la hauteur d'éléments "span":

<span class="date"><a href="lien.htm">Date</a></span><span class="titreObjectif"><a href="lien.htm">Titre objectif</a></span>

Mais ça ne marche pas. Du coup, en cherchant dans les recommandations du W3C (en français sur Yoyo design), j'ai trouvé ça:

(width et height) S'applique à : tous les éléments sauf ceux de type en-ligne non remplacés (...).

Alors est-ce que les "span" font partie des éléments de type en ligne, et dans l'affirmative, y a-t-il une astuce pour les dimensionner quand même?

Merci,

Bob

[Raphael]

Les spans sont effectivement des balises en-ligne.

Pour quelles deviennent des blocs, il suffirait de leur appliquer display: block.

Mais c'est tout à fait inutile car tu obtiendrais tout simplement un <div> ... donc autant utiliser un div

[Fight]

Bonjour,

Quel est l'interêt des span dans ton exemple bob, mieux vaut appliquer directement le style sur la balise a.

Ensuite comme dit SIBELIUS ajoute un display: block;

[Monique]

Bonjour Bob,

Ce n'est pas possible...

La balise span permet d'attribuer un style différent à une partie d'un élément. Si tu veux utiliser ces propriétés tu dois les attribuer à l'élément de type bloc (div, hx...) qui contient cet élément en ligne (dit aussi de niveau texte).

Par contre, tu pourrais jouer sur les propriétés line-height et letter-spacing.

[Raphael]

Ensuite comme dit SIBELIUS ajoute un display: block;

Euh, non, moi j'ai dit qu'il valait mieux utiliser des div à la place

C'est comme si on transformait une fourchette en cuillère pour boire sa soupe : autant utiliser une cuillère tout de suite

Par contre il est vrai qu'il serait plus logique d'appliquer le block à la balise <a> (qui est également une balise en-ligne)

[Beatnykk]

totalement d'accord avec sibelius : les <span> je les utilise comme exceptions de règles, par exemples pour mettre quelques mots dans une autre police dans un paragraphe formaté.

mais dès qu'il s'agit de zones délimitées "plates" ou "en strates", les <div> sont idéals, d'autant qu'ils sont les seuls complètement compatibles avec tous les browsers (pas comme les <layer> ou <ilayer> qui créent de sacré problème selon le navigateur et les paramètres alloué).

[Bob]

Mince...

Alors quelle serait la méthode pour placer mes trois blocs noirs comme dans l'image ci-dessous ?

Bob

[Beatnykk]

<table> vu le côté lacunaire de la page et que c'est juste du texte.

<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">

    <tr>

      <td width="5%"> </td>

      <td width="15%" bgcolor="#000000">

        <div align="center"><font color="#FFFFFF">COM</font></div></td>

      <td width="20%"> </td>

      <td width="15%" bgcolor="#000000">

        <div align="center"><font color="#FFFFFF">WEB</font></div></td>

      <td width="20%"> </td>

      <td width="15%" bgcolor="#000000">

        <div align="center"><font color="#FFFFFF">PROMO</font></div></td>

      <td width="5%"> </td>

    </tr>

  </table>

si maintenant tu veux des boutons en image, en <div> c'est mieux

<div id="Layer1" style="position:absolute; left:15%; top:25%; width:15%; height:30; z-index:1; visibility: visible; overflow: visible; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;">

  <div align="center"><font color="#FFFFFF">Element 1</font></div>

</div>

<div id="Layer2" style="position:absolute; left:42%; top:25%; width:15%; height:30; z-index:1; visibility: visible; overflow: visible; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;">

  <div align="center"><font color="#FFFFFF">Element 2</font></div>

</div>

<div id="Layer3" style="position:absolute; left:70%; top:25%; width:15%; height:30; z-index:1; visibility: visible; overflow: visible; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;">

  <div align="center"><font color="#FFFFFF">Element 3</font></div>

</div>

Modifié 12 Décembre 2003 par beatnykk

[Fight]

Si c'est du XHTML que tu cherche à faire, ne pas oublier "l'esprit", c'est à dire que ta page doit être descriptive et la mise en forme doit être gérée par des CSS.

C'est pour cela que mettre un div pour chaque item n'est pas très satisfaisant, le div doit servir à définir un ensemble fonctionnel et non à faire de la présentation.

Bon je me suis penché sur le problème 10 minutes et voila ce qui m'est venu à l'esprit, bon c'est pas parfait (les navigateurs n'affiche pas forcement le résultat escompté) mais ça me semble une piste valable :

<!DOCTYPE / HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <title>Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15">
  <meta name="GENERATOR" content="Quanta Plus">
  <style>
  #menu {
  text-align: center;
  }
  UL {
  margin: 0;
  padding: 0;
  }
  LI {
  width: 33.33%;
  display: inline;
  float: left;
  text-align: center;
  }
  A {
  display: block;
  width: 200px;
  padding: 0.2em;
  color: #FFFFFF;
  background-color: #000000;
  }
  </style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">COM</a></li>
<li><a href="#">WEB</a></li>
<li><a href="#">PROMO</a></li>
</ul>
</div>
</body>
</html>

[Raphael]

La méthode de Fight est la plus propre (attention cependant : pas de majuscules dans les balises)

Voici un tuto qui ressemble beaucoup à ce qu'à fait Fight, il suffit de l'adapter : http://www.alsacreations.com/articles/menu/

[Fruge]

attention cependant : pas de majuscules dans les balises

Oups : qu'est ce que tu veux dire par là ? Pas de "A", "LI", etc ??? Pourquoi ?

Fruge

[Beatnykk]

comment ça moi je suis pas prop' ? j'ai pris ma douche comme tous les matins pourtant !!!

nan juste, le problème que j'ai avec css c'est que pour moi définir une classe (ou un style) pour un élèment ne me servant qu'une seule fois dans une page (ex : définir une zone) me paraît abberrant à l'inverse d'un élèment à utilisation multiple (ex : format de paragraphe).

de plus sur un <div> je connais par coeur les paramètres et les possibilités.

mais je suis sûr que les 3 solutions données sont autant valables (et qu'elles sentent toutes aussi bon, sib). ne reste qu'à notre ami de choisir sa méthode favorite.

nb : en fait la solution que tu donnes sur alsacréations sent pas si bon que ça : sous opéra, essaye de redimentionner l'écran avec le menu horizontal ... tiens ... un bouton a "disparu" caché sous un autre ! pas cool ! y z'ont buté totor les salauds !!

maintenant la soluce de fight ne mène peut être pas à la même punition, mais moi je me méfie des zones définies par css et en voilà un bon exemple de pourquoi !

+edit+

tiens voilà sur quoi je bosse présentemment, avec utilisation de <div>. je vois pas d'autre moyen dailleurs, et en bas il y a un peu ce que bob souhaite faire, justement...

h**p://membres.lycos.fr/spottvnews/

ceci est une page de version beta. pardon pour les pubs.

+edit+

Modifié 12 Décembre 2003 par beatnykk

[Monique]

Oups : qu'est ce que tu veux dire par là ? Pas de "A", "LI", etc  ??? Pourquoi ?

Fruge

En HTML, cela n'a pas d'importance, en XHTML strict, les balises doivent être en minuscules.

Même si tu travailles en HTML, autant prendre de bonnes habitudes et faciliter ton futur passage à XHTML

[Fruge]

En HTML, cela n'a pas d'importance, en XHTML strict, les balises doivent être en minuscules

Ha, ok... travaillant toujours en HTML , je n'avais jamais fait attention à ca... mais par chance, toutes mes balises sont en minuscules

Tant qu'on y est, en CSS, pour les définitions des "class", des "id", etc, y a-t-il des spécifications particulières au niveau des majuscules/minuscules ?

Fruge.

[Fight]

> SIBELIUS ce n'est pas tout à fait la même chose, la difficulté est de s'adapter à la taille de l'écran. Et je n'ai mis aucune balise en majuscule ???

> beatnykk, tu ne vois pas pourquoi faire une class qui servira qu'une fois. Le fichier de style est mis en cache par le navigateur, donc gain de rapidité si on consulte plusierus fois la même page. Si tu veux modifier l'aspect de ton site tu n'a qu'un fichier à modifier. Dans la version 3 des CSS il ne sera plus possible de déclarer les style directement sur la balise, autant prendre les bonnes habitudes tout de suite.

> Fruge, je ne crois pas qu'il y ai des recommandations pour les majuscules dans les feuilles de style, mais pour des raisons de lisibilité j'ai pris la même habitude que la doc du w3c, toutes les balises HTML en majuscule en le reste en minuscule.

[Bob]

Bon, je reviens avec un peu de retard sur cette mise en page.

J'ai adapté la méthode UL et LI de Fight, et ça marche

Merci beaucoup et bonnes fêtes.

Bob