[RESOLU] Sauts de ligne après des DIV

Question

whombat

13 Sep 2010 à 04:00

Bonjour à tous

J'ai un soucis de DIV. Je m'explique :

- Ma page est comprise dans un DIV global (z-index:1;)
- en bas de page j'ai un include (footer.inc) qui contient 3 DIV (z-index:2; z-index:3; et z-index:4;)

puis je ferme mon DIV général, le premier.

Or, le(s) DIV du footer.inc sautent 2 ou 3 lignes automatiquement en fin de page.

J'ai essayé bien des choses : margin:0px; ou display:inline; ou encore padding: 0px 0px 0px 0px; etc mais rien n'y fait. J'ai toujours, dans tous les cas, ces 3 lignes sous le footer.

Récapitulatif. Un grand DIV général, index 1.

Dans ce DIV, il y a un DIV (z-index:2;) qui contient la barre en pied de page. Lorsque l'on se promène avec la souris au-dessus de 'Voir les fêtes du jour ?' un 3ème DIV (z-index:3;) apparaît. Dans ce DIV, il y a un 4ème DIV (z-index:4;) en flot:right pour ecrire 'Fermer' et le 'X' de la case fermeture.

Dans le DIV index:3 il y a toutes les fêtes dans un textarea.

Organigramme :

<DIV id='1' ....>

<DIV id='2' ....>
</DIV>

<DIV id='3' ....>

<DIV id='4' ....>
</DIV>

</DIV>

</DIV>

Quelqu'un aurait une idée ? Je suis crevé. Je viens d'y passer une dizaine d'heures. Je laisse ce topic en 'bouteille à la mer'. Je vais dormir deux ou trois heures. Peut-être il y a-t-il un couche-tard (un lève-tôt) sinon à tout à l'heure.

Merci d'avance.

Mon code, rapide:



<?php

echo "
<HTML>
<BODY>
<DIV class='attributs'>

.....................// déroulé de la page

 // l'include footer.inc

  $dateAffichee = array();
  $dateAffichee = afficheDate();

  echo "
  <CENTER>
  <DIV class='fetes' >
  <TABLE width='1024' cellspacing='0' cellpadding='3' border='1' bordercolor='#0' align='center'>
  <TR>
      <TD width='1024' align='center' align='center'  valign='top' border='1' bordercolor='$dore' background='../images/barreMenu.gif'>

          <IMG SRC='../images/etoile-brillante2.gif' width='20' height='20' title='Adresser une eCard pour la fête ?' border='0' valign='bottom'>
          </IMG>&nbsp;&nbsp;&nbsp;&nbsp; $nd $dateAffichee[0]

          <A HREF = '../ecard/indexCard.php'><IMG SRC='../images/cadeau.ico' width='20' height='20'
          title='Adresser une eCard pour la fête ?' border='0' valign='bottom'></IMG></A>&nbsp;&nbsp;&nbsp;&nbsp;

          <A HREF ='#' onMouseOver = 'afficher()'> Voir les Fêtes du jour ?</A>&nbsp;&nbsp;&nbsp;&nbsp;

          <A HREF = '../ecard/indexCard.php'><IMG SRC='../images/cadeau.ico' width='20' height='20'
          title='Adresser une eCard pour la fête ?' border='0' valign='bottom'></IMG></A>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

          <A HREF = '../admin/admin.php'>Administration</A>

      </TD>
  </TR>
  </TABLE>
  </DIV>
  <DIV id='laFete' class='fete1'>

       <DIV id='fermer' class='fermer'>
            $nd Fermer&nbsp;
            <IMG SRC='../images/Xtreme.ico' width='16' height='16' valign='middle' onClick='masquer()'></IMG>
       </DIV>

       <CENTER><FONT color='#00FF00' size='4'><BIG> LES FÊTES DU JOUR :</BIG></FONT><BR>
       <TEXTAREA cols='35' rows='4' class='regionText'>$dateAffichee[2]</TEXTAREA>
  </DIV>
</DIV>
</BODY>
</HTML>";

?>

// et le CSS

<STYLE>

.fetes {
  position:absolute;
  left:0;
  width:100%;
  visibility: visible;
  margin:0px;
  padding:0px 0px 0px 0px;
  display:block;
  z-index:2;
}

.fete1 {
  position:relative;
  background-color:#676767;
  border-width:2px;
  border-color: #DEC9A0;
  top:-120;
  right:-300;
  width:350;
  height:115;
  visibility: hidden;
  margin:0px;
  z-index:3;
}

.fermer  {
  float: right;
  width: 80px;
  height:20px;
  margin: 5;
  z-index:4;
}

</STYLE>

Modifié par whombat (15 Sep 2010 - 04:35)

Laurie-Anne

13 Sep 2010 à 08:27

Bonjour,

Avec un code non valide, il est normal d'avoir des erreurs.

Pour commencer, ajoutes un doctype !

whombat

13 Sep 2010 à 10:29

Bonjour,

D'une part mon code marche très bien. Alors il est possible que j'ai fait une erreur dans la copie.

D'autre part, je ne sais pas ce qu'est un doctype.

Mais merci de vous être intéressé à mon problème. Ceci dit, si vous avez trouvé une erreur, soyez aimable de me dire où. Je vous assure que ce code fonctionne parfaitement (A PART les 3 lignes vides de fin, bien sûr).

Il faut préciser, mais était-ce bien nécessaire, que j'ai raccourci le script. Je n'ai pas donné les fonctions appelées, par exemple, mais on part du postulat qu'elles existent et fonctionnent bien entendu.

Laurie-Anne

13 Sep 2010 à 10:36

Donc, je confirme, le problème viens très certainement du doctype.

Le doctype, ou document type, est une ligne de code qui doit être la première du document (sinon IE déconne) et qui défini le standard utilisé pour coder la page.

Sans doctype, le navigateur est laissé à lui même et fait ce qu'il peut/veut.

Donc : non le code que tu présente n'a rien de correct (absence de doctype, éléments dépréciés, éléments en majuscule (valide en html4 mais déconseillé)...).

whombat

13 Sep 2010 à 10:55

Ô oui bien sûr.

Je ne connais que çaz mais je n'y étais vraiment pas. Mille excuses.

Le doctype :
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'HTTP://www.w3.org/TR/html4/strict.dtd'/>

whombat

13 Sep 2010 à 23:42

Je vois que personne n'a d'idée pour l'instant.

Je suis à peu près sûr que cela vient des lignes du footer.inc ou des déclarations de style. Parce que, sans cela, tout fonctionne parfaitement.

Il faut dire que, même avec cela, tout fonctionne parfaitement SAUF les sauts de lignes automatiques en fin de parcours.

Merci de votre aide.

whombat

14 Sep 2010 à 05:39

Re-Bonjour, c'est encore moi.

Je ne sais pas si quelqu'un finira par m'aider mais j'ai un peu avancé. En supprimant telle partie puis telle autre et ainsi de suite (et/ou les changeant de place) j'ai fini par en tirer les conclusions suivantes : le proiblème vient du DIV N° 3. En effet, quelle que soit sa hauteur (il suffit de la faire varier pour s'en convaincre) il crée exactement le même emplacement vertical en lignes vierges.

Je l'ai placé avant la barre de base. Certes, du coup je n'ai plus de vide entre cette barre et la fin de page. Mais j'en ai un grand (de la hauteur du DIV 3 donc) entre cette barre et la fin du tableau qui est juste au dessus.

J'ai vu sur le Net qu'il était indispensable, pour éviter la création de lignes automatiques, de mettre dans le CSS margin: 0px; padding: 0px 0px 0px 0px; et display: inline; Ce que j'avais fait. Mais, finalement, en les enlevant, partiellement ou totalement, cela ne change en rien le résultat.

Voici donc le nouveau code (j'ai chargé 'arbitrairement' certaines variables pour que, si vous souhaitez faire un copier/coller chez vous, vous ayez le moins de pb possible.

1ère partie qui est le DIV 3 (qui contient le DIV 4) et les déclarations :



  $dateAffichee2 = 'Marie, Marinette, Morgane, Maryse';
  $dateAffichee1 = '15 Août 2010';
  $nd = "<FONT style='font-weight:normal; font-size:14px; color:'#DEC9A0'; text-align:justify; text-decoration:none;'>";
  $dore = "#DEC9A0";

  echo "
  <DIV id='laFete' class='fete1'>

       <DIV id='fermer' class='fermer'>
            $nd Fermer&nbsp;
            <IMG SRC='../images/Xtreme.ico' width='16' height='16' valign='middle' onClick='masquer()'></IMG>
       </DIV>

       <CENTER><FONT color='#00FF00' size='4'><BIG> LES FÊTES DU JOUR :</BIG></FONT><BR>
       <TEXTAREA cols='35' rows='4' class='regionText'>$dateAffichee2</TEXTAREA><BR><BR>
  </DIV>

2ème partie partie qui est le DIV 4, la barre de base, qui fonctionne parfaitement. Elle est dans un DIV pour pouvoir mettre le DIV 3 en position: relative;



  <CENTER>
  <DIV class='fetes' >
  <TABLE width='1024' cellspacing='0' cellpadding='3' border='1' bordercolor='#0' align='center'>
  <TR>
      <TD width='1024' align='center' align='center'  valign='top' border='1' bordercolor='$dore' background='../images/barreMenu.gif'>

          <IMG SRC='../images/etoile-brillante2.gif' width='20' height='20' title='Adresser une eCard pour la fête ?' border='0' valign='bottom'>
          </IMG>&nbsp;&nbsp;&nbsp;&nbsp; $nd $dateAffichee1

          <A HREF = '../ecard/indexCard.php'><IMG SRC='../images/cadeau.ico' width='20' height='20'
          title='Adresser une eCard pour la fête ?' border='0' valign='bottom'></IMG></A>&nbsp;&nbsp;&nbsp;&nbsp;

          <A HREF ='#' onMouseOver = 'afficher()'> Voir les Fêtes du jour ?</A>&nbsp;&nbsp;&nbsp;&nbsp;

          <A HREF = '../ecard/indexCard.php'><IMG SRC='../images/cadeau.ico' width='20' height='20'
          title='Adresser une eCard pour la fête ?' border='0' valign='bottom'></IMG></A>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

          <A HREF = '../admin/admin.php'>Administration</A>

      </TD>
  </TR>
  </TABLE>
  </DIV>

Et le CSS allégé :



.fetes {
  position:absolute;
  left:0;
  width:100%;
  visibility: visible;
}

.fete1 {
  position:relative;
  background-color:#676767;
  border-width:2px;
  border-color: #DEC9A0;
  top:0;
  left:200;
  width:350;
  visibility: hidden;
  display:inline;
}

.fermer  {
  float: right;
  width: 80px;
  height:20px;
}

Alors si vous avez une idée, je suis sûr que nombreux sont ceux qui ont rencontré ce pb ou le rencontreront.

Merci d'avance du coup de main.

Com2see

14 Sep 2010 à 16:34

J'ai déjà rencontré ce problème il y a quelques temps. Pour rectifier le tir, j'ai rajouté un margin-bottom négatif sur le CSS du DIV en question ou un margin-top négatif au CSS du div juste en dessous.

whombat

14 Sep 2010 à 20:14

Merci de ta réponse.

Je vais essayer tout à l'heure (j'ai du monde qui vient d'arriver) et je te tiens au courant.

Si seulement... Je croise les doigts.

whombat

15 Sep 2010 à 04:35

C'est super.

Grand merci Com2see.

Il fallait effectivement mettre un margin-top:-150; au DIV du haut.

Tu viens de balayer des jours de prise de tête.

Merci encore.

Sujet clos