Background repeat dans une cellule

Fermé
wombatkio Messages postés 3 Date d'inscription dimanche 27 mars 2011 Statut Membre Dernière intervention 27 mars 2011 - 27 mars 2011 à 14:13
 sammedve - 27 mars 2011 à 16:31
Bonjour,

Je souhaite réaliser un menu avec un coté arrondi. Ne sachant pas si le texte du menu sera sur une, deux ou trois ligne je souhaite automatiser la mise en forme.
Pour cela j'ai crée une image pour l'arrondi du haut, une image pour l'arrondi du bas et une image pour le milieu avec une hauter de 1px, le but étant qu'elle se répete pour remplir l'espace.

Après avoir bataillé j'ai réussi avec ca :
<tr height="15">
          <td></td>
          <td align="right"></td>
        </tr>
		<tr height="9" bgcolor="#934248">
          <td width="13" height="9" bgcolor="#934248" valign="top"><img src="images/arrondi_menu_haut.png" width="13" height="9"></td>
          <td rowspan="3" bgcolor="#934248"><a class="principal" href="<?php echo $racine_lien; ?>index.php"><?php echo TEXT_MENU_ACCUEIL ?></a>
		</td>
        </tr> 
		<tr>
		  <td background="images/arrondi_menu_milieu.png" style="background-repeat:"><img src="images/arrondi_menu_milieu.png"></td>
		  </tr>


Le souci : le repeat fonctionne sous Firefox mais pas sous IE 8 et Chrome 10

Quelqu'un connaitrait-il la cause de ce souci ?



3 réponses

sammedve Messages postés 14 Date d'inscription samedi 7 novembre 2009 Statut Membre Dernière intervention 28 mars 2011
27 mars 2011 à 14:28
Salut,
essai de mettre background repeat: et la valeur que tu veux ( y, x, ou repeat); au lieu de background-repeat: rien du tout

Parce que là tu a mis
 style =" background-repeat
: et rien meme pas un point virgule.
0
wombatkio Messages postés 3 Date d'inscription dimanche 27 mars 2011 Statut Membre Dernière intervention 27 mars 2011
27 mars 2011 à 14:53
Oups, j'avais recopié le mauvais bloc de code.

En fait j'avais bien mis repeat. J'ai essayé également avec repeat-y mais rien n'y fait.

Voici le vrai code

<tr height="9" bgcolor="#934248">
          <td width="13" height="9" bgcolor="#934248" valign="top"><img src="images/arrondi_menu_haut.png" width="13" height="9"></td>
          <td rowspan="3"  bgcolor="#934248"><a class="principal" href="<?php echo $racine_lien; ?>commerce-vetements-equitable.php"><?php echo TEXT_MENU_DEMARCHE ?></a></td>
        </tr> 
		<tr height="auto">
		  <td background="images/arrondi_menu_milieu.png" style="background-repeat: repeat-y;"><img src="images/arrondi_menu_milieu.png"></td>
		  </tr>
		 <tr height="9" bgcolor="#934248">
		  <td height="9" bgcolor="#934248" valign="bottom"><img src="images/arrondi_menu_bas.png" width="13" height="9"></td>
		  </tr>


Chose que j'ai oublié de préciser. Si je ne met rien dans la cellule où je veux ma répétition, même firefox ne fonctionne pas. C'est pourquoi j'ai mis mon image une fois

<td background="images/arrondi_menu_milieu.png" style="background-repeat: repeat-y;"><img src="images/arrondi_menu_milieu.png"></td>
0
sammedve Messages postés 14 Date d'inscription samedi 7 novembre 2009 Statut Membre Dernière intervention 28 mars 2011
27 mars 2011 à 14:59
essaies de lui spécifier une taille fixe (width /height) et de mettre ton background en position left top (ou alors en px ou %)
0
wombatkio Messages postés 3 Date d'inscription dimanche 27 mars 2011 Statut Membre Dernière intervention 27 mars 2011
27 mars 2011 à 15:43
Le souci c'est que je ne peux pas lui donner une taille car justement je ne connais pas la taille (TEXT_MENU_DEMARCHE peux etre sur une ou plusieurs lignes selon la langue)
0
ok mais en revanche du peu lui donner une width fixe, car dès que ton texte aura atteint la taille il ira à la ligne.
Sinon un autre conseil c'est de mettre ton css dans un fichier à part, ca sera vraiment plus clair.

tu aura comme ca dans ton css :


td
{
background-image: url(arrondi....)
background position: ....
background-repeat: repeat y ou x selon ce que tu veux (x étant ordonnée, y abscisse pour rappel)
width: 150px (par exemple)
.....
....
..
..

}
0
Je sais pas si on peut faire ca mais test de mettre plusieurs image en background

fait dans ton fichier css :
background-image: url (bordure gauche), url(milieu) , url(bordure droite) ;
background-repeat: no-repeat, repeat .. , no-repeat;
bacground-poistion:left top, x y , right top;
0