La Ferme du web - Les forums

Venez baraguiner avec la communauté !

Vous n'êtes pas identifié.

#1 24/06/2009 21:31:01

WhiteEmperor
Membre
Date d'inscription: 24/06/2009
Messages: 3

Probleme CSS background-repeat:y on firefox

Bonjour

avant tout permettez moi de vous dire que votre site et vraiment formidable et que j'ai tellement appris grâce a lui et je vous en remercie vivement smile
alors j'ai suivi le tuto du création du désign et je suis arrivé a le faire finalement mais le hic c'est que ça marche sur IE mais sur Firefox ça marche pas aussi bien je vous envoi mon site  pour ça mais je crois que Firefox prend pas en compte mon background-repeat:y je suis pas aussi fort en css ...
voila le lien  http://www.sendspace.com/file/1u6rnq
Trés Cordialement.
Max!

Hors ligne

 

24/06/2009 21:31:01

Botte De Foin Publicitaire


#2 24/06/2009 22:29:39

HammHetfield
Membre
Date d'inscription: 08/06/2009
Messages: 35

Re: Probleme CSS background-repeat:y on firefox

Ah c'est pas pratique le lien de téléchargement, ça serait plus simple et plus rapide que tu copies colles ton code ici !

Et sinon, si tu as mis background-repeat:y, c'est normal que ça marche pas, mets background-repeat : repeat-y; et là ça devrait fonctionner, sinon mets nous le code wink

Hors ligne

 

#3 25/06/2009 16:23:39

WhiteEmperor
Membre
Date d'inscription: 24/06/2009
Messages: 3

Re: Probleme CSS background-repeat:y on firefox

ok je suis dessolé pour le lien je pensai que ça allait rendre les choses plus faciles smile
bon voila mon code main.css

Code:

#header
{
background-image:url(../images/ban.jpg);
width:900px;
height: 159px;
background-repeat:no-repeat;
}
body
{
background-color:#FFFFFF;
}
#menu 
{   
background-image: url("../images/menu.jpg");   
width: 866px;  
height: 58px; 
text-align: center; 
font-size: 16px; 
padding-top: 20px; 
} 

 
#footer 
{ 
background-image: url("../images/footer.jpg");  
width: 866px; 
height: 20px; 
text-align:center;
padding-top:24px;
color:#FFFFFF;
}
#conteneur
{
margin:auto;
width: 900px;

}
#menu a 
{
color:#000000;
text-decoration: none;
margin-left: 20px;
margin-right:20px;
}
#menu a:hover
{
text-decoration:underline;
}

#corps
{
   background-image: url("../images/boumenu.jpg");
   background-repeat: repeat-y;
   width: 814px;
   padding-left: 26px;
   padding-right: 26px;
}

ainsi que mon index.html

Code:

<!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" />
<link rel="stylesheet" media="screen" type="text/css" href="styles/main.css" />
<title>Untitled Document</title>
</head>

<body>
<div id="conteneur">           
<div id="header"></div>          
<div id="menu"><a href='index.html'>Accueil</a> <a href='index.html'>News</a> <a href='index.html'>Guestbook</a> 
</div>   
        
<div id="corps">
  <p>Blablablablalbalblablalbal Blablablablalbalblablalbal 
                      Blablablablalbalblablalbal Blablablablalbalblablalbal 
                      Blablablablalbalblablalbal Blablablablalbalblablalbal 
                      Blablablablalbalblablalbal Blablablablalbalblablalbal 
                      Blablablablalbalblablalbal Blablablablalbalblablalbal 
                      Blablablablalbalblablalbal Blablablablalbalblablalbal 
                      Blablablablalbalblablalbal Blablablablalbalblablalbal 
                      Blablablablalbalblablalbal Blablablablalbalblablalbal 
                      Blablablablalbalblablalbal Blablablablalbalblablssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
                      sssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
                      sssssssssssssssssssssssss
                       sssssssssssssssssssssssssssssssssssssssss hshs hs hs hs hssh ssssssssssssss</p>
  <p>sssssss</p>
  <p>sss</p>
  <p>sss</p>
  <p>&nbsp; </p>
</div>            
<div id="footer"></div>        
</div> 

</body>
</html>

en fait ça marche sur IE trés bien mais sur firefox  ça marche pas ça laisse de l'espace vide je sais pas trop d'où ça vient smile

Dernière modification par WhiteEmperor (25/06/2009 16:25:33)

Hors ligne

 

#4 25/06/2009 23:02:27

HammHetfield
Membre
Date d'inscription: 08/06/2009
Messages: 35

Re: Probleme CSS background-repeat:y on firefox

En effet, c'est plutot bizarre, je vais regarder ça plus attentivement demain et je te dirais ce que j'en pense...

Hors ligne

 

#5 26/06/2009 10:48:56

HammHetfield
Membre
Date d'inscription: 08/06/2009
Messages: 35

Re: Probleme CSS background-repeat:y on firefox

Okay alors en fait c'était pas si compliqué que ça, j'ai juste pas faire gaffe hier soir bref, voilà le fichier css qu'il faut mettre :

Code:

#header
{
background-image:url(../images/ban.jpg);
width:900px;
height: 159px;
background-repeat:no-repeat;
}
body
{
background-color:#FFFFFF;
}
#menu 
{   
background-image: url("../images/menu.jpg"); 
width: 866px;  
height: 58px; 
text-align: center; 
font-size: 16px; 
padding-top: 20px; 
} 

 
#footer 
{ 
background-image: url("../images/footer.jpg");

width: 866px; 
height: 20px; 
text-align:center;
padding-top:24px;
color:#FFFFFF;
}
#conteneur
{
margin:auto;
width: 900px;

}
#menu a 
{
color:#000000;
text-decoration: none;
margin-left: 20px;
margin-right:20px;
}
#menu a:hover
{
text-decoration:underline;
}

#corps
{
   background-image: url("../images/boumenu.jpg");
   background-repeat:repeat-y;
   width: 814px;
   padding-left: 26px;
   padding-right: 26px;
}

#corps p{
margin-bottom:0px;
margin-top:0px;
padding-bottom:8px;
padding-top:8px;

Alors, je t'explique un peu ce que j'ai changé...

Déjà, dans #corps, tu avais mis height:15px, donc le bloc était limité à 15px de hauteur, IE ne suivant pas cette instruction, il a agrandi la div suivant le contenu, mais firefox lui a bloqué le fond de la div et a affiché le contenu par dessus, sans sa demander si ça dépassait ou pas... Voilà pourquoi ça ne bloquait pas sou sIE et ça bloquait sous FF.

Une fois cette ligne enlevée, déjà la div #corps s'adaptait à son contenu. Ensuite, les problèmes sous FF était qu'il y avait un espace au dessus et en dessous du contenu de la div. Ce problème venait des marges, j'ai donc ajouté dans le css ceci :

Code:

#corps p {
margin-top:0px;
margin-bottom:0px;
}

Grâce à ça, j'ai supprimé les marges hautes et basses de tous les paragraphes, ce qui a résolu partiellement le problème, du coup plus de marge, seulement les paragraphes n'étaient plus éspacés les uns entre les autres... Donc pour résoudre ce nouveau problème, j'ai ajouté des marges intérieurs aux paragraphes en ajoutant :

Code:

#corps p {
margin-top:0px;
margin-bottom:0px;
padding-top:8px;
padding-bottom:8px;
}

En fait j'ai enlevé les marges exterieur pour les remplacer par des marges intérieures, ce qui a résolu ton problème. Et voilà !

Dernière modification par HammHetfield (26/06/2009 10:54:26)

Hors ligne

 

#6 08/07/2009 21:21:29

WhiteEmperor
Membre
Date d'inscription: 24/06/2009
Messages: 3

Re: Probleme CSS background-repeat:y on firefox

Merci beaucoup HammHetfield pour ton assistance c'est parce que j'ai suivi le tuto aveuglement que j'ai eu ce problème mais bon au début faut bien trébucher merci beaucoup encore et désolé pour le retard j'ai beaucoup d'examens ces derniers temps.
Très cordialement.

Hors ligne

 

#7 09/07/2009 09:56:58

HammHetfield
Membre
Date d'inscription: 08/06/2009
Messages: 35

Re: Probleme CSS background-repeat:y on firefox

C'est normal de faire des erreurs... Je pense que mes explications sont assez claires, si ce n'est pas le cas, dis moi ce que tu ne comprends pas.

Bon courage pour la suite smile

Hors ligne

 

Pied de page des forums

Powered by FluxBB
© Copyright 2008-2009 - LaFermeduWeb.net