Page 1 sur 1
Problème de décallage...
Posté : 22 juin 2012, 19:50
par StudsMaster
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
Re: Problème de décallage...
Posté : 22 juin 2012, 21:31
par xTG
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.
Re: Problème de décallage...
Posté : 22 juin 2012, 23:23
par StudsMaster
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...
Re: Problème de décallage...
Posté : 22 juin 2012, 23:53
par xTG
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é.
Re: Problème de décallage...
Posté : 23 juin 2012, 10:34
par StudsMaster
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.
Re: Problème de décallage...
Posté : 23 juin 2012, 10:44
par xTG
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.
Re: Problème de décallage...
Posté : 23 juin 2012, 11:27
par StudsMaster
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"> </td>
<td height="97"><div align="justify" id="div2">
<p>Cette page d'authentification est uniquement réservée aux <strong>Administrateurs</strong> du site. Toute connexion, fructueuse ou non, est enregistrée dans une base de donnée.<br />
<strong></strong></p>
</div></td>
<td width="30" height="97"> </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és-compte-administrateur.png" width="128" height="128" /></td>
<td height="25" colspan="3" align="left" valign="top"> </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"> </td>
</tr>
<tr>
<td height="20" align="left" valign="top"> </td>
<td height="20" align="left" valign="top"> </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"> </td>
</tr>
</table>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><input type="submit" name="button" id="button" value="Connexion à 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>
Re: Problème de décallage...
Posté : 23 juin 2012, 12:20
par xTG
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é.
Re: Problème de décallage...
Posté : 23 juin 2012, 13:43
par StudsMaster
Bonjour,
effectivement, plus aucun décallage maintenant, cependant voici le résultat :
Re: Problème de décallage...
Posté : 23 juin 2012, 15:47
par xTG
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.
Re: Problème de décallage...
Posté : 23 juin 2012, 16:30
par StudsMaster
Toujours pareil
Re: Problème de décallage...
Posté : 23 juin 2012, 17:31
par xTG
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.
Re: Problème de décallage...
Posté : 23 juin 2012, 20:19
par StudsMaster
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
Re: Problème de décallage...
Posté : 23 juin 2012, 21:32
par xTG
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.
