Archives FluxBB.fr

Les archives de FluxBB.fr

Vous n'êtes pas identifié(e).

Pages : 1

#1 26-08-2009 02:05:18

stci
Membre

Petite soucis de mise en page

Bonjour,

Je cherche depuis 3 jours et j'ai fait de nombreuses requêtes à partir de la boîte de recherche mais je n'ai pas trouvé ce dont j'ai besoin.

J'ai habillé le forum avec le design de mon site à l'aide du fichier main.tpl.

J'ai donc un tableau pour toute la page et des tableaux imbriqués sous l'image d'entête. Le soucis c'est que j'ai un petit espace qui est apparu juste sous l'image d'entête. Je n'arrive pas à trouver mon erreur.

Je sais que c'est arrivé à d'autres personnes et qu'ils ont finalement trouvé d'où provenait le problème mais dans mon cas, j'ai tout revérifié des tonnes de fois sans succès.

Quelqu'un aurait-il la gentillesse de m'aider svp? Le problème a été résolu sur mon ordinateur dans IE8 avec la fonction "Affichage de compatibilité" mais le problème persiste pour les visiteurs et les utilisateurs de Firefox.

Voici ma page main.tpl

[c]<!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" dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<pun_head>
</head>
<body background="../img/fond_page.jpg" bgcolor="#050000" text="#000000" link="#000000" vlink="#800080" alink="#ff0000" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
<table width="995" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td><map name="entete">
        <area shape="rect" coords="148,154,216,180" href="../index.php" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="259,155,341,182" href="../qui_suis_je.php" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="378,155,459,183" href="../c_est_quoi.php" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="497,155,569,182" href="../amies.php" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="615,154,685,181" href="http://www.stci.qc.ca/passionnailart/forum" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="730,153,805,182" href="http://www.stci.qc.ca/passionnailart/livredor?rub=voir" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="846,153,924,181" href="../tutoriels.php" target="_top" onfocus="this.blur()"></map>
        <img src="../img/entete.jpg" border="0" width="995" height="206" alt="" usemap="#entete"></td>
    </tr>
    <tr>
        <td><table width="995" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="197" background="../img/background_petit.jpg"><img src="../img/haut_menu.jpg" border="0" width="197" height="25" alt=""></td>
                    <td width="798" background="../img/background.jpg"> </td>
                </tr>
                <tr>
                    <td background="../img/background_petit.jpg" valign="top"><img src="../img/menu.jpg" border="0" width="197" height="539" alt=""></td>
                    <td background="../img/background.jpg" valign="top"><table border=0 cellpadding=0 cellspacing=0>
                                                                            <tr>
                                                                                <td valign="top"><img src="../img/titre_forums.gif" border="0" width="182" height="58" alt=""></td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td> </td>
                                                                            </tr>   
                                                                            <tr>
                                                                                <td width="100%" valign="top">
<div id="punwrap">
    <div id="pun<pun_page>" class="pun">
        <div id="brdheader" class="block">   
            <div class="box">           
                <pun_navlinks>       
                <pun_status>
            </div>
        </div>
                <pun_announcement>
                <pun_main>
                <pun_footer>
    </div>
</div>
</td>                            <td width="30" valign="top"><img src="../img/spacer2.gif" border="0" width="30" height="1" alt=""></td>
                        </tr>
                    </table></td>
                </tr>
            </table></td>
    </tr>
    <tr>
        <td width="995" height="65" background="../img/bas.jpg"><div style="text-align: center"><font face="Verdana" size=-2 color="#FFFFFF">Copyright STCI (Sylvie Taillon Conception Internet) 2009-2010</div>
        <p align="center">Toute reproduction des images ou textes de ce site interdite sans autorisation</p></font></td>
    </tr>
</table>

</body>
</html>[/c]

Dernière modification par stci (27-08-2009 03:38:23)

Hors ligne

#2 26-08-2009 02:12:04

sudlyceen
Membre

Re : Petite soucis de mise en page

deja met ton code entre balise 

ton code

Et donne moi le lien de ton forum stp

[img]http://droopy69.free.fr/Image%20site/smiley/smiley%20porte/vortex01.gif[/img]

Hors ligne

#3 26-08-2009 15:57:01

stci
Membre

Re : Petite soucis de mise en page

<!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" dir="<pun_content_direction>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<pun_char_encoding>" />
<pun_head>
</head>
<body background="../img/fond_page.jpg" bgcolor="#050000" text="#000000" link="#000000" vlink="#800080" alink="#ff0000" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0"> 
<table width="995" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
        <td><map name="entete">
        <area shape="rect" coords="148,154,216,180" href="../index.php" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="259,155,341,182" href="../qui_suis_je.php" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="378,155,459,183" href="../c_est_quoi.php" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="497,155,569,182" href="../amies.php" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="615,154,685,181" href="http://www.stci.qc.ca/passionnailart/forum" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="730,153,805,182" href="http://www.stci.qc.ca/passionnailart/livredor?rub=voir" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="846,153,924,181" href="../tutoriels.php" target="_top" onfocus="this.blur()"></map>
        <img src="../img/entete.jpg" border="0" width="995" height="206" alt="" usemap="#entete"></td>
    </tr>
    <tr>
        <td><table width="995" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td width="197" background="../img/background_petit.jpg"><img src="../img/haut_menu.jpg" border="0" width="197" height="25" alt=""></td> 
                    <td width="798" background="../img/background.jpg"> </td>
                </tr>
                <tr>
                    <td background="../img/background_petit.jpg" valign="top"><img src="../img/menu.jpg" border="0" width="197" height="539" alt=""></td>
                    <td background="../img/background.jpg" valign="top"><table border=0 cellpadding=0 cellspacing=0>
                                                                            <tr>
                                                                                <td valign="top"><img src="../img/titre_forums.gif" border="0" width="182" height="58" alt=""></td>
                                                                            </tr> 
                                                                            <tr>
                                                                                <td> </td>
                                                                            </tr>    
                                                                            <tr>
                                                                                <td width="100%" valign="top">
<div id="punwrap">
    <div id="pun<pun_page>" class="pun">
        <div id="brdheader" class="block">    
            <div class="box">            
                <pun_navlinks>        
                <pun_status>
            </div>
        </div>
                <pun_announcement>
                <pun_main>
                <pun_footer>
    </div>
</div>
</td>                            <td width="30" valign="top"><img src="../img/spacer2.gif" border="0" width="30" height="1" alt=""></td>
                        </tr>
                    </table></td>
                </tr>
            </table></td>
    </tr>
    <tr>
        <td width="995" height="65" background="../img/bas.jpg"><div style="text-align: center"><font face="Verdana" size=-2 color="#FFFFFF">Copyright STCI (Sylvie Taillon Conception Internet) 2009-2010</div>
        <p align="center">Toute reproduction des images ou textes de ce site interdite sans autorisation</p></font></td>
    </tr>
</table>

</body>
</html>

L'adresse temporaire de mon site est http://www.stci.qc.ca/passionnailart

Hors ligne

#4 26-08-2009 16:37:08

Swink
Membre

Re : Petite soucis de mise en page

Le problème à mon avis c'est que tu utilise un tableau pour pour la partie gauche avec l'image menu_haut à l'intérieur du tableau général à mon avis l'un dans l'autre doit causer un soucis de décalage.

Ce deuxième tableau est là par défault ou c'est toi qui l'a rajouter ?

Sinon faudrait s'amuser avec un peut de css et tout se règlerais facilement je pense

Enfin moi ce que j'en dit ce n'est que mon avis perso et quand ont est pas dans le coeur même du problème c'est pas pareil

Dit nous ce qu'il en est wink

Hors ligne

#5 26-08-2009 20:24:19

stci
Membre

Re : Petite soucis de mise en page

Hello!

Merci pour ta réponse.

En fait, j'ai toujours fait mes sites avec des tableaux imbriqués et je n'ai jamais eu ce genre de problème. Normalement en ajoutant cellspacing=0 et cellpadding=0, les tableaux se collent les uns aux autres sans problème.

Je sais que les tailles de mes images sont correctes, mes tableaux aussi et je ne vois pas d'erreur dans le fichier mail.tpl. Y aurait-il un problème à partir du fichier CSS du thème Oxygen qui pourrait causer cette petite espace sous mon image d'entête?

Toutes les autres pages du site sont faites de la même manière et je n'ai aucun soucis.

Merci à l'avance de votre aide.

Hors ligne

#6 26-08-2009 21:12:07

Swink
Membre

Re : Petite soucis de mise en page

Re

Je viens de voir un truc sous IE ton forums est parfaitement intégrer au centre de ta page index.php du forum mais sous Firefox ton forum dépasse un peut sur la droite.

Essaye pour voir de réduire un peut la largeur de ton forum dans ton css pour que dans firefox il soit bien dedans on ne sait jamais suffirait que ce soit cela.

Dit moi quant tu l'a fait que je vérifie aussi
qui ne tente rien à rien happy

EDIT :  Autant pour moi je sais pas si c'était ton forum ou mon navigateur mais ton forum sous FF c'est bien replacer mais bon donc ce n'est pas ça si j'ai une autre idée je te tiens au courant


EDIT 2 : Sinon je viens de remarquer avec Web Develloper que l'espace vide fait partie intégrante de du bloc ou se trouve ton image. Donc c'est un bon point de départ pour la solution

EDIT  : Après avoir farfouiller un peut j'ai l'impression que ton soucis viens de bout de code là

        <td><map name="entete">
        <area shape="rect" coords="148,154,216,180" href="../index.php" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="259,155,341,182" href="../qui_suis_je.php" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="378,155,459,183" href="../c_est_quoi.php" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="497,155,569,182" href="../amies.php" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="615,154,685,181" href="http://www.stci.qc.ca/passionnailart/forum" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="730,153,805,182" href="http://www.stci.qc.ca/passionnailart/livredor?rub=voir" target="_top" onfocus="this.blur()">
          <area shape="rect" coords="846,153,924,181" href="../tutoriels.php" target="_top" onfocus="this.blur()"></map>
        <img src="../img/entete.jpg" border="0" width="995" height="206" alt="" usemap="#entete"></td>

Essayer de mettre ton 

<img src="../img/entete.jpg" border="0" width="995" height="206" alt="" usemap="#entete">

juste après ça

<td><map name="entete">

Ou sinon de l'en sortir et de gérer sa position entièrement en CSS ce qui au final marchera mais faut y mettre les mains voilà bon j'arrête les edit moi lol dit moi dès que tu as lu les message ce que tout ça donne

Bye

Dernière modification par Swink (26-08-2009 21:31:46)

Hors ligne

#7 27-08-2009 03:26:47

stci
Membre

Re : Petite soucis de mise en page

Merci de tout coeur Swink de te donner tant de mal pour moi.

Malgré tous les bons indices que tu m'as donné, mon problème perdure.

J'ai donc voulu procéder par élimination afin de m'assurer que le problème ne provenait pas du forum. Et bien en fait, j'ai simplement reconstruit ma page en html sans aucune des balises de pun et je l'ai placé dans le répertoire include/template et j'ai été surprise de voir que le problème était présent quand même.

Là je ne sais plus... je suis complètement perdue... et sincèrement, un peu découragée après tant d'heures perdues à rechercher une banale erreur de ma part.

Hors ligne

#8 27-08-2009 20:23:17

stci
Membre

Re : Petite soucis de mise en page

Svp... quelqu'un pourrait-il me dire quels fichiers sont inclus quand j'appelle le forum svp? Je pourrais alors réviser les fichiers un par un afin de voir ou se situe le problème?

Merci à l'avance

Hors ligne

#9 27-08-2009 21:10:18

Mpok
Néo Admin

Re : Petite soucis de mise en page

Le problème est (probablement) dans l'un des deux fichiers css de style.
Il faut donc utiliser Web Developer et/ou Firebug pour déterminer précisemment la/les classes css à modifier (comme a déjà commencé Swink).

Hors ligne

#10 27-08-2009 21:50:16

stci
Membre

Re : Petite soucis de mise en page

Merci oldie-2 pour ton gentil compliment et pour les conseils.

Je viens de trouver le problème à l'instant et il est assez étrange.

Si je retire la ligne suivante "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">" tout devient parfait.

Mais à quoi peut bien servir cette ligne? Je m'excuse d'être aussi ignorante mais en fait, j'utilise Web Expert pour créer mes sites et le doctype est inséré automatiquement. Je ne connais donc pas sa signification et son utilité.

Hors ligne

#11 28-08-2009 10:38:59

Mpok
Néo Admin

Re : Petite soucis de mise en page

oldie-2 a écrit :

.... et ton document est loin d'être conforme à cette norme.

Et DONC, il faut le rendre conforme..
(note : le forum lui-même est entièrement valide xhtml, donc les erreurs éventuelles ne peuvent provenir QUE de ce que tu as ajouté).
Pour cela, il faut soumettre le code html (les pages entières, affichage -> code source pour les sélectionner) au Validateur W3C, qui t'expliquera les différentes erreurs (ne pas avoir peur au début si le nombre d'erreurs est important, elles dépendent beaucoup les unes des autres, en corriger une seule peut parfois diminuer de beaucoup le nombre total).

Hors ligne

#12 28-08-2009 15:27:29

stci
Membre

Re : Petite soucis de mise en page

Merci beaucoup à vous deux. Je vais faire le nécessaire dès que possible. smile

Hors ligne

Pages : 1

Pied de page des forums