28172 sujets

CSS et mise en forme, CSS3

[Résolu]Roundies suite...

Salut à tous

Suite à mon précédent post j'avais résolu un problème de mise en oeuvre de roundies.js.
J'avais marqué le post comme [résolu] car cela fonctionnait impec avec IE, mais je viens de m'apercevoir une énorme différence d'affichage avec firefox...
perte de deux conteners principaux (couleur de fond ).

Voici le code de la page entière :

<!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=utf-8" />
<script type="text/javascript" src="js/roundies.js"></script> 

<title>la vie autrement</title>
<style type="text/css"> 
<!-- 
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #ccf;
	margin: 0; /* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes valeurs par défaut des navigateurs */
	padding: 0;
	text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */
	color: #000000;
}
.twoColLiqLtHdr #container { 
	width: 80%;  /* ce paramétrage crée un conteneur dont la largeur est 80 % de celle du navigateur */
	background: #ccf;
	margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
	border: 1px solid #0000CC;
	text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
} 
.twoColLiqLtHdr #header { 
	background: #ccf; 
	padding: 0 10px;  /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent en dessous. Si, au lieu de texte, c'est une image qui est insérée dans l'élément #header, il est conseillé de supprimer le remplissage. */
} 
.twoColLiqLtHdr #header h1 {
	margin: 0; /* la mise à zéro de la marge du dernier élément du div #header permet d'éviter une disparition de la marge (espace inexplicable entre les éléments div). Si l'élément div est entouré d'une bordure, cette précaution n'est pas nécessaire, car la bordure évite également la disparition de la marge */
	padding: 10px 0; /* l'utilisation de remplissage, au lieu d'une marge, permet d'éloigner l'élément des bords de l'élément div */
}

/* Conseils pour sidebar1 :
1. comme nous travaillons en pourcentages, il est préférable de ne pas utiliser de remplissage latéral pour l'encadré. Pour les navigateurs conformes aux standards, il sera ajouté à la largeur, créant ainsi une largeur réelle inconnue. 
2. Pour créer un espace entre le côté de l'élément div et les éléments qu'il contient, attribuez une marge gauche et une marge droite à ces éléments, comme dans la règle ".twoColLiqLtHdr #sidebar1 p".
3. Comme Internet Explorer calcule les largeurs après avoir restitué l'élément parent, des bogues inexpliquées peuvent parfois se produire pour les colonnes calculées en pourcentage. Pour obtenir des résultats plus prévisibles, il est donc préférable de dimensionner les colonnes en pixels.
*/
.twoColLiqLtHdr #sidebar1 {
	float: left; 
	width: 24%; /* cet élément est flottant, il faut donc lui attribuer une largeur */
	background: #ccf; /* la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
	padding: 15px 0; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
}
.twoColLiqLtHdr #sidebar1 h3, .twoColLiqLtHdr #sidebar1 p {
	margin-left: 10px; /* il est conseillé d'attribuer des valeurs pour les marges gauche et droite de chaque élément qui sera placé dans les colonnes latérales */
	margin-right: 10px;
}

/* Conseils pour mainContent :
1. l'espace compris entre les éléments mainContent et sidebar1 est créé avec la marge gauche de l'élément div mainContent.  Quelle que soit la taille du contenu dans l'élément div sidebar1, l'espace des colonnes reste préservé. Vous pouvez supprimer cette marge gauche si vous souhaitez que le texte de l'élément div #mainContent remplisse l'espace de l'élément #sidebar1 lorsque le contenu de ce dernier se termine.
2. pour éviter une perte de l'élément flottant à la résolution minimale prise en charge (800 x 600), la taille des éléments contenus par l'élément div mainContent doit être égale ou inférieure à 430&nbsp;pixels (images comprises).
3. dans le commentaire conditionnel pour Internet Explorer ci-dessous, la propriété zoom permet de donner à l'élément mainContent l'attribut "hasLayout." Cela évite l'apparition de plusieurs bogues spécifiques d'Internet Explorer.
*/
.twoColLiqLtHdr #mainContent {
	background: #ccf;
	margin: 0 20px 0 26%; /* la marge droite peut être indiquée en pourcentage ou en pixels. Elle crée l'espace dans la partie inférieure du côté droit de la page. */
} 
.twoColLiqLtHdr #footer { 
	padding: 0 10px; /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent au-dessus. */
	background:#DDDDDD;
} 
.twoColLiqLtHdr #footer p {
	margin: 0; /* la mise à zéro de la marge du premier élément du pied de page permet d'éviter une possible disparition de la marge (espace entre les éléments div) */
	padding: 10px 0; /* l'utilisation d'un remplissage pour cet élément crée un espace, tout comme une marge l'aurait fait, mais en évitant le risque de disparition de la marge */
}

/* Diverses classes à réutiliser */
.fltrt { /* cette classe permet de rendre flottant le côté droit d'un élément dans la page. L'élément flottant doit précéder l'élément à côté duquel il doit se trouver dans la page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* cette classe permet de rendre flottant le côté gauche d'un élément dans la page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* cette classe doit être placée pour un élément div ou break et doit être l'élément final avant la balise de fin d'un conteneur qui doit contenir entièrement un élément flottant */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
#navigation {
	background: #9999FF;
}
#navigation a {
	/*color: #FF6533;*/
	color: #F0F;
}
#navigation a:hover, #navigation a:focus {
	background: #36f;
}
div.arrondi ,{
	    width: 760px;
        padding: 10px;
        background: #9999FF;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
		
      }
div.arrondi_gauche {
	    width: 240px;
		height:auto;
		margin-left: 15px;
		margin-top:-15px;
        padding: 10px;
        background: #9999FF;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
      }
img {
	    vertical-align: top;
	}
ul {
	list-style-type: none;
	
	}	
--> 
</style><!--[if IE]>
<style type="text/css"> 
/* placer les corrections pour toutes les version d'IE dans ce commentaire conditionnel */
.twoColLiqLtHdr #sidebar1 { padding-top: 30px; }
.twoColLiqLtHdr #mainContent { zoom: 1; padding-top: 15px; }
/* la propriété propriétaire zoom ci-dessus transmet à IE l'attribut hasLayout nécessaire pour éviter plusieurs bogues */
</style>
<![endif]-->
<!--[if lte IE 8]> <script type="text/javascript" src="js/roundies.js"> </script><![endif]-->

</head>

<body class="twoColLiqLtHdr">
<script type="text/javascript">
DD_roundies.addRule('div.arrondi_gauche', '10px');
DD_roundies.addRule('div.arrondi', '10px'); 
</script>

<div id="container"> 
  <div id="header">
    <center>
			<img src="images/bandeau.png" width="1024" height="260" alt="La Vie Autrement" />
			
	</center>
  </div><!-- fin de #header -->
  <br />
  <div id="sidebar1">
    <div class="arrondi_gauche">
      <div id="navigation">
      
    <ul>
			<li><p><a href="#">Accueil</a></p></li>
			<li><p><a href="#">Tests</a></p></li>
			<li><p><a href="#">Tarifs</a></p></li>
			<li><p><a href="#">Stages</a></p></li>
			<li><p><a href="#">Contact</a></p></li>
   </ul>
       </div><!--fin id="navigation"-->
     </div><!-- fin de div arrondi -->
<br /> <br />    
  <div class="arrondi_gauche">     
    <p>la couleur de l'arrière-plan de cet élément div est affichée sur la largeur du contenu uniquement. Si vous préférez une ligne de séparation, placez une bordure sur le côté gauche de l'élément div #mainContent si vous savez qu'il possèdera toujours plus de contenu que l'élément div #sidebar1. </p>
    <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque  eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend  sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
    </div><!-- fin de div arrondi -->
  </div><!-- fin de #sidebar1 -->
  <div id="mainContent">
    <div class="arrondi">
      <p>Vous pouvez refuser de voir la vérité en face : <img src="images/lion.jpg" width="70" height="70" alt="lion" /><br /><br /></p>
      <p>Choisir  de ne rien faire : <img src="images/panda.jpg" width="70" height="70" alt="panda" /><br /><br /></p>
      <p>Ou avoir confiance en l'avenir : <img src="images/belette.jpg" width="70" height="70" alt="belette" /><br /><br /></p>
      <p>Prendre votre envol !! : <img src="images/heron.jpg" width="70" height="70" alt="heron" /><br /><br /></p>
      <p>Et surfer sur la vague du changement : <img src="images/surf.jpg" width="70" height="70" alt="surf"/></p>
      </div><!-- fin de div arrondi -->
 <br />     
    <div class="arrondi">  
    <h2>en-tête de niveau H2 </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,</p>
    </div><!-- fin de div arrondi -->
	<!-- fin de #mainContent --></div>
	<!-- Cet élément de suppression doit suivre immédiatement l'élément div #mainContent afin de forcer l'élément div #container à contenir tous les éléments flottants enfants --><br class="clearfloat" />
  <div id="footer">
    <p>Pied de page</p>
  <!-- fin de #footer --></div>
<!-- fin de #container --></div>
</body>
</html>


Et voici le lien du site en construction

http://www.lavie-autrement.com/

D'avance merci pour vos éclairages

@+

naje83

ps : ne me grondez pas trop fort si c'est une simple bétise mais je ne vois vraiment pas... Smiley confused
Modifié par naje83 (25 Apr 2010 - 20:35)
Bonsoir naje83.

Je pense que c'est à cause de la virgule qui est après le div.arrondi dans ton css qui pose ton souci.

div.arrondi ,{

Un simple oubli.
Bonne suite à toi.
Sujet clos
Aller à