problème de mise en page

div, float left etc

11 juillet 2006 à 20:21:18

Bonjour à tous,

Tout dabort, voici le lien de la page test :

http://bmxperience.jdhosts.net/test.html

Ensuite le problème:

Je rencontre beaucoup de difficultés sur le corp (centre) de la page.
Le problème le plus visible sur la page se situe au niveau de la pagination. Celui-ci se situe en dessous du menu de gauche au lieu de se situer sous les photos.

J'ai toujours eu des difficultés avec le centre. Je ne peux pas faire des float sans que ca n'ai une influence sur les menus. Je ne comprends pas comment des caracteristiques à l'intérieur d'un div puissent avoir des influences sur d'autres div.

Le problème se situe peut être au niveau de la mise en page de base. Je vous donne donc le code d'une page vide:

<!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>


<div id="en_tete_milieu">
<div id="en_tete_droit"></div>
<div id="en_tete_gauche"></div>
</div> 

<div id="menu_haut_milieu">
<div id="menu_haut_droit"></div>

<div id="menu_haut_gauche"></div>
<a href="index.php">Accueil</a>

<a href="photo_afficher.php">Photos </a>
<a href="spot_carte.php">Spot</a>
</div> 

<div id="menu_gauche">

<div class="element_menu">
<h3>Galerie</h3>
<ul>

<li><a href="photo_afficher.php?cat=dirt">Dirt</a></li>
<li><a href="photo_afficher.php?cat=street">Street</a></li>
<li><a href="photo_afficher.php?cat=park">Park</a></li>
<li><a href="photo_afficher.php?cat=flat">Flat</a></li>
<li><a href="photo_afficher.php?cat=race">Race</a></li>
<li><a href="photo_afficher.php?cat=matos">Matos</a></li>

<li><a href="photo_afficher.php?cat=rider">Rider</a></li>
<br />
<li><a href="photo_inserer.php?genre=album">inserer une photo</a></li>
</ul>
</div>

<div class="element_menu">
<h3>spot</h3>
<ul>

<li><a href="spot_carte.php">carte</a></li>
<li><a href="spot_inserer.php">inserer spot</a></li>
</ul>
</div>

<div class="element_menu">
<h3>divers</h3>
<ul>
<li><a href="membres_liste.php">1 membre(s)</a></li>

</ul>
</div>

<div class="element_menu">
<h3>livre d'or</h3>
<ul>
<p>admin a écrit :<br />salut tout le monde<br [...] tout le monde><br />
</p>
<li><a href="livreor.php">livre d'or</a></li>

</ul>
</div>

</div> 

<div id="menu_droit">

<div class="element_menu">
<h3>Mon compte</h3>
<ul>

<form method="post" action="membres_connexion2.php">

<label>Pseudo : <input type="text" name="pseudo" size="12"/></label>
<label>Mot de passe : <input type="password" name="mot_passe" size="12"/></label>
<input type="submit" name="connexion" value="Se connecter" />
</form>
<li><a href="membres_mdp_oublier1.php">mdp oublier</a></li>
<li><a href="membres_inscription.php">Inscription</a></li>

</ul>

</div>
</div> 

<div id="corps">



</div>



<div id="pied_de_page_milieu">

<div id="pied_de_page_droit"> </div>
<div id="pied_de_page_gauche"></div>
<a href="admin/admin_accueil.php">Administration</a><br>
Page exécutée en 0.006327 s.<br>Il y a actuellement 1 visiteurs connectés sur mon site dont 0 membres! <br>Copyright "Tout pourri Corporation" 2005, tous droits réservés
</div>
</body>
</html>

Si quelqu'un voit d'où viennent tous mes problèmes.

Merci d'avance.

Galéop

12 juillet 2006 à 1:36:58

Ce problème n'est présent que sous IE, na ?

Slaughter

12 juillet 2006 à 2:00:29

Sur firefox il y a juste la pagination qui descend trop et sous IE il y a un gros blanc en plus. En fait je viens de me rendre compte de pas mal de défaut sous IE.

Slaughter

12 juillet 2006 à 16:30:49

UP! Une p'tite aide me serait d'une grande utilité

Galéop

13 juillet 2006 à 11:39:35

En ce cas là, je ne vois pas très bien où est ton problème sous FF.. :euh:

Sinon, tu peux mettre ton CSS ?

Slaughter

13 juillet 2006 à 14:10:24

Oui le problème n'est pas flagrant. C'est le "page : 1 2 " qui se trouve au niveau du bas du menu de gauche, ce qui fait un gros espace entre les photos et la pagination, au lien d'être juste en dessous des photos.

[EDIT]
Je viens de me rendre compte que le problème ne se voit pas si les 3 photos ne sont pas sur la même ligne, je travaille en 1280. Je vais enlever une photo pour que le problème se voit sur les résolutions plus petites.

Voici le code CSS:

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

body a
{
color: #B3B3B3;
}

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

/* L'en-tête */

#en_tete_milieu
{
height: 200px;
background-color: #DE8787;
border: 2px solid black;

background-repeat:no-repeat;
background-position:center;
}

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

}

#en_tete_centre
{
margin : auto;
height : 200px;
width: 840px;
margin : auto;
border: 2px solid black;
background-image:url("images/design/fond.jpg");
background-repeat : no-repeat;
background-position:center;
}

#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;
text-align:center;
}

#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: 0px;
background-color: #626262;
background-repeat: repeat-y;
}

/* Le menu droit*/

#menu_droit
{
float: right;
width: 120px;
margin-bottom: 0px;
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: 15px;
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: 100px;
width: 100%;
margin-left: 0px;
margin-right: 0px;
background-color: #626262;
border: 2px solid black;
text-align:center;
clear : both;
}

/*NEWS*/

.bloc_news
{
border : 1px solid #2c485c;
background-color : white;
margin-bottom : 15px;
margin-left : auto;
margin-right : auto;
/*width : 100%;*/
}

.auteur_date_commentaires
{
font-size : 80%;
font-family : Arial, 'Times New Roman', Times, serif;
padding-left : 35px;
padding-right : 8px;
padding-bottom : 4px;
padding-top : 4px;
}

.commentaires_news
{
color : #666666;
float : right;
}

.contenu_news
{
padding-top : 20px;
margin : 8px;
}

h3.news
{
display : block;
text-decoration : none;
font-variant : normal;
font-size : 1.3em;
margin : 0;
text-indent : 20px;
padding : 3px;
font-family : Arial, 'Times New Roman', Times, serif;
color : #2c485c;
/*background : url('../../images/designs/1/menu/header.png') repeat-x;*/
}

/*COMMENTAIRES*/

.bloc_commentaires
{
border : 1px solid #2c485c;
background-color : white;
margin-bottom : 15px;
margin-left : auto;
margin-right : auto;
}

.info_commentaires
{
font-size : 80%;
font-family : Arial, 'Times New Roman', Times, serif;
padding-left : 10px;
padding-right : 8px;
padding-bottom : 4px;
padding-top : 4px;
}

/*SPOT*/

.bloc_spot
{
border : 1px solid #2c485c;
background-color : white;
margin-bottom : 15px;
margin-left : auto;
margin-right : auto;

}

.bloc_spot h3
{
display : block;
text-decoration : none;
font-variant : normal;
font-size : 1.3em;
margin : 0;
text-indent : 20px;
padding : 3px;
font-family : Arial, 'Times New Roman', Times, serif;
color : #2c485c;
}

.bloc_spot img
{
border : 1px solid red;
float : right;
margin : 10px;
}

.bloc_spot_afficher
{
border : 1px solid #2c485c;
background-color : white;
margin-bottom : 15px;
margin-left : auto;
margin-right : auto;
}

.bloc_spot_afficher img
{
border : 1px solid red;
float : right;
margin : 10px;
}

#corps form
{
width: 300px;
background-color : white;
margin-left : auto;
margin-right : auto;
text-align:center;
padding : 5px;

}

.centre
{
text-align:center;
}

.photo_min
{
height: 250px;
width: 250px;
background-color : white;
padding : 5px;
margin : 10px;
float : left;
}
.photo_min img
{
display : block;
margin : auto;
text-align:center;
border : 1px solid red;
}

.both
{
clear : both;
}

.conteneur
{
margin-left : auto;
margin-right : auto;
border: 2px solid red;
}