28172 sujets

CSS et mise en forme, CSS3

Décalage Firefox

Bonjour à tous, je recontre une petite différence sur une page que je suis en train de creer une marge qui est prise en compte sur firefox et pas sur ie !!


<!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" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Mon site</title>
<style type="text/css">
	html {
		height:100% !important;
		margin-bottom:1px;
	}
	html, body, form, fieldset {
		margin:0;
		padding:0;
	}
	
	body {
		color: #000000;
		background: #FFFFFF;
		font-family: Arial, Helvetica, sans-serif;
		/*line-height: 150%;*/
	}
	
	#header {
		margin: 0;
		height: 200px;
		background: #000;
	}
	
	#logo {
		margin: 35px 0 0 30px;	
	}
	
	#logo h1 {
		position:absolute;
		background: url(images/logo.gif) no-repeat top left scroll;
	
		width: 120px;
		height: 120px;
		
		border: #00FF66;
		text-indent: -50000px; /* Masquage du texte */
	}
	
	#asaspp {
		margin: 0 0 0 20%;
		width: 800px
		font-family: Arial, Helvetica, sans-serif;
		font-size:18px;
		color: #FFFFFF;
		letter-spacing:5px;
	}
	
.asasppred {
		font-family: Arial, Helvetica, sans-serif;
		color: #FF0000;
	}
	
	#main {
		margin: 0;
		background: #000000;
	}
	
	.center {
		text-align: center;
	}
	
	.space {
		letter-spacing:300px;
	}
</style>
</head>

<body>
<div id="header">
		<div id="logo">
			<h1>Mon site</h1>
		</div>
		<div id="asaspp">
		  <p class="center"><span class="asasppred">M</span>on <span class="asasppred">S</span>ite </p>
		  <p class="center">Section</p>
		  <p class="center">Kick-Boxing <span class="space">&nbsp;</span> Karat&eacute; Contact </p>
		</div>
	</div>
	<div id="main">
	
	</div>
</body>
</html>


je vous met les 2 screenshoot

sur firefox
http://farm4.static.flickr.com/3242/3133233034_26bc3ecb80.jpg

et sur ie

http://farm4.static.flickr.com/3266/3133233064_b5e96aa8ca.jpg

Merci par avance
Modifié par Hotfirenet (24 Dec 2008 - 13:18)
Un letter-spacing pour un élément ne contenant qu'un caractère ?

Les deux bouts de textes étant des éléments différents (ici), il serait plus approprié de les mettre dans deux tags séparés (genre deux P flottants avec les margins/paddings qui vont bien).
je pense que pour corriger le bug de marge en haut, remplace ton css #logo par celui-ci:

#logo {
	margin: 0 0 0 30px;
	padding: 35px 0 0 0;
}


ensuite pourqui n'essayes-tu pas de mettre une liste à puces ? car c'est une sorte d'énumération ton texte, et le "Mon Site" est un titre, alors mets un <h2>:

<h2 id="titre"><span>M</span>on <span>S</span>ite</h2>
<ul id="asaspp">
	<li>Kick-Boxing</li>
	<li>Section</li>
	<li>Karaté</li>
	<li>Contact</li>
</ul>


et pour le css:


h2#titre span {
	font-family: Arial, Helvetica, sans-serif;
	color: #FF0000;
}

ul#asaspp {
	list-style: none;
}

ul#asaspp li {
	margin: 0 5px 0 5px;
}


tu remplaceras les margin par la valeur désirée
Bonjour,

1. Le comportement observé avec Firefox est correct. C'est une stricte application du mécanisme (standard) de fusion des marges. Faire une recherche sur ce concept s'il n'est pas connu.

2. Le rendu obtenu dans Internet Explorer est incorrect. La fusion des marges ne se fait pas. C'est à priori une conséquence du HasLayout (voir la FAQ du forum pour ce concept).

3. Internet Explorer 6 et 7 ne comprennent pas display: inline-block appliqué aux éléments de type bloc.
je rencontre un nouveau probleme, entre mes div header main et footer j'ai un decallage, je ne vois pas pourquoi car a chaque id j'ai un margin et padding a 0

http://farm4.static.flickr.com/3075/3147226690_bc9c513dda_b.jpg 



	<div id="header">
		<div id="logo">
			<h1>ASASPP Karaté Contact</h1>
		</div>
		<div id="asaspp">
		  <p class="center">Section</p>
		  <ul class="center">
				<li>Kick-Boxing </li>
				<li>Karaté Contact</li>
			</ul>
		</div> <!-- fin div asaspp -->
	</div> <!-- fin div header -->
	<div id="main">
		<p>dsfsdf</p>
	</div> <!-- fin div main -->
	<div id="footer">
	  <p>dsfsdf</p>
	  <p>dfs</p>
	  <p>fds</p>
	  <p>fsd</p>
	  <p>fds</p>
	</div> <!-- fin div footer -->
</body>
</html>


et la css 


	html {
		height:100% !important;
		margin-bottom:1px;
	}
	html, body, form, fieldset {
		margin:0;
		padding:0;
	}
	
	body {
		color: #000000;
		background: #FFFFFF;
		font-family: Arial, Helvetica, sans-serif;
		line-height: 150%;
	}
	
	#header {
		margin: 0;
		height: 200px;
		background: #000;
	}
	
	#logo {
		margin: 0 0 0 30px;
		padding: 35px 0 0 0;
	}
	
	#logo h1 {
		position:absolute;
		background: url(images/loguo.gif) no-repeat top left scroll;
	
		width: 120px;
		height: 120px;
		
		border: #00FF66;
		text-indent: -50000px; /* Masquage du texte */
	}
	
	#asaspp {
		margin: 0 0 0 20%;
		font-family: Arial, Helvetica, sans-serif;
		font-size:18px;
		color: #FFFFFF;
		letter-spacing:5px;
	}
	
		#asaspp ul {
			list-style: none;
			border: 1px #999966 solid;
		}
		
			#asaspp ul li {
				display: inline;
				/*margin-right: 150px;*/
				border: 1px #999966 solid;
			}	
	
	.asasppred {
			font-family: Arial, Helvetica, sans-serif;
			color: #FF0000;
		}
	
	#main {
		margin: 0;
		color: #FFFFFF;
		background: #000000;
	}
	
	.center {
		text-align: center;
	}
	
	
	#footer {
		margin: 0;
		background: url(images/finMain.jpg) repeat-x top;
	}


Merci par avance
Bonjour,

Lire les réponses, c'est bien. Je te conseille donc de relire ma réponse ci-dessus, et notamment le point numéro 1. Et de faire une recherche sur le concept de fusion des marges, donc, qu'à priori tu ignores. Smiley cligne
Sujet clos
Aller à