28173 sujets

CSS et mise en forme, CSS3

[Resolu] Decalage du corps de la page sur Mozilla et Opera

Bonjour,

J'ai commence un site web pour mon club, un petit truc en html tout ce qu'il y a de plus simple mais j'ai un probleme d'affichage sur Opera et Mozilla...

En fait dès que je veux implanter la fonction overflow sur le corps de ma page le decalage se créé.

Exemple de page:

ici

sinon mon html :

a écrit :
<!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>Atlantes Côte Basque</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="css/index.css" />
</head>

<body>

<!-- En-tête -->

<div id="en_tete">

</div>

<!-- Menus -->

<div id="menu_gauche">
<div class="element_menu">
<h3><img class="actualites" src="images/actualites.gif" width="206" height="40" alt="Actualites"></h3>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="resultats.html">Resultats</a></li>
<li><a href="resumes.html">Resumés</a></li>
</ul>
</div>

<div class="element_menu">
<h3><img class="equipes" src="images/equipes.gif" width="206" height="40" alt="Equipes"></h3>
<ul>
<li><a href="seniors.html">Senior</a></li>
<li><a href="juniors.html">Junior</a></li>
<li><a href="staff.html">Staff</a></li>
</ul>
</div>

<div class="element_menu">
<h3><img class="entrainements" src="images/entrainements.gif" width="206" height="40" alt="Entrainements"></h3>
<ul>
<li><a href="page4.html">Infrastructures</a></li>
<li><a href="page5.html">Equipements</a></li>
</ul>
</div>
</div>

<div id="menu_droit">
<div class="element_menu">
<h3><img class="medias" src="images/medias.gif" width="206" height="40" alt="Medias"></h3>
<ul>
<li><a href="page4.html">Forum</a></li>
<li><a href="page5.html">Photos</a></li>
<li><a href="page6.html">Videos</a></li>
</ul>
</div>

<div class="element_menu">
<h3><img class="recrutement" src="images/recrutement.gif" width="206" height="40" alt="Recrutement"></h3>
</div>

</div>

<!-- Le corps -->

<div id="corps">
<br><br>

<h3><!--nom-->-</h3>

<table width="550" border="0" cellpadding="0" cellspacing="0">

<tr><td width="150"><img src="/images/.jpg" alt="Photo" border="1" width="100" height="141" hspace="20" vspace="10"></td>

<td><table width="350" border="0" cellspacing="0" cellpadding="2">

<tr><td width="150" height="1"></td><td width="200" height="1" ></td></tr>

<tr><td class="gras">Surnom</td><td>-</td></tr>
<tr><td class="gras">Date de naissance</td><td>-</td></tr>
<tr><td class="gras">Lieu de naissance</td><td>-</td></tr>
<tr><td class="gras">Signe astrologique</td><td>-</td></tr>
<tr><td class="gras">Taille</td><td>-</td></tr>
<tr><td class="gras">Poids</td><td>-</td></tr>
<tr><td class="gras">Poste</td><td>-</td></tr>
<tr><td class="gras">Numero</td><td>-</td></tr>

</table> </td></tr>

<table width="550" border="0" cellpadding="0" cellspacing="10">
<tr><td ><h4>Antécédents Football Americain :</h4>
-</td></tr>

<tr><td><h4>Antécédents Sportif :</h4>
-</td></tr>

<tr><td><h4>Caractere :</h4>
-</td></tr>

<tr><td><h4>Equipe Préféré :</h4>
-</td></tr>

<tr><td><h4>Joueur Préféré :</h4>
-</td></tr>

<tr><td><h4>Citation Préféré :</h4>
-</td></tr>

<tr><td><h4>Plat Préféré :</h4>
-</td></tr>

<tr><td><h4>Boisson Préféré :</h4>
-</td></tr>

</table>
</table>

</div>
</div>

<!-- Le pied de page -->

<div id="pied_de_page">
<img classe="copyright" src="images/copyright.gif" width="550" height="40" alt="Designed by Sam_Kassor & Powered by T_Master">
</div>

</body>
</html>


et le css :

a écrit :

body
{
width: 1258px;
height: 900px;
margin: auto;
margin-top: 75px;
margin-bottom: 20px;
background-image: url("images/fondatlantes.jpg");
background-repeat: no-repeat;
background-position: 164px 0px;
background-color:#253044;
}

/* En-tête */

#en_tete
{
width: 1200px;
height: 100px;
background-image: ;
background-repeat: no-repeat;
margin-bottom: 10px;
}


/* Menus */

#menu_gauche
{
float: left;
margin-left: 25px;
width: 210px;
}

#menu_droit
{
float: right;
margin-right: 25px;
width: 210px;
}

/* Quelques effets sur les menus */
.element_menu
{
background-color: #626262;
border: 2px solid black;
padding-bottom: 5px;
margin-bottom: 5px;
}

.element_menu img
{
color: #B3B3B3;
font-family: Dalek, Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
background-image: url("images/titremenu.jpg");
}

.element_menu ul
{
list-style-image: url("images/ballon.gif");
background-color: #626262;
background-position: bottom;
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
margin-left: 25px;
}

.element_menu a
{
color: #B3B3B3;
}

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

/* Le corps */

#corps

{
width: 550px;
Height: 680px;

margin-left: 345px;
margin-bottom: 70px;
padding: 5px;

color: #B3B3B3;
background-color: #626262;
border: 2px solid black;
overflow: auto;
}

.newsHaut
{
background-image: url("images/news_haut.jpg");
background-color: #626262;
}

.logo_news
{
margin-left: 2px;
margin-right: 2px;
margin-top: 2px;
margin-bottom: 2px;
}

.tabled3 a
{
color: #B3B3B3;
}

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

.tableseniors a
{
color: #B3B3B3;
}

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

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

#corps h2
{
height: 30px;
background-image: url("images/.jpg");
background-repeat: no-repeat;
padding-left: 30px;
color: #B3B3B3;
text-align: left;
}

#corps h4
{
margin: 0px;
padding: 0px;
}


/* Le pied de page */

#pied_de_page
{
float: bottom;
margin-left: 120px;
margin-right: 120px;
padding: 5px;

text-align: center;

font-family: Porn Star Academy, tahoma;
font-size: small;
color: #626262;
}


Ca fait une semaine que je cherche une solution, j'ai meme enlevé l'option overflow et tout allait bien mais maintenant je dois implanter des pages qui sont plus grande que mon corps donc j'en ai absolument besoin. Smiley ohwell

Si quelqu'un voit mon probleme je suis preneur.^^

Merci
Modifié par T_Master (16 Mar 2007 - 10:00)
Salut
ouille aïe aïe aïe...
Je serais toi, je commencerais par un petit nettoyage de printemps avant de chercher plus loin.
- ta DTD (le truc en haut de page Smiley smile ) est XHTML, perso, vu le mode d'écriture que tu utilises, j'opterais pour

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


ensuite, balai, serpillères and co (bon, d'accord, je viens de finir l'intégration d'un site pour un gros des accessoires de ménage, ça marque...) et reprends ton code du début à la fin, ferme tes balises img, br et consors, enlève ces horreurs du code

<table width="550" border="1" cellspacing="0" cellpadding="0">


et colle tout ça bien propre dans ta feuille de style (dans laquelle, fais plaisir à Mozilla que ça offusque, mets tes déclarations en minuscules

#corps

{
width: 550px;
[b]Height: 680px;[/b]

margin-left: 345px;
margin-bottom: 70px;
padding: 5px;

color: #B3B3B3;
background-color: #626262;
border: 2px solid black;
overflow: auto;
}
)
Là, pour le moment, tu rencontres un problème classique, une DTD et une écriture pas vraiment compatibles avec une interprétation propre et conmmunes aux divers navigateurs.

Une fois tout ça bien propre, il se pourrait bien que ça suffise à résoudre le problème, sinon, et bé, help à nouveau Smiley smile
Have swing
oki jregarde tout ca, mais le truc bizarre c'est que c'est avec l'attribut overflow que j'ai ce decalage Smiley ohwell .

Si je l'enleve ma page est niquel niveau alignement.

Enfin j'epure le code et je vois le resultat. <^_^>
Bon j'ai passe ma soiré a essayer de simplifier le code mais rien a faire... Smiley fache

J'ai donc essaye de creer une simple page avec 2 menus fixes un corps fixe et un overflow, resultat meme une page aussi simple ca marche pas... Smiley bawling

ici

Le html associe (je suis passe en transitional comme tu me l'a conseille):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   
   <head>
       <title>Atlantes Côte Basque</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	    <link rel="stylesheet" media="screen" type="text/css" title="Design" href="css/index.css" />
   </head>

   <body>

   <!-- L'en-tête -->
      
   <!-- Les menus -->
       <div id="menu_gauche">        
           <div class="element_menu">
               <h3>menu gauche</h3>
           </div>
       </div>		   
	   
       <div id="menu_droit">  	   
	        <div class="element_menu">
               <h3>menu droit</h3>
           </div>
	   </div>

       <!-- Le corps -->
       <div id="corps">
  corps
		 </div>

       <!-- Le pied de page -->
  
   </body>
</html>


et le css :

body
{
   width: 1258px;
   height: 900px;
   background-color:#253044;   
}

/* En-tête */


/* Menus */
#menu_gauche
{
   float: left;
   width: 210px;
}
#menu_droit
{
   float: right;
   width: 210px;
}

/* Quelques effets sur les menus */
.element_menu
{
   background-color: #626262;
   border: 2px solid black;
 }

/* Le corps  */
#corps

{
   width: 550px;
   height: 680px;
   margin-left: 345px;
   background-color: #626262;
   border: 2px solid black;
   overflow: auto;
}

/* Le pied de page */


Le probleme ca reste toujours l'option overflow des que je l'enleve la page revient a ce qu'elle doit etre, le probleme c'est que j'ai des pages assez longues et ou j'en ai absolument besoin. Smiley ohwell

Quelqu'un saurait me dire pourquoi ca marche pas sous mozilla?
Salut,
je suppose que tu vas changer ça mais ton contenu de 1258px, c'est meuh meuh dans le genre Smiley smile sous IE (parce que, besoin ou pas il réserve l'espace nécessaire à un potentiel scroll) j'ai un scroll horizontal même en 1280...

Sinon, j'ai peut-être un élément de réponse. Dans la mesure où tu gères tes menus avec des float left et right, pour avoir ton conteneur central centré, la solution universelle consiste à mettre dans le body

body {
text-align: center; /*ça, c'est pour IE*/
...
}

et pour ton corps, non pas une margin-left mais, ce que tu veux en hauteur et auto en largeur genre

#corps {
margin: auto;
}

ou
#corps {
margin: xpx auto;
}

et là, ça le centre dans mozilla et compatibles
Have swing
iop, merci virtual c'etait bien un probleme de margin-left sur le corps, je suis passe en margin auto et du coup tout est nikel Smiley ravi .
Sujet clos
Aller à