28220 sujets

CSS et mise en forme, CSS3

[Résolu]Positionnement de div, résultat différent sur IE et FF

bonjour !

je n'ai pas le même résultat sur IE et sur FF mais aucun des deux ne correspond à ce que j'aimerais.
ma page vous donnera un aperçu du problème bien + que des longues explications


#centre {
          position:absolute;
          left: 27px;
          height: 554px;
          width: 754px;
          border: 1px dotted white;
          }

#menu_haut {
            height: 19px;
            width: 100%;
            background-image : url("../cadre/menu_haut.gif");
            background-repeat: no-repeat;
            margin-top: .5em;
            }


#menu_gauche {
              background-image: url("../cadre/menu_gauche.gif");
              width: 25px;
              height: 100%;
              float: left;
              background-repeat: no-repeat;
              }

#contenu{
          padding: 1.5em 1.5em 0 1.5em;
          margin-left: 25px;
          height: 100%;
          display: block;
          overflow: auto;
          border: 1px dotted black;
          }

en espérant que vous pourrez m'aider
edit: mon titre n'est pas très explicite.. attends vos propositions
Modifié par p_tite_jo (23 Nov 2005 - 22:32)
salut,
p_tite_jo a écrit :
je n'ai pas le même résultat sur IE et sur FF mais aucun des deux ne correspond à ce que j'aimerais.

il faudrait alors nous dire ce que tu veux...

//edit : oups j'avais pas vu les explications sur la page Smiley sweatdrop
Modifié par yyoupla (22 Nov 2005 - 23:36)
Pour le positionnement de tout ça je te conseille d'englober le tout dans un conteneur que tu placeras en position:relative et auquel tu donneras la taille souhaitée.
ensuite tu pourras positionner les élément à l'intérieur en absolu, en calant tes éléments en pixels.

//edit et pour le centrage, il te suffira de mettre un margin:auto à ton conteneur

A propos du décalage au choix de la taille du texte choisie dans le navigateur, il vient du positionnement en unité "em". En placant tes éléments en pixels, tu n'auras plus de décalage.
Modifié par yyoupla (23 Nov 2005 - 00:23)
Modérateur
bonjour,
ton block contenu, se trouve aggrandie, a cause de tes padding, de plus comme tes padding utilisent "em" comme unité de valeurs, ils se callent sur la taille de ta police, alors en augmentant ta police tu augmente aussi la "grosseur" de tes padding.
Utilise plutot des valeurs de padding en pixel, ce qui permettrat de recalculer les dimension a donner a #contenu.
largeur de #contenu = largeur donné dans le css + les "paddings" droite et gauche. (idem pour la hauteur).



<hors sujet>
Je viens de trouver une autre option/methode a ton probleme de page centrée, sans marge negative., on en revient a une table mais avec une seule case, dans laquelle tu met ton conteneur principal.


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

    <meta http-equiv="content-type"
    content="text/html; charset=ISO-8859-1" />

    <title>Centering the Vertical</title>
<style type="text/css">
/*<![CDATA[*/

html, body, table {
    min-height: 100%;
    width: 100%;
    height: 100%
    }

body {
    margin: 0;
    }

table {
    position: absolute;
    top: 0;
    left: 0;
    }

td {
    height: 100%;
    text-align: center;} /*for stupid MSIE */

p {
    font-size: 1em;
    }

p+p {
    text-indent: 2em;
    }

#container {
    position: relative;
    margin: 0 auto;
    width: 600px;
    border: 1px solid blue;
    text-align: left; /*corrects for IE hack*/
    padding-left: 1em;
    }

/*]]>*/
</style>
  </head>

  <body>
    <table border="0" summary="">
      <tr>
        <td>
          <div id="container">
            <p>This container div is centered both horizontally and
            vertically. It may be used to hold the page.</p>

            <p>A single celled table is used, taking advantage of the
            default "valign='middle'" property of the &lt;td&gt;

            element. I consider this use of &lt;table&gt; for layout
            purposes to be appropriate.</p>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>


Cela vient de la : http://garyblue.port5.com/webdev/vcenter.html

a plus.
merci pour vos réponses. J'ai résolu le problème du redimensionement mais je nage complétement en ce qui concerne mes deux div...

a écrit :
Pour le positionnement de tout ça je te conseille d'englober le tout dans un conteneur que tu placeras en position:relative et auquel tu donneras la taille souhaitée.


l'ennui c'est que j'ai besoin de la position: absolute pour centrer mon cadre au milieu de l'écran. J'ai essayé de mettre différents éléments en relative mais mon #centre disparait. à mon avis, il y' a un bug quelque part dans mon raisonnement...
html  {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
        background-color: #CCCCFF;
        text-align: justify;
        font-size: .8em;
        font-family :  Comic Sans MS,Century Gothic; arial;
        line-height: 200%;
}

body {
        position:absolute;
        top: 50%;
        left: 50%;
        height:608px;
        width:808px;
        margin-top: -304px;
        margin-left: -404px;
        padding:0;
        overflow:hidden;
}
#haut {
        background-image:      url("../cadre/haut.gif");
        width: 100%;
        height: 27px;
        }

#gauche {
           background-image:      url("../cadre/gauche.gif");
           width: 27px;
           height: 581px;
           float: left;
           }
#droite {
           background-image:      url("../cadre/droite.gif");
           width: 27px;
           height: 581px;
           float: right;
           z-index: 1;
           }
#bas {
        position: absolute;
        left: 27px;
        top: 581px;
        background-image : url("../cadre/bas.gif");
        width: 754px;
        height: 27px;
        /*z-index:1; */
        }

#centre {
          position: absolute;
          left: 27px;
          height: 554px;
          width: 754px;
          border: 1px dotted white;   
       }

#contenu{
          margin-left: 25px;
          height: 100%;
          display: block;
          overflow: auto;
          border: 1px dotted black;
          } 

<body>
       <div id="haut">
       </div>
        <div id="gauche">
       </div>
       <div id="droite">
       </div>

       <div id="bas">
       </div>

       <div id="centre">
             <div id="menu_haut">
             <?php include ("menu/menu_haut.php")?>
             </div>

             <div id="menu_gauche">
             <?php include ("menu/menu_gauche.php")?>
             </div>


             <div id="contenu"> 
             </div>


edit: je note encore un bug en ce qui concerne l'agrandissement... #gauche #droite se décale d'un pixel contre le bas...
Modifié par p_tite_jo (23 Nov 2005 - 11:59)
Et en fixant tout comme ceci :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style>
body{
background-color: #CCCCFF;
}
#conteneur{
		position:relative;
        width:808px;
		height:608px;
		margin:auto;
		margin-bottom:10px;
		margin-top:10px;
}
#gauche{
		position:absolute;
		top:27px;
		left:0;
		background:url("cadre/gauche.gif") no-repeat;
        width: 27px;
		height:100%;
}
#haut {
		position:absolute;
		top:0;
		left:0;
		background:url("cadre/haut.gif") no-repeat;
        height: 27px;
		width:100%;
}
#droite{
		position:absolute;
		top:27px;
		right:0;
		background:url("cadre/droite.gif") no-repeat;
        width: 27px;
		height:100%;
}
#bas {
		position:absolute;
		left:27px;
		bottom:0;
		background:url("cadre/bas.gif") no-repeat;
		width:100%;
		height:27px;
}
#centre{
	width:754px;
	height:554px;
	position:absolute;
	top:27px;
	left:27px;
	border:1px dotted #FFFFFF;
}
#menugauche{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:20px;
	margin-top:20px;
}
#menuhaut{
	position:absolute;
	top:0;
	left:0;
	height:20px;
	width:100%;
	margin-left:20px;
}
#contenu{
	position:absolute;
	width:734px;
	height:534px;
	top:20px;
	left:20px;
	border:1px dotted #000000;
	}
</style>
</head>
<body>
<div id="conteneur">
	<div id="gauche"></div>
	<div id="haut"></div>
	<div id="droite"></div>
	<div id="bas"></div>
	<div id="centre">
		<div id="menugauche">a<br />b<br />c</div>
		<div id="menuhaut">1  2 3</div>
		<div id="contenu"></div>
	</div>
</div>
</body>
</html>
YES ! merci.. on approche d'un résultat... on approche seulement pke je note encore un dernier bug.. tjs en agrandissant la police, on observe #bas qui bouge Smiley confus
Sujet clos
Aller à