Problème de décallage...

22 juin 2012, 19:50

Bonsoir à tous,
Je vous ai joint en pièce jointe une page avec laquelle j'ai un problème assez important selon les PC et les navigateurs...

Voici en temps normal comment devrait s'afficher ma page : http://studsmaster.net/pictures/normal.jpg

Cependant, voici dans certains navigateurs ce qui se passe : http://studsmaster.net/pictures/pasnormal.jpg

Je dois vous avouer que je ne comprends pas pourquoi ca le fait sur cette page uniquement, et pas les autres. Je vous ai donc joint plusieurs choses :

1. La page en question
2. Les images associées à la page
3. Le style CSS

Merci d'avance,
Fabrice.

PS: Si je suprimme le tableau, ca fonctionne super bien... Sans doute le tableau qui est pas bien fait? Enfin je sais pas... Si vous avez une idée

22 juin 2012, 21:31

On voit une barre de scroll apparaitre sur la droite.
Or je ne vois pas pourquoi il y en aurait une sur un design à moins que ce soit un design fixe en hauteur.
Est-ce le cas ?
Regardes tes propriétés overflow dans ton css.

22 juin 2012, 23:23

Je vous ai mis en pièce jointe le CSS.
Cependant, le problème arrive que sur une page, et pas les autres...

Le design a été monté par un membre de ma communauté, cependant je ne trouve pas l'erreur...

22 juin 2012, 23:53

Désolé mais je n'ai pas pour habitude de télécharger des sites complet et de fouiller dedans...
Tu pourras voir dans les autres topics qu'on ne poste que ce qui est incriminé.

23 juin 2012, 10:34

Bonjour xTG,

Je crois qu'on se comprends pas... Le post ne contiens que la page incriminée ainsi que le CSS associé a la page. Les images sont la afin que vous puissiez voir la mise en forme totale. Sinon, il n'y a que deux pages...

J'ai cherché le problème durant des heures, mais aucune solution trouvée. Pour ca que je tire la sonette d'alarme en demandant votre aide...

Bonne journée,
Fabrice.

23 juin 2012, 10:44

Tu m'excusera d'être le parfait parano qui ne s'amuse as à aller télécharger les zip de tout le monde pouvant contenir n'importe quoi (et ce sans qu'ils le sachent).

Nous avons juste besoin du CSS de la partie incriminée pour te étudier le problème.
Nullement besoin de la page au complet et de toutes ses images.

Et comme je te l'ai conseillé, regardes dans ton CSS si tu n'as pas une instruction overflow.

23 juin 2012, 11:27

Bonjour.
Aucun soucis. Cependant la page va être à rallonge...

Voici le CSS:

Code : Tout sélectionner

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #745F42;
	background: #745F42 url(images/bg.jpg) repeat-x top;
	background-attachment: fixed;
}

#conteneur {
	width: 900px;
	margin: 20px auto 0 auto;
}

#conteneur #header {
	width: 900px;
	height: 280px;
	background: url(images/header.gif) no-repeat;
}

#conteneur #header_blank {
	width: 900px;
	height: 280px;
	background: url(images/header_blank.gif) no-repeat;
}

#conteneur #contenu {
	width: 900px;
	background: #ffffff;
	overflow: auto;
	margin: 0;
}

#conteneur #contenu #col1 {
	float: left;
	width: 230px;
	margin: 0 16px 0 10px;
}

#conteneur #contenu #col1 .menu {
	background: #F1F1F1;
	padding-top: 10px;
}

#conteneur #contenu #col1 #end_col1 {
	width: 230px;
	height: 20px;
	background: url(images/bg_col1.png) no-repeat;
}	

#conteneur #contenu #col1 h3 {
	margin: 0 15px 0 15px;
	padding-left: 3px;
	color: #8e3e19;
	font-size: 14px;
	border-bottom: 1px dotted #ddba02;
	background: #F1F1F1;
}

#conteneur #contenu #col1 ul {
	margin: 0 15px 0 15px;
	padding-left: 3px;
}

#conteneur #contenu #col1 li {
	list-style-type: none;
	height: 20px;
	line-height: 20px;
	border-bottom: 1px dotted #ddba02;
}

#conteneur #contenu #col1 li a {
	color: #8e3e19;
	text-decoration: none;
}

#conteneur #contenu #col1 li a:hover {
	padding-left: 3px;
}

#conteneur #contenu #col1 span {
	color: #ddba02;
	font-size: 14px;
	padding-right: 5px;
}

#conteneur #contenu #col2 {
	float: left;
	width: 634px;
	background: #F1F1F1;
	margin: 0 10px 0 0;
}

#conteneur #contenu #col2 .wrapper {
	margin: 0 15px 0 15px;
}

#conteneur #contenu #col2 .wrapper h2 {
	font-size: 16px;
	color: #8e3e19;
	border-bottom: 1px dotted #ddba02;
	padding-top: 6px;
	padding-left: 3px;
}

#conteneur #contenu #col2 .wrapper p {
	padding: 5px;
}

#conteneur #contenu #col2 .wrapper p img {
	float: left;
	padding: 10px;
}

#conteneur #contenu #col2 #end_col2 {
	width: 634px;
	height: 20px;
	background: url(images/bg_col2.png) no-repeat;
}

#conteneur #footer {
	width: 900px;
	height: 35px;
	background: url(images/footer.png) no-repeat;
}

#copy {
	width: 900px;
	margin: 5px auto;
	text-align: center;
}

#copy p {
	color: #F1F1F1;
}

#copy p a {
	color: #ddba02;
	text-decoration: underline;
}

#copy p a:hover {
	text-decoration: none;
}

.Style1 {
	font-family: "Comic Sans MS";
	font-weight: bold;
	font-size: 30px;
	color: #000000;
}

Et voici la page incriminée, du moins la partie :

Code : Tout sélectionner

<!-- DEBUT DU CONTENEUR TOP --><div id="conteneur">
	<!-- DEBUT DU HEADER -->
	<div id="header"></div>
	<!-- DEBUT DU CONTENU -->
	<div id="contenu">
		<!-- DEBUT COL1 -->
		<div id="col1">
		
<?php include("includes/menus.php"); ?>
<div id="end_col1">			
		  </div>
		</div>
		<!-- DEBUT COL2 -->
		<div id="col2">
		  <div class="wrapper">
			<h2>Administration du site </h2>
			<br>
<div align="center">
  <table width="515" border="0" cellpadding="0" cellspacing="0" background="images/attna65e4r5e6te748rt4536.gif" id="info">
      <tr>
        <td height="110" valign="top" background="images/attna65e4r5e6te748rt4536.gif"><table width="515" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="98" height="97">&nbsp;</td>
              <td height="97"><div align="justify" id="div2">
                  <p>Cette page d'authentification est uniquement r&eacute;serv&eacute;e aux <strong>Administrateurs</strong> du site. Toute connexion, fructueuse ou non, est enregistr&eacute;e dans une base de donn&eacute;e.<br />
                      <strong></strong></p>
              </div></td>
              <td width="30" height="97">&nbsp;</td>
            </tr>
        </table></td>
      </tr>
    </table>
    <form id="form1" name="form1" method="post" action="?id=auth">
      <table width="550" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="128" rowspan="8" align="left" valign="top"><img src="images/acc&eacute;s-compte-administrateur.png" width="128" height="128" /></td>
          <td height="25" colspan="3" align="left" valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td height="23" align="left" valign="top"><strong>Identifiant</strong></td>
          <td height="23" align="left" valign="top"><div align="center"><strong>:</strong></div></td>
          <td width="292" height="23" align="left" valign="top"><label>
            <input name="Name" type="text" id="formulaire_securite" size="30" />
          </label></td>
        </tr>
        <tr>
          <td width="77" height="23" align="left" valign="top"><strong>Login</strong></td>
          <td width="18" height="23" align="left" valign="top"><div align="center"><strong>:</strong></div></td>
          <td height="23" align="left" valign="top"><label>
            <input name="Login" type="text" id="formulaire_securite" size="30" />
          </label></td>
        </tr>
        <tr>
          <td width="77" height="23" align="left" valign="top"><strong>Password</strong></td>
          <td width="18" height="23" align="left" valign="top"><div align="center"><strong>:</strong></div></td>
          <td height="23" align="left" valign="top"><input name="Pass" type="password" id="formulaire_securite" size="30" /></td>
        </tr>
        <tr>
          <td height="23" align="left" valign="top"><strong>IP</strong></td>
          <td height="23" align="left" valign="top"><div align="center"><strong>:</strong></div></td>
          <td height="23" align="left" valign="top"><font color="#FF0000"><b>
            <input name="IP" type="text" id="formulaire" value="<?php $hostname = gethostbyaddr($_SERVER['REMOTE_ADDR']);echo $hostname;?>" size="44" readonly="readonly" />
          </b></font></td>
        </tr>
        <tr>
          <td height="10" colspan="3" align="left" valign="top">&nbsp;</td>
        </tr>
        <tr>
          <td height="20" align="left" valign="top">&nbsp;</td>
          <td height="20" align="left" valign="top">&nbsp;</td>
          <td height="20" align="left" valign="top"><input name="session_24" type="checkbox" id="session_24" value="1" />
          Garder ma session active durant 24h</td>
        </tr>
        <tr>
          <td height="25" colspan="3" align="left" valign="top">&nbsp;</td>
        </tr>
      </table>
      <table border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td><input type="submit" name="button" id="button" value="Connexion &agrave; la partie administration" /></td>
        </tr>
      </table>
      <label></label>
    </form>
</div>

			</div>
			<div id="end_col2">
			</div>
		</div>
	</div>
	<!-- DEBUT DU FOOTER -->
	<div id="footer">
  </div>
</div>
<!-- DEBUT DU COPY -->
<div id="copy">
<p><?php include("includes/foother"); ?></p>
</div>

23 juin 2012, 12:20

Tu as un overflow sur #contenu à ce que je vois.
C'est de là que provient la barre de défilement.

Passes la dans un premier temps à :

#conteneur #contenu {
   width: 900px;
   background: #ffffff;
   overflow: none;
   margin: 0;
}

Pour voir si cela t'enlève la barre de scroll et fais nous connaitre les changements.

Un overflow est mal venu ici car la hauteur n'est pas définie, il aurait donc au mieux fallu ne définir qu'un overflow-x si c'était la volonté.

23 juin 2012, 13:43

Bonjour,
effectivement, plus aucun décallage maintenant, cependant voici le résultat :

23 juin 2012, 15:47

Hum je suis pas très adepte du CSS...
Mais il semblerait que les deux divs soient flottants donc du coup sans hauteur détectable pour le div père.

J'ai tendance à utiliser l'instruction clear pour régler cela, mais après je l'utilise peut être n'importe comment.

Essaies de mettre :

clear: both;

Dans le #contenu ou bien dans un div que tu rajoutes en dessous de tes deux divs avant la fin du div #contenu.

23 juin 2012, 16:30

Toujours pareil

23 juin 2012, 17:31

Essaies avec ceci alors :

#conteneur #contenu {
   width: 900px;
   background: #000;
   overflow-x: auto;
   overflow-y: hidden;
   margin: 0;
}

J'ai pas réussi avec mes compétences CSS à virer le overflow tout en conservant le div sur sa hauteur.
Ce code l'interdira donc sur la hauteur (barre de défilement à droite interdite) mais l'autorise en largeur.

23 juin 2012, 20:19

Que de bonheur !

Ca fonctionne

. Merci beaucoup pour cette aide. J'ai l'impression que vous êtes le seul membre actif ici lol, mais actif, aimable et aidant.

Félicitation, et encore merci

23 juin 2012, 21:32

Juste que je suis en pleine révision pour ma semaine d'examens et que je me prend souvent des pauses pour pas déprimer. ^^
Donc du coup les autres n'ont pas le temps de répondre ou bien passent sur d'autres sujets quand ils voient que quelqu'un est déjà en train de répondre.

Problème de décallage...

Qui est en ligne