Je suis en train de préparer un site, et j'ai commencé de faire un design plutôt simple.
Le problème est que celui-ci change à chaque fois que je recharge la page dans FF (touche F5).
En principe, je dois avoir un en-tête avec logo et menu.
En-dessous, je dois avoir 5 colonnes avec chacune une petite barre grise en haut (miniature du fond de l'en-tête en fait).
Le soucis est que parfois tout tient sur une ligne, et parfois je n'ai plus que 4 colonnes sur une ligne, la 5ème passant alors sur une seconde ligne (le design est alors tout décallé).
Voici mon code xHTML et php :
Code : Tout sélectionner
<?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>Code : Tout sélectionner
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;
}Voici la page : http://s146058187.onlinehome.fr/AI/mapage.php
