div et br

[Pulsar-san]

Il y a un truc que je n'ai pas compris dans les div.
Par exemple, pourquoi est-ce qu'avec un code comme ça

Code: Tout sélectionner

<div style="display:inline;">
BlaBla1<br />
BlaBla1<br />
BlaBla1
</div>
<div style="display:inline;">
BlaBla2<br />
BlaBla2<br />
BlaBla2
</div>

j'obtient ça:
BlaBla1
BlaBla1
BlaBla1 BlaBla2
BlaBla2
BlaBla2

et non:
BlaBla1 BlaBla2
BlaBla1 BlaBla2
BlaBla1 BlaBla2

Ca fait ça dès que j'ai un <br /> dans mon div

[CaYuS]

Bonjour,

Peut être parce que le inline c'est pour "dans la ligne", et que là il y a plusieurs lignes. Un petit float ne serait pas de refus :

Code: Tout sélectionner

<div style="float: left">
BlaBla1<br />
BlaBla1<br />
BlaBla1
</div>
<div style="float: left">
BlaBla2<br />
BlaBla2<br />
BlaBla2
</div>

[jeroen]

ou bien

Code: Tout sélectionner

<div style="width:200px; float:left">
BlaBla1<br />
BlaBla1<br />
BlaBla1
</div>
<div style="margin-left:200px">
BlaBla2<br />
BlaBla2<br />
BlaBla2<br />
BlaBla2<br />
BlaBla2
</div>

[e-kiwi]

oui, un moyen "pas genial" pour garder ton "display:inlie" est de faire un <table style='display:inline'><tr><td>bla bla <br/>bla bla</td></tr></table> mais c est pas tres beau

[Maxib]

Bouh les tables !

Je rappelle modestement, que les table et autres td, tr, th etc... sont, à la base, fait pour les données tabulaires, et non pur faire la structure de son site...

[Pulsar-san]

Franchement, plus je teste et plus je me dis que les tables sont largement supérieures aux div.
Les seuls avantages que je vois aux div, c'est la rapidité et la possibilité de les superposer. A part ça, je ne vois pas leur intérêt.

Par exemple il est impossible de centrer une image verticalement dans un div sans devoir calculer sa position et, ce, à deux conditions:
1- connaître les dimensions de l'image.
2- avoir une hauteur fixe du div (perte de l'affichage dynamique).
Seule exception au point 2, utiliser les tables CSS.
Avantage: tables

Faire un menu horizontal, je précise multilingue, relève de la gageure, le problème étant que chaque élément de ce menu doit être extensible puisqu'un même libellé aura une taille différente suivant la langue utilisée.
1- Vous donnez des positions fixes => tôt ou tard un élément passera par-dessus un autre.
2- Vous mettez tous les éléments en float => quand l'utilisateur rétrécira sa fenêtre les éléments de droite passeront en dessous.
Avantage: tables
Et vous aurez les mêmes problèmes avec les listes (ul, li) + css.

Et bien sûr, l'exemple que j'ai donné au début de ce sujet qui montre l'une des faiblesses manifeste des div, l'impossibilité de mettre deux div côte à côte par inline, avec du contenu formaté (<br />, <p>, etc.).
Avantage: table

Aussi, arrêtez de dire que les tables sont faites pour les données tabulaires. Ce terme n'a aucun sens !
Les tables sont faites pour présenter des DONNEES sous forme de tableau. N'importe quelle donnée peut y être mise.
TOUT est "donnée" en informatique.

...

[slender]

Les tables sont faites pour présenter des DONNEES sous forme de tableau. N'importe quelle donnée peut y être mise.
TOUT est "donnée" en informatique.
...

Tes données ne doivent pas être ordonnées en tableau puisque ce sont deux listes. Or il apparaît que dans l'attirail fourni par le html il y a un truc spécial pour les listes, ça s'écrit <ul><li>toto</li><li>titi</li><li>tata</li></ul> et, comme tu as de la chance, c'est même fait pour.

voili voila, c'est pas très dur... tu as même deux solutions pour le prix d'une...
Comme ça quand un mal-voyant 'lit' ton site il 'entend' correctement les deux listes, l'une après l'autre.

slender

Code: Tout sélectionner

<p>solution 1</p>
<div>
   <div style ="float: left; margin-right: 10px;">
      <ul>
         <li style="list-style: none;">BlaBla1</li>
         <li style="list-style: none;">BlaBla1</li>
         <li style="list-style: none;">BlaBla1</li>
         <li style="list-style: none;">BlaBla1</li>
      </ul>
   </div>
   <div style = "float: left;">
      <ul>
         <li style="list-style: none;">BlaBla2</li>
         <li style="list-style: none;">BlaBla2</li>
         <li style="list-style: none;">BlaBla2</li>
         <li style="list-style: none;">BlaBla2</li>
      </ul>
   </div>
   <div style="clear: both;"></div>
</div>
<p>solution 2</p>
<div>
   <ul style ="float: left; margin-right: 10px;">
      <li style="list-style: none;">BlaBla3</li>
      <li style="list-style: none;">BlaBla3</li>
      <li style="list-style: none;">BlaBla3</li>
      <li style="list-style: none;">BlaBla3</li>
   </ul>
   <ul style = "float: left;">
      <li style="list-style: none;">BlaBla4</li>
      <li style="list-style: none;">BlaBla4</li>
      <li style="list-style: none;">BlaBla4</li>
      <li style="list-style: none;">BlaBla4</li>
   </ul>
   <div style="clear: both;"></div>
</div>


[narayana]

L'intéret des div eh bien c'est tout simple.
1: Easy à mettre en place
2: Facilement modifiable via feuille de style
3: Beaucoup moins de code source
4: Meilleur pour le référencement
....

Bref je ne sais pas si tu parles de ton site dans ton profil mais rien que sur la page d'accueil 596 errors ta feuille de style n'est pas valide et ta page pese au bas mot 75 kilos de code + les images

Donc si tu veux que cela fonctionne (c'est peut être pas cela qui fait foirer tes inline) corrige ta page

[ckarone]

En quoi les div sont elles meilleures pour le référencement ?

[Pulsar-san]

@slender: Je connais très bien les listes, merci.
Tu es à côté de la plaque. Tu te fies à l'apparence mais tu ne lis pas la description du problème. C'est comme dans les tests de Q.I.
Je parle d'un problème de balise dans les div et tu me réponds "liste". Ca n'a rien à voir. J'aurais pu mettre un texte plus long, ça aurait été la même chose.
De plus tes listes ne restent pas en place quand on rétréci la fenêtre.
Avantage: Tables

@narayana: Non, heureusement que je ne parle pas de ce site
phpnuke est une horreur. Si j'avais su à l'époque j'aurais fait autrement.
Je suis justement en train de le refaire, mais je me heurte à certains problèmes, dont celui-ci, qui me font douter des soi-disant avantages des div sur les tables.

[maxttb]

En quoi les div sont elles meilleures pour le référencement ?

En fait, ce n'est pas les divs elles-même qui sont meilleurs pour le référencement. C'est simplement que les div te permettent d'avoir une meilleure structuration de ta page, qui te permet par exemple d'avoir tous les liens de navigation en bout de page, même s'ils sont affichés tout en haut de la page rendue avec des CSS.
Dont, dire que les div sont meilleures pour le référencement n'est pas forcèment vrai, mais bien utilisé, ca peut y contribuer.

[ckarone]

En quoi les div sont elles meilleures pour le référencement ?

En fait, ce n'est pas les divs elles-même qui sont meilleurs pour le référencement. C'est simplement que les div te permettent d'avoir une meilleure structuration de ta page, qui te permet par exemple d'avoir tous les liens de navigation en bout de page, même s'ils sont affichés tout en haut de la page rendue avec des CSS.
Dont, dire que les div sont meilleures pour le référencement n'est pas forcèment vrai, mais bien utilisé, ca peut y contribuer.

Je pense plutôt que les liens en haut de page ont "un peu plus" de poids quand ils sont en début de page non !!
Bref qui peu confirmer les propos de maxttb ?

[CaYuS]

Non ckarone, je confirme l'avis de maxttb
Il vaut mieux avoir le contenu en haut de page qui a plus de poids, ce qui permet de faire de merveilleux snipets par la même occasion, et de garder les liens en bas de page.

[Pulsar-san]

ckarone, relis le message de maxttb, c'est bien ce qu'il dit

même s'ils sont affichés tout en haut de la page rendue avec des CSS.

Par contre je ne suis pas d'accord avec l'utilisation de l'expression "meilleure structuration de la page".
Au contraire, les div permettent une destructuration quasi totale de la page, ce qui est contraire à ce qui est préconisé en programmation.
Ça "permet" de donner les éléments en vrac (en fait pas tant que ça à partir du moment où on intègre des éléments en float) et de faire confiance aux CSS pour tout mettre en place.
Je ne suis pas sûr que ce soit un bien, dans la mesure où ça risque de donner un code rapidement illible (éléments éparpillés un peu partout dans le source).

[maxttb]

Je pense plutôt que les liens en haut de page ont "un peu plus" de poids quand ils sont en début de page non !!
Bref qui peu confirmer les propos de maxttb ?

Il y'a 2 écoles. Ceux qui préférent mettre les liens de navigation en haut, et d'autres qui privilégient le contenu au lien de navigation.
L'avantage de XHTML/CSS d'un point de vue référencement, c'est qu'il permet de faire les 2 facilement.