problème de mise en page

CSS

Sujet résolu

23 mai 2006 à 19:58:18

Bonjour à tous.
J'ai problème pas très pratique

1°) pourquoi ca : le pied de page se rétréci entre les menus quand le contenu du corp n'est pas assez grand pour faire descendre le pied de page en dessou des menus

2°) Pourquoi le corp ne suis pas son contenu?

Voici le code ca peut aider:

/*
Design d'exemple du Site du Zér0
Réalisé par zaz, venom et mateo21
http://www.siteduzero.com
*/

/* L'en-tête */

#en_tete_milieu
{
height: 100px;
background-color: #626262;
border: 2px solid black;
}

#en_tete_gauche
{
height: 100px;
width: 150px;
background-color: #626262;
float: left;
border: 2px solid black;
}

#en_tete_droit
{
height: 100px;
width: 150px;
background-color: #626262;
float: right;
border: 2px solid black;
}

/*menu haut*/

#menu_haut_milieu
{
height: 50px;
background-color: #626262;
border: 2px solid black;
}

#menu_haut_gauche
{
float: left;
height: 45px;
width: 100px;
background-color: #626262;
border: 2px solid black;
}

#menu_haut_droit
{
float: right;
height: 45px;
width: 100px;
background-color: #626262;
border: 2px solid black;
}

/* Le menu gauche*/

#menu_gauche
{
float: left;
width: 120px;
height: 100%;
margin-bottom: 50px;
background-color: #626262;
background-repeat: repeat-y;
}

/* Le menu droit*/

#menu_droit
{
float: right;
width: 120px;
margin-bottom: 50px;
background-color: #626262;
}

/* Quelques effets sur les menus */

.element_menu
{
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;

border: 2px solid black;

margin-bottom: 20px;
}

.element_menu h3
{
color: #B3B3B3;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

.element_menu ul
{
list-style-image: url("images/puce.png");
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
}

.element_menu a
{
color: #B3B3B3;
}

.element_menu a:hover
{
background-color: #B3B3B3;
color: black;
}

/* Le corps de la page */

#corps
{
margin-left: 120px;
margin-right: 120px;
padding: 5px;

color: #B3B3B3;
background-color: #626262;
background-image: url("images/motif.png");
background-repeat: repeat-x;

border: 2px solid red;
}

#corps h1
{
color: #B3B3B3;
text-align: center;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
height: 30px;

background-image: url("images/titre.png");
background-repeat: no-repeat;

padding-left: 30px;
color: #B3B3B3;
text-align: left;
}

/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

#pied_de_page_droit
{
float: left;
height: 50px;
width: 100px;
background-color: #626262;
border: 2px solid black;

}

#pied_de_page_gauche
{
float: right;
height: 50px;
width: 100px;
background-color: #626262;
border: 2px solid black;
}

#pied_de_page_milieu
{
height: 50px;
width: 100%;
background-color: #626262;
border: 2px solid black;
}

et le code d'une page typique:

Je sais que ca fais beaucoup de code tous ca. merci d'avance si vous trouvez quelque chose et j'espere que vous pourez m'aider...

[EDIT] personne pour me donner un coup de main ???

Great man

23 mai 2006 à 22:25:28

Salut

Pour ton premier souci essaye de donner une taille minimale à ton corps, de sorte que ton pied de page soit toujours placé sous les menus (min-height: ???px; ).

ps: min-height n'influe pas sur la taille finale de ton corps, c'est juste la taille minimale qu'il doit faire, si son contenu est plus grand alors le corps suit :magicien:

edit: essaye déjà ça pour le premier, le second avec ton code je vois pas trop pour l'instant

Slaughter

23 mai 2006 à 23:04:13

j'y ai pensé mais je crois que min-heigh ne marche pas sous IE. Sinon voici le code de l'image ou l'on voit les photos sortir du corp:

<!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>Bienvenue sur mon site !</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="design.css" />
</head>
<body>
<?php
include("design_banniere.php");
include("design_speedbarre.php");
include("design_menugauche.php");
include("design_menudroit.php");
?>


   <div id="corps">

<?php

mysql_connect("localhost", "root", "");
mysql_select_db("finalite");

//$infos = mysql_query('SELECT * FROM commentaires WHERE idnews=' . $_GET['idnews'] . ' ORDER BY id DESC')or die (mysql_error()); /*Ici on liste les commentaires dans l'ordre décroissant où le champ idnews est le même que celui de la variable contenue dans l'adresse de la page*/
$idspot = $_GET['idspot'];
echo "salut";
echo $idspot;
echo "salut1";
$reponse = mysql_query("SELECT * FROM spot WHERE id = '$idspot'")or die (mysql_error());
while ($donnees = mysql_fetch_array($reponse) )
{
?>

<p>
<gras>ville</gras> : <?php echo $donnees['ville']; ?><br />
departement : <?php echo $donnees['dept']; ?> <br />
description : <?php echo $donnees['description']; ?> <br />
<?
$membresID=$donnees['membresID'];
}

if (isset($_SESSION['logged']) && $_SESSION['logged'] == true) // nous vérifions si une session est ouverte
{
if ($membresID==$_SESSION['pseudo'])// et si cette session vient du bon membre
{
$auth=1;
}
else
{
$auth=0;
}
}

//affichage des images
$reponse = mysql_query("SELECT * FROM album WHERE genreID = '$idspot'")or die (mysql_error());
while ($donnees = mysql_fetch_array($reponse) )
{

echo $donnees['id'];
echo '<img src="./PHOTOSMIN/'.$donnees['id'].'.jpg" border="0" /></div> <br>';

if ($auth==1) // nous vérifions si une session est ouverte
{
echo "Vous êtes l'administrateur de ce spot, vous pouvez donc faire des changement: ";
?> <em><a href="photo_modifier.php?photoID=<?php echo $donnees['id']; ?>">modifier la photo</a> <br><?

}

}

?>

<?php

if ($auth==1) // nous vérifions si une session est ouverte
{
echo "Vous êtes l'administrateur de ce spot, vous pouvez donc faire des changement: ";
?> <em><a href="photo_inserer.php?genreID=<?php echo $idspot; ?>&genre=spot">inserer une photo</a> <br><?
?> <em><a href="spot_modifier.php?idspot=<?php echo $idspot; ?>&genre=spot">modification</a> <br><?
}

mysql_close(); // Déconnexion de MySQL

?>

</div>

<?php
include("design_pieddepage.php");
?>

</body>
</html>

Great man

23 mai 2006 à 23:15:26

Sinon ce que tu peux faire (ça fait pas très "pro" mais bon) c'est mettre carrément un height à ton corps avec une taille prédéfinie, IE le reconnait celui-là (ouf !

).
Le problème c'est que la taille du corps change selon tes pages, donc tu peux mettre sur chacune de tes pages HTML:

entre les balises <head></head> (1000px c'est qu'un exemple, tu le change selon la taille de ton corps sur chaque page).
Pour tes pages tu n'auras pas de problèmes puisque le contenu sera écrit, et sur ta page de news tu met une taille qui te convient même si elle est vide.

ps: c'est ce que j'ai fais pour mon site, tu peux faire cette manip' même si tu as des includes y a aucun problème il suffit de s'y retrouver, si tu as un problème pour ces includes dis-le moi

edit:vu ta page PHP il devrait vraiment pas y avoir de problèmes puisque les deux balises <head></head> sont visibles sur la même page (moi une balise est dans un include et l'autre dans un autre :-°

)

Slaughter

23 mai 2006 à 23:21:34

Nan je ne pourrais pas faire ca parce que presque toute mes pages on un contenu dynamique. D'ailleurs pour le deuxième problème, j'ai vu que je contenu ne sortait pas du corp lorsque que je n'avais pas de PHP dans la page (à par les includes). Pas de requete mysql et d'affichage dans un while.
Je cherche toujours...

Great man

23 mai 2006 à 23:25:56

Désolé je vois pas alors

Bon courage et bonne chance pour la suite en tout cas.

Slaughter

23 mai 2006 à 23:53:03

c'est pas grave. Merci de ton aide quand même.

gcyrillus

24 mai 2006 à 0:14:02

bonjour,

je reponds rapidement a ton post,
1) pour le pied de page , et bien ajoute le classique clear:both au cspour qu'il passe systematiquement sous le dernier flottant s'affichant le plus bas dans ta page.

Le corps ne s'allonge pas dans FF sans afficher de scroll bar ?
1 raison probable et encore classique , l'un de tes "include" referme le corps de la page avant "l'heure" ou oublie d'ouvrir une balise, remarquee sur ton screen, les elements passent sous le menu de gauche , ton corps est placé en marge , ils sont donc effectivement a l'exterieur

++

<edit> une balise </div> en trop ici:

echo '<img src="./PHOTOSMIN/'.$donnees['id'].'.jpg" border="0" /></div> <br>';

re ++

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

Slaughter

24 mai 2006 à 0:53:47

Merci beaucoup gcyrillus.
T'es deux réponse sont exactes. Je te donne 20/20. En effet je pensais bien qu'un attribut CSS pouvait régler mon premier problème et pour le second j'ai fais des copier coller de cette erreur un peu partout donc j'avais ce défaut sur toutes les pages avec une requete d'image.
Je peu enfin cloturer se message.
Merci à tous