28173 sujets

CSS et mise en forme, CSS3

Différence Firefox 2 - IE 7 ?

Bonjour à tous!

J'essaie de faire un modèle de mise en page simple mais j'ai déjà des différences alors que je n'ai que 20 lignes Smiley decu 


<!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>Test</title>
<style type="text/css">
<!--
body {
	font-family: "Trebuchet MS", Verdana;
	margin: 1em;
	padding: 0em;
	font-size: 0.9em;
	background-color: #D9D8D5;
	text-align: center;
	color: #FFFFFF;
}
.bloc_page {
	background-color: #ADAAA5;
	text-align: justify;
	width: 40em;
	padding: 1em;
}
-->
</style>
</head>

<body>
<div class="bloc_page">
  <p>It is a long established fact that a reader will be distracted by the  readable content of a page when looking at its layout. The point of  using Lorem Ipsum is that it has a more-or-less normal distribution of  letters, as opposed to using 'Content here, content here', making it  look like readable English. Many desktop publishing packages and web  page editors now use Lorem Ipsum as their default model text, and a  search for 'lorem ipsum' will uncover many web sites still in their  infancy. Various versions have evolved over the years, sometimes by  accident, sometimes on purpose (injected humour and the like).</p>
</div>
</body>
</html>


Résultat : Sur IE7, le bloc page est bien centré, sur firefox, il reste à gauche?

Une idée?
Modifié par benka (02 Feb 2007 - 09:29)
Salut.

La propriété "text-align" ne s'applique normalement pas aux éléments de type bloc comme les div, mais aux éléments de type inline (liens, texte, images ...)

Pour centrer un bloc dans la page, il faut utiliser les marges automatiques, comme indiqué dans la FAQ: 
.bloc_page {
   margin: 0 auto ;
   width: 40em ;
   ...
   }


Sinon, pour des éléments uniques dans la page, on utilisera des id plutôt que des classes: 
<div id="bloc_page"> ... </div>


.bloc_page {
	background-color: #ADAAA5;
	text-align: justify;
	width: 40em;
	padding: 1em;
	[b]margin: 0 auto;[/b] <----- ici
}


Et comme ça ?

Edit : grillé, trop rapide pour moi Smiley cligne
Modifié par zzzazzz (10 Jan 2007 - 14:35)
Merci pour ta réponse Smiley smile

Promis, je vais fouiller la FAQ. en revanche, j'utilise dreamweaver 8 pour créer ce modèle. Son éditeur de CSS permet-il de créer un tel style sans intervenir dans le texte brut?
benka a écrit :
Promis, je vais fouiller la FAQ. en revanche, j'utilise dreamweaver 8 pour créer ce modèle. Son éditeur de CSS permet-il de créer un tel style sans intervenir dans le texte brut?

Franchement, je trouve le texte brut beaucoup plus simple que l'éditeur CSS de Dreamweaver... mais bon.

Il te faut des marges latérales calculées automatiquement. Tu devrais avoir la possibilité, avec l'éditeur CSS de Dreamweaver, de rentrer « auto » pour la marge de gauche et « auto » pour la marge de droite (soit en le tapant directement, soit avec un menu déroulant).
Je sais pas, moi ça me semble logique... Smiley sweatdrop


benka a écrit :
margin: 0 auto;

Donc auto, c'est pour centrer, et le 0 ?

margin: 0 auto est l'équivalent de margin: 0 auto 0 auto;, qui peut se décomposer ainsi :
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

L'important, c'est d'avoir les marges automatiques. Après, si tu veux rajouter des marges en haut et en bas, libre à toi de le faire.
Modifié par mpop (10 Jan 2007 - 15:02)
Sujet clos
Aller à