28173 sujets

CSS et mise en forme, CSS3

Mise en page IE et FF

Tout d'abord, bonjour à tous


Je suis en train d'essayer de réaliser une mise en page en me servant de vos tutos.

Dans ma page je veux que chacun des éléments soit espacé des autres de 1px. Ca a l'air facile à dire, mais à faire.....

J'ai réussi à faire ce que je veux sous FF mais....
Je rencontre un souci d'affichage sous IE: l'espace entre les blocs n'est pas respecté partout.

Je vais poster mon code car je crois qu'un visuel vaut mieux qu'un long discours. Si quelqu'un peut me corriger ce défaut (voir en haut entre les 3 div du haut et la colonne de droite sous IE) je serais bien content.

Voici le code:

<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1" />
<title>Thame didactique tout en div</title>
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
p {
margin: 0 0 10px 0;
}
.header {
	height: 150px;
	background-color: #CCCCCC;
	border: 1px solid #000000;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 1px;
	margin-right: 153px;
}
.haut {
	height: 30px;
	background-color: #CCCCCC;
	border: 1px solid #000000;
	margin-top: 1px;
	margin-right: 153px;
	margin-bottom: 0px;
	margin-left: 1px;
}
.conteneur {
	position: absolute;
	width: 90%;
	background-color:#CCCCCC;
	margin-left: 5%;
	border: 1px solid #000000;
	padding: 0px;
}
.centre {
	background-color:#CCCCCC;
	margin-left: 152px;
	margin-right: 153px;
	padding-top: 1px;
	padding-right: 0px;
	padding-bottom: 1px;
	padding-left: 0px;
}
.header_centre {
	background-color:#CCCCCC;
	margin-left: 150px;
	margin-right: 150px;
	height: 150px;
	text-align: center;
}
.gauche {
	float:left;
	width: 150px;
	margin-right: 0px;
	background-color: #CCCCCC;
	margin-top: 0px;
	margin-left: 0px;
	padding: 1px;
}
.securite {
	float:left;
	width: 550px;
	margin-left: 1px;
	border: 1px solid #333333;
}
.logo_gauche {
	float:left;
	width: 150px;
	background-color: #CCCCCC;
	height: 150px;
}
.droite {
	float:right;
	width: 150px;
	margin-right: 0px;
	background-color: #CCCCCC;
	margin-top: 0px;
	margin-left: 0px;
	padding: 1px;
}
.logo_droite {
	float:right;
	width: 150px;
	background-color: #CCCCCC;
	height: 150px;
}
.pied {
	clear:both;
	height: 30px;
	background-color: #FFCC00;
	text-align: center;
	border: 1px solid #333333;
	margin-top: 1px;
	margin-right: 1px;
	margin-bottom: 1px;
	margin-left: 1px;
}
.bienvenue {
	list-style-type: none;
	height: 16px;
	background-color: #CCCCCC;
	border: 1px solid #000000;
	margin-top: 1px;
	margin-right: 153px;
	margin-bottom: 1px;
	margin-left: 1px;
}
.bienvenue_txt {
	margin: 0;
	padding:0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	line-height: 16px;
}
.menuhaut {list-style-type: none;margin: 0;padding:0;}
.menuhaut li {display: inline;}
.menuhaut a {margin: 0 2px;color: #000000;text-decoration: underline;}
.menuhaut a:hover {text-decoration: none;}
  .bloc {
	border: 1px solid #333333;
	margin-bottom: 1px;
	right: 0px;
}
  .bloc_titre {
	background-color: #999999;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
}
  </style>
</head>
<body>
<div class="conteneur"><div class="droite">
        <div class="bloc">
          <div class="bloc_titre">Titre du bloc</div>
          <p>gfdsgdfsgfdsg</p>
          <p>fsdfsdq</p>
          <p>fdsq</p>
          <p>&nbsp;</p>
        </div>
        <div class="bloc">
          <div class="bloc_titre">Titre du bloc</div>
          <p>gfdsgdfsgfdsg</p>
          <p>fsdfsdq</p>
          <p>fdsq</p>
          <p>fds</p>
          <p>fdsq</p>
          <p>fdsf</p>
          <p>sqd</p>
        </div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
  </div>
  <div class="header">      
	  	<div class="logo_gauche">Logo gauche </div>
      	 
     	 <div class="header_centre">Centre du header avec le nom de la soci&eacute;t&eacute; ou du site.</div>
  </div>
      <div class="bienvenue">
        
          <span class="bienvenue_txt">Lundi 39 Mars 2098 - 20h87 - Bienvenue Jacknikolson </span>
        
      </div>
	        <div class="haut">
        <ul class="menuhaut">
          <li>
            <a href="#">Menu 1</a>
          </li>
          <li>
            <a href="#">Menu 2</a>
          </li>
          <li>
            <a href="#">Menu 3</a>
          </li>
          <li>
            <a href="#">Menu 4</a>
          </li>
        </ul>
      </div>
  <div class="gauche">
        <div class="bloc"><div class="bloc_titre">Titre du bloc</div>
          <p>gfdsgdfsgfdsg</p>
          <p>fsdfsdq</p>
          <p>fdsq</p>
          <p>fds</p>
          <p>fdsq</p>
          <p>fdsf</p>
          <p>sqd</p>
        </div>
		<div class="bloc">
		  <div class="bloc_titre">Titre du bloc</div>
		  <p>gfdsgdfsgfdsg</p>
		  <p>fsdfsdq</p>
		  <p>fdsq</p>
		  <p>fds</p>
		  <p>fdsq</p>
		  <p>fdsf</p>
		  <p>sqd</p>
	    </div>
		<div class="bloc">
		  <div class="bloc_titre">Titre du bloc</div>
		  <p>gfdsgdfsgfdsg</p>
		  <p>fsdfsdq</p>
		  <p>fdsq</p>
		  <p>fds</p>
		  <p>fdsq</p>
		  <p>fdsf</p>
		  <p>sqd</p>
    </div>
		</div>
      
      <div class="centre">
        <div class="bloc">
          <div class="bloc_titre">Titre du bloc</div>
          <p>Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu </p>
        </div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp; </p>
  </div>
<div class="pied">pied de page pour les copyrights. </div>
</div>
</body>
</html>


Merci d'avance
Bonsoir et bienvenue,
Je ne sais pas pourquoi l'espace latéral est supèrieur soue IE.
La seule solution est peut-être de créer une feuille de style pour IE
insérée en commentaires conditionnels.
Modifié par Hermann (28 Jun 2006 - 22:30)
Un grand merci pour votre réponse. Elle m'a appris une nouvelle chose que je ne connaissais absolument pas: les commentaires conditionnels.

Malgré cela, l'espace en haut restait le même, j'ai donc essayé de placer mes div autrement et de modifier les attributs css de la colonne 'droite'. Filalement, après plusieurs tentatives je crois que j'ai réussi à trouver la solution.

Par contre je ne saisis pas vraiment la logique de tout ça...pour le moment pour moi ça tient du hasard plus que de la logique...J'avoue que je commence à peine à me servir des div et parfois leur comportement pe dépasse...

Bref, l'essentiel c'est que ça marche à la fin Smiley biggrin

je poste mon nouveau code, si ça peut servir à d'autres..


<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=iso-8859-1" />
<title>Thame didactique tout en div</title>
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
p {
margin: 0 0 10px 0;
}
.header {
	height: 150px;
	background-color: #CCCCCC;
	border: 1px solid #000000;
	margin-top: 1px;
	margin-bottom: 1px;
	margin-left: 1px;
	margin-right: 152px;
}
.haut {
	height: 30px;
	background-color: #CCCCCC;
	border: 1px solid #000000;
	margin-top: 1px;
	margin-right: 152px;
	margin-bottom: 0px;
	margin-left: 1px;
}

.conteneur {
	position: absolute;
	width: 90%;
	background-color:#CCCCCC;
	margin-left: 5%;
	border: 1px solid #000000;
	padding: 0px;
}
.centre {
	background-color:#CCCCCC;
	margin-left: 152px;
	margin-right: 152px;
	padding-top: 1px;
	padding-right: 0px;
	padding-bottom: 1px;
	padding-left: 0px;
}
.header_centre {
	background-color:#CCCCCC;
	margin-left: 150px;
	margin-right: 150px;
	height: 150px;
	text-align: center;
}
.gauche {
	float:left;
	width: 150px;
	margin-right: 0px;
	background-color: #CCCCCC;
	margin-top: 0px;
	margin-left: 0px;
	padding: 1px;
}
.logo_gauche {
	float:left;
	width: 150px;
	background-color: #CCCCCC;
	height: 150px;
}
.droite {
	float:right;
	width: 150px;
	margin-right: 0px;
	background-color: #CCCCCC;
	margin-top: 0px;
	margin-left: 0px;
	padding: 1px;
	position: relative;
	top: -205px;
}
.logo_droite {
	float:right;
	width: 150px;
	background-color: #CCCCCC;
	height: 150px;
}
.pied {
	clear:both;
	height: 30px;
	background-color: #FFCC00;
	text-align: center;
	border: 1px solid #333333;
	margin-top: 0px;
	margin-right: 1px;
	margin-bottom: 1px;
	margin-left: 1px;
}
.bienvenue {
	list-style-type: none;
	height: 16px;
	background-color: #CCCCCC;
	border: 1px solid #000000;
	margin-top: 1px;
	margin-right: 152px;
	margin-bottom: 1px;
	margin-left: 1px;
}
.bienvenue_txt {
	margin: 0;
	padding:0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	line-height: 16px;
}
.menuhaut {list-style-type: none;margin: 0;padding:0;}
.menuhaut li {display: inline;}
.menuhaut a {margin: 0 2px;color: #000000;text-decoration: underline;}
.menuhaut a:hover {text-decoration: none;}
  .bloc {
	border: 1px solid #333333;
	margin-bottom: 1px;
	right: 0px;
}
  .bloc_titre {
	background-color: #999999;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
}
  .essai {
	clear: both;
	margin-right: -2px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #CCCCCC;
	border-left-color: #CCCCCC;
}
</style>

</head>
<body>
<div class="conteneur">

  <div class="header">      
	  	<div class="logo_gauche">Logo gauche </div>
      	 <div class="logo_droite">Logo droite</div> 
     	 <div class="header_centre">Centre du header avec le nom de la soci&eacute;t&eacute; ou du site.</div>
		 
  </div>

  
  
      <div class="bienvenue">
        
          <span class="bienvenue_txt">Lundi 39 Mars 2098 - 20h87 - Bienvenue Jacknikolson </span>
        
      </div>
	        <div class="haut">
        <ul class="menuhaut">
          <li>
            <a href="#">Menu 1</a>
          </li>
          <li>
            <a href="#">Menu 2</a>
          </li>
          <li>
            <a href="#">Menu 3</a>
          </li>
          <li>
            <a href="#">Menu 4</a>
          </li>
        </ul>
      </div>
	    <div class="droite">
        <div class="bloc">
          <div class="bloc_titre">Titre du bloc</div>
          <p>gfdsgdfsgfdsg</p>
          <p>fsdfsdq</p>
          <p>fdsq</p>
          <p>&nbsp;</p>
        </div>
        <div class="bloc">
          <div class="bloc_titre">Titre du bloc</div>
          <p>gfdsgdfsgfdsg</p>
          <p>fsdfsdq</p>
          <p>fdsq</p>
          <p>fds</p>
          <p>fdsq</p>
          <p>fdsf</p>
          <p>sqd</p>
        </div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
  </div>
  <div class="gauche">
        <div class="bloc"><div class="bloc_titre">Titre du bloc</div>
          <p>gfdsgdfsgfdsg</p>
          <p>fsdfsdq</p>
          <p>fdsq</p>
          <p>fds</p>
          <p>fdsq</p>
          <p>fdsf</p>
          <p>sqd</p>
        </div>
		<div class="bloc">
		  <div class="bloc_titre">Titre du bloc</div>
		  <p>gfdsgdfsgfdsg</p>
		  <p>fsdfsdq</p>
		  <p>fdsq</p>
		  <p>fds</p>
		  <p>fdsq</p>
		  <p>fdsf</p>
		  <p>sqd</p>
	    </div>
		<div class="bloc">
		  <div class="bloc_titre">Titre du bloc</div>
		  <p>gfdsgdfsgfdsg</p>
		  <p>fsdfsdq</p>
		  <p>fdsq</p>
		  <p>fds</p>
		  <p>fdsq</p>
		  <p>fdsf</p>
		  <p>sqd</p>
    </div>
  </div>
      
      <div class="centre">
        <div class="bloc">
          <div class="bloc_titre">Titre du bloc</div>
          <p>Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu Contenu </p>
        </div>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp; </p>
  </div>
<div class="pied">pied de page pour les copyrights. </div>
</div>
</body>
</html>


Merci encore.
En fait il s'agit là d'un problème classique de layout dans IE. Dans certains cas, si tu ne spécifies pas de largeur pour tes blocs, IE ne les rend pas correctement (comme par exemple dans ta classe .haut).
Ce concept de layout n'est pas simple à appréhender: Laurent Denis en a fait un excellent cours à cette adresse: http://www.test.blog-and-blues.org/haslayout/index.html
a écrit :
En fait il s'agit là d'un problème classique de layout dans IE. Dans certains cas, si tu ne spécifies pas de largeur pour tes blocs, IE ne les rend pas correctement (comme par exemple dans ta classe .haut).

Honnêtement aprés avoir essayer de doter le div en question du layout
ça n'a rien changé et je doute que le layout resolve tous les problème de décalage.

a écrit :
Par contre je ne saisis pas vraiment la logique de tout ça...pour le moment pour moi ça tient du hasard plus que de la logique...J'avoue que je commence à peine à me servir des div et parfois leur comportement pe dépasse...

Finalement ce genre de différenciation inattendue est la partie
la plus agaçante et la plus chronophage de la mise en page CSS
et à moins de connaître parfaitement tous les cas de figure
on a souvent l'impression qu'on a jamais fini de rencontrer ce genre d'emmerde.


a écrit :
j'ai donc essayé de placer mes div autrement et de modifier les attributs css de la colonne 'droite'.

Oui si la restructuration du code te permet d'éviter une différence d'affichage alors c'est je pense le meilleur solution.
Modifié par Hermann (30 Jun 2006 - 15:16)
Sujet clos
Aller à