28221 sujets

CSS et mise en forme, CSS3

Bonjour,
je suis en train d'élaborer un nouveau design pour mon site mais je rencontre un problème : pour mon corps, j'ai utilisé le style background-attachment mais sous FF, il y a un petit beug graphique
Voilà un lien pour vous montrez le problème : http://perso.wanadoo.fr/clubgta/probleme.htm
Comment éviter cela ?$
Merci
salut Smiley smile

une copie d'écran c'est bien joli, mais un lien vers la page avec le code qui te pose souci serait plus simple pour pouvoir t'aider à résoudre ton problème Smiley cligne
dac scuse moi j'avais oublié Smiley confused
voilà le lien : http://perso.wanadoo.fr/clubgta/test.htm
voilà mon code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Bienvenue sur mon site !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="design gris" href="styles.css" /> 
   </head>
   <body>
<div id="en_tete" align="center">
</div>

<div id="barre">
</div>

<div id="menu">

<div class="menu_element">
	<h3>Le jeu</h3>
	<ul>
	  <li>L'histoire</li>
	  <li>Les persos</li>

	  <li>Les véhicules</li>
	  <li>Les armes</li>
	</ul>
</div>

<div class="menu_element">
	<h3>La soluce</h3>
	<ul>
	  <li>Les cartes</li>

	  <li>Les codes</li>
	  <li>Les astuces</li>
	  <li>La soluce complète</li>
	<ul>
</div>

</div>

<div id="corps">
	<h1>Bienvenue sur Clubgta</h1>

   <p>
       Je vous souhaite la bienvenue sur Clubgta !<br />
       Ce site va surtout parler de GTA Vice City : codes, astuces, images,... seront au programme.<br/>
       Une rubrique téléchargements devrait aussi faire son apparition avec des véhicules, des skins,....<br/>
       Si vous avez des questions, vous pourrez les postées sur le forum ou me les envoyées<br/>
       Comme vous aurez put le remarquer ce site est encore en construction mais devrait bientôt être finalisé. 
   </p>

   	

</div>

<div id="pied_de_page">
	<p>Copyright "Clubgta" 2005, tous droits réservés</p>
</div>

	</body>

</html>


Voilà mon code CSS :

body
{
   width: 760px;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 20px;    
   background-color: #CCCCCC;
   border: 2px solid black;
}

#en_tete
{
   width: 670px;
   margin: auto;
   height: 100px;
   background-image: url("images/header.gif");
   background-repeat: no-repeat;
   margin-bottom: 10px;
   margin-top: 10px;
}   

#barre
{
   width:610px;
   height: 49px;
   background-image: url("images/barretest.gif");
   margin-top: 10px;
   margin-bottom: 10px;
   background-repeat: no-repeat;
}

#menu
{
   float: left;
   width: 111px;
   height: 507px;
   background-image: url("images/menu.gif");
   background-repeat: no-repeat;
   border-bottom:2px #000 solid;
   margin-top: 10px;
   margin-bottom: 10px;
}

.menu_element
{
   background-color: #CCCCCC;
   margin-top: 40px;
   margin-left:8px;
   width: 90px;
   border: 1px #000 solid;
}

.menu_element h3
{    
   color: #B3B3B3;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
   text-align: center;
}

.menu_element ul
{
   list-style-type: none;
   padding: 0px;
   padding-left: 20px;
   margin: 0px;
   margin-bottom: 5px;
}

.menu_element a
{
   color: black;
}

.menu_element a:hover
{
   background-color: #B3B3B3;
   color: black;
}

#corps
{
   margin-top: 20px;
   margin-right: 10px;
   margin-left: 140px;
   margin-bottom: 10px;
   padding: 5px;
   background-image: url("images/contenu.gif");
   background-repeat: repeat;
   border: 2px solid black;
   background-attachment: fixed;
}

#corps h1
{
   color: #B3B3B3;
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}

#corps h2
{
   height: 30px;
   background-image: url("images/titre.png");
   background-repeat: no-repeat;
   padding-left: 30px;
   color: #B3B3B3;
   text-align: left;
}

#pied_de_page
{
   padding: 5px;
   text-align: center;
   background-image: url("images/pied_de_page.gif");
   height: 50px;
   clear:both;
}

a
{
   color: black;
}

a:hover
{
   background-color: #B3B3B3;
   color: black;
}


Merci pour ta réponse et encore désolé
Merci pour ton messag,
mais je ne comprends pas pourquoi sa beugue vu que j'utilise le même code que celui qu'ils indiquent dans ton lien.
T'aurais pas une idée ?
Salut,

Je pense que ton pb vient de
   background-image: url("images/contenu.gif");
   background-attachment: fixed;
   background-repeat: repeat;
sur ton "corps"
Dès lors que tu fixes ton background, il ne défilera pas avec la page.
Essaye en enlevant cette propriété.

Je pense que tu veux que ton dégradé reste tel quel même si le contenu défile. Dans ce cas, si la hauteur de ce cadre est fixe, un "repeat-x" me semble suffisant. Je ne sais pas si cela a une quelconque importance ou non par rapport à un "repeat" seul.

Cependant, comme tu n'a pas mis d'overflow, la hauteur de ton calque va augmenté avec son contenu. De fait, il faut alors mettre, effectivement, un "repeat" seul mais comme ton background sera répété en hauteur, tu auras toujours une "séparation" graphique entre 2 répétitions de dégradés.
Modifié par Ricou13 (07 May 2005 - 01:23)
Finality a écrit :
Merci pour ton messag,
mais je ne comprends pas pourquoi sa beugue vu que j'utilise le même code que celui qu'ils indiquent dans ton lien.
T'aurais pas une idée ?


En fait, tu n'utilise pas le même code.

Le premier lien parle du background du body qui peut-être fixe sur tous les navigateurs alors que jusqu'à présent seul IE pouvait le fixer grâce à un bgproperties... quelque chose.

Le deuxième lien se rapproche plus de tes choix sauf que tu n'utilises pas overflow, donc tu ne peux pas voir l'effet présenté.
Modifié par Ricou13 (07 May 2005 - 01:30)
Bonjour,
donc si j'ai bien compris, il faut que je mette un overflow.
Je vais essayer d'indiquer une dimension fixe pour mon corps et mettre un overflow. Je vous dirais si cela marche ou pas.
Merci encore pour vos réponses Smiley biggrin
Rebonjour,
je viens d'essayer l'utilisation d'un overflow et là c'est la catastrophe :
- FF me décale mon bloc vers la droite ce qui a pour effet qu'il dépasse de mon cadre. Mais le beugue persiste .
Que dois-je faire car sa commence à me faire ch**r Smiley lol ?
Merci