Geckozone

Bonjour!

j'aimerai savoir s'il est possible de mettre de 2 tableaux côte à côte avec NVU ??

Merci de vos réponses

!

Cordialement. Frèd.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Orange 7.4 ; NaviWoo1.1; .NET CLR 1.1.4322)

oui

Message envoyé avec : Opera/9.21 (Windows NT 5.1; U; fr)

Mongo Bob a écrit :oui

Là, tu m'as pris de court, j'allais répondre la même chose.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; wa; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

quoique "mettre de deux tableaux"?... c'est peut-être pas la bonne réponse, "oui"...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

Bon, soyons un peu sérieux.
Pour positionner un tableau : cliquer gauche dans le tableau pour le sélectionner, dans la barre d'état cliquer droit sur <table> > Styles internes > Propriétés de la boîte, et là, on positionne et on dimensionne le tableau comme on le désire en position absolue.
Même chose pour le deuxième tableau.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; wa; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

Il est aussi possible de positionner le 1er tableau en flottant gauche. Le 2eme, pour peu qu'il reste de la place à droite, s'y positionnera tout seul comme un grand. Dans ce cas, pas de position absolue et les tableaux resteront dans le flux du contenu de la page.

De toute façon, il vaut mieux éviter les positions absolues qui posent d'autres problèmes.
Enfin, il faut mettre les 2 en flottant gauche pour qu'ils se juxtaposent. Si seulement le 1er, le 2ème, même avec toute la place du monde, restera en-dessous : un bloc dans le flux se positionne sous son voisin du dessus, même s'il a la place d'aller à côté.
Démo? Code?

Code : Tout sélectionner

Juxtaposé :
#div1 {
	float: left;
    border: 1px solid #ffcccc;
   width: 50px;
    }
    #div2 {
	float: left;
    border: 1px solid #ffcccc;
    width: 50px;
    }
1 dessus flottant, 1 dessous dans le flux:
#div1 {
	float: left;
    border: 1px solid #ffcccc;
   width: 50px;
    }
    #div2 {
	border: 1px solid #ffcccc;
    width: 50px;
    }
1 dessus, 1 dessous aussi, tous les 2 dans le flux :
#div1 {
	 border: 1px solid #ffcccc;
   width: 50px;
    }
    #div2 {
	    border: 1px solid #ffcccc;
    width: 50px;
    }

<edit> au fait, j'ai pris des <div>, les tableaux sont des blocs comme les <div> (donc, remplacer <div> par <table> et la suite...</edit>

<edit 8h46>une bêtise dans le code corrigée, damned!</edit>
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4

Merci, ça marche !!;-)

BYe, Frèd.

Message envoyé avec : Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Orange 7.4 ; NaviWoo1.1; .NET CLR 1.1.4322)

MB, peux-tu me dire quelle différence d'affichage tu as entre ces deux codes:

Code : Tout sélectionner

 <body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" alink="#000099" link="#0000FF" vlink=
  "#FF0000">
    <table style="text-align: left; float: left; width: 446px; height: 60px;" border="1" cellpadding="2" cellspacing=
    "2">
      <tbody>
        <tr>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table><br>
    <table style="text-align: left; width: 484px; height: 60px;" border="1" cellpadding="2" cellspacing="2">
      <tbody>
        <tr>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table><br>
  </body>

ou

Code : Tout sélectionner

 <body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" alink="#000099" link="#0000FF" vlink=
  "#FF0000">
    <table style="text-align: left; float: left; width: 446px; height: 60px;" border="1" cellpadding="2" cellspacing=
    "2">
      <tbody>
        <tr>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table><br>
    <table style="text-align: left; width: 484px; height: 60px; float: left;" border="1" cellpadding="2" cellspacing=
    "2">
      <tbody>
        <tr>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
        </tr>
      </tbody>
    </table><br>
  </body>

"Flottant: permet de positionner un élément à gauche (ou à droite) dans son parent.
le reste du contenu du parent occupera alors l'espace laissé libre en commençant par s'écouler autour du flottant" (Raphael Goetter - memento css)

Aucune, ils sont pas juxtaposés non plus, d'ailleurs, même si on modifie les largeurs, ils restent décalés verticalement. Or, la question de départ était "comment mettre 2 tableaux côte à côte" je suppose parfaitement alignés.
Si Fred28 veut 2 tableaux côte à côte mais décalés verticalement, alors c'est ce qu'il lui faut.
Dans le code que j'ai donné, 2 blocs <div> se juxtaposent parfaitement parce qu'ils sont tous 2 en flottant, 2 autres restent l'un au-dessus de l'autre, soit parce que tous 2 dans le flux, soit parce que l'un flottant, l'autre dans le flux
(et j'ai pris exprès des petites largeurs pour qu'il n'y ait pas d'ambigüité sur l'empêchement qu'ils pourraient subir à se coller à côté du voisin). As-tu essayé, pas sûr... Je viens de réafficher ce code, ça marche, avec des <div>.
Il y aurait une différence de comportement entre tableau et n'importe quel bloc type <div>? Peut-être et du coup au temps pour moi.
Je ne vais pas me pencher sur la question, je n'utilise jamais de tableau, j'ai cru piger que Fred28 voulait 2 tableaux à la même hauteur.

le reste du contenu du parent occupera alors l'espace laissé libre en commençant par s'écouler autour du flottant" (Raphael Goetter - memento css)

Je sais pas ce que Goëtter entend exactement par "s'écouler autour..." mais pas de se juxtaposer parfaitement par rapport au flottant, à mon avis.

Message envoyé avec : Opera/9.21 (Windows NT 5.1; U; fr)

Au fait, Goëtter écrit aussi (retour de vacances, je retrouve mes bouquins préférés) :

bouquin CSS2, p.116 a écrit :Un des nombreux avantages du positionnement flottant est la possibilité de placer des blocs côte à côte. Transformer les deux paragraphes de l'exemple en flottant les fait ainsi apparaître au même niveau :
Code : Tout sélectionner
p#premier {
float: left;
width: 100px;
background: #ccc;
}
p#second {
float: left;
width: 150px;
background: green;
}

Dois-je insister : au même niveau

Comme je le disais, mais j'ai jamais eu de retour, dommage, peut-être les tableaux ne se conduisent-ils pas comme des blocs? Pourtant ce sont des blocs, là, mystère...

Geckozone

Peut-on mettre 2 tableaux côte à côte ?

Peut-on mettre 2 tableaux côte à côte ?