Assombrir bord de tableau

snooper · 31 Décembre 2007

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;
}
Cliquez pour agrandir...

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;
}
Cliquez pour agrandir...

très cordialement
WRIment vôtre

Darkcity · 31 Décembre 2007

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... :wink:

Leonick · 31 Décembre 2007

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

snooper · 1 Janvier 2008

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 · 1 Janvier 2008

Leonick a dit:

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

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 · 1 Janvier 2008

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:
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 · 1 Janvier 2008

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

snooper · 1 Janvier 2008

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

Similar Threads - Assombrir bord tableau	Forum	Date
Problème d'affichage des campagnes Google Ads dans un tableau de bord Data Studio	AdWords	26 Avril 2022
Absence d'affichage de données dans tableau de bord Analytics	Google Analytics	25 Juin 2021
digigirlbordeaux.Fr	Demandes d'avis et de conseils sur vos sites	4 Mai 2021
Aide SEO pour mon site investirbordeaux.fr	Demandes d'avis et de conseils sur vos sites	3 Mai 2021
Filtre widget tableau de bord dans Google Analytics	Google Analytics	18 Février 2020
Nouvel affichage Google : Sujets abordés par l'éditeur	Référencement Google	4 Janvier 2020
Récapitulatif La Clinique de La Borde m'a sauvé la vie	Le café de WebRankInfo	5 Septembre 2019
Monter sur la requete reprogrammation ethanol bordeaux	Demandes d'avis et de conseils sur vos sites	26 Novembre 2018
créer un site qui regroupe les tableaux de bords personnalisés GA de mes sites web	Google Analytics	13 Juin 2018
voir mon tableau de bord personnalisé google analytics dans l'appli mobile	Google Analytics	7 Juin 2018
Message aux parisiens et bordelais qui sortent	Demandes d'avis et de conseils sur vos sites	14 Mars 2018
Export tableau de bord Google Analytics	Google Analytics	2 Mai 2017
Tableau de bord Analytics : quels KPI indispensables pour un site B2B	Google Analytics	4 Avril 2017
Un tableau de bord avec la variation du trafic SEO de plusieurs comptes	Google Analytics	25 Janvier 2017
Tableau de bord et annotation	Google Analytics	9 Décembre 2014
google analytics: tous les tableaux de bords sont à 0 alors qu'il y'a du trafic	Google Analytics	20 Novembre 2014
Créer bordure avec ombre portée (dégradé)	Développement d'un site Web ou d'une appli mobile	13 Novembre 2014
WordPress, Plugin Nexgen Gallery et Problème de bordure en CSS avec le Slideshow de NG	Développement d'un site Web ou d'une appli mobile	9 Septembre 2014
Différence entre tableau de bord et rapport personnalisé	Google Analytics	29 Avril 2014
Analyse de profil de liens borderline	Référencement Google	14 Avril 2014