Ebauche de site (2 :p)

Question

19 Aug 2005 à 19:15

Bonsoir tout le monde, me revoilà.
Mon projet a bien avancé, me suis plus ou moins débrouillé, mais il me reste cependant 2 pitits problèmes et un autre un peu plus généraliste.
Niveau problème, IE d'abord, sous ie, tout joli, sous ie, le menu de droite se barre en bas et c'est laid et peu pratique Smiley ohwell

Secondo, j'ai toujours pas réussi à étandre une image de façon à ce qu'elle comble le "trou" entre menu et bande du bas.

Dernièrement, niveau codage, je sais pas trop si c'est valide tout ca, ca me parait être un joli foutoir ;p
Donc un chtit coup de main ne serait pas de refus, merci d'avance !


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<?php
session_start;
include ("config.php");

            
//je rappelle que je mets tout dans une variable, tout changer prendrais un temps énorme
$Theme .= '

<html>

<head>


<link href="Anichiban.css" rel="stylesheet" type="text/css">



<style type="text/css">

.contenucentral {
  background-color : #00167c;
  float: center;
  padding: 0px;
  width: 95%;
}


.secondcontenu {
  float:center;
  width:91%;
}


.flottante {
  margin: 1px;
  float: left;
  width: 65%;
  text-align: center;
}

.flottantedeux {
  margin: 1px;
  float: left;
  width: 220px;
  text-align: center;
}




.milieu {
  background-image:url(Elements/ani/images/anichiban_11.jpg);
  background-repeat:repeat-y;
  background-color : #c0bbf3;
  float: left;
  padding: 1px;
  width: 79%;
  border: 1px solid;
}


.conteneurmenus {
  background-color:#bdbaf1;
  padding:0px;
  width:100%;
}


.droite {
  margin-left: 79%;
  padding: 1px;
  text-align:left;
}


.droitebas {
  margin-left: 79%;
  padding: 1px;
  text-align:left;
}




}

</style>

<title>

Anichiban

</title>



<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="description" Content="blabla">

<meta name="keywords" Content="blabla">

<meta name="author" CONTENT="Sha-ka">

<meta name-equiv="Content-Language" content="fr">

</head>
<font face="Miriam"></font>
<body bgColor="#9f9be8">

';
//Oui je vais changer la police aussi ;p



    $Theme.= '
    <div align="center">
    <div class="contenucentral">

    <img src="Elements/Anichiban.jpg" title="Anichiban" alt="Anichiban" usemap="#anichiban" />
    <MAP NAME="anichiban">
     <AREA SHAPE="RECT" HREF="?page=News&num=1" COORDS="828,141, 850,202">
     <AREA SHAPE="RECT" HREF="?page=News&num=1" COORDS="820,46, 850,105">
     <AREA SHAPE="RECT" HREF="?page=News&num=1" COORDS="762,1, 850,44">
     <AREA SHAPE="RECT" HREF="?page=News&num=1" COORDS="762,203, 849,250">
     <AREA SHAPE="RECT" HREF="?page=News&num=1" COORDS="762,105, 849,140">
     <AREA SHAPE="RECT" HREF="?page=News&num=1" COORDS="0,0, 761,252">
     <AREA SHAPE="RECT" HREF="?page=Membres&num=1" COORDS="762,141, 827,201">
     <AREA SHAPE="RECT" HREF="?page=Contacts" COORDS="762,45, 818,104">
     </MAP>


     <div class="secondcontenu">

    ';



    $Theme.= '

         <div class="milieu">
         <p class="flottante">
         <a href="?page=Index2"><img src="Elements/Index.png" title="Index" alt="Index" /></a>
         <a href="?page=Forums"><img src="Elements/Forum.png" title="Forum" alt="Forum" /></a>
         <a href="?page=Galerie&num=1"><img src="Elements/Galerie.png" title="Galerie principale" alt="Galerie principale" /></a>
         </p>
         <div class="flottantedeux">';

         if(isset($_COOKIE['Membre'])) {
            include("config.php");


            $select = mysql_query("SELECT Id FROM membres WHERE Membre = '$Membre' ")
                    or die('Erreur n°1. ' . mysql_error());

            $mes = mysql_fetch_array($select);
             $IdM=$mes['Id'];


            $verifmail = mysql_query("SELECT * FROM messagerie WHERE IdDestinataire='$IdM' AND Lu=''")
                       or die('Erreur messages. ' .mysql_error());

            $verifmailnb = mysql_num_rows($verifmail);

            $Theme.= '
            <table width="100%" border="0"><tr><td width="50%">
            <a href="?page=MembresMailbox&IdM='.$IdM.'">
            <img src="Elements/Newmessage.jpg" border="0" title="Nbre nouveau(s) message(s)" alt="Nbre nouveau(s) message(s)" />
            <br /><font size="2">';
                if($verifmailnb>0) {
                    $Theme.= '<img src="Elements/Annonce.gif" title="Nouveau mail" alt="Nouveau mail" />';
                }
                else {}
            $Theme.= '
            '.$verifmailnb.' nouveau(x) message(s)</font></a>
            </td><td><div align="center">
            <a href="?page=MembresProfil&IdMembre='.$IdM.'">'.$Membre.'</a></div>
            </td></tr></table>';
         }
         else {
          $Theme.= 'Pour pouvoir accéder à l\'integralité du site, <a href="?page=MembresInscription">
          inscrivez vous !</a>';
         }



         $Theme.= '</div>


         ';
         $page = isset($_GET['page']) && $_GET['page'] != '' ? $_GET['page'] : ';

             $page = htmlentities($page)';

             

             if(file_exists($page . '.php') || file_exists($page . 'htm')) {
                 include($page . '.php'); 
             } 
             else{
                 include('News.php');
             }

         $Theme.= '
         </div>';

//Là, sous ie, sans qu'il y'ait de clear:both, le menu va sous le div central...

         $Theme.= '<div class="conteneurmenus">

         <div class="droite">
         <img src="Elements/anichiban_06.jpg" title="anichiban_06" alt="" />

         ';




         if(isset($_COOKIE['Membre'])) {

         include("Controle.php");

         if($SuperAdmin=="O") {
           $Theme.= '<a href="?page=Admins">
           <img src="Elements/Admins.jpg" title="Admins" alt="Admins" /></a><br />';
         }
         else {}
         }
         else {}



         $Theme.= '
         <img src="Elements/anichiban_10.jpg" title="Menu" alt="Menu" usemap="#MapMenuPrin" />
         <map name="MapMenuPrin">
           <area shape="rect" coords="6,21,160,51" href="?page=News&num=1">
           <area shape="rect" coords="6,51,160,78" href="?page=Forums">
           <area shape="rect" coords="6,78,160,105" href="?page=Liens">
           
           <area shape="rect" coords="6,131,160,161" href="?page=ListeSites">
           <area shape="rect" coords="6,161,160,191" href="?page=SiteCreer">
           <area shape="rect" coords="6,191,160,218" href="?page=Musiques">
           <area shape="rect" coords="6,218,160,247" href="?page=Videos">
           <area shape="rect" coords="6,247,160,273" href="?page=Rechercher">
           <area shape="rect" coords="6,273,160,302" href="?page=Images&num=1">
         </map>



         <img src="Elements/anichiban_13.jpg" title="Anichiban" alt="Anichiban" />
         </div>

         <div class="droitebas">';
                if(isset($_COOKIE['Membre'])) {


         include("config.php");


         $select = mysql_query("SELECT * FROM membres WHERE Membre = '$Membre' ")
                 or die('Erreur n°1. ' . mysql_error());

         $mes = mysql_fetch_array($select);
         $IdM=$mes['Id'];
         $SexeM=$mes['Sexe'];


                $Theme.= '<img src="Elements/anichiban_14.jpg" title="Membres" alt="Membres" usemap="#Map" />
                <map name="Map">
                  <area shape="rect" coords="7,41,155,67" href="?page=MembresProfil&IdMembre='.$IdM.'">
                  <area shape="rect" coords="7,67,155,93" href="?page=MembresChangeInfos&IdM='.$IdM.'">
                  <area shape="rect" coords="7,93,155,122" href="?page=MembresMailbox&IdM='.$IdM.'">
                  <area shape="rect" coords="7,122,155,153" href="?page=MesSites&IdM='.$IdM.'">

                  <area shape="rect" coords="7,181,155,210" href="?page=MembresDeco&IdM='.$IdM.'">
                </map>';
              }
              else {
                $Theme.= '<div align="center">
                <form action="?page=MembresConnexion" name="Idenfication" method="post">
                <table width="156" border="0" cellpadding=0 cellspacing=0><tr><td>
                    <img src="Elements/anichiban3_01.jpg" title="Anichiban" alt="Anichiban" />
                    </td>
                </tr>
                <tr><td>
                    <img src="Elements/anichiban3_02.jpg" title="Anichiban" alt="Anichiban" />
                    </td>
                </tr>
                <tr><td>
                    <img src="Elements/anichiban3_03.jpg" title="Anichiban" alt="Anichiban" />
                    </td>
                </tr>
                <tr><td background="Elements/anichiban3_04.jpg"> &nbsp;

                      <input type="text" name="Member" size="12">
                      <img src="Elements/espaceur.gif" width="1" height="25" title="Anichiban" alt="Anichiban" />
                </td>
                </tr>
                <tr><td>
                    <img src="Elements/anichiban3_05.jpg" title="Anichiban" alt="Anichiban" />
                </td>
                </tr>
                <tr><td background="Elements/anichiban3_06.jpg"> &nbsp;&nbsp;
                  <input type="password" name="PassAnichiban" size="12"><input type="submit" name="Validez" value="Ok" />
                  <img src="Elements/espaceur.gif" width="1" height="25" title="Anichiban" alt="Anichiban" />

                </td>
                </tr>
                <tr><td>
                    <img src="Elements/anichiban3_07.jpg" title="Anichiban" alt="Anichiban" />';
//C'est cette image qu'il faudrait étandre jusqu'en bas si nécessaire, j'ai tenté un "height="100%" mais ca ne donne rien
                $Theme.= '</td>
                </tr>
              </table></form></div>';
              }
         $Theme.= '
         <img src="Elements/anichiban_15.jpg" title="Anichiban" alt="Anichiban" height="100%" /></div>


         </div>




    <div style="clear: both">
    <table width="100%" border="0"><tr bgColor="#c0bbf3"><td><div align="left">
    <img src="Elements/Webmaster.jpg" title="Webmaster" alt="" width="100%" height="31" border="0" />
    <img src="Elements/Partenaires.png" title="Partenaires" alt="Partenaires" />
    </div></td></tr></table>

    </div>
    </div>
    </div>
    </div>


';





$Theme .= "</body>

</html>";




echo "$Theme";
mysql_close();

?>

Merci d'avance, et désolé si c'est trop long.

Aureance

20 Aug 2005 à 00:29

Ebauche de réponse…
J'ai copié/collé ton code dans mon éditeur et comme je m'y attendais… rien ne se passe.
Comment veux-tu que quelqu'un puisse répondre à cette question ? On sait qu'une image se "barre à gauche" et que tu ne reussis pas à "étandre" ( ce doit être une variante du verbe étendre ? ) une autre image. Ensuite, on fait quoi avec quoi ?

Sha-kaperdusonpass

20 Aug 2005 à 01:07

En effet, mille excuses, sans aucun visuel j'admet que c'est pas évident ;p

Le rendu souhaité

Le problème sous mozilla : un espace plus ou moins grand selon le contenu principal... J'aimerais que l'image se repete ou s'étire jusqu'en touchant la barre du bas

Le rendu ie, je ne pense pas qu'il faille plus expliquer où est le problème ^^

En esperant que ca soit plus clair désormais, et si il y'a encore des questions, n'hésitez pas à me demander Smiley smile

Aureance

20 Aug 2005 à 01:32

La troisième image, IE-Mac ou IE-Win ? Ce doit être une histoire de "clear:both" pour que ton menu se retrouve posé en bas de la sorte. Par contre si tu pouvais mettre ta page en ligne ( provisoirement ) ce serait plus pratique. Avec les outils de FireFox et Mozilla et une vraie page on peut voir ou se trouve la "couille dans le manou", sur une capture d'écran c'est très difficile de voir les portions de code. (hum) Je suis embêtant, n'est-ce pas ?

Chatissimus

20 Aug 2005 à 06:43

perso j'ai aussi un petit probleme pour visualiser ton code Smiley cligne

mais si le menu et la partie centrale sont flotante

j'ai eut le meme type de probleme est c'etait lié à la largeur du conteneur qui été plus gros sous IE , donc il était placé en dessous

avec des petit test en reduisant les largeurs j'ai résolu le probleme

zzzazzz

20 Aug 2005 à 10:48

Ca sent surtout comme ça, à vue de nez le problème du modèle de boite IE vs celui recommandé par la W3C.

Un petit tour sur la FAQ et ca devrait s'arranger

Sha-kaperdusonpass

20 Aug 2005 à 11:50

Merci pour les réponses.
Dans l'ordre : non, tu n'es pas embêtant ;p
Voici une page test (en plus, tout les liens marchent)

Sinon, oui, j'ai déjà essayé une réduction des blocs, ca ne change rien au problème, de même, j'ai déjà regardé avec clear:both; je n'en ai qu'un seul et il ne semble pas causer de problème, au contraire, si je l'enlève le design sous mozilla en prend un coup ^^
Et c'est ie-win.

Concernant la page, merci, elle est assez instructive en effet mais j'avais déjà lu la plupart des liens donnés, sans résultat Smiley ohwell

zzzazzz

20 Aug 2005 à 12:21

Bonjour,

Ton code xhtml n'est pas clair et pas vraiment cohérent, tu utilises des Div align"center" un peu partout qui font double ou contre emploi avec tes feuilles de styles.

Il faudrait déjà commencer par valider ton code, hors feuille de style :

Ici par exemple pour partir d'une base saine.

Ensuite je reverrai la structure globale du site et agir par incrément, mais d'abord viabiliser sa structure globale (dans ton cas 4ou5 blocs maxi). J'avoue me perdre dans ton code.

Bon courage.
Modifié par zzzazzz (20 Aug 2005 - 12:25)

Sha-kaperdusonpass

20 Aug 2005 à 16:26

Bonjour,
je sais hélas que niveau validation je suis très loin du compte, le gros problème étant que mon codage particulier (je réunis tout sous une seule variable) fait un beau fouilli, et si changement il y'a, je devrais tout refaire, ce qui prendrais énormement de temps... Et avec ce système, il est très difficile de repérer les erreurs (les numéros de lignes ne collent pas...).

Sujet clos