css et repeat-x

[gillouxx]

Bonjour,

Je bloque depuis 1 heure sur un problème que je ne comprend pas. J'ai écumer le net sans y trouver de réel réponse à mon problème alors je m'adresse a vous.

Voila le problème:

J'ai une barre tout en haut de ma page qui doit normalement s'élargir si l'utilisateur a une définition supérieur a 1024x768. Cette barre du haut est une grande image dont j ai coupé un mini bout pour la passer en background pour lui permettre de se dupliquer grâce au repeat-x venant de ma feuille css. Mais malheureusement, elle ne se duplique pas.

Petit détail qui a son importance, cette barre est contenu dans un tableau qui a un width de 100%

Voici les élément de code:

Feuille CSS:

.bghorizontal {
	background-image: url("images/barre_haut_02.gif");
	background-repeat: repeat-x;
	width: 13px;
	height: 180px;
}

Feuille HTML:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="86%"><img src="images/barre_haut_01.gif" width="790" height="180"></td>
    <td width="8%"><div class="bghorizontal"> </div></td>
    <td width="6%"><img src="images/barre_haut_03.gif" width="177" height="180"></td>
  </tr>
</table>

Un grand merci d'avance pour votre aide.

[Monique]

Bonjour gillouxx,

Et bienvenue sur le Hub

Je ne comprends pas bien ta démarche...

Tu veux que l'image se répète sur toute la largeur du tableau ?

Alors pourquoi attribuer ton style de fond à une seule cellule ?

Je verrais plutôt

- dans la css

.fond {
	background-image: url("images/barre_haut_02.gif");
	background-repeat: repeat-x;
}

et dans le html

<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr class="fond">
   <td width="86%"><img src="images/barre_haut_01.gif" width="790" height="180"></td>
   <td width="8%"> </td>
   <td width="6%"><img src="images/barre_haut_03.gif" width="177" height="180"></td>
 </tr>
</table>

Est-ce bien l'effet que tu veux ?

[gillouxx]

Non, en faite je veux que les images 1 et 3 restent fixes et que seul l'image 2 augmente de taille au niveau de son width automatiquement. C'est donc pour ca que j'ai pensé a la faire répété par le code css. Pour l'instant j'ai réglé le problème en redimensionnant mon image avec une taille enorme pour être sur que cela marche avec toutes les résolutions, meme les plus poussés. Mais ce n'est que de la bidouille. J'aimerai savoir comment le faire avec du CSS.

Sur le net, plein de gens ont déjà posé la question mais personne ne répond ou ne résoud le problème. J'en viens a me demandé si c'est faisable.

En faite tout marche si tu défini en pixel le tableau et non une taille aléatoire (100%).

D'après ce que j'ai pu lire, avec Mozilla ca marche a peu près mais IE gère mal ce 100%.

Sinon j'ai découvert un autre problème. Grâce à ma bidouille, ma barre du haut s'affiche bien. Mais! Et oui il y a un mais. Sous Firefox et mozilla pas de problème. Par contre sous IE il pousse pas a 100% mais plutot a 96.9% le tableau. Résultat j'ai un petit espace blanc a droite de ma barre. Il n'y a que si je fais un refresh (F5) que ca me repasse en 100%

Une idée ?

Encore merci de votre aide.

[Monique]

Oui... j'avais mal compris

Sans les images, il est difficile d'imaginer l'effet à obtenir et impossible de faire un essai.

Mais un point me turlupine mais je n'ai pas eu le temps de creuser : c'est dans la cellule du milieu que l'image de fond doit se répéter en fonction de la taille du taleau ? Alors pourquoi attribues-tu une largeur fixe dans sa règle de style ?

[Guest meta nando]

J'ai fait des tests en 1280x960 et la répétition du motif se fait belle et bien.

On n'a l'impression que non à cause des conflits entre des largeurs relatives(%) et les largeurs absolues (px). La grande taille d'écran "zoome" le problème.

• Ta DIV centrale est dimensionnée par la cellule centrale. Celle-ci, malgré que tu lui ais fixé une largeur reste aussi fine que ton  . On ne détecte donc pas la répétition.
  
• Tes images latérales ne sont pas répétées. Il arrive un moment où un espace va apparître entre les images.
  A 1280x960 la 1ère cellule est bien plus longue que la 1ère image car tu force la cellule à width="86%". Il y a donc un trou les deux images.
  

Peut-être que tu devrais fixer la 1ère largeur en unités absolues (790px), la même que l'image.

De même pour la 3ème cellule.

Celle qui est au centre pas besoin de lui attribuer une largeur puisqu'elle prend tout le reste (si la table fait 100% en largeur).

Pas besoin de faire des images gigantesques.

Et méfie-toi IE N'a pas le même modèle de dimensions que les standards. Tous auront 100% si, par exemple, tu mets les marges et les paddings à 0 dans TD, TR et TABLE.

Ton tableau est-il une bannière, une zone de titre et de logo? Dans tous les cas il y a moyen de faire plus simple. Ton code est plutôt chargé.