28221 sujets

CSS et mise en forme, CSS3

[Résolu] Image en bordure de cadre

Bonjour,

J'y connais pas grand chose en CSS à part en bidouillant à gauche à droite...
Je voudrais créer un cadre avec une ombre sur le haut et sur la droite.
J'ai fait le haut du cadre avec une image mais je sais pas comment faire la bordure droite. Je peux pas mettre une image simple puisque je ne connait pas la hauteur du cadre. Je pensais donc mettre une image de quelques pixels de hauteur répeté plusieur fois en y. Mais dans l'élément border-right je trouve pas de propriété image comme pour le background Smiley decu
Vous pouvez aller voir le haut de mon cadre sur http://l.houdusse.free.fr/blog/index.php?type_url=query_string&theme=bloggie l'image du haut fait la bordure haute du cadre, l'image du bas fait la bordure du bas, il manque la bordure droite et gauche

peut être faut-il que je mette l'image en background??
Merci pour votre aide Smiley biggrin
Modifié le 25 Nov 2004 - 16:48
A priori, il n'y a pas de possibilité de mettre le background comme border...

Par contre, tu peux mettre le bord droit en background de l'element conteneur. Avec un padding-right approprié, ca donne tout comme.

En gros, si tu as par exemple un code du genre:
<div id="content">
     <div class="post">
           <h2>Titre du post</h2>
           <p>Paragraphe #1</p>
            ...
     </div>
     <div class="post">
      ...
</div>


Tu peux assigner une image de quelques pixels de haut qui fait ton bord en background de #content avec un css qui ressemblerait à ceci (pour une ombre de 15px de large):
#content {
     background-image: url(shadow-right.gif);
     background-repeat: repeat-y;
     background-position: top right;
     padding-right: 15px;
}


Ce devrait donner ce que tu voulais. Bien sur, ca veut dire que l'ombre au coin arrondis du haut doit être mise ailleurs qu'en background de #content. En bas de ton header, par exemple, ou via un élèment au tout début de content.

Si je ne me trompe pas il doit y avoit des tuto sur alsacréation qui explique plus en profondeur ce genre de technique (probablement pour faire des cadres fluides avec des bords arrondis, je sais pas).

En esperant avoir déjà été un peu utile...
Modifié le 25 Nov 2004 - 09:45
Top cool Smiley ravi
Je crois que c'est excatement ce qu'il me faut!!
en plus j'ai tout compris Smiley biggrin
J ' essaierai cela ce soir si j'ai le temps parce que là je suis au boulot Smiley langue

Merci
J'ai déjà essayé de mettre en pratique sur mes pages mais ça fait lourd !

<div class="wrap1">
 <div class="wrap2">
  <div class="wrap3">
   <imgsrc="object.gif"alt="The object casting a shadow"/>
  </div>
 </div>
</div>


Et pour entourer un <div id="page"> comme c'est le cas ici, ça prendrait une image de la dimension d'un terrain de football. Bon j'exagère mais...
Sujet clos
Aller à