Design qui change à chaque rechargement de la page !

Ca vous le fait aussi chez vous ?

Sujet résolu

1 décembre 2005 à 19:01:59

'lut !

Je suis en train de développer un site (sa V2 en fait) et j'ai une petit soucis de design.

Cela ce passe à cette adresse : http://s146058187.onlinehome.fr/AI/mapage.php

NORMALEMENT :
Vous avez un en-tête avec un logo et le menu, sur une seule ligne, dans la partie grise de la page.
En-dessous, vous avez 5 colonnes, représentées chacune par une barre grisée (comme celle du header, mais en plus fin).

LE PROBLEME :
Quand je teste la page, si je fais F5 j'ai parfois le rendu correct, parfois les colonnes se mettent sur 2 lignes.
Visuellement, on voit la 5ème petite barre grise passer en-dessous des autres.

Ce problème se produit-il aussi chez vous SVP ?

SiK

1 décembre 2005 à 19:04:50

Oui, j'ai pareil, mais je crois que c'est Firefox, en testant sous IE y'a aucun pb

fg63

1 décembre 2005 à 19:08:37

Citation : SiK

Oui, j'ai pareil, mais je crois que c'est Firefox, en testant sous IE y'a aucun pb

Argllll !

Si ça se confirme, ça veut dire que je me suis planté en faisant mon code...

Je sens que je vais pas trarder à devoir le copier ici...

Donc j'anticipe :

<?php
ini_set('arg_separator.output', '&');
ini_set('url_rewriter.tags', '');
session_start();
echo '<?xml version="1.0" encoding="ISO-8859-1"?>';
?>

<!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" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Accueil Internet</title>
</head>
<body>

<?php

// On se connecte à la bdd :

require('***/***/***.php');
$db = mysql_connect($sqlhost,$sqluser,$sqlpass);
mysql_select_db($sqldb,$db);

// Variables utiles :

$pseudo = $_COOKIE['pseudo'];

$sql1 = "SELECT * FROM colonne1 WHERE pseudo='$pseudo'";
$result1 = mysql_query($sql1);
$donnees1 = mysql_fetch_array($result1);

$sql2 = "SELECT * FROM colonne2 WHERE pseudo='$pseudo'";
$result2 = mysql_query($sql2);
$donnees2 = mysql_fetch_array($result2);

$sql3 = "SELECT * FROM colonne3 WHERE pseudo='$pseudo'";
$result3 = mysql_query($sql3);
$donnees3 = mysql_fetch_array($result3);

$sql4 = "SELECT * FROM colonne4 WHERE pseudo='$pseudo'";
$result4 = mysql_query($sql4);
$donnees4 = mysql_fetch_array($result4);

$sql5 = "SELECT * FROM colonne5 WHERE pseudo='$pseudo'";
$result5 = mysql_query($sql5);
$donnees5 = mysql_fetch_array($result5);

?>

<div id="en-tete">
<?php include ("en-tete.php"); ?>
</div>

<div id="colonne1">
<? print $donnees1['titre']; ?> <br /><br />

</div>

<div id="colonne2">
<? print $donnees2['titre']; ?> <br /><br />

</div>

<div id="colonne3">
<? print $donnees3['titre']; ?> <br /><br />

</div>

<div id="colonne4">
<? print $donnees4['titre']; ?> <br /><br />

</div>

<div id="colonne5">
<? print $donnees5['titre']; ?> <br /><br />

</div>

</body>
</html>

body {
font-size : 1em;
font-family : arial, sans-serif;
color : #5B5B5B;
width : 98%;
height : 100%;
margin : auto;
margin-top : 5px;
margin-bottom : 10px;
margin-left : 5px;
margin-right : 5px;
padding-bottom : 15px;
background : url("images/fond-vertical.jpg") repeat-x;
}

#en-tete {
width : 100%;
float : top;
background : none;
}

#corps {
width : 100%;
float : left;
margin-top : 8px;
margin-bottom : 5px;
}

#colonne1 {
width : 18%;
float : left;
margin-top : 8px;
margin-bottom : 5px;
margin-left : 1%;
background : url("images/fond-vertical2.jpg") repeat-x;
text-align : center;
}

#colonne2 {
width : 18%;
float : left;
margin-top : 8px;
margin-bottom : 5px;
margin-left : 2%;
background : url("images/fond-vertical2.jpg") repeat-x;
text-align : center;
}

#colonne3 {
width : 18%;
float : left;
margin-top : 8px;
margin-bottom : 5px;
margin-left : 2%;
background : url("images/fond-vertical2.jpg") repeat-x;
text-align : center;
}

#colonne4 {
width : 18%;
float : left;
margin-top : 8px;
margin-bottom : 5px;
margin-left : 2%;
background : url("images/fond-vertical2.jpg") repeat-x;
text-align : center;
}

#colonne5 {
width : 18%;
float : left;
margin-top : 8px;
margin-bottom : 5px;
margin-left : 2%;
background : url("images/fond-vertical2.jpg") repeat-x;
text-align : center;
}

p.base {
width : 100%;
float : left;
margin-top : 8px;
margin-bottom : 5px;
padding-left : 19px;
background : url("images/fond-horizontal.jpg") repeat-y;
}

a, a:visited {
color : #5B5B5B;
}

a:hover, a:focus {
color : #B8B4CD;
}

Précisions : Ces fichiers sont encore en cours de construction... Donc pas finis,

Gyscos

1 décembre 2005 à 19:10:55

euh... ca va pas beaucoup t'aider mais moi aussi, firefox modifie PARFOIS l'apparence de mon site... c'est peut-etre autre chose que du code non ?...
non ?...
ah...

fg63

1 décembre 2005 à 19:46:58

En effet ça ne m'aide guère, mais c'est intéressant à savoir !

Qqn aurait une idée ?

yuston

1 décembre 2005 à 19:54:02

Moi sur Firefox 1.5 à chaque rechargement, je retrouve le même "design", mais c'est répartie en deux rangées....

fg63

1 décembre 2005 à 19:55:27

Citation : yuston

Moi sur Firefox 1.5 à chaque rechargement, je retrouve le même "design", mais c'est répartie en deux rangées....

J'ai FF 1.5 aussi...

C'est quand même bizarre ce truc.

Le pb doit bien venir de mon code, mais je ne vois pas où...

fg63

2 décembre 2005 à 8:07:23

dworkin

2 décembre 2005 à 12:20:54

Remets donc le code généré plutot que celui avec du php...

Ce sera plus lisible pour comprendre.

Moi sur FF toujours le meme design.

busicards

2 décembre 2005 à 12:25:43

ce sont t es % qui ne sont pas bon je crois, je ne travaille pas en % moi car je galere avec

fg63

2 décembre 2005 à 13:37:37

Citation : smn.andre

Remets donc le code généré plutot que celui avec du php...

Ce sera plus lisible pour comprendre.

Moi sur FF toujours le meme design.

Voici le code généré par le serveur :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" lang="fr" xml:lang="fr">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Accueil Internet</title>
</head>
<body>

<div id="en-tete">
<div style="width:110px; text-align:center; float:left;">
<img src="images/logo.png" width="100" height="60">
</div>

<div style="width:630px; height:62px; text-align:left; margin-left:120px;">
<a href="index.php" title="Accueil du site">Accueil</a> - <a href="mapage.php" title="Ma page d'accueil Internet personnalisée">Ma page</a> - <a href="compte.php" title="Modifier mes informations personnelles">Mon compte</a> - <a href="faq.php" title="Foire Aux Questions sur le site">FAQ</a> - <a href="deconnexion.php" title="Me déconnecter du site">Déconnexion</a>
</div> </div>

<div id="colonne1">
<br /><br />

</div>

<div id="colonne2">
<br /><br />

</div>

<div id="colonne3">
<br /><br />

</div>

<div id="colonne4">
<br /><br />

</div>

<div id="colonne5">
<br /><br />

</div>

</body>
</html>

Et voici le fichier css sur le serveur :