28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous

j'ai une div de 950px avec 2 images pour le top
de chaque coté de cette div j'ai 2 autres images qui doivent se repeter et cela en fonction de l'ecran.
normalement rien qu'avec un width:auto; ca devrait le faire mais là rien ne se passe, mes 2 images de ne repetent pas


<div class="gauche"></div>

       <div style=" margin: 0 auto; width:952px;">
// mes 2 images
</div>

<div class="gauche2"></div>


puis le code CSS



.gauche {
  float:left;
  background-image:url(images/cotegauche.jpg);
background-repeat:repeat-x;

height:117px;
width:22px;

}

.gauche2 {
  float:left;
  background-image:url(images/cotegauche2.jpg);
background-repeat:repeat-x;

height:117px;
width:23px;

}



si quelqu'un pourrait me dire pourquoi ça ne se repete pas (gauche et gauche2)
merci beaucoup
Modifié par oceane751 (23 Sep 2009 - 11:45)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Salut,

On pourrait avoir un exemple en ligne, j'ai recopier ton code dans un pspad chez moi et les bg se répètent.

Quelle largeur fais ton image?
c'est fait Smiley cligne

Laurie-Anne a écrit :
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
le probleme est que je taff en local

mon image fait 117px de width


Shinji a écrit :
Salut,

On pourrait avoir un exemple en ligne, j'ai recopier ton code dans un pspad chez moi et les bg se répètent.

Quelle largeur fais ton image?
meme si je fais ça

div style="width:100%;">
<div class="gauche"></div>
</div>    


avec pour .gauche un width:22px; il ne se passe rien, ca ne se repete pas Smiley decu
Bonjour,

Tu ne te serait pas trompée pour le repeat ?

repeat-x : L'image se répette horizontalement : -
Repeat-y l'image se répette verticalement : |
Modifié par Laurie-Anne (23 Sep 2009 - 13:02)
Salut,

T'as pas un bloc pourvu d'un fond qui se trouve devant et qui masquerait ce fond répété ?

Enfin concrètement je pense que tu gagnerais vraiment du temps pour obtenir réponse, en nous donnant accès à une page en ligne ! La c'est un peu le jeu des 7 erreurs...
Ton bloc fait 22 de large, ton image aussi, c'est normal que çà ne se répète pas ^^. Enfin si çà se répète mais ta div n'est pas assez grande pour que tu le vois...
Modifié par Shinji (23 Sep 2009 - 14:44)
oceane751 a écrit :
non non c'est bien un repeat-x


On repars de la base :
- Une image de 22px de large
- Un bloc de 22px de large

Et tu veux que l'image se répète dans la largeur ?

Soit tu n'as pas mis l'image dans le bon bloc, soit t'es trompée de repeat.
Shinji a écrit :
Ton bloc fait 22 de large, ton image aussi, c'est normal que çà ne se répète pas ^^. Enfin si çà se répète mais ta div n'est pas assez grande pour que tu le vois...

oui
mais moi je veux que ca se repete en fonction de la taille de l'ecran
si je mets ma div à 100px oui ca va se repeter mais se nesera pas beau sur un grand ecran
je veux que ca se repete automatiquement
Ce que je pense que tu n'as pas compris, c'est que ton image attribuée en fond du bloc de 22 pixels de large, ne se répète que dans celui-ci. Donc image de 22px dans bloc de 22px = une seule itération.

Soit tu fais un bloc qui fait 100% de largeur de l'écran, et le bloc se répétera sur toute la largeur de l'écran, quelle que soit la résolution.

Soit tu le mets en background de ton <body>, et il sera répété quoi qu'il en soit sur toute la largeur si celui ci n'a pas de marges supérieures à zéro.
Dans ce cas, je pense qu'il est important pour toi d'apprendre les CSS un peu plus avant.

La partie "Apprendre" du site regorge de tuto et d'articles qui pourront t'aider dans ton apprentissage.
j'ai bien compris!
j'ai pigé qu'on ne peux pas faire repeter quelque chose qui a le meme width
et non je veux pas de 100%
et non pas de bg dans le body

j'ai testé avec les % et ça se repete

Mikachu a écrit :
Ce que je pense que tu n'as pas compris, c'est que ton image attribuée en fond du bloc de 22 pixels de large, ne se répète que dans celui-ci. Donc image de 22px dans bloc de 22px = une seule itération.

Soit tu fais un bloc qui fait 100% de largeur de l'écran, et le bloc se répétera sur toute la largeur de l'écran, quelle que soit la résolution.

Soit tu le mets en background de ton <body>, et il sera répété quoi qu'il en soit sur toute la largeur si celui ci n'a pas de marges supérieures à zéro.
où tas vu que j'ai rien compris?

j'ai opté pour les % et là ca se repete!

Laurie-Anne a écrit :
Dans ce cas, je pense qu'il est important pour toi d'apprendre les CSS un peu plus avant.

La partie "Apprendre" du site regorge de tuto et d'articles qui pourront t'aider dans ton apprentissage.