28173 sujets

CSS et mise en forme, CSS3

[résolu] tableau en 100% dans un div entouré de 2 div en float

Bonjour

Je suis en train de refaire un site en utilisant comme base le
design fluide en 3 colonnes que j'ai trouvé ici.

J'ai besoin d'afficher une liste de donnée qui provient d'un fichier excel.
La façon correct est de l'afficher grâce à des tableaux si j'ai bien compris ce à quoi est destiné les tableaux.

Je n'arrive pas à rendre un affichage correct d'un tableau en width="100%" au centre de la page. Chaque fois sur IE6 il par de sous la colonne de gauche.

Voici le code exact : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Exemple : bloc central avec marges compensant les flottants</title>
	<style type="text/css">
		html {font-size: 100%;}
		body {padding: 1em; font-size: .85em; font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;}
		
		h1 {margin-top: 0; text-align: center; background: moccasin;}
		ol, ul, li {padding: 0; margin: 1em;}
		
		div#colonne1 {
			float: left;
			width: 160px;
			padding: 1px 0;
			background: lightblue;
		}
		div#colonne2 {
			float: right;
			width: 300px;
			padding: 1px 0;
			background: burlywood;
		}
		div#centre {
			padding: 1px 20px;
			margin-left: 170px;
			margin-right: 310px;
			background: khaki;
		}
	</style>
</head>

<body>
	<h1>Exemple</h1>

	
	<div id="colonne1">
	<h2>Navigation</h2>
	<ul>
		<li>link1</li>
		<li>link2</li>
		<li>link3</li>
		<li>link4</li>
		<li>link5</li>
		<li>link6</li>
	</ul>
	</div><!-- fin de div#colonne1 -->
	
	<div id="colonne2">
    <h2>Code CSS</h2>
    <p>
      texte1<br />
      texte2<br />
      texte3<br />
      texte4<br />
      texte5
    </p>
	</div><!-- fin de div#colonne2 -->
	
	<div id="centre">
		<h2>Explications</h2>
    <table width="100%">
      <tr>
        <td>
          quelques lignes dans le tableaux en 100%<br />
          quelques lignes dans le tableaux en 100%<br />
          quelques lignes dans le tableaux en 100%<br />
          quelques lignes dans le tableaux en 100%<br />
          quelques lignes dans le tableaux en 100%
        </td>
      </tr>
    </table>
    </div>
		
	</div><!-- fin de div#centre -->
</body>
</html>


Si je comprend bien, un tableau avec IE6 ne semble pas comprendre qu'il existe des div en float de chaque coter ?

Merci pour votre aide.
Sky
Modifié par skyg (10 Jul 2007 - 08:06)
Bonjour
Sans réponse, c'est pas de réponse comme dans on ne peut pas avoir de tableau en 100% avec un design de se type ?

Sky
Sans vouloir avoir l'air d'insister, mais votre design fluide j'arrive par aucun moyen de lui permettre des table en 100% de large.

Personne a réussi ce genre de chose ?
Bonjour et bienvenue skyg Smiley smile

Je ne suis pas sur que ton tableau soit en cause... Regarde éventuellement du côté de la FAQ, au rayon "Décalages, marges, bugs divers"
Modifié par dominique (06 Jul 2007 - 16:14)
Je suppose que tu as testé pour dire ce genre de chose ?
Reprend le même code EXACT de alsacreation et met un table en width="100%" dans le centre. Sous ie6 ça foire.

J'ai rien touché d'autre au code, pas une virgule.

Je voudrai pas non plus paraitre malpoli envers les personne qui ont fais ce travail, qui est un jolie code, mais bon, t'a réponse me donne l'impression de parler à la hotline de Free ... Smiley rolleyes

Sur ce, c'est sans animosité hein:)

Edit : j'ai mis en ligne la même page que le code de mon 1er message ici : -ttp://viaphp.graphiks.net/t.htm
Modifié par skyg (06 Jul 2007 - 16:45)
Hello,

Pour commencer, tu as un </div> en trop qui traine. Ensuite, tu peux mettre un width: 100% dans ta feuille de style plutôt que directement dans le code HTML.

Pour le bug lui-même... en fait, je constate deux bugs différents :
- le passage à la ligne (en dessous du flottant) du tableau ;
- la disparition d'une partie du bloc (titre, couleur de fond...).

Pour le premier, c'est à priori un problème lié au Three Pixel Jog dans IE6. Le flottant de gauche repousse le contenu de div#centre de 3px vers la droite. Tant que le tableau ne fait pas toute la largeur, tout va bien (tester avec un width: 90%), mais s'il fait 100% de la largeur, ça ne tient plus (100% + 3px = ça déborde).

Une « solution » consisterait, via un commentaire conditionnel, à adresser un correctif à IE6 :
<!--[if lte IE 6]><style type="text/css">
	div#centre {
		height: 1%; /* HasLayout - le Three Pixel Jog s'applique au bloc plutôt qu'à son contenu */
		margin-left: 167px; /* 3px de moins que la marge normale, qui seront compensés par les 3px du Three Pixel Jog */
		margin-right: 307px; /* idem */
	}
</style><![ endif]-->

La première instruction CSS est indispensable (celle-ci ou toute instruction conférant le layout au bloc), les deux suivantes sont cosmétiques.

Attention à ne pas écrire [ endif] mais à supprimer l'espace après le premier crochet (mis ici pour éviter que ça ne soit considéré comme du code par le forum). Voir les commentaires conditionnels dans la FAQ pour en savoir plus.

Voici ce que donne la page corrigée :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Exemple : bloc central avec marges compensant les flottants</title>
	<style type="text/css">
		html {font-size: 100%;}
		body {padding: 1em; font-size: .85em; font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;}
		h1 {margin-top: 0; text-align: center; background: moccasin;}
		ol, ul, li {padding: 0; margin: 1em;}
		div#colonne1 {
			float: left;
			width: 160px;
			padding: 1px 0;
			background: lightblue;
		}
		div#colonne2 {
			float: right;
			width: 300px;
			padding: 1px 0;
			background: burlywood;
		}
		div#centre {
			padding: 1px 20px;
			margin-left: 170px;
			margin-right: 310px;
			background: khaki;
		}
		table {
			width: 100%;
			background: red;
		}
	</style>
	<!--[if lte IE 6]>
	<style type="text/css">
		div#centre {
			height: 1%;
			margin-left: 167px; /* 3px de moins que la marge normale, qui seront compensés par les 3px du Three Pixel Jog */
			margin-right: 307px;
		}
	</style>
	<![endif]-->
</head>
<body>
	<h1>Exemple</h1>
	<div id="colonne1">
	<h2>Navigation</h2>
	<ul>
		<li>link1</li>
		<li>link2</li>
		<li>link3</li>
		<li>link4</li>
		<li>link5</li>
		<li>link6</li>
	</ul>
	</div><!-- fin de div#colonne1 -->
	<div id="colonne2">
    <h2>Code CSS</h2>
    <p>
      texte1<br />
      texte2<br />
      texte3<br />
      texte4<br />
      texte5
    </p>
	</div><!-- fin de div#colonne2 -->
	<div id="centre">
		<h2>Explications</h2>
    <table>
      <tr>
        <td>
          quelques lignes dans le tableaux en 100%<br />
          quelques lignes dans le tableaux en 100%<br />
          quelques lignes dans le tableaux en 100%<br />
          quelques lignes dans le tableaux en 100%<br />
          quelques lignes dans le tableaux en 100%
        </td>
      </tr>
    </table>
	</div><!-- fin de div#centre -->
</body>
</html>


Mais à la réflexion, si on utilise un commentaire conditionnel et le HasLayout pour IE6, autant ne pas s'embêter avec des marges et l'utiliser directement pour la mise en forme de la colonne centrale (voir la partie du tutoriel sur le contexte de formatage).
Bonjour Florent

Merci pour ta réponse complète. Ha oui, il est pollisson se div ! Merci Smiley smile
Je ne connaissé pas se "Three Pixel Jog dans IE6".

Je vais essayé tout ça, même si ça me contrari de devoir faire des hacks pour IE6. Qu'elle espèce de sale navigateur se IE6.

Si jamais, je vais repassé en mise ne page 3 colonne mais les deux du coté en absolute. Seul point noir le bandeau du bas qui ne se mettra pas bien en bas si les menus sont plus long que le centre.

Bref, merci pour les idées.
Sky
Sujet clos
Aller à