Feuille de style et tableaux

le Mer Nov 28, 2007 14:13

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: Tout sélectionner: <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 ?

le Mer Nov 28, 2007 14:16

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

le Mer Nov 28, 2007 14:45

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: Tout sélectionner: /*----------------------------------------------------------------------*/ /* 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: Tout sélectionner: <!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: Tout sélectionner: <!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: Tout sélectionner: <!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ère sé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.

le Mer Nov 28, 2007 14:47

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

le Mer Nov 28, 2007 18:35

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: Tout sélectionner: #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: Tout sélectionner: /* 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]

le Jeu Nov 29, 2007 14:02

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

Code: Tout sélectionner: /* 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.

le Jeu Nov 29, 2007 18:20

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: Tout sélectionner: <div id="conteneur"> <div>Bloc 1</div> <div>Bloc 2</div> </div>

avec la feuille de style suivante :

Code: Tout sélectionner: #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.

le Ven Nov 30, 2007 14:25

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: Tout sélectionner: /* 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: Tout sélectionner: <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'éditorial</div> </div> </div>

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

le Mar Déc 04, 2007 17:23

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: Tout sélectionner: #menu_gallery { margin-left: 25px; width: 730px; } #menu_gallery_left { float: left; width: 145px; } #menu_gallery_right { float: right; width: 570px; }

HTML

Code: Tout sélectionner: <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...

le Jeu Déc 06, 2007 17:02

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: Tout sélectionner: #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: Tout sélectionner: #menu_gallery_right div { height: 1em; line-height: 1em; }

le Jeu Déc 06, 2007 17:24

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

le Jeu Déc 06, 2007 18:50

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

le Ven Déc 07, 2007 17:10

Nerva a écrit: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 écrit: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:

Feuille de style et tableaux

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne