Feuille de style et tableaux

Nerva · 27 Novembre 2007

Bonjour.

Je recherche toute information ou tutoriel conséquent sur la mise en page de tableaux via CSS. Je cherche surtout une manière de baliser qui allègerait au maximum les lignes de code.

Merci.

nexxen · 27 Novembre 2007

Salut, une piste pour tes recherches:
OpenWeb => http://openweb.eu.org/articles/tableaux_css/

Nerva · 27 Novembre 2007

Merci, ce site a l'air très intéressant. :wink:

En fait, je me suis mal exprimé. Ce que je recherche avant tout c'est de supprimer carrément les tableaux en les "simulant" et j'ai trouvé ceci qui correspond exactement à ce que je voulais :

http://pbnaigeon.developpez.com/tutoriel/CSS-HTML/mise-en-page-CSS

L'utilisation de menus est vraiment très simple et les pages HTML très dépouillées...

Florent V. · 27 Novembre 2007

Nerva a dit:
Ce que je recherche avant tout c'est de supprimer carrément les tableaux en les "simulant"

Mouais, bof. La technique d'intégration HTML/CSS est quand même assez différente dans l'approche de la technique de découpage à coup de tableau de mise en page. Vouloir obtenir un tableau de mise en page en passant par des div par exemple, c'est se planter de démarche à mon humble avis.

Une petite lecture:
Quelle démarche suivre pour intégrer une maquette en page HTML/CSS ?

Sinon, pour les ressources en ligne: tout Openweb, tout Alsacréations.com, tout Pompage.net.

e-kiwi · 27 Novembre 2007

il est intérréssant de supprimer les tableaux pour mettr en page son haut / menu / contenu / bas de site. je ne vois pas en quoi c'est se planter de demarche

david11 · 27 Novembre 2007

voila un autre site http://www.siteduzero.com

Nerva · 27 Novembre 2007

Je ne voudrais pas me lancer dans un débat philosophique "Tableau Vs CSS" mais pour le problème qui se posait dans mon cas, c'était à peu près comme l'exemple du lien que j'ai inséré : un bandeau en haut, un bandeau en bas, et entre deux, un menu et un contenu.
Jusqu'alors, j'avais incorporé un tableau à deux colonnes mais je trouve l'usage du CSS bien plus simple et plus "élégant" qu'un tableau.

Malgré tout, il faut que je peaufine car c'est loin d'être parfait ; j'ai un "margin-left" de 20 pixels dans toutes mes pages (avec ou sans "tableau"), c'est nickel dans FF mais j'ai un décalage à droite dans IE (et donc peut-être aussi dans d'autres navigateurs). De plus, ma page (680 pixels de large) est centrée comme il faut dans FF mais est calée à gauche dans IE ; je précise que j'utilise Dreamweaver 6 pour la conception et qu'en affichage WYSIWYG, elle est également calée à gauche mais se centre correctement en visualisation, tout comme une fois chargée sur le serveur.

jOoL · 27 Novembre 2007

e-kiwi a dit:
il est intérréssant de supprimer les tableaux pour mettr en page son haut / menu / contenu / bas de site. je ne vois pas en quoi c'est se planter de demarche

Pour la mise en page c'est clair que c'est intéressant. Mais pour afficher des données dans un tableau, il est largement préférable d'utiliser ce qui a été conçu pour, soit la balise TABLE.

Florent V. · 27 Novembre 2007

e-kiwi a dit:
il est intérréssant de supprimer les tableaux pour mettr en page son haut / menu / contenu / bas de site. je ne vois pas en quoi c'est se planter de demarche

e-kiwi, je n'ai jamais dit cela.

Ce que j'ai dit:

La technique d'intégration HTML/CSS est quand même assez différente dans l'approche de la technique de découpage à coup de tableau de mise en page. Vouloir obtenir un tableau de mise en page en passant par des div par exemple, c'est se planter de démarche à mon humble avis.

Ce que je n'ai pas dit:

Vouloir obtenir une mise en page en passant par des div par exemple, c'est se planter de démarche à mon humble avis.

La nuance n'est pas excessivement subtile, il suffit de ne pas lire en diagonale.

zeb · 27 Novembre 2007

Nerva a dit:
j'ai un "margin-left" de 20 pixels dans toutes mes pages (avec ou sans "tableau"), c'est nickel dans FF mais j'ai un décalage à droite dans IE (et donc peut-être aussi dans d'autres navigateurs).

oublie vite l'usage du padding et du margin si tu veux rester compatible IE/ FF l'un va le considérer comme faisant partie du width l'autre non (d'ou décalage de l'affichage). Idem pour les border mais moins problématique dans la mesure ou le problème se situe a la hauteur de la bordure (souvent 1px)

un truc :
deux div imbriquées et un positionnement relatif avec un left qui correspond au padding recherché

Dan_A · 27 Novembre 2007

De plus, ma page (680 pixels de large) est centrée comme il faut dans FF mais est calée à gauche dans IE ;

Il manque un DOCTYPE
Dreamweaver n'est pas le bon outil pour passer au HTML/CSS sans tableaux (quand ils ne sont pas sémantiquement corrects).

Nerva · 27 Novembre 2007

Comme DOCTYPE, Dreamweaver me génère celui-ci :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Florent V. · 27 Novembre 2007

zeb a dit:
oublie vite l'usage du padding et du margin si tu veux rester compatible IE/ FF l'un va le considérer comme faisant partie du width l'autre non (d'ou décalage de l'affichage).

Désolé, c'est faux à 90%.

IE5 utilise effectivement son modèle de boite propriétaire, dans lequel les bordures et padding sont retranchés à la largeur, pour peu qu'on ait spécifié une largeur fixe en pixels, pourcentages ou autre unité. Si la largeur n'est pas spécifiée (margin: auto), ça n'a aucun effet.

IE 6, IE 7, Firefox, Opera, Safari, Konqueror, etc., appliquent le modèle de boite CSS standard. Pour IE6 et 7, il faut bien entendu travailler en mode standard et non pas en mode Quirks, donc avec un Doctype complet avec URL de la DTD.

Pour les histoires de centrage via les marges automatiques qui ne marche pas dans IE: même problème, il faut travailler en mode standard et non pas en mode Quirks.

Travailler en mode Quirks pour faire de la mise en page CSS, c'est suicidaire.

Florent V. · 27 Novembre 2007

Nerva a dit:
Comme DOCTYPE, Dreamweaver me génère celui-ci :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Ce Doctype est incomplet. La page sera rendue en mode Quirks.

Utiliser ce générateur de squelettes (X)HTML pour avoir quelque chose de propre:
http://css.alsacreations.com/outils/squelettor/

Dan_A · 27 Novembre 2007

DOCTYPE incomplet = mode quirks !
Utilise plutôt :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Nerva · 28 Novembre 2007

Ce DOC TYPE centre parfaitement la page dans IE mais me pose maintenant un problème dans FF.
Dans le menu, j'ai ça :

Code:

<div id="menu">
	<img src="images/font_menu.png" width="150" height="35">
	<a href="page01.php">Lien 01</a><br>
	<a href="page02.php">Lien 02</a><br>
	<a href="page03.php">Lien 03</a><br>
	<a href="page04.php">Lien 04</a><br>
	<a href="page05.php">Lien 05</a><br>
	<a href="page06.php">Lien 06</a><br>
	<a href="page07.php">Lien 07</a><br>
	<a href="page08.php">Lien 08</a><br>
	<a href="page09.php">Lien 09</a><br>
	<a href="page10.php">Lien 10</a>
</div>

L'interligne entre chaque entrée est maintenant double.

Comment y remédier ?

Nerva · 28 Novembre 2007

Zeb
Tu parles d'un "truc" avec les deux DIV imbriquées ; mais quelle est la méthode "officielle" pour y arriver ?

Nerva · 28 Novembre 2007

Récapitulatif global.

Ma page fait 680 pixels de large avec une image comme habillage dont les bords se fondent avec le fond de page gris.
Mon intérieur de page fait 640 pixels de large (aussi bien pour le "top" que le "bottom").
Pour obtenir un retrait intérieur esthétique, le contenu de la page fait 630 pixels de large.

Pour plus de clarté, voici le contenu de ma feuille de style (épurée de la mise en forme des textes et des photos pour ne pas trop surcharger) :

Code:

/*----------------------------------------------------------------------*/
/* STRUCTURE DE LA PAGE */
/*----------------------------------------------------------------------*/

/* Corps de la page */
body
{
background-color: #EEEEEE;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

/* La page */
#page
{
width: 680px;
margin : 0px auto;
background: url(images/page.png) repeat-y center top;
padding-top: 10px;
padding-bottom: 10px;
}

/* L'entête */
#top
{
margin-left: 20px;
width: 640px;
height: 260px;
background: url(images/logo_top.jpg);
}

/* La zone pour les textes */
#content
{
margin-left: 25px;
text-align: justify;
width: 630px;
}

/* La zone pour les galeries de photos */
#gallery
{
padding-top: 5px;
padding-bottom: 10px;
margin-left: 0px;
text-align: center;
}

/* Le bas de page */
#bottom
{
margin-left: 20px;
width: 640px;
height: 50px;
background: url(images/logo_bottom.jpg);
clear: both;
}

/* La zone gauche de la page de menu */
#menu
{
float: left;
width: 150px;
margin-left: 20px;
}

/* La zone droite de la page de menu */
#editorial
{
float:left;
width: 485px;
}


/*----------------------------------------------------------------------*/
/* OBJETS CONTENUS DANS LA PAGE */
/*----------------------------------------------------------------------*/

/* La "zone blanche" pour les titres, les sous-titres et les boutons */
#blank
{
padding-top: 10px;
padding-bottom: 10px;
margin-left: 0px;
text-align: center;
}

/* Le biseau séparateur */
#bevel
{
margin-left: 20px;
text-align: center;
width: 640px;
height: 20px;
background: url(images/bevel.png);
}

/* La ligne de séparation */
#separator
{
margin-left: 20px;
margin-top: 15px;
margin-bottom: 10px;
text-align: center;
width: 640px;
height: 1px;
background: url(images/separator.png);
}

Page de texte standard

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="page">
	<div id="top"></div>
	<div id="blank"><img src="images/font_page01.png" width="300" height="30"></div>
	<div id="bevel"></div>
	<div id="content">
		<div class="text_standard">Bla bla bla...</div>
	</div>
	<div id="bevel"></div>
	<div id="blank"><a href="home.php"><img src="images/btn_previous.png" width="200" height="30" border="0"></a></div>
	<div id="bottom"></div>
</div>
</body>
</html>

Avec ce DOCTYPE, cette page est parfaitement centrée dans IE et il n'y a aucun décalage de texte (le texte se trouve dans "content").

Page de menu

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style_test.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="page">
	<div id="top"></div>
	<div id="menu">
		<img src="images/font_menu.png" width="150" height="35">
		<a href="page01.php">Lien 01</a><br>
		<a href="page02.php">Lien 02</a><br>
		<a href="page03.php">Lien 03</a><br>
		<a href="page04.php">Lien 04</a><br>
		<a href="page05.php">Lien 05</a><br>
		<a href="page06.php">Lien 06</a><br>
		<a href="page07.php">Lien 07</a><br>
		<a href="page08.php">Lien 08</a><br>
		<a href="page09.php">Lien 09</a><br>
		<a href="page10.php">Lien 10</a>
	</div>
	<div id="editorial">
		<div class="text_standard" align="justify">Bla bla bla...</div>
	</div>
	<div id="bottom"></div>
</div>
</body>
</html>

Là, ça se gâte ; dans IE, le contenu de "menu" et de "editorial" est décalé sur la droite de 20 pixels, ce qui correspond au "margin-left" de "editorial".

Galerie de photos

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="page">
	<div id="top"></div>
	<div id="blank"><img src="images/font_page02.png" width="300" height="30"></div>
	<div id="bevel"></div>
	<div id="blank">
		<div class="text_title">Premi&egrave;re s&eacute;rie</div>
	</div>
	<div id="gallery">
		<a href="photos/photo_01.htm" onClick="window.open('','popup','fullscreen=true,menubar=0,statusbar=0,scrollbars=1,resizable=1,toolbar=0')" target="popup"><img src="photos/photo_01_th.jpg" class="thumb" alt="Afficher la photo"></a>
		<a href="photos/photo_02.htm" onClick="window.open('','popup','fullscreen=true,menubar=0,statusbar=0,scrollbars=1,resizable=1,toolbar=0')" target="popup"><img src="photos/photo_02_th.jpg" class="thumb" alt="Afficher la photo"></a>
		<a href="photos/photo_03.htm" onClick="window.open('','popup','fullscreen=true,menubar=0,statusbar=0,scrollbars=1,resizable=1,toolbar=0')" target="popup"><img src="photos/photo_03_th.jpg" class="thumb" alt="Afficher la photo"></a>
		<a href="photos/photo_04.htm" onClick="window.open('','popup','fullscreen=true,menubar=0,statusbar=0,scrollbars=1,resizable=1,toolbar=0')" target="popup"><img src="photos/photo_04_th.jpg" class="thumb" alt="Afficher la photo"></a>
		<a href="photos/photo_05.htm" onClick="window.open('','popup','fullscreen=true,menubar=0,statusbar=0,scrollbars=1,resizable=1,toolbar=0')" target="popup"><img src="photos/photo_05_th.jpg" class="thumb" alt="Afficher la photo"></a>
		<a href="photos/photo_06.htm" onClick="window.open('','popup','fullscreen=true,menubar=0,statusbar=0,scrollbars=1,resizable=1,toolbar=0')" target="popup"><img src="photos/photo_06_th.jpg" class="thumb" alt="Afficher la photo"></a>
		<a href="photos/photo_07.htm" onClick="window.open('','popup','fullscreen=true,menubar=0,statusbar=0,scrollbars=1,resizable=1,toolbar=0')" target="popup"><img src="photos/photo_07_th.jpg" class="thumb" alt="Afficher la photo"></a>
		<a href="photos/photo_08.htm" onClick="window.open('','popup','fullscreen=true,menubar=0,statusbar=0,scrollbars=1,resizable=1,toolbar=0')" target="popup"><img src="photos/photo_08_th.jpg" class="thumb" alt="Afficher la photo"></a>
		<a href="photos/photo_09.htm" onClick="window.open('','popup','fullscreen=true,menubar=0,statusbar=0,scrollbars=1,resizable=1,toolbar=0')" target="popup"><img src="photos/photo_09_th.jpg" class="thumb" alt="Afficher la photo"></a>
		<a href="photos/photo_10.htm" onClick="window.open('','popup','fullscreen=true,menubar=0,statusbar=0,scrollbars=1,resizable=1,toolbar=0')" target="popup"><img src="photos/photo_10_th.jpg" class="thumb" alt="Afficher la photo"></a>
		<a href="photos/photo_11.htm" onClick="window.open('','popup','fullscreen=true,menubar=0,statusbar=0,scrollbars=1,resizable=1,toolbar=0')" target="popup"><img src="photos/photo_11_th.jpg" class="thumb" alt="Afficher la photo"></a>
		<a href="photos/photo_12.htm" onClick="window.open('','popup','fullscreen=true,menubar=0,statusbar=0,scrollbars=1,resizable=1,toolbar=0')" target="popup"><img src="photos/photo_12_th.jpg" class="thumb" alt="Afficher la photo"></a>
		<a href="photos/photo_13.htm" onClick="window.open('','popup','fullscreen=true,menubar=0,statusbar=0,scrollbars=1,resizable=1,toolbar=0')" target="popup"><img src="photos/photo_13_th.jpg" class="thumb" alt="Afficher la photo"></a>
		<a href="photos/photo_14.htm" onClick="window.open('','popup','fullscreen=true,menubar=0,statusbar=0,scrollbars=1,resizable=1,toolbar=0')" target="popup"><img src="photos/photo_14_th.jpg" class="thumb" alt="Afficher la photo"></a>
		<a href="photos/photo_15.htm" onClick="window.open('','popup','fullscreen=true,menubar=0,statusbar=0,scrollbars=1,resizable=1,toolbar=0')" target="popup"><img src="photos/photo_15_th.jpg" class="thumb" alt="Afficher la photo"></a>
	</div>
	<div id="bevel"></div>
	<div id="blank"><a href="page02.php"><img src="images/btn_previous.png" width="200" height="30" border="0"></a></div>
	<div id="bottom"></div>
</div>
</body>
</html>

Cette page ne pose aucun problème ni dans FF ni dans IE.

e-kiwi · 28 Novembre 2007

déjà pour faire un menu, ce n'est pas <br> à utiliser mais
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

après tu gérera l interligne comme tu le souhaite

Victor BRITO · 28 Novembre 2007

Pour le centrage, il faut bien faire la distinction entre élément de bloc et élément ou contenu en ligne.

La propriété text-align: center centre le contenu en ligne, mais pas son bloc conteneur. Internet Explorer, qui interprète les CSS à sa guise, fait aussi centrer le bloc.

Si l'on s'en tient aux standards (ce que font Firefox, Opera, Safari et tout autre navigateur respectueux), il faut procéder autrement pour centrer un bloc. Je vais exposer deux méthodes :

- soit tu donnes une largeur explicite au bloc conteneur, auquel cas tu lui appliques des marges latérales automatiques ;

Code:

#menu {
  width: 75%; /* En tout cas, pas 100 % */
  margin-right: auto;
  margin-left: auto;
}
/* Sous IE, ça marche à partir de la version 6. Pour IE 5.5 et versions antérieures, text-align: center jouera le jeu */

- soit tu recours au positionnement absolu, en définissant des marges latérales négatives dont la largeur correspond à la moitié de la largeur du bloc, positionné à 50% du plus proche ancêtre positionné à partir de la gauche.

Code:

/* On positionne le bloc parent du bloc conteneur */
#page {
  position: relative;
}
#menu {
  width: 75%;
  margin-right: -37.5%;
  margin-left: -37.5%;
  position: absolute;
  left: 50%;
}

Je te conseille la première méthode, plus simple à mettre en œuvre.[/code]

Nerva · 29 Novembre 2007

Alors j'ai essayé la première méthode avec ceci :

Code:

/* La zone gauche de la page de menu */
#menu
{
float: left;
width: 20%;
margin-right: auto;
margin-left: auto; 
list-style: none ;
line-height: 0.9em ;
}

/* La zone droite de la page de menu */
#editorial
{
float: left;
width: 80%;
margin-right: auto;
margin-left: auto; 
text-align: justify;
}

20 % et 80 % correspondent à peu près à la taille que j'avais en pixels.

Sous FF : les deux blocs sont bien centrés dans la page, ils sont côte à côte, mais le menu de gauche est collé à gauche au ras de la page et celui de droite à droite. De plus, il n'y a pas d'espace entre les deux blocs.

Sous IE : les deux blocs sont alignés l'un au dessous de l'autre et l'alignement de gauche est au ras de la page alors que je veux un retrait intérieur de X pixels.

Donc, il doit manquer quelque chose.

Note : sans le "float: left", avec FF comme IE, les blocs ne sont pas juxtaposés mais l'un en dessous de l'autre, comme expliqué dans le premier lien que j'ai mis.

Victor BRITO · 29 Novembre 2007

Et si tu enlèves float: left aux deux blocs, qu'est-ce que ça donne ?

Soit dit en passant, margin: auto n'aura aucun effet en cas de positionnement flottant. :wink: Pour donner de la marge entre deux blocs flottant côte à côte, il faut donner une valeur fixe.

Autrement dit :

Code:

<div id="conteneur">
  <div>Bloc 1</div>
  <div>Bloc 2</div>
</div>

avec la feuille de style suivante :

Code:

#conteneur div {
  color: white;
  background: blue;
  width: 40%;
  margin: 0 5%;
  float: left;
}

tu auras deux blocs flottant côte à côte et centrés.

Nerva · 30 Novembre 2007

Alors je suis parvenu à un résultat probant, aussi bien avec FF et IE en encapsulant les parties gauche et droite dans un autre container.

Code:

/* La zone de menu */
#menu
{
margin-left: 25px;
width: 630px;
}

/* La zone gauche de la page (le menu) */
#menu_left
{
float: left;
width: 145px;
list-style: none;
line-height: 0.95em ;
}

/* La zone droite de la page (l'éditorial) */
#menu_right
{
float: right;
width: 475px;
text-align: justify;
}

Code:

<div id="menu">
	<div id="menu_left">
		<li><a href="page01.php">Lien 1</a></li>
		<li><a href="page02.php">Lien 2</a></li>
		<li><a href="page03.php">Lien 3</a></li>
		<li><a href="page04.php">Lien 4</a></li>
		<li><a href="page05.php">Lien 5</a></li>
	</div>
	<div id="menu_right">
		<div class="text_standard">Bla bla bla, texte de l'&eacute;ditorial</div>
	</div>
</div>

J'ai trouvé cette méthode sur Alsacréations. Qu'en pensez-vous ?

Nerva · 4 Décembre 2007

J'aurais encore besoin de vos lumières...

Plutôt que de créer un tableau pour la page de menu des galeries de photos, j'ai également utilisé le CSS pour les formater. J'ai procédé comme suit :

CSS

Code:

#menu_gallery
{
margin-left: 25px;
width: 730px;
}

#menu_gallery_left
{
float: left;
width: 145px;
}

#menu_gallery_right
{
float: right;
width: 570px;
}

HTML

Code:

<div id="menu_gallery">
	<div id="menu_gallery_left">
		<div><a href="photos/test.jpg"><img src="photos/test_th.jpg" width="130" height="130" class="thumb"></a></div>
	</div>
	<div id="menu_gallery_right">
		<div class="text_title">Nom de la galerie</div>
		<div class="text_date">Date de mise en ligne de la galerie</div>
		<div class="text_standard">Description de la galerie</div>
	</div>
</div>

La mise en forme est presque nickel, presque parce que dans la partie droite (les descriptifs), les textes sont alignés verticalement en haut, à ras de la vignette de la partie gauche. Or, pour plus d'esthétisme, je voudrais qu'ils soient centrés mais je ne sais pas comment définir cette fonction dans le CSS...

Victor BRITO · 6 Décembre 2007

Il y a la propriété vertical-align ; mais, elle ne sert qu'à aligner verticalement un contenu ou élément en ligne par rapport à un autre (alignement vertical d'une image ou d'un champ de formulaire par rapport au texte, par exemple), ainsi que le contenu d'une cellule de tableau.

Tu peux essayer la règle suivante :

Code:

#menu_gallery_right {
  display: table-cell;
  vertical-align: middle;
}

Toutefois, la propriété display n'est pas implémentée par certains navigateurs (notamment Internet Explorer) avec une valeur commençant par table.

Heureusement, il y a une autre méthode de centrage vertical : la propriété line-height. Dans ce cas, il faut définir une hauteur au bloc, qui coïncidera avec la hauteur de ligne. Encore faut-il que le contenu textuel tienne en une seule ligne pour que le résultat soit agréable esthétiquement.

Code:

#menu_gallery_right div {
  height: 1em;
  line-height: 1em;
}

rog · 6 Décembre 2007

c'est quand même à se demander si la migration d'une table avec quelques colonnes vers tes divs est aussi judicieuse qu'elle parait

rog

Nerva · 6 Décembre 2007

Victor
Non, rien ne fonctionne ; le formatage avec les em déforme trop la mise en page...

Victor BRITO · 7 Décembre 2007

Nerva a dit:
Victor
Non, rien ne fonctionne ; le formatage avec les em déforme trop la mise en page...

Et avec une valeur plus petite comme 0.5em ?

rog a dit:
c'est quand même à se demander si la migration d'une table avec quelques colonnes vers tes divs est aussi judicieuse qu'elle parait

Elle est judicieuse, rassure-toi. Mais, quand on n'y est pas habitué, c'est un peu dur. Mais, dès qu'on s'y fait, tout coule de source. :wink: