Assombrir bord de tableau

[snooper]

Bonjour

j'ai trouvé le thème Nautica05 (disponible ici: http://www.opensourcetemplates.org/temp ... 1054723136) dont mon rendu donne: http://www.anata.fr

J'aime bien le fait de foncer le pourtour du tableau. Etant une quiche en programmation, j'ai essayé différentes parties du code sur mes pages pour assombrir le pourtour de tableaux d'un design en cours de construction.

Savez vous quel est le code précis de ce kit qui permet d'assombrir le bord de tableau? Sinon connaissez vous un code générique, ou l'on peut dire s'assombrir ou d'éclaircir, sur n pixels de large, de telle couleur, le bord d'un tableau?

Sinon les 2 fichiers CSS du kit sont:


html.css

/**************************************************************
Visit studio7designs.com for more layouts and downloads for this template!
**************************************************************/

/*********************************************************
HTML Elements
*********************************************************/

html,
body {
height: 100%;
}

body {
margin: 0;
padding: 0;
text-align: center;
background: url(../images/bg/light_body.gif) repeat-y top center;
font: 400 0.7em verdana, arial, sans-serif;
line-height: 170%;

color: #555;
}


/* Headers */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px 0;
padding: 0;
}


h1 {
padding-bottom: 0.2em;

font: 400 1.6em arial, sans-serif;
color: #536C71;
border-bottom: 12px solid #ddd;
}

h2 {
font-size: 1.2em;
color: #586B7A;
}

h3 {
text-transform: uppercase;
font-size: 0.9em;
color: #5D6F73;
}

h4 {
font-size: 0.85em;
}

h5 {
font-size: 0.8em;
}


/* Needed to horizontally pad in a coloured container */
.horzPad h1,
.horzPad h2,
.horzPad h3,
.horzPad h4,
.horzPad h5,
.horzPad p {
padding-left: 5px;
padding-right: 5px;
}


/* Links */
a {
text-decoration: none;
color: #3B5D77;
}

a:hover {
color: #668FA3;
}

a img {
border: 0;
}

a img.border {
border: 1px solid #FC3307;
}

a:hover img.border {
/* Fixes IE bug - IE doesn't correctly apply the style on a:hover so need to mask it */
border: 1px solid #668FA3 !important;
border: 1px solid #FC3307;
}



/* Images */
img.floatRight {
margin: 5px 0 10px 10px;
}

img.floatLeft {
margin: 5px 10px 10px 0;
}



/* Lists */
ul li {
list-style-image: url(../images/bg/submenu1.gif);
}

ol li {
font-weight: bold;
color: #668FA3;
}

ol li span {
font-weight: normal;
color: #444;
}



/* Blockquote */
blockquote {
margin: 0;
padding: 0 20px;
background: #E7F1F3;
border-top: 1px solid #AAD3DB;
border-bottom: 1px solid #AAD3DB;
}



/**************************************************************
Form Elements
**************************************************************/

form {
padding: 0;
margin: 0;
}

/* If you're finding the input elements get pushed down, increase the width */
label {
float: left;
width: 25%;
vertical-align: top;
}

input,
textarea,
select {
padding: 1px;
font: 400 1em verdana, sans-serif;
color: #999;
background: #EEE;
border: 1px solid #CCC;
}

input:focus,
input:hover,
textarea:focus,
textarea:hover,
select:focus,
select:hover {
color: #000;
background: #E7F1F3;
border: 1px solid #888;
}

input.noBorder,
input:focus.noBorder,
input:hover.noBorder {
padding: 0;
border: 0;
}

input.button {
padding: 2px 5px;

font: 400 0.9em verdana, serif;
cursor: pointer;

color: #fff;
background: #FC3307;
border-width: 1px;
border-style: solid;
border-color: #FF7800 #691300 #691300 #FF7800;
}

input.radio {
background: none;
border: 0px;
}

et

layout.css

/**************************************************************
Visit studio7designs.com for more layouts and downloads for this template!
**************************************************************/

/**************************************************************
All page content except for footer
**************************************************************/

#content {
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}



/**************************************************************
Topbar with newsletter form and theme change buttons
**************************************************************/

#topbar {
float: left;
width: 100%;
padding: 0.6em 0;

font-size: 0.9em;
text-transform: uppercase;

color: #CFD9DB;
background: #FFF url(../images/bg/topbar.gif) repeat-x bottom left;
}



/**************************************************************
Top menu and logo
**************************************************************/

#header {
clear: both;
position: relative;
height: 5em;
margin: 0 auto;
background: #48525B url(../images/bg/header.gif) repeat-x bottom left;
border-bottom: 2px solid #48525B;
background-color: #48525B;
}


#header img {
position: absolute;
top: 5%;
left: 10px;
}

#header ul {
margin: 3.5em 1em 0 0 !important;
margin: 3.5em 0.5em 0 0;
padding: 0;
float: right;
}

#header ul li {
display: inline;
list-style: none;
}

#header ul li a {
float: left;
padding: 0 1em;

font: 400 1.1em arial, sans-serif;
letter-spacing: 0.1em;
line-height: 0.8em !important;
line-height: 1em;

color: #cccccc;
border-right: 1px solid #4D5760;
}

#header ul li a.last {
padding-right: 0;
border-right: 0;
}

#header ul li a:hover {
color: #3B5D77;
}



/**************************************************************
Header Image/Flash Movie
**************************************************************/

#headerImg {
margin: 0 auto;
height: 143px;
background: url(../images/bg/header_image.jpg) no-repeat top left;
}





/**************************************************************
Top Block Menu
**************************************************************/

#menu {
margin: 0 auto;
}

#menu ul {
width: 100%;
float: left;
margin: 0;
padding: 0;

text-align: left;
background: #3B5D77 url(../images/bg/menu.gif) repeat-x top left;
}

#menu ul li {
display: inline;
margin: 0;
padding: 0;
list-style: none;
}

#menu ul li a {
float: left;
width: 25%;
height: 4.5em;

font: 400 1.2em arial, sans-serif;
letter-spacing: 0.1em;

color: #fff;

border-top: 7px solid #41637D;
border-bottom: 15px solid #FFF;
}

#menu ul li a span {
display: block;
padding: 2px 7px;
}


#menu ul li a span.desc {
font-size: 0.8em;
color: #8C8D94;
}


#menu ul li a:hover,
#menu ul li a.here {
background: #4A5C6A;
border-top: 7px solid #455660;
}

#menu ul li a:hover span.desc,
#menu ul li a.here span.desc {
color: #FFF;
}


/* Top menu icons */
#menu ul li a span.speaker {
padding-left: 22px;
background: url(../images/icons/speaker.gif) no-repeat 5px 50%;
}

#menu ul li a:hover span.speaker {
background: url(../images/icons/speaker_on.gif) no-repeat 5px 50%;
}

#menu ul li a span.bubble {
padding-left: 24px;
background: url(../images/icons/bubble.gif) no-repeat 4px 4px;
}

#menu ul li a:hover span.bubble {
background: url(../images/icons/bubble_on.gif) no-repeat 4px 4px;
}

#menu ul li a span.heart {
padding-left: 20px;
background: url(../images/icons/heart.gif) no-repeat 3px 50%;
}

#menu ul li a:hover span.heart {
background: url(../images/icons/heart_on.gif) no-repeat 3px 50%;
}


#menu ul li a span.dollar {
padding-left: 20px;
background: url(../images/icons/dollar.gif) no-repeat 4px 50%;
}

#menu ul li a:hover span.dollar {
background: url(../images/icons/dollar_on.gif) no-repeat 4px 50%;
}




/**************************************************************
Page Content
**************************************************************/

#page {
clear: both;
float: left;
width: 100%;
margin-bottom: 6em;
text-align: left;
}

#columns {
margin: 0 auto;
}


/* Column widths */
.width {
width: 776px;
}

.widthPad {
width: 746px;
}

.width25 {
width: 24%;
}

.width50 {
width: 48%;
}

.width73 {
width: 73%;
}

.width75 {
width: 75%;
}

.width100 {
width: 100%;
}


/**************************************************************
Footer
**************************************************************/


#footer {
clear: both;
float: left;
width: 100%;
height: 5em;
margin-top: -5em;
}

#footer #bg {
position: relative;
height: 5em;
margin: 0 auto;
background: #49525B url(../images/bg/header.gif) repeat-x bottom left;
}

#footer #bg ul {
float: right;
margin: 3em 1em 0 0 !important;
margin: 3em 0.5em 0 0;
padding: 0;
}

#footer #bg ul li {
display: inline;
list-style: none;
}

#footer #bg ul li a {
float: left;
padding: 0 1em;

font: 400 1em arial, sans-serif;
letter-spacing: 0.1em;
line-height: 0.8em !important;
line-height: 1em;

color: #4D5760;
border-right: 1px solid #4D5760;
}

#footer #bg ul li a.last {
padding-right: 0;
border-right: 0;
}

#footer #bg ul li a:hover {
color: #6C0;
}

#footer #bg img {
position: absolute;
top: 6%;
left: 10px;
}



/**************************************************************
Icons specific to the colour theme
**************************************************************/

a.lightTheme img,
a.darkTheme img,
a.submitButton img {
width: 20px;
height: 20px;
vertical-align: middle;
}

a.lightTheme img {
background: url(../images/icons/light_light_theme.gif) no-repeat center center;
}

a.darkTheme img {
background: url(../images/icons/light_dark_theme.gif) no-repeat center center;
}

a.submitButton img {
background: url(../images/icons/light_submit.gif) no-repeat center center;
}


/**************************************************************
Posts
**************************************************************/

.post {
float: left;
width: 100% !important;
width: 99%;
position: relative;

margin-bottom: 1.5em;

border-bottom: 1px solid #CCCCCC;
}

.post .date {
position: absolute;
top: 0;
left: 5px;

width: 2.3em;
text-align: right;
}

.post .date .month {
text-transform: uppercase;
font: 700 1.0em arial, sans-serif;
color: #888;
}

.post .date .day {
display: block;
margin-top: -5px;
font: 700 2.1em arial, sans-serif;
color: #888;
}

.post .title {
display: block;
padding: 0 0 5px 0;

font-size: 1.2em;
font-weight: bold;
color: #586B7A;
}

.post p {
margin: 0 0 0 3.5em;
padding: 0 0 1em 1.2em;
border-left: 1px solid #CCCCCC;
}



/**************************************************************
Thumbnail Lists
**************************************************************/

ul.thumbs,
ul.thumbs li {
margin: 0;
padding: 0;
}

ul.thumbs li {
margin: 0 0 15px 0 !important;
margin: 0;
padding: 0px;
list-style: none;
}

a.thumb img {

border: 5px solid #ccc;
}

a:hover.thumb img {
background: #8EB4C6;
border: 5px solid #668FA3;
}

a:hover.thumb {
background: none;
}

a.thumb span {
display: block;
margin-top: -5px !important;
margin-top: -2px;
}



/**************************************************************
Submenu Styles
**************************************************************/

ul.submenu1,
ul.submenu2 {
margin: 0 0 20px 0;
padding: 0;
}

ul.submenu1 li,
ul.submenu2 li{
margin: 0;
padding: 0;
list-style: none;
list-style-image: url(foo.gif); /* because IE is balls */
}

ul.submenu1 li a,
ul.submenu2 li a {
display: block;
height: auto !important;

/* Start hide from IE Mac \*/
height: 1%;
/* End hide from IE Mac */

padding: 1px 5px 1px 20px;
}

ul.submenu1 li a {
background: url(../images/bg/submenu1.gif) no-repeat 5px 50%;
}

ul.submenu1 a:hover {
color: #426F85;
background: #B3C6C4 url(../images/bg/submenu1.gif) no-repeat 5px 50%;
}

ul.submenu2 li a {
color: #426F85;
background: url(../images/bg/submenu2.gif) no-repeat 3px 50%;
}

ul.submenu2 a:hover {
color: #426F85;
background: #B3C6C4 url(../images/bg/submenu2.gif) no-repeat 3px 50%;
}






/**************************************************************
Generic Display
**************************************************************/


.block {
display: block;
}

.clear {
clear: both;
}

.marginRight {
margin-right: 15px;
}

.paddingLeft {
padding-left: 5px;
}

.paddingRight {
padding-right: 5px;
}

.floatLeft {
float: left;
}

.floatRight {
float: right;
}

.alignLeft {
text-align: left;
}

.alignRight {
text-align: right;
}

.alignTop {
vertical-align: top;
}

.alignMiddle {
vertical-align: middle;
}

.alignBottom {
vertical-align: bottom;
}

.lightBlueBg {
background-color: #EAF2F5;
}

.dark {
color: #353E47;
}

très cordialement
WRIment vôtre

[Darkcity]

Assombrir un bord de tableau ?

Ta question est un peu étrange... tu veux parler de la couleur de fond, ou de la couleur des bordures ?

Pour la couleur de fond, suffit d'ajouter un background-color au td de ton choix, et pour les bordures, un border-color ou border-right-color par exemple...

[Leonick]

je trouve que le fond du header et des boutons ne va pas trop avec le reste du graphisme.

[snooper]

Par "assombrir le pourtour de tableaux" je voulais dire, si vous allez sur http://www.anata.fr/, a l'exterieur des tableaux, une eptite zone tout autour du tableauu est plus foncée que le reste de la page.

Ok Leonick tu trouve quees boutons font un peu HS par rapport au reste de la page???

Bonne année 2008 à toutes et à tous

[Darkcity]

je trouve que le fond du header et des boutons ne va pas trop avec le reste du graphisme.

D'un côté on a du design pro, simple mais soigné, de l'autre on a des éléments un peu amateurs (bleu ciel, police d'écriture...) je rejoins donc leonick la dessus.

Utilise du texte autant que tu le peux, niveau accessibilité, design et référencement c'est le mieux à faire.

[pene-r]

Yop

Je suis pas sûr d'avoir compris de quoi tu parles . Je ne vois pas dans le code source de tableau au sens html du terme !!

Si c'est le bord de la page, c'est fait comme ça:
http://www.anata.fr/images/bg/light_body.gif

Code: Tout sélectionner

body {
margin: 0;
padding: 0;
text-align: center;
background: url(../images/bg/light_body.gif) repeat-y top center;
font: 400 0.7em verdana, arial, sans-serif;
line-height: 170%;
color: #555;
}

background: url(../images/bg/light_body.gif) repeat-y top center;

[Marie-Aude]

Ce n'est pas du code, c'est dans les images.
Sinon pour des bordures, tu peux aussi utiliser la propriété offset

[snooper]

pene-r

Merci infinment. jamais je n'aurai pensé a une telle solution.

Marie-Aude

Merci, je vais aller voir.

bonne soirée à toutes et à tous