28173 sujets

CSS et mise en forme, CSS3

Problème de marges par défaut

Bonjour,

je ne sais pas où me présenter, mais j'ai un petit soucis avec mon site internet --->> http://fansyl.com.free.fr. Apparement, cela viendrait de mon fichier CSS, et plus particulièrement des margin. Selon le navigateur (Firefox ou Internet Explorer), il y a un décalage vertical dans le corps principal, et dans la partie News. Sous Internet Explorer, l'alignement est le bon, ce n'est que sous Firefox qu'il ne l'est plus.
J'ai cherché plusieurs heures toute seule, mais impossible de résoudre le problème.
Pourriez vous me dire d'où viens le problème?
Voici mon code HTML

<!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>
       <title>www.fansyl.com</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <meta name="keywords"           content="fansyl,infographie,3d,maquetisme,cinéma,compositing,maya" />
	   <meta name="author"             content="deliee fanny,bousselier sylvain" />
	   <meta name="description"        content="Découvrez sur ce site nos portofolios, tutoriaux et projets" />
	   <link href="css/design1.css" rel="stylesheet" type="text/css" media="screen" />
   </head>
   <body>
      <div id="fondblanc"><div id="banniere"><img src="images/iconefansyl.gif" alt="Chargement" class="iconefansyl" />
	                                         <img src="images/banniere.gif" alt="Chargement" class="banniere" />
											 <img src="images/iconebanniere.gif" alt="Chargement" class="iconebanniere" />
				          </div>
                          
                         <div id="menu"><p class="navig">galeries <span class="separation">|</span> cv <span class="separation">|</span> biographies <span class="separation">|</span> projets <span class="separation">|</span> forum <span class="separation">|</span> liens</p>
                         </div>		
                         <div id="orangecote"></div>
						 <div id="corps"><img src="images/print/printmont.gif" alt="Chargement" class="print" />
						                 <img src="images/bienvenu.gif" alt="Chargement" class="bienvenu" />	 
						                 <p class="para1">
										                  Bienvenue sur <span style="color:#cb6709;">www.fan</span><span style="color:#66330b;">syl.com</span>
                                                          Ce site a été entierement codé à la main, il contient le travail
	                                                      personnel et professionnel de <span style="color:#66330b;">Sylvain Bousselier</span> et <span style="color:#cb6709;">Fanny Deliée.</span>
	                                                      Nous travaillons dans l'imagerie de synthese, le maquettisme, le compositing,
	                                                      le webdesign, l'integration (xhtml,multimedia).
	                                                      Chaque partie du site est decoupée en deux sections: celle de <span style="color:#66330b;">Sylvain</span> et de <span style="color:#cb6709;">Fanny.</span><br />
                                                                                                                      														                                        <br />
                                          <img src="images/separation2.gif" alt="Chargement" class="separtext" /><br />  
                                                                                                                 <br />										  
                                                          Ce site se compose d'un menu qui vous permettra de naviguer dans les differentes sections.
	                                                      La partie <span style="color:#cb6709;">galerie</span> vous montrera differents travaux personnels ou professionnels, la partie
	                                                      <span style="color:#cb6709;">CV</span> contient nos Curiculum Vitae avec nos experiences, la partie <span style="color:#cb6709;">biographie</span> contient nos parcours
                                                          respectifs, la partie <span style="color:#cb6709;">projet</span> contient notre projet personnel commun, la partie <span style="color:#cb6709;">forum</span> contient le forum de
                                                          notre site, et la partie <span style="color:#cb6709;">liens</span> contient differents liens sur le graphisme qui nous tiennent à coeur. <br />  
                                                                                                                                                                                                   <br />        		
                                           <img src="images/separation2.gif" alt="Chargement" class="separtext" /><br />  
                                                                                                                  <br />										   
                                            <span style="color:#cb6709;">Fanny</span> et <span style="color:#66330b;">Sylvain</span> vous souhaitent une bonne visite. N'hesitez pas à nous contacter pour
                                                         vos projets ou plus de renseignements sur notre travail en nous envoyant un message
                                                         grace à la partie ci-dessous.

                                            <p class="introformsyl">a</p>
                                            <p class="introformfan">b</p>											
						 </div>
				                      
						 <div id="news"><!--espace mise en page--><br /><h4 class="titrenews">Ev&egrave;nements et news</h4>
						                                      <h5>News du site :</h5>
						                                      <p class="news">Mise en ligne du site le../../....
	                                                            Certaines pages ne sont pas encore en ligne
                         				                      </p> 
															  <img src="images/separation.gif" alt="Chargement" class="separation1" /><br />
															  <h5>News de Sylvain :</h5> 
															  <p class="news">Fin du codage de notre site.<br />
	                                                                          Premieres images de ma galerie.<br />
																			  Ma biographie et mon CV en ligne.<br />
                         				                      </p>
                                                              <img src="images/separation.gif" alt="Chargement" class="separation2" /><br />	
                                                              <h5>News de Fanny :</h5>
                                                              <p class="news">Fin du codage de notre site.<br />
	                                                                          Premieres images de ma galerie.<br />
																			  Ma biographie et mon CV en ligne.<br />
                                                              </p>	    														  
                        </div>						
      </div>
   </body>
</html>


et le code CSS


body{
background-image: url(../images/imagefond.gif);
margin-top: 0px;
}

#fondblanc{
position: relative;
background-color: #ffffff;
width: 800px;
height: 1450px;
margin: auto;
}

#banniere{
margin: auto;
background-color: #ffffff;
width: 780px;
height: 100px;
}

.iconefansyl{
position: absolute;
margin-top: 0px;
margin-left: 0px;
width: 140px;
height: 100px;
}

.banniere{
position: absolute;
margin-left: 150px;
margin-top: 0px;
height: 100px;
width: 440px;
}

.iconebanniere{
position: absolute;
margin-left: 600px;
margin-top: 0px;
height: 100px;
width:130px;
}

#menu{
margin: auto;
background-color: #66330b;
width: 780px;
height: 20px;
}

.navig{
display: inline;
margin-left: 100px;
word-spacing: 35px;
color: #ffffff;
font-size: 13px; 
font-variant: small-caps;
}

.separation{
color: #cb6709;
}

#news{
margin-top: 0px;
margin-left: 10px;
background-image: url(../images/news.gif);
background-repeat: repeat-y;
width: 176px;
height: 1322px;
}

.titrenews{
font-size: 12px;
font-variant: small-caps;
font-weight: normal;
color: #ffffff;
text-align: center;
margin-left: 18px;
border-top: solid #e5b382 2px;
border-bottom: solid #e5b382 2px;
}

h5{
color: #ffffff;
padding-left: 25px;
display: inline;
text-decoration: underline;
}

.news{
padding-top: 10px;
padding-left: 25px;
padding-right:20px;
text-align: left;
font-size: 11px;
font-variant: small-caps;
color: #ffffff;
}

.separation1{
position: absolute;
margin-left: 25px;
margin-top: 5px;
width: 136px;
height: 10px;
}

.separation2{
position: absolute;
margin-left: 25px;
margin-top: 5px;
width: 136px;
height: 10px;
}

#corps{
position: absolute;
left: 186px;
width: 550px;
height: 1320px;
border-bottom: dotted 2px #cb6709;
}

.print{
width: 550px;
height: 200px;
}

.para1{
clear: both;
color: #787878;
font-size: 12px;
padding-left: 90px;
padding-right: 20px;
width: 400px;
margin-top: 0px;
}
.bienvenu{
float: left;
width: 125px;
height: 89px;
}

.separtext{
margin-left: 100px;
width: 141px;
height: 9px;
}

.introformsyl{
position: absolute;
background-color: red;
width: 275px;
top: 600px;
left: 0px;
margin-top: 0px;
}

.introformfan{
position: absolute;
background-color: green;
width: 275px;
top: 600px;
right: 0px;
margin-top: 0px;
}

#orangecote{
position: absolute;
left: 736px;
background-color: #cb6709;
width: 54px;
height: 1322px;
}



Merci d'avance à tous
Modifié par fanny92 (25 Feb 2007 - 13:41)
Bonjour,
La grosse erreur que tu faite est de ne pas spécifier de famille de police
et donc chaque navigateur affiche les texte en fonction de la police
par default défini par le navigateur (la times sous IE qui est déconseillée
pour une lecture écran et une police sans-serif (sans empattement)
pour Firefox).
De plus, pour des raisons d'accesibilité tu ne devrais pas spécifier
tes taille de police en unité absolue (px). En effet cela verouille
la commande affichage > taille du texte de IE.
Utiliser donc les ems ou les %.
Le plus efficace étant de préciser les caractéritiques relatives aux texte
dans le body pour que ce soit appliquer partout:

body{
	background-image: url(imagefon.gif);
	margin-top: 0;
	font: 80%/1.4 Arial, Helvetica, sans-serif;
}


La propriété font est une propriété raccourcis (lire http://pompage.net/pompe/raccourcisCSS/)

La valeur 1.4 est celle de la propriété line-height, 1.4 signifie
que la boît-en-ligne (taille de police + les 2 demi interlignes)
fait 1,4 fois la taille du texte.
Sans renter dans les détails, le fait de ne pas mettre d'unité au 1.4
signifie que cette valeur sera appliqué à tous les sous éléments.

J'ai choisi l'arial mais cette police n'est pas idéale pour une lecture de long
texte. Mieux vaut choisir la verdana ou la Trébuchet qui ont été conçu
pour ça.
Modifié par Hermann (25 Feb 2007 - 15:55)
Hermann a écrit :
La grosse erreur que tu fais est de ne pas spécifier de famille de police et donc chaque navigateur affiche les texte en fonction de la police par default défini par le navigateur

Moui, pas sûr que ça soit une « grosse erreur », mais ça mérite un peu de travail, effectivement.

Le gros problème que je vois, c'est ces deux blocs rouge et vert positionnés en absolu. S'il s'agit de faire un pied de page, celui-ci ne devrait pas être positionné en absolu, sauf effet spécial et maitrisé recherché.

Conseil global : ne pas essayer d'avoir exactement le même rendu au pixel près dans les différents navigateurs. Non seulement ça n'est pas possible, mais en plus quand on y pense ça ne sert strictement à rien.
Par ailleurs, le Comic Sans MS est une fonte affreuse, qui passe particulièrement mal pour les titrages (ça fait de plus très cheap). Remplacer par une autre fonte, par exemple une Georgia ou une Arial. Ou une fonte fantaisie sous la forme d'une image (avec attribut alt correctement renseigné).

Et la formule de bienvenue, seule, s'écrit « Bienvenue », avec un E final (« Je vous souhaite la bienvenue »). On ne l'écrira sans E que dans le cas où le sujet est clairement identifié comme étant masculin : « Soyez le bienvenu ».
Merci pour ces précisions à propos des polices, mais je ne vois pas le rapport avec mon problème de margin. Smiley sweatdrop
fanny92 a écrit :
Merci pour ces précisions à propos des polices, mais je ne vois pas le rapport avec mon problème de margin. Smiley sweatdrop


Le fait est que la Times de IE s'affichait avec une taille de lettre plus réduite
et peut-être aussi une interligne plus réduite pour un même corps.
De plus la Times est assez etroite.
Cela a pour effet de réduire la place occupée par tout le bloc de texte.
D'ou ton décalage vertical.
Modifié par Hermann (25 Feb 2007 - 20:54)
Sujet clos
Aller à