Forum d'entraide PHPFrance

Hello,

J'ai besoin d'une information concernant la mise en page sous iexplorer

image

On peut distinguer 3 blocs, le bloc noir (#enteteANDloginpass)qui lui contient 2 blocs floats, (#entete) et (#loginpass)

Voici le morceau de code css qui gères ces trois blocs

#enteteANDloginpass
{
top: 25px;
left: 0px;
width: 1024px ;
height: 152px;
border: 4px solid black;
padding-top : 0px;
padding-bottom : 0px;
padding: 0;
}

#entete 
{ 
margin-top : 0px;
margin-bottom : 0px;
margin-left : 170px;
position: absolute;
top: 13px;
left: 115px;
background-color: #e37a1a ;
width: 750px ;
height: 150px;
font-family: "Arial Black", Arial, Verdana, serif;
font-size: 12px;
color:#FFFFFF;  
padding: 0;
background-color: #e37a1a ;
}

#loginpass
{ 
position: absolute;
top: 13px;
float: left;
margin-top : 0px;
margin-left : 1px;
border: 4px solid #e37a1a;
height: 142px;
width: 263px ;
}

Apparement une histoire de marge n'est pas bien définie, sous ie , ou un paramètre manquant, car j 'arrive pas à ajuster pour internet explorer

Avez-vous une idée pour m'aider ? merci !

Modération : attention où tu poste. C'est un probleme de CSS et non de PHP. Sujet déplacé.

Pour ton problème, il faudrait ajouter le bout de code HTML correspondant, ça aiderait a voir les identifiant et comment est structuré ton code HTML.

d'accord voici le code concerné en html, je sais pas si ça va vous rendre service

<div id="enteteANDloginpass">
<div id="entete">
<? echo  $datenow.' '.$heurenow; ?>
</div id="entete">
<!--//----------------------------------------------------------------------------------------------- -->

<!--//----------------------------------------------------------------------------------------------- -->
<!-- FORMULAIRE POUR SE LOGGER  -->

<div id="loginpass">
<FORM name="LoginUser" action="accueil.php" method="post" target="_blank">    
<table>    

<tr><td><IMG src="/images/user.jpg" border=0 width=30 height=30></td>     <td><input type="text" name="loginUser" size="8"></td></tr><br>
<tr><td><IMG src="/images/cle.jpg" border=0 width=30 height=30></td>	<td><input type="password" name="passeUser" size="8" ></td></tr><br>     
<tr><td></td><td><INPUT type="submit" value="Connecter"></td></tr>

</table>
</FORM>
</div id="loginpass">
</div id="enteteANDloginpass">

Nettement plus pratique, proposition de corrigé :

Code : Tout sélectionner

#enteteANDloginpass
{
    position: relative;
    top: 25px;
    left: 0px;
    width: 1024px;
    height: 152px;
    border: 4px solid black;
    padding: 0;
}

#entete
{
    margin : 1px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #e37a1a ;
    width : 750px;
    height: 150px;
    font-family: "Arial Black", Arial, Verdana, serif;
    font-size: 12px;
    color:#FFFFFF;  
    padding: 0;
    background-color: #e37a1a ;
}

#loginpass
{
    position: absolute;
    top: 0;
    float: left;
    margin : 1px;
    border: 4px solid #e37a1a;
    height: 142px;
    width: 263px ;
}

je me permet de te montrer avec ta modification une trés nette amélioration c'est presque bon y a juste le fond encore qui cause problème

Donc les deux blocs ont le fond qui est pas encore ajusté, si tu pouvais encore me dépanner..

http://img117.imageshack.us/img117/3252/test2jf.jpg

J'ai voulu utiliser ceci , padding-bottom:0; mais en vain ça ne marche pas

Le problème, c'est qu'avec cette seule information, je suis incapable de te donner la moindre réponse: je ne peux pas voir le code modifié et tu ne précises pas sous quel navigateur.

Le plus simple dans un cas de ce genre, c'est de mettre la page en ligne et d,envoyer l'url ici: avec Firefox, on peut utiliser la barre WebDeveloper et avoir les détails nécessaires qu'on peut même éventuellement recopier en local pour tester sous d'autres navigateurs.

Le problème est probablement posé sous IE, parce que IE n'interprête pas correctement la marges internes et externes des éléments de bloc. Pars de cette idée et éventuellement, fais un tour sur openweb à la rubrique CSS, il y a un article sur le sujet.

Alors le probleme est toujours avec l'affichage sous internet explorer, voici le lien de ma page http://www.m1b.ch/accueil.php

je vais aller aussi voir sous webopen

vire les <br> au bout des </td>, ils n'ont rien à faire là

Tiens, ton code complet avec le même affichage sous Firefox et sous IE, mais modifié en XHTML : note que j'ai intégré le CSS directement pour simplifier, mais je ne l'ai pas modifié, tu auras juste à l'enlever et décommenter la balise <link>

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 xmlns="http://www.w3.org/1999/xhtml">
  <head>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
function ControleVide() // voir mon bouton ( de mon formulaire) qui fait appel a la fonction
{
    if(document.creationcompte.pseudo.value=='') // regarde par rapport � mon formulaire creationcompte et par rapport � mon champ pseudo
    {
        alert('Le champ Pseudo ne peut pas rester vide !');
        document.Formulaire.Nom.focus();
    }
    if(document.creationcompte.nom.value=='')
    {
        alert('Le champ Nom ne peut pas rester vide !');
        document.Formulaire.Nom.focus();
    }
    if(document.creationcompte.prenom.value=='')
    {
        alert('Le champ pr�nom ne peut pas rester vide !');
        document.Formulaire.age.focus();
    }
    if(document.creationcompte.email.value=='')
    {
        alert('Le champ e-mail ne peut pas rester vide !');
        document.Formulaire.Nom.focus();
    }
    if(document.creationcompte.rue.value=='')
    {
        alert('Le champ Rue ne peut pas rester vide !');
        document.Formulaire.Nom.focus();
    }
    if(document.creationcompte.ville.value=='')
    {
        alert('Le champ Ville ne peut pas rester vide !');
        document.Formulaire.Nom.focus();
    }
    if(document.creationcompte.passe.value != document.creationcompte.passeconfirm.value ) // si les mot de passes ne sont pas identiques, afficher le msg erreur
    {
        alert('Les mots de passes saisis ne sont pas identiques');
        document.Formulaire.Nom.focus();
    }
    if(document.creationcompte.passe.value == '' ) // si la personne ne met pas de mot de passe /!\ obliger de mettre un password
    {
        alert('Saisissez un mot de passe SVP !');
        document.Formulaire.Nom.focus();
    }
    if(isNaN(document.creationcompte.age.value)||document.creationcompte.age.value<12||document.creationcompte.age.value>105)
    {
        alert('Saisissez un age compris entre 12 et 105 ans !');
        document.Formulaire.Nom.focus();
    }
    if(document.creationcompte.mypays.value == '' )
    {
        alert('Entrez le nom de votre pays !');
        document.Formulaire.Nom.focus();
    }
    else
    {
        document.creationcompte.method = "POST"; // r�tabli le post si les champs sont correctement remplis
        document.creationcompte.action = "";
        document.creationcompte.submit(); // soumet mes information des champs
        document.location.replace("../accueil.php");
    }
}
//-->
//]]>
</script>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
function ControleVideCompteModification() // voir mon bouton ( de mon formulaire) qui fait appel a la fonction
{
    if(document.modifierMonCompte.pseudoRemplace.value=='') // regarde par rapport � mon formulaire creationcompte et par rapport � mon champ pseudo
    {
        alert('Le champ Pseudo ne peut pas rester vide !');
        document.Formulaire.Nom.focus();
    }
    else
    {
        document.modifierMonCompte.method = "POST"; // r�tabli le post si les champs sont correctement remplis
        document.modifierMonCompte.action = "";
        document.modifierMonCompte.submit(); // soumet mes information des champs
        document.location.replace("../accueil.php");
    }
}
//-->
//]]>
</script>
    <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /><!-- faire appel � mon fichier css forme.css -->
    <!--  <link rel="stylesheet" media="screen" type="text/css" title="design defaut" href="miseforme/miseEnPage.css" />  --><!-- faire appel � mon fichier css forme.css -->
<style type="text/css">
/*<![CDATA[*/
/* 
** CSS CREE PAR GERMAIN TENTHOREY ALIAS //  M1B **
 
=============================
Liste des polices courantes 
=============================
    * Arial
    * Arial Black
    * Comic Sans MS
    * Courier New
    * Georgia
    * Impact
    * Times New Roman
    * Trebuchet MS
    * Verdana
===================================
LISTE DE MES PROPRIETES DISPONIBLES
===================================
text-align: justify;  va justifier le text 
text-align: right;    Pour aligner � droite 
text-align: center;   Pour centrer 
text-indent:30px;     Commence � partir de 30 pixel du bord
font-weight: bold;    Pour mettre en gras
underline : soulign�.
overline  : ligne au-dessus.
blink     : clignotant. Attention, cette propri�t� ne marche pas sous Internet Explorer. Elle fonctionne en revanche bien sur tous les autres navigateurs, dont Mozilla Firefox.
* margin-top : marge ext�rieure en haut.
* margin-bottom : marge ext�rieure en bas.
* margin-left : marge ext�rieure � gauche.
* margin-right : marge ext�rieure � droite
* padding-top : marge int�rieure en haut.
* padding-bottom : marge int�rieure en bas.
* padding-left : marge int�rieure � gauche.
* padding-right : marge int�rieure � droite.
===================================
LISTE DES BORDURES
===================================
* none : pas de bordure (par d�faut)
* solid : un trait simple.
* dotted : pointill�s.
* dashed : tirets.
* double : bordure double.
* groove : en relief.
* ridge : effet 3D.
* outset : encore un autre effet 3D (on a l'impression que le block est sur�lev�).
*/
#enteteANDloginpass
{
    position: relative;
    top: 25px;
    left: 0px;
    width: 1024px;
    height: 152px;
    border: 4px solid black;
    padding: 0;
}
#entete
{
    margin : 1px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #e37a1a ;
    width : 750px;
    height: 150px;
    font-family: "Arial Black", Arial, Verdana, serif;
    font-size: 12px;
    color:#FFFFFF; 
    padding: 0;
    background-color: #e37a1a ;
}
#loginpass
{
    position: absolute;
    top: 0;
    float: left;
    margin : 1px;
    border: 4px solid #e37a1a;
    height: 142px;
    width: 263px ;
}
body
{
    background-color: #FFFFFF ; /* couleur de fond de la page*/
    font-family: "Arial Black", Arial, Verdana, serif;
    font-size: 12px;
}
table 
{
    font-family: "Arial Black", Arial, Verdana, serif;
    font-size: 12px;
}
td 
{ 
    font-family: "Arial Black", Arial, Verdana, serif;
    font-size: 12px;
}
a 
{
    color: #315D00;
    background-color: red
}
a:hover 
{
    color: #80AB51;
    text-decoration: none;
    background-color: #CFE1EB
}
a:active 
{
    color: #777;
}
/*]]>*/
</style>
    <title></title>
  </head>
  <body>
    <!-- // =============================================================================================== -->
    <!-- // =============================================================================================== -->
    <!-- affichage de l'heure dans ma page -->
    <div id="enteteANDloginpass">
      <div id="entete">
        02:04:2006 20 H :39
      </div><!-- // =============================================================================================== -->
      <!-- // =============================================================================================== -->
      <!-- FORMULAIRE POUR SE LOGGER  -->
      <div id="loginpass">
        <form name="LoginUser" action="accueil.php" method="post" target="_blank" id="LoginUser">
          <table summary="">
            <tr>
              <td>
                <img src="/images/user.jpg" border="0" width="30" height="30" alt="" />
              </td>
              <td>
                <input type="text" name="loginUser" size="8" />
              </td>
            </tr>
            <tr>
              <td>
                <img src="/images/cle.jpg" border="0" width="30" height="30" alt="" />
              </td>
              <td>
                <input type="password" name="passeUser" size="8" />
              </td>
            </tr>
            <tr>
              <td>
                &nbsp;
              </td>
              <td>
                <input type="submit" value="Connecter" />
              </td>
            </tr>
          </table>
        </form>
      </div>
    </div><!-- // =============================================================================================== -->
    <!-- // =============================================================================================== -->
    <!-- V�rification du login et du passe pour avoir les info du compte -->
    <pre>
<!-- // =============================================================================================== -->
<!-- // =============================================================================================== -->
<!-- // == Cr�ation de mes liens pour la page principale  -->
<br />
<br />
<a href="accueil.php?creationcompte=pageComplementaire/creationcompte" title="Creation Compte"> Créer un compte<!--  // Cr�e le lien � gauche avec un include --></a>
<a href="accueil.php?actualite=pageComplementaire/actualite" title="Actualite"> Actualité <!--  // Cr�e le lien � gauche avec un include --></a>
<!-- // =============================================================================================== -->
<!-- // =============================================================================================== -->
<!-- // =============================================================================================== -->
<!-- // =============================================================================================== -->      
</pre>
  </body>
</html>

Ah oui le div du login il s'est ajusté , tu as bien pensé sur ce coup

Il ne reste pluque le bloc de l'entête qui est encore trop grand, si tu as encore une idée

( les <br> n'avaient vraiment rien à faire là )

ok merci je vais proceder à des tests

excuse moi mais je te prend ton sujet car moi aussi j'ai un probleme !
Mon site va bien sur firefox mais sur IE pas du tout !
Regarder et tester par vous meme :
http://www.cg.c.la ( je ne fais pas de pub c'est juste pour montrer ! )

je vous donnerais le code dès que je rentre chez moi !
Merci !

Mouais, avec ça au milieu du code, de toutes façon, c'est encore surprenant que ton navigateur te saute pas à la gorge :

Code : Tout sélectionner

    <td height="50%">
	
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>news</title>

<style type="text/css">
<!--
.Style4 {
	color: #330066;
	font-weight: bold;
}
-->
</style>
</head>

<body>
<br> etc.....

Du HTML avant ça et encore d'autre après : revois ta copie, ce code n'est absolument pas conforme.

je fais mes textes avec dreamweaver donc il me met ça automatiquement !

Voila j'ai enlever mes textes et menu :

<? session_start(); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>index</title>
<style type="text/css">
p
{
padding: 15px;
}
<!--
body {
	background-image: url(images/arriere_plan.jpg);
}
a:link {
	text-decoration: none;
	color: #000000;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
.Style2 {
	font-size: 24px;
	font-weight: bold;
}

.Style3 {font-weight: bold}
.Style5 {font-size: 18px; font-weight: bold; }
.Style6 {
	color: #000000;
	font-weight: bold;
}
</style>
<!-- keywords: culture telechargement illegal warez hack hacker brico bricolage reveil numericque  -->

<TITLE>Culture-G</TITLE>
<META HTTP-EQUIV="REFRESH" CONTENT="300">
</head>

<body>
<table width="100%" valign="top" height="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <th width="15%" height="102">logo</th> 
	   <th width="84%" height="102">  
<strong><a href="/index.php?page=connexion">Se connecter</a></strong><br>
  <center>
    <center>
</center>
</center>


  </tr>
  <tr>
  
    <td height="50%" valign="top"><center>
      menu
      <br>

 </center>
</td>
    <td height="50%">
	
<?php

  // On définit le tableau contenant les pages autorisées
  // ----------------------------------------------------
  $pageOK = array('inscription' => 'inscription.php','fiches' => 'fiches.php','news' => 'news.php',
  'membres' => 'membres.php','connexion' => 'connexion.php','deconnecter' => 'deconnecter.php',
  'espace_membres' => 'espace_membres.php','delete' => 'delete.php','ajout' => 'ajout.php',
  'type' => 'type.php','fiche' => 'fiche.php','tune' => 'tune.php','partenaires' => 'partenaires.php','contact' => 'contact.php'
  ,'modif' => 'modif.php','supprimer' => 'supprimer.php');


  // On teste que le paramètre d'url existe et qu'il est bien autorisé
  // -----------------------------------------------------------------
  if ( (isset($_GET['page'])) && (isset($pageOK[$_GET['page']])) ) {
  	    include($pageOK[$_GET['page']]);   // Nous appelons le contenu central de la page
  	}
  
  else
  
	{ 

 // Page par défaut quant elle n'existe pas dans le tableau
 require('news.php');
}
  
  ?>   
	
	
	
	</td>
  </tr>
  <tr>
    <td height="50" colspan="2"><div align="center" class="Style1"></div></td>
  </tr>
</table>
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col"><p>
</th>
  </tr>
</table>
</body>
</html>

Si je saisis bien ce que tu fais, tu inclus une page dans ton tableau: le problème, c'est que c'est une page complète, incluant l'en-tête html et le pied de page html également. À l'intérieur d'une page, tu ne peux inclure que du contenu, pas "l'emballage".

J'ajouterais que pour te faciliter la vie, tu pourrais aligner un peu ton code, tout éparpiller un peu au hasard, ça ne facilite pas le débuggage :

<?php
session_start();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>index</title>
<style type="text/css">
p {
    padding: 15px;
}
<!--
body {
    background-image: url(images/arriere_plan.jpg);
}
a:link {
    text-decoration: none;
    color: #000000;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:active {
    text-decoration: none;
}
.Style2 {
    font-size: 24px;
    font-weight: bold;
}
.Style3 {
    font-weight: bold
}
.Style5 {
    font-size: 18px; 
    font-weight: bold; 
}
.Style6 {
    color: #000000;
    font-weight: bold;
}
</style>
<!-- keywords: culture telechargement illegal warez hack hacker brico bricolage reveil numericque -->
<TITLE>Culture-G</TITLE>
<META HTTP-EQUIV="REFRESH" CONTENT="300">
</head>
<body>
<table width="100%" valign="top" height="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <th width="15%" height="102">logo</th>
    <th width="84%" height="102"> 
    <strong><a href="/index.php?page=connexion">Se connecter</a></strong><br>
  </tr>
  <tr>
    <td height="50%" valign="top">
      <center>menu<br>
      </center>
    </td>
    <td height="50%">
<?php
  // On définit le tableau contenant les pages autorisées
  // ----------------------------------------------------
  $pageOK = array('inscription'    => 'inscription.php',
                  'fiches'         => 'fiches.php',
                  'news'           => 'news.php',
                  'membres'        => 'membres.php',
                  'connexion'      => 'connexion.php',
                  'deconnecter'    => 'deconnecter.php',
                  'espace_membres' => 'espace_membres.php',
                  'delete'         => 'delete.php',
                  'ajout'          => 'ajout.php',
                  'type'           => 'type.php',
                  'fiche'          => 'fiche.php',
                  'tune'           => 'tune.php',
                  'partenaires'    => 'partenaires.php',
                  'contact'        => 'contact.php',
                  'modif'          => 'modif.php',
                  'supprimer'      => 'supprimer.php');

  // On teste que le paramètre d'url existe et qu'il est bien autorisé
  // -----------------------------------------------------------------
  if ( (isset($_GET['page'])) && (isset($pageOK[$_GET['page']])) )
  {
      include($pageOK[$_GET['page']]);   // Nous appelons le contenu central de la page
  }
  else
  {
      // Page par défaut quant elle n'existe pas dans le tableau
      require('news.php');
  }
?>
    </td>
  </tr>
  <tr>
    <td height="50" colspan="2"><div align="center" class="Style1"></div></td>
  </tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col"><p>
    </th>
  </tr>
</table>
</body>
</html>

Pas plus facile à lire comme ça ? 8)

Forum d'entraide PHPFrance

mise en forme bloc div mozilla = ok // iexplorer = erreur

mise en forme bloc div mozilla = ok // iexplorer = erreur