tableau qui déborde

[vidzo]

Bonjour,

J'ai un petit problème:

Mon site contient un tableau, qui se remplit dynamiquement à l'aide de la base de donnée. Sa largeur est donc variable.

Mon problème, c'est qu'il sort completement de mon design sur la droite. Il sort du bloc body, et même du bloc html.

J'ai pourtant mis des width: auto; sur tout mes blocs.

Pourquoi les blocs ne s'agrandissent pas en même temps que le tableau?

Merci de vos réponses.

Vidzo

[Arlette]

Bonjour,

Tu devrais mettre l'url de ton site pour que les experts puissent se rendre compte de visu

[vidzo]

Je travaille sur le site de l'intranet d'une entreprise, et je ne peux malheuresement pas publier le site sur internet.

Si jamais je n'arrive vraiment pas a me faire comprendre, j'essairai de reproduire le même probleme sur une page visualisable sur le net.

[jcaron]

C'est quoi le problème exactement? Le tableau est trop large (par rapport à un gabarit fixe), ou le gabarit n'est pas assez large par rapport au tableau?

Tu utilises la propriété CSS "position"? Le contenu de ton tableau contient du texte non-sécable (des URLs par exemple)?

C'est vrai qu'avec un exemple on irait nettement plus vite...

Jacques.

[vidzo]

http://julien.lutel.free.fr/index.php?page=testtab3

Voila.

Je n'ai mis que la page en question, donc il y a certains warning, il ne faut pas y faire attention.

Le cadre rouge délimite le bloc html, le bleu le bloc body.

Moi je veux que le tableau tienne dans le bloc "contenu", qui est délimité par la bordure grise.

Dans mon CSS, j'ai mis tout les width en auto.

Mon tableau contient en effet du texte non-sécable

Mon code:

Index.php (ouverture et fermeture des div)

<?php


	include("head.php");

	$page = $_GET['page'];

	if (!isset($page) || !file_exists("$page.php") || $page == "index")
	{
        $page = "accueil";
    }

	echo "<div id=\"corps\">";
    include("menu.php");
    echo " 
			<div id=\"contenu\">
			";
    include("$page.php");
	echo "
	</div> <!--Fin du contenu-->

			</div> <!--Fin du corps-->\n";

	include("bas.php");

?>	

La page testtab3.php (raccourcie):

				<table>

															<tr>
																<th >test</th>
																<th>test</th>
																<th>test</th>
																<th>test</th>
																<th>test</th>
																<th>test</th>

															</tr>

															<tr>
																<td>azertyuiopqsdfghjkl</td>
																<td>azertyuiopqsdfghjkl</td>
																<td>azertyuiopqsdfghjkl</td>
																<td>azertyuiopqsdfghjkl</td>
																<td>azertyuiopqsdfghjkl</td>
																<td>azertyuiopqsdfghjkl</td>
															</tr>															
					</table>	

Et enfin, le CSS qui nous intéresse ici:

 html{
	background-image : url("../images/fond.png");
	border: 7px solid red;	
}

body{
	background-image : url("../images/corps.png");
	background-repeat : repeat-xy;
	width : auto;
	min-width : 1180px;
	margin-left : 20px;
	font-family : Verdana, Trebuchet MS, sans-serif;
	font-size : 13px;
	border: 6px solid black;
}

#haut
{
   width: 1150px;
   height: 131px;
   margin: auto;
   margin-top: 10px; 
   margin-bottom: 10px;
   border: 6px solid pink;
}

#corps{
	width : auto;
	height: auto;
	margin-left: 13px;
	margin-right: 13px;
	border: 6px solid green;
}

#contenu{
	padding:15px 0 0 15px;
	min-height: 500px;
	width: auto;
	text-align : justify;
	border: 15px solid #c3c3c3;
}

#menu {
	  height : 40px;
      font-size:100%;
      line-height:normal;
	  margin-bottom: -2px;
	  font-size : 15px;
	  border: 6px solid orange;
}

#bas{
	text-align : center;
	border: 6px solid brown;
}

Si je mets une grande taille manuellement aux width ( 1700px par exemple), ca marche. Mais je ne veux pas que le site soit aussi large lorsque le tableau est moins large, ou lorsqu'il ne s'affiche pas. Je pensais que le fait de mettre auto reglerait mon problème, apparement non.

Modifié 3 Août 2009 par vidzo

[vidzo]

J'ai mis (de très jolis) cadres de couleurs pour visualiser mes différents blocs, ca pourra peut être vous aider à comprendre.

Le cadre rouge: balise html

noir: body

rose: div haut

marron: div "bas"

vert: div "corps"

jaune : div "menu"

gris : div "contenu"

http://julien.lutel.free.fr/index.php?page=testtab3

Modifié 3 Août 2009 par vidzo

[jcaron]

En fait le problème est assez simple: la largeur "automatique" d'un bloc (normal, i.e. display: block) dépend (entre autres choses) de la taille du contenant, et pas celle de son contenu.

Deux solutions:

- forcer la largeur du div en question (ou de n'importe quel bloc entre lui et le body/html, ce dernier compris) en fonction de la taille de ta table (à calculer en fonction des colonnes affichées, ou d'un coup de JS...). Pas très élégant, mais ça peut très bien marcher dans de nombreux cas;

- mettre display: inline-block sur le bloc contenant tout qui doit s'aggrandir (le div id=corps par exemple). Mais je n'utilise jamais ça donc je ne pourrais pas te dire les conséquences que ça pourrait avoir (en termes de compatibilité en particulier).

Il y a peut-être de gars plus doués que moi en CSS dans les parages :-)

Jacques.

[vidzo]

Ca marche parfaitement sur firefox, mais pas sur IE. En tout cas merci, ca m'enlève déja une épine du pied.

[jcaron]

Si j'en crois:

http://www.quirksmode.org/css/display.html

ça marcherait si tu utilises un <span> plutôt qu'un <div> par exemple. Pas testé.

Jacques.

[TheRec]

Bonjour,

Tu as également la possibilité d'ajouter la propriété CCS "overflow" au conteneur de ton tableau :

#contenu {
  overflow: auto;
}

Cette propriété permet de contrôler la méthode appliquée par le navigateur lorsqu'une dimension d'un conteneur est dépassée par celle de son contenu. En définissant une largeur à ce conteneur et cette nouvelle propriété avec comme valeur "auto", le conteneur aura une barre de défilement horizontale lorsque le contenu sera trop long. Lorsqu'il sera plus court, il n'y aura pas de barre de défilement... seul bémol, tu n'as pas de contrôle sur la mise en forme de ses barre de défilement et la barre horizontale est affichée en bas du conteneur.

Bonne continuation.