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
et
layout.css
très cordialement
WRIment vôtre
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