28172 sujets

CSS et mise en forme, CSS3

[résolu][css] petit soucis d alignement

bonjour,

j ai un petit soucis d alignement gauche droite sur une page
en sachant que ce soucis n apparait pas sur epiphany ni sur iceweasel mais uniquement sur firefox et internet explorer sous windows.

voici la page incriminée ici

mon code css :


<?
	#########init#########
			
			##color of text##
				$color_text = "#000000";
			##color of background##
				$color_back = "#FFFFFF";
			##color of border##
				$color_border = "#445523";
		
		####color####
?>
<style type="text/css">

	* { padding: 0; margin: 0; }
	img { border: 0 solid <? echo $color_text;?>; }
	a:link {text-decoration: none; color: <? echo $color_text;?>;}
	a:visited {text-decoration: none; color: <? echo $color_text;?>;}
	a:hover {text-decoration: none; color: <? echo $color_border;?>;} 
	
	body {
		font-style: normal;
		font-family: verdana;
		font-size: 100%;
		color: <? echo $color_text;?>;
	}
		
	.header {
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}
	
	.corps {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		background: url(images/repeat.png) repeat-y <? echo $color_back;?>;
		background-position:center;
	}
	.texte {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		width:820px;
	}
		
	.footer {
		margin-bottom: 20px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

</style>


et voici le code de l index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR:html4/loose.dtd">
<html>
	<head>
		<title>Bienvenue Sur ourson.info</title>
		<? require "reglage/init.php"; ?>
		<? require "reglage/meta.php"; ?>
		<? require "reglage/css.php"; ?>
	</head>
	<body>
		<div class="header"><img src="images/header.png"></div>
		<div class="corps">
		<div class="texte">
				je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
				je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
				je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
				je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
				je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
				je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
				je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
				je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
				je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
				je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
		</div>
		<div class="footer"><img src="images/footer.png"></div>
	</body>
</html>


en + le soucis d alignement a lieu a gauche sous firefox et a droite sous ie.

si l un d entre vous aurez une idée.

cordialement

ours_en_pluche
Modifié par ours_en_pluche (05 Mar 2009 - 22:43)
Modérateur
bonjour,

Le plus simple est de faire usage d'un conteneur globale de largeur fixe et en centré qui contient tout les autres .

Le décalage éventuel d'1 pixel du a un arrondi 'different" selon les navigateurs ne sera plus perceptible , car appliqué au conteneur globale .

GC
re

alors oui effectivement, ca marche mieux Smiley smile

le css devient

	.all {
		margin-left: auto;
		margin-right: auto;
		width:900px;
	}	
	.header {
		margin-top: 20px;
		text-align: center;
	}
	
	.corps {
		text-align: center;
		background: url(images/repeat.png) repeat-y <? echo $color_back;?>;
		background-position:center;
	}
	.texte {
		text-align: center;
		width:820px;
		margin-left: auto;
		margin-right: auto;
	}
		
	.footer {
		margin-bottom: 20px;
		text-align: center;
	}


et l index.php

	<body>
		<div class="all">
			<div class="header"><img src="images/header.png"></div>
			<div class="corps">
			<div class="texte">
					je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
					je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
					je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
					je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
					je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
					je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
					je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
					je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
					je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
					je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai je fais un essai<br>
			</div>
			<div class="footer"><img src="images/footer.png"></div>
		</div>
	</body>


le reste non collé n a pas changé Smiley smile

merci gcyrillus Smiley smile

cordialement

ours_en_pluche
Modérateur
Bonjour ours_en_pluche,

À noter que si certains éléments sont uniques dans la page, il est préférable d'utiliser l'attribut id. Par exemple, normalement, il n'y a qu'un header dans une page :

HTML

<div id="header">...</div>


CSS

div#header {
...
}

Modifié par Tony Monast (05 Mar 2009 - 22:46)
re

euh, quel interet de mettre en attribult id au lieu de classes ??

question bete je me doute, merci de l avoir posé :xx

cordialement

ours_en_pluche
Sujet clos
Aller à