Discussion :

[Johan Senn]

Je peux lire sur ce forum, comme sur d'autre, beaucoup d'appel à l'aide pour la position côte à côte de div.
Et jamais comme solution n'est proposé d'utiliser un span plutôt qu'un div. Pourtant, la position naturel d'un span est justement linéair. Alors pourquoi vouloir s'entêter à réaliser avec un div ce que le span fait naturellement ?
Y-a-t-il une raison que j'ignore ?

[Deallyra]

Un span est (pour moi) un regroupement de style (couleurs, polices, tailles etc.) à appliquer à un pseudo bloc.

une division est un bloc réel pouvant avoir une taille prédéfinie, une position...

[GihefBey]

Bonjour,

<div> est de type block.
Ces éléments ont des dimensions.
Tu peux mettre dedans ce que tu veux.
Des éléments de type block ou des éléments de type inline.

<span> est de type inline.
Ces éléments n'ont pas de dimensions.
Tu ne peux pas mettre dedans ce que tu veux.
Seuls des éléments de type inline y sont acceptés.

Par exemple, tu peux mettre des <span> dans des <div>.
Mais l'inverse n'est pas permis.

C'est une histoire de structure.

-

[Erwan31]

Ben alors on dit pas bonjour chez toi?

Y-a-t-il une raison que j'ignore ?

Oui que les span ne peuvent contenir que des éléments inline (strong, a, span, em) et non de niveaux bloc. Ça limite très vite les possibilités.
Ensuite le span (créé pour l'internationalisation au départ > les changement de langues) contrairement aux div (divisions) ne sert pas à diviser en espace
mais caractériser un morceau de texte ou autre... La première règle est de ne pas détourner les balises de ce pour quoi elles sont faites.
Il est préférable si on suit ta logique d'attribuer un display:inline à tes div pour qu'ils se comportent comme des éléments inline mais avec certains inconvénients : pas de possibilité de dimensionnement ou d'ajout de marges verticales du div (comme tous les éléments inline)

[devyan]

Bonjour,

<div> est de type block.
Ces éléments ont des dimensions.
Tu peux mettre dedans ce que tu veux.
Des éléments de type block ou des éléments de type inline.

<span> est de type inline.
Ces éléments n'ont pas de dimensions.
Tu ne peux pas mettre dedans ce que tu veux.
Seuls des éléments de type inline y sont acceptés.

Par exemple, tu peux mettre des <span> dans des <div>.
Mais l'inverse n'est pas permis.

C'est une histoire de structure.

-

+1 voir ICI pour plus de détails

[Johan Senn]

Désolé, prie dans mon truc, j'en oubli les règles de bases !

Alors, bonjour à tous, et merci pour vos réponses.

Pour régler le problème des marges verticales, on peut imaginer un conteneur avec soit un margin ou un pading, contenant trois blocs div avec display : inline. Non !?

Donc, en ayant une css comme suit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
#conteneur {
width : 100%;
}
 
#bloc_a {display : inline;
width : 20%;
texte-align : left;
}
 
#bloc_b {
display : inline;
width : 60%;
margin-left : 20%;
text-align : center;
}
 
#bloc_c {
display : inline;
width : 20%;
margin-left : 80%;
text-align : right;
}

Je devrais donc avoir les blocs A, B et C côte à côte, sans effet d'escalier. Et ce quelque soit le navigateur ?

[GihefBey]

As-tu essayé sans les margin ?

Dans ce cas de blocs disposés côte à côte, je me tournerais plutôt vers le float.

[Johan Senn]

As-tu essayé sans les margin ?

Dans ce cas de blocs disposés côte à côte, je me tournerais plutôt vers le float.

-

Le soucis avec les float, est qu'ils sortent du flux naturel. J'avais essayer avec deux blocs, en mettant un float : left pour les deux blocs, ça marchait avec IE, mais sous FF, le positionnement n'est pas bon sans un clear : both.

Par contre, je ne sais pas l'influence d'un display : inline sur le flux.

[Macmillenium]

Le soucis avec les float, est qu'ils sortent du flux naturel. J'avais essayer avec deux blocs, en mettant un float : left pour les deux blocs, ça marchait avec IE, mais sous FF, le positionnement n'est pas bon sans un clear : both.

C'est un comportement tout à fait normal !

Par contre, je ne sais pas l'influence d'un display : inline sur le flux.

Que ton élément devient de type inline comme expliqué dans les posts plus haut.

Je peux lire sur ce forum, comme sur d'autre, beaucoup d'appel à l'aide pour la position côte à côte de div.

D'où l'intérêt d'utiliser le css pour gérer la mise en page.

[Erwan31]

Pense à t'exercer à l'aide des tutos de Developpez comme celui-ci (entre autres).

[GihefBey]

Par contre, je ne sais pas l'influence d'un display : inline sur le flux.

À ma connaissance, ils n'ont pas d'influence sur la suite du flux.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      text-align: center;
      background-color: #cd853f;
      color : #344979;
      }
    #conteneur {
      position: relative;
      margin: 0 auto;
      width: 760px;
      text-align: left;
      border : 1px solid #fff;
      background-color: #ffd;
      font-family: 'Trebuchet MS', Verdana, sans-serif;
      }
    p {
      margin : 1em;
      }
    .p_i {
      display : inline;
      background-color: #fff;
      }
    </style>
</head>
<body>
  <div id="conteneur">
    <p class="p_i">Paragraphe en inline</p>
    <a href="http://www.developpez.net/forums/m3886656-1/">préférer div ou span</a>
    <p class="p_i">Paragraphe en inline</p>
    <p>Paragraphe</p>
    <p>Paragraphe</p>
  </div>
</body>
</html>

Si tu veux d'autres exercices et des exemples, essaye ceux de cette page.

-

[Johan Senn]

As-tu essayé sans les margin ?

Dans ce cas de blocs disposés côte à côte, je me tournerais plutôt vers le float.

-

Il semblerait que pour bénéficier d'un affichage convenable sous IE, il faudrait combiner le float avec le margin.

[ThomasR]

Bonjour,

Le soucis avec les float, est qu'ils sortent du flux naturel. J'avais essayer avec deux blocs, en mettant un float : left pour les deux blocs, ça marchait avec IE, mais sous FF, le positionnement n'est pas bon sans un clear : both.

Il est tout à fait possible de placer deux blocs côte à côte, facilement, sans problème de hauteurs, et tout ceci compatible multi-navigateurs, je vais vous donner ma ptite astuce magique :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<div class="SelfClear">
    <div style="float:left;width:30%;height:200px;">
        HELLO
    </div> 
    <div style="float:left;width:70%;height:200px">
        WORLD
    </div>
</div>

Et voici la classe SelfClear :

Pour tous les navigateurs (sauf IE6/7) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
.SelfClear:after {content:".";display:block;clear:both;height:0;visibility:hidden;}

Pour IE 6 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
/* == IE self-clearing elements == */
* html .SelfClear {display:inline-block;} /*IE6*/
/* Hide from IE Mac \*/ 
* html .SelfClear {display:block;} /*IE6*/
/* End hide from IE Mac */ 
/*\*/* html .SelfClear {height: 1%;} /*IE6*/

Pour IE7 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
.SelfClear {display:inline-block;} /*IE7*/
.SelfClear {display:block;} /*IE7*/

Et voilà vous avez maintenant une classe qui peut contenir des éléments flottants et ne pas perdre sa hauteur ! Le principe est qu'un point invisible est rajouté à la fin du contenu du div de classe SelfClear.

[Macmillenium]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
.SelfClear:after {content:".";display:block;clear:both;height:0;visibility:hidden;}

Je pense que sa marche même sans le "." invisible. Donc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
.SelfClear:after {content:""; display:block; clear:both; }

A mon avis, suffit ...

[ThomasR]

EDIT : oui en effet ca marche aussi ^^ mais je sais pas si c'est cross-browser car une chaine vide n'a pas de taille.

[Macmillenium]

Si, mais de toute façon c'est que sous IE (6/7/8 (bêta )) que sa ne marche pas.
Du coup et comme le float ne pose pas de pb pour IE, je me demande à quoi servent les display:inline-block et le height:1%(qui est utile pour corriger les bug de petites tailles sous IE6) dans ton code ...

[Erwan31]

Bonjour,
que de complication....
Pour info, attribuer un overflow:hidden/auto sur le conteneur est suffisant pour qu'il englobe ses enfant flottant.
Tout dépendra de son contenu mais en général il est préférable d'éviter de donner une hauteur aux blocs de contenu en partir parce que la hauteur du bloc ne sera pas poussée en cas de zoom texte.
On se contentera d'un overflow:auto (comme les hauteur sont fixe c'est préférable à un overflow:hidden pour écarter les risque d'inaccessibilité du contenu en cas de zoom texte.

Ce qui donnerait par exemple (CSS+HTML)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style type="text/css" media="screen">
<!--
.SelfClear {overflow:auto}
-->
</style>
<!--[if lte IE 6]>
	<style type="text/css" media="screen">
		.SelfClear {height:1%;}
	</style>
<![endif]-->
 
 
<div class="SelfClear">
    <div style="float:left; width:30%;height:200px; background: #090">HELLO</div> 
    <div style="float:left; width:30%;height:200px; background: #666">WORLD</div>
</div>

[Macmillenium]

Je ne vois toujours pas l'intérêt de mettre un height:1% pour IE6 ...

[Erwan31]

Je ne vois toujours pas l'intérêt de mettre un height:1% pour IE6 ...

Sous IE6- ça sert à conférer le layout (concept qui a disparu d'IE8 au passage) au bloc conteneur pour lui permettre d'établir ce qu'on appelle un contexte de formatage bloc (en) et à englober ses enfant flottant. IE7 a corrigé ce bug.

[Macmillenium]

Ok ! merci pour les liens