28172 sujets

CSS et mise en forme, CSS3

[Résolu] Block avec ombrages

Salut à tous,

Je sollicite votre aide sur un problème bien particulier.

Voilà, je vous explique :

- J'ai dans ma page HTML le block suivant:

<div class=content>
<ul>
  <li>Accueil</li>
  <li>Qui Sommes Nous ?</li>
  <li>Références</li>
</ul>

</div>


Le code CSS correspondant est le suivant : 


.content {
  background:#5d381a url(bg-block-content.png) repeat-x bottom;
}


Alors ce que j'ai fait, c'est découper 1 Px en hauteur de l'image suivante, et de le répéter sur l'axe des X, je le positionne en bas et pour le reste de l'espace, je lui ai donné la couleur qui s'étale dans le premier pixel en haut de cette image. Cela me permettra bien entendu d'ajouter des éléments de liste dans mon bloc sans me soucier de la mise en forme.
upload/20490-blockconte.png

Je pense que jusqu'ici c'est clair.

Mon problème se pose au niveau des ombrages (remarquer l'image à gauche et à droite), comment les intégrer et les positionner afin qu'ils puissent s'adapter à la hauteur du bloc ?

Voilà mon interrogation, j'espère que c'est compréhensible.

Merci pour votre précieuse aide.
Modifié par hamidouz (23 Apr 2009 - 13:48)
hamidouz a écrit :
Mon problème se pose au niveau des ombrages (remarquer l'image à gauche et à droite), comment les intégrer et les positionner afin qu'ils puissent s'adapter à la hauteur du bloc ?


Quelles images ?

Une page en ligne serait peut-être plus parlante.
Salut,

Tu dis avoir découpé une bande verticale de 1px sur ton image pour la répéter horizontalement en bas du bloc. En bas de cette bande de 1px tu dois avoir ton ombre, non ? L'ombre du bas doit donc être visible en bas de ton bloc. Donc jusqu'ici, on va considérer que pour cette ombre du bas, c'est ok.

En ce qui concerne l'ombre de droite, il faut que tu la mettes sur un autre conteneur. Imaginons que tu as mis la première bande (dont on vient de parler) sur la div.content ; et bien l'ombre de droite ira sur la ul (seulement l'ombre, 1px de haut, répétée sur la hauteur de la ul).
Modifié par marcv (22 Apr 2009 - 09:41)
Sujet clos
Aller à