Rechercher : dans
Par :

CSS/HTML bordure ombrée sur un site

Dernière réponse le 2 nov 2008 à 11:13:11 jeff, le 1 nov 2008 à 18:56:22 
 Signaler ce message aux modérateurs

Bonjour,


J'ai fais quelque recherche pour savoir comment faire pour avoir les bordures de gauche et droite ombrée comme sur CCM par exemple, j'ai donc trouvé qu'il faut utiliser une image pour cela une image.

Mais je ne sais pas comment faire dans le code html/css et s'il faut créer l'ombre soi-même ou si on peut en trouver sur le net.

Merci d'avance pour l'aide.

Configuration: Windows XP
Firefox 3.0.3

Meilleures réponses pour « CSS/HTML bordure ombrée sur un site » dans :
Créer un site beau, dynamique et respectueux des standards VoirVoici une liste de liens qui vous aideront à mieux exploiter les standards (HTML, CSS, DOM...) pour créer des sites plus beaux, plus dynamiques et plus respectueux des standards. A la fin de cette page, il y a également une liste de...
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
[Aspirateur de pages HTML] Comment aspirer un site Web ? VoirHTTrack est un excellent aspirateur, gratuit en licence GNU GPL (libre). HTTrack permet de télécharger un site web d'Internet vers votre disque dur, en construisant récursivement tous les répertoires, récupérant html, images et fichiers du serveur...
Télécharger BorderMaker VoirAjoutez un cadre photo à une image virtuel n'est pas évident. Alors pour faire simple, des programmes sont spécialisés dans cette tâche bien précise. Bordermaker est un outil permettant d'ajouter des bordures, des textes ou un effet de filigrane...
Feuilles de style - CSS VoirPrésentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Le principe des...
CSS - Les couleurs VoirLes couleurs Le standard CSS propose différentes façons de définir des couleurs : par un nom avec la notation hexadécimale avec la notation décimale Appel d'une couleur par son nom Le langage HTML définit des noms pour un nombre limité de...
Tableaux HTML VoirUtilisation de tableaux Il est souvent utile de présenter des informations mieux structurées qu'avec des listes. Les tableaux permettent de les afficher en lignes et en colonnes. Les tableaux sont définis comme étant des suites de lignes. Un...

1

jeff, le 1 nov 2008 à 19:16:09

En fait pour être plus clair je voudrais avoir les bordures gauche et droite de mon site comme celles du site "comment ca marche".

Une idée svp merci

Répondre à jeff

2

benvii, le 1 nov 2008 à 19:29:45

Salut,
Voici ce qui nous intéresse de la source de ccm .
Dans la feuille de style :

#global {
background:#8A8A8A url(http://www.commentcamarche.net/img/sprite_ccm_hrzt.png) repeat-y ;}

Dans body :
<div id="global">Le contenu</div>


Voilà je pense que cela t'intéresse. Benvii

Répondre à benvii

3

jeff, le 1 nov 2008 à 19:40:02

Merci benvii donc il y a une image dans qui sert d'ombre pour la "div id=global" si j'ai compris.

Mais combien dois faire la taille de cette image pour qu'elle apparaisse sur les bordures droite et gauche, je comprends pas tres bien le principe.

Répondre à jeff

4

benvii, le 1 nov 2008 à 19:54:59

En fait l'image est répétée en y. Le fond blanc que tu vois il fait partie de l'image car elle va d'une extrémité à l'autre de la zone (ou boîte) global. La hauteur de l'image peut être de 1px cela ne change rien car elle est répétée le maximum de fois pour recouvrir toute la hauteur de global.
En ce qui concerne la largeur de l'image elle est le même que celle de la boîte css.

Pardon pour l'explication mais, je ne vois pas trop comment expliquer ça. Benvii

Répondre à benvii

5

jeff, le 1 nov 2008 à 20:22:33

Ok j'ai bien compris merci mais les bordures ombrées de la div font partie de l'image aussi alors ?

Répondre à jeff

6

benvii, le 1 nov 2008 à 21:09:44

Oui Benvii

Répondre à benvii

7

I'm_Here, le 1 nov 2008 à 22:49:31

Bonsoir,

Si ceci vous interresse vous pouvez faire une ombre sans image seulement en utilisant 2 block DIV superposés (z-index) l'un sur l'autre en décalant le DIV superieur tout en donnant au DIV inferieur un fond noir

Répondre à I'm_Here

8

 benvii, le 2 nov 2008 à 11:13:11

Si tu veux tu peux regarder ceci : http://gcyrillus.free.fr/trucs_css/ombre-en-css-sans-images.­html
Ou bien ceci un peu plus compliqué : http://www.webtoolkit.info/css-drop-shadow.html Benvii

Répondre à benvii