Problème, des vides dans mon template

[VD]

Bonjour !

Je viens de mettre à jour ma galerie : http://www.vincentdutrait.com/galerie/index.php
J'ai fait un menu spécial que j'appelle via la fonction include, quelque chose du genre : <div id="navbox"><?php include dirname(__FILE__).'/include/menu_site.html'; ?></div> car je ne suis pas arrivé à mon ter ce genre de menu directement dans le template de la galerie.
Mais le hic, c'est que, avec ou sans ma navigation (je précise car je pense que le souci ne vient pas de là), il y a un espace vide tout autour de la page... Quelques dizaines de pixels. Et là ils s'intercalent sous ma navigation ou en bidouillant avec la mise en page, cette marge apparaît tout en haut de la page, au-dessus de ma bannière.
Sauriez-vous comment supprimer cette sorte de marge vide ? Une idée ?
Je précise que le souci est le même sous IE et Firefox (quoique la marge est un peu moins conséquente sous celui-ci).
Ci dessous mon style.css et mon template. Et si vous avez besoin de plus d'infos...
Merci !
@+

Code Select Expand

/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2006 Coppermine Dev Team
  v1.1 originally written by Gregory DEMAR

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  ********************************************
  Coppermine version: 1.4.10
  $Source$
  $Revision: 3275 $
  $Author: gaugau $
  $Date: 2006-09-03 12:10:47 +0200 (So, 03 Sep 2006) $
**********************************************/

/* Colors used in this style sheet:
Hex 000000 = RBG   0,   0,   0 = black
Hex 005D8C = RBG   0,  93, 140 = dark blue
Hex 333333 = RBG  51,  51,  51 = black
Hex 394048 = RBG  57,  64,  72 = black
Hex 394049 = RBG  57,  64,  73 = black
Hex 404750 = RBG  64,  71,  80 = dark grey
Hex 414852 = RBG  65,  72,  82 = dark grey
Hex 444444 = RBG  68,  68,  68 = dark grey
Hex 474F5A = RBG  71,  79,  90 = dark grey
Hex 49525D = RBG  73,   82, 93 = dark grey
Hex 4F5864 = RBG  79,  88, 100 = dark grey
Hex 4F5964 = RBG  79,  89, 100 = dark grey
Hex 515B67 = RBG  81,  91, 103 = dark grey
Hex 555555 = RBG  85,  85,  85 = medium grey
Hex 56606D = RBG  86,  96, 109 = medium grey
Hex 5B5B5B = RBG  91,  91,  91 = medium grey
Hex 5D6674 = RBG  93, 102, 116 = medium grey
Hex 5D6876 = RBG  93, 104, 118 = medium grey
Hex 616C7A = RBG  97, 108, 122 = medium grey
Hex 616D7B = RBG  97, 108, 123 = medium grey
Hex 6A7786 = RBG 106, 119, 134 = medium grey
Hex 777777 = RBG 119, 119, 119 = medium grey
Hex 8090A3 = RBG 128, 144, 163 = steel grey
Hex 949494 = RBG 148, 148, 148 = medium grey
Hex AEAEAE = RBG 174, 174, 174 = light grey
Hex BDBEBD = RBG 189, 190, 189 = light grey
Hex C7C7C7 = RBG 199, 199, 199 = light grey
Hex CCCCCC = RBG 204, 204, 204 = light grey
Hex DFDFDF = RBG 223, 223, 223 = light grey
Hex EAEAEA = RBG 234, 234, 234 = dark white
Hex EFEFEF = RBG 239, 239, 239 = dark white
Hex F2F8FF = RBG 242, 248, 255 = dark white
Hex FFFFFF = RBG 255, 255, 255 = white
*/

#bordbas {
background:url(http://www.vincentdutrait.com/blog/wp-content/themes/themevdnew/img/fondcorpsbottoma.png);
text-align:left;
width:1024px;
height:107px;
margin-right:auto;
margin-bottom:0;
margin-top:0;
padding:0;
margin-left:auto;}

body { font-family : Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color : #a6a6a6; background:transparent url(http://www.vincentdutrait.com/blog/wp-content/themes/themevdnew/img/fondpoissona.gif) repeat-x fixed 0 0;        }
}


table {

        font-size: 10px;
}

h1{
        font-size: 11px;
        font-family: Verdana, Verdana, Arial, Helvetica, sans-serif;
        text-decoration: none;
        color : #a6a6a6;
        margin: 2px;
        font-style : normal;
}

h2 {

        font-family: Verdana, Helvetica, sans-serif;
        padding-left : 18px;
        font-size: 10px;
        margin: 0;
        color : #a6a6a6;
}

h3 { color: #a6a6a6; font-weight: normal; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; margin: 2px; }

p {
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 100%;
        margin: 2px 0px;
}

ul {
        margin-left: 5px;
        padding: 0px;
}

li {
        margin-left: 10px;
        margin-top: 4px;
        margin-bottom: 4px;
        padding: 0px;
        list-style-position: outside;
        list-style-type: disc;
}

.textinput {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 100%;
        border: solid 1px;
        padding-right: 3px;
        padding-left: 3px;
        background-color : #fff;
        color:#000;
}

.listbox {
        font-family: Verdana, Arial, Arial, Helvetica, sans-serif;
        background-color : #fff;
        font-size: 100%;
        border: solid 1px #5d6876;
        vertical-align : middle;
        color:#a6a6a6;
}

.button {
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 100%;
        border: solid 1px #a6a6a6;
        background-color : #ddd;
        color:#8caabc;
}

.comment_button {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 100%;
        border: solid 1px #a6a6a6;
        background-color : #ddd;
        color:#8caabc;
        padding-left: 3px;
        padding-right: 3px;
}

.radio {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 100%;
        vertical-align : middle;
}

.checkbox {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 100%;
        vertical-align : middle;
}

a {
        color: #a6a6a6;
        text-decoration: none;
}

a:hover {
        color: #e7a62f;
        text-decoration: none;
}

.bblink a {
        color: #a6a6a6;
        text-decoration: none;
}

.bblink a:hover {
        color: #e7a62f;
        text-decoration: none;
}

.maintable { color: #a6a6a6; background-color: #fff; margin-top: 1px; margin-bottom: 1px; }

.tableh1 { background : #fff ; color : #8caabc; font-size: medium; font-family: Georgia, "Times New Roman", Times, serif; padding: 3px 10px; }

.tableh1_compact { background : #fff ; color : #a6a6a6; padding: 2px 5px; }

.tableh2 { background: #fff ; color : #a6a6a6; padding: 3px 10px; }

.tableh2_compact { background: #fff ; color : #a6a6a6; padding: 2px 5px; }

.tableb { background: #fff ;
  ;padding: 3px 10px; }

.tableb_compact { background: #fff;
  ;padding: 2px 5px; }

.tablef { background: #fff;
  ;padding: 10px; }

.catrow_noalb { background: #fff ; color : #a6a6a6; padding: 3px 10px; }

.catrow { color: #a6a6a6; background: #fff ;
  ;padding: 3px 10px; }

.album_stat {
        font-size : 85%;
        margin: 5px 0px;
}

.thumb_filename { color: #a6a6a6; font-size: 100%; display: block; }

.thumb_title {
        font-weight : bold;
        font-size: 100%;
        padding: 2px;
        display : block;
}

.thumb_caption { font-size: 85%; padding: 1px; display : block; }

.thumb_caption a {
        text-decoration: underline;
        color: #AEAEAE;
}

.thumb_num_comments {
        font-weight: normal;
        font-size: 85%;
        padding: 2px;
        font-style : normal;
        display : block;
}

.user_thumb_infobox {
        margin-top: 1px;
        margin-bottom: 1px;
}

.user_thumb_infobox th {
        font-weight : bold;
        font-size: 100%;
        margin-top: 1px;
        margin-bottom: 1px;
        text-align : center;
}

.user_thumb_infobox td {
        font-size: 90%;
        margin-top: 1px;
        margin-bottom: 1px;
        text-align : center;
}

.user_thumb_infobox a {
        text-decoration: none;
        color: #AEAEAE;
}

.user_thumb_infobox a:hover {
        color: #CCCCCC;
        text-decoration: underline;
}

.sortorder_cell {
        background : #fff ;
        color : #a6a6a6;
        padding: 2px;
        margin: 0;
}

.sortorder_options { color: #a6a6a6; font-family: Verdana, Arial, Helvetica, sans-serif; padding: 0; margin: 0; font-weight: normal; font-size: 85%; background: #fff; white-space: nowrap; }

.navmenu {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #a6a6a6;
        font-size: 100%;
        font-weight: bold;
        background : #fff ;
        border-style: none;
}

.navmenu img {
        margin-top: 1px;
        margin-right: 5px;
        margin-bottom: 1px;
        margin-left: 5px;
}

.navmenu a {
        position: relative;
        display: block;
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
        text-decoration: none;
        color: #AEAEAE;
}

.navmenu a:hover {
        background : #fff ;
        text-decoration: none;
        color:         #e7a62f;
}

.admin_menu_thumb {
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 85%;
        border: solid 1px;
        background-color : #fff;
        color:#a6a6a6;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 0;
        width: 85px;
}

.admin_menu_thumb a {
        color: #CCCCCC;
        text-decoration: none;
        display: block;
        position: relative;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 10px;
        padding-right: 10px;
}


.admin_menu_thumb a:hover {
        color: #CCCCCC;
        text-decoration: underline;
}

.admin_menu {
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 85%;
        border: solid 1px;
        background-color : #fff;
        color:#a6a6a6;
        margin-top: 0;
        margin-bottom: 0;
        text-align: center;
}

.admin_menu a {
        color: #AEAEAE;
        text-decoration: none;
        display: block;
        position: relative;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 2px;
        padding-right: 2px;
}

.admin_menu a:hover {
        color: #CCCCCC;
        text-decoration: underline;
}

td #admin_menu_anim {
        background-image : url(images/button_bg_anim.gif);
}

.comment_date{
        color : #949494;
        font-size : 90%;
        vertical-align : middle;
}

.image { margin: 2px; border: solid 1px #696969; }

.imageborder { background-color: #fff; margin-top: 30px; margin-bottom: 30px; padding: 20px; border: solid 5px #696969; }

.display_media { background: #fff ;
  ;padding: 3px 10px; }

.thumbnails { background: #fff ; padding: 5px; }

.footer {margin-bottom:100px;
        font-size: 9px;
        color: #a6a6a6;
}

.footer a {
        text-decoration: none;
        color: #a6a6a6;
}

.footer a:hover {
        color: #e7a62f;
        text-decoration: none;
}

.statlink {
        color: #a6a6a6;
}

.statlink a {
        text-decoration: none;
        color: #a6a6a6;
}

.statlink a:hover {
        color: #e7a62f;
        text-decoration: none;
}

.alblink a { color: #e7a62f; font-size: medium; font-family: Georgia, "Times New Roman", Times, serif; text-decoration: none; }

.alblink a:hover { color: #e7a62f; font-size: medium; font-family: Georgia, "Times New Roman", Times, serif; text-decoration: underline; }

.catlink { color: #e7a62f; font-size: medium; font-family: Georgia, "Times New Roman", Times, serif; display: block; margin-bottom: 2px; }

.catlink a {
        text-decoration: none;
        color: #e7a62f;
}

.catlink a:hover {
        color: #e7a62f;
        text-decoration: underline;
}

.topmenu { color: #8caabc; font-size : 100%; margin-top:5px; margin-right:5px; padding:0 80px 0 80px;}

.topmenu a {
        color : #8caabc;
        text-decoration : none;
}

.topmenu a:hover  {
        color : #e7a62f;
        text-decoration : none;
}

.topmenu td  {
        white-space: nowrap;
        font-weight : bold;
}


.img_caption_table {
        border: none;
        background-color: #fff;
        width : 100%;
        margin : 0;
}

.img_caption_table th { background: #fff ; font-size : 100%; color : #a6a6a6; padding: 4px 10px; border-top : 1px solid #394049; }

.img_caption_table td { background: #fff ; padding: 6px 10px; border-top : 1px solid #394049; white-space: normal; }

.gallery
{background:url(http://www.vincentdutrait.com/blog/wp-content/themes/themevdnew/img/bordsfondus.png) repeat-y scroll center top !important;

}

.gal_name
{
        color:#4C5157;
        white-space:nowrap;
        font-size:20px;
}

.gal_description
{
        color:#4C5157;
        white-space:nowrap;
        font-size:10px;
}

.debug_text {
        border: #BDBEBD;
        background-color: #EFEFEF;
        width : 100%;
        margin : 0px;
}

.clickable_option {
        border-bottom : 1px dotted #444444;
        cursor : default;
}

.listbox_lang {
        color: #fff;
        background-color: #ddd;
        border: solid 1px #a6a6a6;
        font-size: 90%;
        font-family: Arial, Helvetica, sans-serif;
        vertical-align : middle;
}

#vanity a {
        display:block;
        width:57px;
        height:20px;
        margin: 3px 20px;
}
#vanity img {border:0}
#v_php {float:left;background-image:url(../../images/powered-php.gif);}
#v_php:hover {background-image:url(../../images/h_powered-php.gif);}
#v_mysql {float:left;background-image:url(../../images/powered-mysql.gif);}
#v_mysql:hover  {background-image:url(../../images/h_powered-mysql.gif);}
#v_xhtml {float:right;background-image:url(../../images/valid-xhtml10.gif);}
#v_xhtml:hover {background-image:url(../../images/h_valid-xhtml10.gif);}
#v_css {float:right;background-image:url(../../images/valid-css.gif);}
#v_css:hover{background-image:url(../../images/h_valid-css.gif);}

.bottom-left {}
.bottom-middle {  }
.bottom-right {}
.far-left {  }
.far-right {}
.hardwired {}
.left-banner { height:46px; text-align:right; padding-right:16px; padding-top:16px; }
.middle-left {}
.middle-right {}
.right-banner {
   
}
.top-left {}
.top-right {  }
#header{ color: #fff; background-image: url(include/images/bannieremummy04_01.png); width: 1024px; text-align: left; height: 66px; margin-right: auto; margin-left: auto; }
#navbox{ color: #fff; width: 1024px; height: 38px; margin-right: auto; margin-left: auto; margin-bottom:0px; padding-bottom:0px; }
#borddech{ color: #fff; background-image: url(include/images/bannieremummy01_13.png); width: 1024px; text-align: left; height: 46px; margin-right: auto; margin-left: auto; }

Code Select Expand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{LANG_DIR}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset={CHARSET}" />
<meta http-equiv="Pragma" content="no-cache" />
<title>{TITLE}</title>
<link rel="stylesheet" type="text/css" href="themes/hardwired/style.css" />
{META}
<script type="text/javascript" src="scripts.js" ></script>
</head>
<body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<div align="center">
<table width="1024" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td class="gallery">
<div align="right" class="topmenu">{SYS_MENU}</div>
<div align="left" class="topmenu">{SUB_MENU}</div><br />
<div align="left">
{THEME_SELECT_LIST} {LANGUAGE_SELECT_LIST}<br />
{ADMIN_MENU} {GALLERY}</div>
</td>
</tr>
<tr valign="baseline">
<td class="bottom-middle"></td>
</tr><br />
</table>
</div>
<div id="bordbas"></div>
</body>
</html>

[François Keller]

j'ai une page blache en allant sur le lien qui est donné 

[VD]

Ah... Et comme ça : http://www.vincentdutrait.com/galerie/index.php?theme=hardwired

[François Keller]

comme ça c'est bon, mais ce n'est pas normal que le lien initial ne fonctionne pas. il semble que vous ayez enlevé le theme classic du répertoire theme. il faut le laisser (ça permets entre autre de visualiser la galerie si vous avez des problèmes de theme).
par contre, pas de problèmes avec firefox (pas de bande blanches)

[VD]

Ok je vais remettre le classic, merci. Mais les bandes ne sont pas blanches mais "vides" comme sur la capture ci-jointe (cerclée de rouge) :

(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fimg132.imageshack.us%2Fimg132%2F7884%2Fsanstitre1gz1.th.jpg&hash=de7abe5ec3e3c10ab26c368703588f46fd29c5c1)

Chez moi c'est comme ça sur IE & Firefox... Normalement ça devrait être collé...

[François Keller]

ok, je comprends mieux.
attachez l'ensemble des fichiers de votre theme à votre prochain post (dans un fichier .zip)

[VD]

Voilà le zip et merci beaucoup pour le coup de main...
Je suis loin d'être un as du html & co et je fais avec l'ami Google, à tâtons, en bricolant et parfois - souvent même - ça coince et je suis bien incapable de voir d'où ça vient.
@+

[François Keller]

regardes le theme attaché
j'ai modifié un peu la manière d'intégrer le menu en mettant la css dans le fichier style.css et en déplacant la partie html dans le fichier theme.php
c'est pas encore top, mais c'est mieux

[VD]

D'ac, merci mais c'est curieux car il n'affiche pas les images de la navigation... Il me semble que j'avais eu ce souci et c'était un peu pour ça que j'étais passé par un "include"...

[VD]

Oups, mea culpa, un peu fatigué... C'est parfait !!! Ca marche impec comme ça ! Milles mercis pour le coup de main ! Ouf, je vais pouvoir dormir tranquille 

[VD]

C'est ok, j'ai bien réglé (-13px pour bien tout caler) et c'est génial !
J'ai encore un ptit détail qui me chiffonne et là pour le coup c'est uniquement sur IE. Ca se passe en bas de page et il y a une petite ligne vide entre le corps de la galerie et l'image qui ferme la page :

(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fimg81.imageshack.us%2Fimg81%2F7071%2Fsanstitre1pj2.th.jpg&hash=10e3fa2a7cf2ae7c8e4fd78aa8387811584830e9)

Et là, même topo, j'ai beau tout trituré dans tous les sens, je n'arrive pas à faire que ça colle bien et je ne vois pas où bidouiller...
Une idée ?
Encore merci pour l'aide apportée 

[VD]

Et encore une petite question... Quand on regarde les images dans le détail comme ici (http://www.vincentdutrait.com/galerie/displayimage.php?album=random&cat=0&pos=-573), j'aimerais bien passer la navigation (la ligne navmenu en CSS avec les flèches pour images suivantes et précédentes, "photo*/**, etc) sous l'image. Ou plutôt entre l'image affichée et les vignettes. Ca se passe où ? J'ai jeté un oeil au theme.php mais je ne crois pas être sur la bonne piste, si ?

[François Keller]

J'ai jeté un oeil au theme.php mais je ne crois pas être sur la bonne piste, si ?

si c'est la bonne piste, mais il faut copier/coller la portion de code qui affiche les images intermédiaires depuis le fichier theme.php du theme sample dans ton fichier theme.php et modifier...

[VD]

Hello, j'ai compris la manip mais tu es sûr que c'est à cet endroit-là ?
J'ai bien trouvé la partie pour afficher les images intermédiaires mais je ne vois où se situe la navigation dans ce template :

Code Select Expand

// HTML template for intermediate image display
$template_display_media = <<<EOT
        <tr>
                <td align="center" class="display_media" nowrap="nowrap">
                        <table cellspacing="2" cellpadding="0" class="imageborder">
                                <tr>
                                        <td align="center">
                                                {IMAGE}

                                        </td>
                                </tr>
                        </table>
                </td></tr>
                <tr><td>
                                                <table width="100%" cellspacing="2" cellpadding="0" class="tableb">
                                <tr>
                                        <td align="center">

                                                {ADMIN_MENU}
                                        </td>
                                </tr>
                        </table>





<!-- BEGIN img_desc -->
                        <table cellpadding="0" cellspacing="0" class="tableb" width="100%">
<!-- BEGIN title -->
                                <tr>
                                        <td class="tableb"><center><b>
                                                {TITLE}
                                        </b></center></td>
                                </tr>
<!-- END title -->
<!-- BEGIN caption -->
                                <tr>
                                        <td class="tableb"><center>
                                                {CAPTION}
                                        </center></td>
                                </tr>
<!-- END caption -->
                        </table>
<!-- END img_desc -->
                </td>
        </tr>

EOT;



[François Keller]

oui, sur le principe c'est ça, mais j'ai répondu vite. il faut chercher comment la barre est affichée (il y a aussi un template pour ça) et trouver ou se fait l'appel...
si je trouve un moment je regardes ça

[VD]

D'ac merci, j'ai pourtant chercher du "navmenu" mais ça ne me dit pas grand chose...