Bonjour,
je vais un site pour lequel un mot de passe est requis pour entrer.
Ca marche bien mais le probleme c'est que ma premiere page(celle ou met le mot de passe) est toute blanche et tres laide alors j'aimerais quelle est la même présentation que les autres qui elles sont arrangé grace au css ? Comment faire?
je vous met le code si besoin :
ma page php:
et ma page css:
Modifié par Angelo (31 Oct 2005 - 13:54)
je vais un site pour lequel un mot de passe est requis pour entrer.
Ca marche bien mais le probleme c'est que ma premiere page(celle ou met le mot de passe) est toute blanche et tres laide alors j'aimerais quelle est la même présentation que les autres qui elles sont arrangé grace au css ? Comment faire?
je vous met le code si besoin :
ma page php:
<?
// J'ai choisi le mot de passe "test"
if (isset($_POST['mot_de_passe'])) // Si la variable existe
{
// On se crée une variable $mot_de_passe avec le mot de passe entré
$mot_de_passe = $_POST['mot_de_passe'];
}
else // La variable n'existe pas encore
{
$mot_de_passe = ""; // On crée une variable $mot_de_passe vide
}
if ($mot_de_passe == "test") // Si le mot de passe est bon
{
// On affiche la page cachée.
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Site de Angelo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design sombre" href="style/css.css" />
</head>
<body>
<!-- Les menus -->
<div id="menu">
<div class="element_menu">
<ul>
<li><a href="page1.html">page 1</a></li>
<li><a href="page2.html">page 2</a></li>
<li><a href="page3.html">page 3</a></li>
<li><a href="page4.html">page 4</a></li>
<li><a href="page5.html">page 5</a></li>
</ul>
</div>
</div>
<!-- Le corps -->
<div id="corps">
<h2>Report</h2>
<p>
</p>
</body>
</html>
</body>
</html>
<?
}
else // le mot de passe n'est pas bon
{
// On affiche la zone de texte pour rentrer le mot de passe.
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Report</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<p>Veuillez entrer le mot de passe :</p>
<form action="test.php" method="post">
<p>
<input type="text" name="mot_de_passe" /> <input type="submit" value="Valider" />
</p>
</form>
</center>
<p> Ce site est réservé </p>
</body>
</html>
<?
} // Fin du else
// Fin du code :o)
?> et ma page css:
body
{
width: 760px;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background-image: url("bnp.gif"); /* Une petite image de fond pour éviter d'avoir un vieux fond blanc [langue] */
background-repeat: no-repeat;
}
/* Le menu */
#menu
{
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
}
.element_menu
{
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
margin-top:150px;
}
.element_menu li
{
font-size: 0.9 em;
margin-bottom : 10px;
}
.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: #ffb3b3;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #ffb3b3;
color: black;
}
h2
{
text-align: center;
color: rgb(250,0,0);
font-size: 3em;
font-family: "Arial Black", Arial, Verdana, serif;
}
/* Le corps de la page */
#corps
{
margin-left: 180px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-top: 85px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: #B3B3B3;
background-color: rgb(255,255,255); /* Une couleur de fond pour le corps */
}Modifié par Angelo (31 Oct 2005 - 13:54)
