28172 sujets

CSS et mise en forme, CSS3

Ombre portée sur bords tableau

Bonjour,
j'ai un tableau ou j'aimerai avoir une ombre portée, mais pas en css
j'aimerai que cela soit dans ma ligne si dessous
merci

<table width="92%" border="0" " align="center" style="border: solid #f19008 15px " >
Je déplace dans le salon CSS car il s'agit bien d'une question CSS (mise en forme) et pas de HTML (contenu).

Quel est le design exact de ton ombre portée? Est-ce que tu comptes utiliser une image de fond? Est-ce que l'ombre se voit à travers le tableau, au seulement de dehors de celui-ci?
Bonsoir
non pas d'image de fond
cela sera sur la couleur de la bordure du tableau à travers le tableau
Bonjour,

Aurais tu une image pour illustrer ce que tu souhaites faire, parce que là je ne suis pas sûr de bien comprendre... Tu veux une ombre portée mais pas en CSS ni image de fond... Smiley smile
Désolé mais ce n'ai toujours pas clair pour moi, je n'arrive pas à comprendre ce que tu veux faire... Je ne vois aucune ombre portée sur l'image envoyée...
Bien justement, j'aimerai bien en avoir une !!!

ceci n'est pas une image, mais le contour d'un cadre
As-tu essayé d'utiliser la propriété box-shadow?

http://www.alsacreations.com/tuto/lire/910-creer-des-ombrages-ombres-css-box-shadow-text-shadow.html

pour info, que les informations de style soient dans un fichier .css ou directement dans la balise comme
<table width="92%" border="0" " align="center" style="border: solid #f19008 15px " >
c'est exactement la même chose... ce sont des informations de style avec les mêmes propriétés syntaxes, etc. (Ou presque).

essaye donc:
<table width="92%" border="0" " align="center" style="border: solid #f19008 15px; box-shadow: 8px 8px 12px #aaa;" >
Modifié par mamax (28 Dec 2010 - 09:06)
cela ne fonctionne pas ci-joint une partie de mon code il doit y avoir une erreur

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
 
   
 
body,td,th {font-family:"Comic Sans MS", cursive;}

 
a {
	font-family: Tahoma, Geneva, sans-serif;
	color: #F60;
}
a:visited {
	color: #F90;
}
   
</style>
<body>  

</head>
<table width="92%" border="0" " align="center" style="border: solid #f19008 15px;box-shadow: 8px 8px 12px #aaa;" >
  <td height="976" ><table width="100%" border="0" >
    <tr>
      <td width="95%" height="1044" align="center" valign="top"><table width="100%" border="0">
        <tr>
          <td width="46%" height="768" align="left" valign="top"><table width="92%" border="0" " align="center"   " >
            <tr>
              <td height="976"><table width="100%" border="0">
                <tr>
                  <td width="95%" height="1044" align="center" valign="top"><table width="100%" border="0">
                    <tr align="center">

Modifié par dan14 (28 Dec 2010 - 11:29)
heu...

Déjà si ton code HTML était "propre", cela irait beaucoup mieux:
=> La balise </head> est placée après la balise <body>....
=> Aucune balise du tableau n'est fermée...

Tu ferais mieux d'apprendre déjà un peu le (x)HTML avant de vouloir faire des chose plus complexes.

Pour en revenir à ce que tu veux faire, voici un tableau avec une ombre portée:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>test</title>
	<style type="text/css">
		body,td,th {font-family:"Comic Sans MS", cursive;}
		a {font-family: Tahoma, Geneva, sans-serif;color: #F60;}
		a:visited {color: #F90;}
	</style>
</head>


<body>  

<table width="92%" border="0" " align="center" style="border: solid #f19008 2px; moz-box-shadow: 8px 8px 12px #aaa; box-shadow: 8px 8px 12px #aaa; -webkit-box-shadow: 8px 8px 12px #aaa;" >
  <tr>
    <td>tata</td>
    <td>tutu</td>
    <td>toto</td>
  </tr>
  <tr>
    <td>tata</td>
    <td>tutu</td>
    <td>toto</td>
  </tr>
  <tr>
    <td>tata</td>
    <td>tutu</td>
    <td>toto</td>
  </tr>
</table>

</body>

Modifié par mamax (28 Dec 2010 - 11:39)
oui pour le code à force de trifouiller il était pas saint !!!
par contre avec le modèle que tu m'as donné
je ne vois pas d'ombre portée apparaitre avec la dernière version de Firefox
faute de frappe...

Remplace moz-box-shadow par -moz-box-shadow
J'ai oublié le "-" devant la directive.

N'utilisant pas FF, je n'ai pas vu la boulette
Modifié par mamax (28 Dec 2010 - 16:52)
Mamax tu est trop fort cela fonctionne !!!

voici la ligne de code corrigé 
<table width="92%" border="0" " align="center" style="border: solid #f19008 10px; -moz-box-shadow: 8px 8px 12px #aaa; -box-shadow: 8px 8px 12px #aaa; -webkit-box-shadow: 8px 8px 12px #aaa;" >
Finalement apparemment ça ne te pose pas de problème d'utiliser une ombre en CSS...si j'avais compris ton problème plus tôt... Le sujet aurais très vite été résolu ! Smiley cligne
Sujet clos
Aller à