...

View Full Version : shaded table or picture



zodehala
07-23-2008, 06:25 PM
how can i make like xerox.com ? is it shaded table or picture ? if it is shaded table how to ?

jcdevelopment
07-23-2008, 06:27 PM
What do you mean like shaded? The color of the tables? If thats it then they just used a color.

BoldUlysses
07-23-2008, 10:12 PM
If you mean the background gradient, drop shadow and rounded corners of the main layout, it's in here (http://www.xerox.com/css/XrxHeaderFooter_REBRAND.css) somewhere:


/* XrxHeaderFooter_REBRAND.css */
/* background styles */
body {
background:url('/images/world/g/gradient_bg.jpg') repeat-x #3d3d3d;
margin: 20px 0 20px 0;
font-family: arial, helvetica, sans-serif;
}

/* so the page doesn't load all janky */
.load_bg {
padding: 0 0 12px 0;
}

*:focus {
outline-color: invert;
outline-style: none;
outline-width: 0pt;
}

a:link, a:active, a:visited {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.background {
background:url('/images/world/b/bg_drop.png') repeat-y center;
margin: 0px auto;
}

.bottom_cap {
background: url('/images/world/b/bottom_cap_drop.png') no-repeat center;
height: 46px;
margin: 0px auto;
}
.top_cap {
background:url('/images/world/t/top_cap_drop.png') no-repeat bottom center;
height: 28px;
margin: 0px auto;
}
#cn_header {
width: 740px;
font-size: 11px;
color: #999;
text-align:left;
margin: 0px auto;
padding: 0;
background: #fff;
position: relative;
}
#cn_header * ol, #cn_header * ul {
list-style-type: none !important;
list-style-image: none !important;
margin: 0;
}

/* country/language link */
#clang {
width: 740px;
text-align: right;
margin: 0;
padding: 5px 5px 4px 5px;
font-size: 10px;
color: #ccc;
}

#clang a:link,
#clang a:active,
#clang a:visited {
margin:0px;
padding: 0 12px 0 0;
color: #d6d3d3 !important;
font-size: 10px;
background: none;
vertical-align: bottom;
}

#clang .label {
color: #ffffff;
font-size: 11px;
vertical-align: bottom;
padding: 0 0 0 4px;
}

#clang .spacer {
color: #bfbdbd;
font-size: 11px;
vertical-align: middle;
}

#clang a:hover {
text-decoration: underline;
}

#logo {
float: left;
width: 175px;
height: 60px;
}

#logo img
{
display:block;
margin: 0 10px 0 0;
}

#util_search {
float:right;
position: relative;
text-align:right;
margin: 0;
padding:0;
height: 72px;
width: 550px;
}
#util_search ul {
margin: 0;
padding: 0;
list-style-type:none;
clear: both;
text-align:right;
position: absolute;
float:right;
top: 48px;
right: 5px;
}
#util_search ul li {
display: block;
float: left;
margin: 5px 2px 5px 2px;
padding: 0 0 0 5px;
border-left: solid 1px #ccc;
}
#util_search ul li.first {
display: block;
float: left;
margin: 5px 2px 5px 2px;
padding: 0;
border-left: solid 1px #fff;
}
#util_search ul li a:link, #util_search ul li a:active, #util_search ul li a:visited {
font-size: 11px;
color: #999 !important;
}
#util_search ul li a:hover {
text-decoration: underline;
}
#util_search form {
margin: 15px 0 0 0;
padding:0;
display: block;
position: absolute;
top: 0px;
right: 5px;
width: 220px;
}
#util_search form input {
vertical-align:middle;
text-align:right;
}
#util_search form input.search_input {
vertical-align:middle;
width: 105px;
font-size: 10px;
border: solid 1px #ddd;
height: 16px !important;
color: #999;
padding-right: 3px;
}
ul#cn_pnav {
clear: both;
width: 740px;
height: 31px;
text-align: left;
margin: 0;
padding: 0;
background: none;
list-style-type:none;
}
ul#cn_pnav li#LNK_HDR_PRIMARYNAV_OFFICE_FLY_2008, #cn_pnav li#LNK_HDR_PRIMARYNAV_OFFICE_FLY_2008_menu {
width: 249px;
height: 31px;
float:left;
text-align: left;
display: block;
position: absolute;
}


ul#cn_pnav li#LNK_HDR_PRIMARYNAV_PRODUCTION_FLY_APOLLO_2008, #cn_pnav li#LNK_HDR_PRIMARYNAV_PRODUCTION_FLY_APOLLO_2008_menu {
margin-left: 249px;
height: 31px;
float:left;
text-align: left;
display: block;
position: absolute;
}

ul#cn_pnav div.cn_pnav_fmenu
{
position:absolute;
z-index: 999;
}

ul#cn_pnav li#LNK_HDR_PRIMARYNAV_SERVICES_FLY_2008, #cn_pnav li#LNK_HDR_PRIMARYNAV_SERVICES_FLY_2008_menu {
margin-left: 491px;
height: 31px;
float:left;
text-align: left;
display: block;
position: absolute;
}
ul#cn_pnav ol.cn_pnav_fmenu {
list-style-type:none;
padding:0;
margin:0;
width: 242px;
}
li.cn_pnav_link {
position:relative;
}
ul#cn_pnav ol.cn_pnav_fmenu li {
margin: 0 15px 0 15px;
padding: 0;
}
ul#cn_pnav div.bottom {
width: 242px;
height: 5px;
margin: 0;
padding: 0;
}


/* all menus - image and description text placement*/
ul#cn_pnav ol.cn_pnav_fmenu li.dropshadow, ul#cn_pnav ol.cn_pnav_fmenu li.dropshadow:hover {
padding: 0 !important;
background: none;
border: none;
margin:0 !important;
line-height: 7px;
height: 7px;
font-size: 0px;
}
ul#cn_pnav ol.cn_pnav_fmenu li.img, ul#cn_pnav ol.cn_pnav_fmenu li.img:hover {
padding: 6px 0 0 0;
border: none;
background: none;
}
ul#cn_pnav ol.cn_pnav_fmenu li.img a * {
padding: 0;
margin: 0;
}
ul#cn_pnav ol.cn_pnav_fmenu li.description, ul#cn_pnav ol.cn_pnav_fmenu li.description:hover {
margin: 0 15px 0 15px;
font-size: 11px;
border: none;
background: none;
line-height: 13px;
padding: 7px 5px 5px 0;
}
ul#cn_pnav ol.cn_pnav_fmenu li.first {
border-top: none;
border-left: none;
padding: 8px;
}


/* office menu specific */
#cn_pnav li#LNK_HDR_PRIMARYNAV_OFFICE_FLY_2008_menu ol.cn_pnav_fmenu {
background: url('/images/world/x/xog_menu_slice.gif') bottom repeat-x;
background-color: #008cc9;
list-style-type:none;
margin-left: 7px;
}

li#LNK_HDR_PRIMARYNAV_OFFICE_FLY_2008_menu div.bottom {
margin-left: 7px;
}

li#LNK_HDR_PRIMARYNAV_OFFICE_FLY_2008_menu div.cn_pnav_fmenu {
padding: 0;
color: #036;
}
li#LNK_HDR_PRIMARYNAV_OFFICE_FLY_2008_menu ol.cn_pnav_fmenu li a {
display: block;
margin: 0;
position: relative;
}
li#LNK_HDR_PRIMARYNAV_OFFICE_FLY_2008_menu ol.cn_pnav_fmenu li a:link, li#LNK_HDR_PRIMARYNAV_OFFICE_FLY_2008_menu ol.cn_pnav_fmenu li a:active, li#LNK_HDR_PRIMARYNAV_OFFICE_FLY_2008_menu ol.cn_pnav_fmenu li a:visited {
font-size: 11px;
font-weight: bold;
color: #036 !important;
text-decoration: none;

}
li#LNK_HDR_PRIMARYNAV_OFFICE_FLY_2008_menu ol.cn_pnav_fmenu li:hover {
background: transparent url('/images/world/b/bg-menulink-blue.png');
}
li#LNK_HDR_PRIMARYNAV_OFFICE_FLY_2008_menu ol.cn_pnav_fmenu li {
border-top: solid 1px #9fd4ef;
padding: 8px;
}

li#LNK_HDR_PRIMARYNAV_OFFICE_FLY_2008_menu ol.cn_pnav_fmenu li a:hover {
text-decoration: underline;
}
li#LNK_HDR_PRIMARYNAV_OFFICE_FLY_2008_menu div.bottom {
margin-left: 7px;
}



/* production menu background */

#cn_pnav li#LNK_HDR_PRIMARYNAV_PRODUCTION_FLY_APOLLO_2008_menu ol.cn_pnav_fmenu {
background: url('/images/world/p/psg_menu_slice.gif') bottom repeat-x ;
background-color: #6caf3c;
}

li#LNK_HDR_PRIMARYNAV_PRODUCTION_FLY_APOLLO_2008_menu div.cn_pnav_fmenu {
padding: 0;
color: #3c5709;
}
li#LNK_HDR_PRIMARYNAV_PRODUCTION_FLY_APOLLO_2008_menu ol.cn_pnav_fmenu li a {
display: block;
padding: 0;
margin: 0;
position: relative;
}


li#LNK_HDR_PRIMARYNAV_PRODUCTION_FLY_APOLLO_2008_menu ol.cn_pnav_fmenu li a:link, li#LNK_HDR_PRIMARYNAV_PRODUCTION_FLY_APOLLO_2008_menu ol.cn_pnav_fmenu li a:active, li#LNK_HDR_PRIMARYNAV_PRODUCTION_FLY_APOLLO_2008_menu ol.cn_pnav_fmenu li a:visited {
font-size: 11px;
font-weight: bold;
color: #3c5709 !important;
text-decoration: none;

}
li#LNK_HDR_PRIMARYNAV_PRODUCTION_FLY_APOLLO_2008_menu ol.cn_pnav_fmenu li:hover {
background: transparent url('/images/world/b/bg-menulink-green.png');
}

li#LNK_HDR_PRIMARYNAV_PRODUCTION_FLY_APOLLO_2008_menu ol.cn_pnav_fmenu li {
border-top: solid 1px #e2ea77;
padding: 8px;
}


li#LNK_HDR_PRIMARYNAV_PRODUCTION_FLY_APOLLO_2008_menu ol.cn_pnav_fmenu li a:hover {
text-decoration: underline;
}




/* outsourcing menu link hover styles */

#cn_pnav li#LNK_HDR_PRIMARYNAV_SERVICES_FLY_2008_menu ol.cn_pnav_fmenu {
background: url('/images/world/x/xgs_menu_slice.gif') bottom repeat-x ;
background-color: #a2238e;
}

li#LNK_HDR_PRIMARYNAV_SERVICES_FLY_2008_menu div.cn_pnav_fmenu {
z-index: 1024;
padding: 0;
color: #33032b;
}
li#LNK_HDR_PRIMARYNAV_SERVICES_FLY_2008_menu ol.cn_pnav_fmenu li a {
display: block;
padding: 0;
margin: 0;
position: relative;
}


li#LNK_HDR_PRIMARYNAV_SERVICES_FLY_2008_menu ol.cn_pnav_fmenu li a:link, li#LNK_HDR_PRIMARYNAV_SERVICES_FLY_2008_menu ol.cn_pnav_fmenu li a:active, li#LNK_HDR_PRIMARYNAV_SERVICES_FLY_2008_menu ol.cn_pnav_fmenu li a:visited {
font-size: 11px;
font-weight: bold;
color: #33032b !important;
text-decoration: none;

}
li#LNK_HDR_PRIMARYNAV_SERVICES_FLY_2008_menu ol.cn_pnav_fmenu li:hover {
background: transparent url('/images/world/b/bg-menulink-purple.png');
}

li#LNK_HDR_PRIMARYNAV_SERVICES_FLY_2008_menu ol.cn_pnav_fmenu li {
border-top: solid 1px #e29fc7;
padding: 8px;
}


li#LNK_HDR_PRIMARYNAV_SERVICES_FLY_2008_menu ol.cn_pnav_fmenu li a:hover {
text-decoration: underline;
}

#banner_ftr {
padding-top: 20px;
padding-bottom: 37px;
clear: both;
}
#banner_ftr div.cn_footer {
width: 740px;
text-align:left;
margin: 0px auto;
}
#banner_ftr a:link, #banner_ftr a:active, #banner_ftr a:hover, #banner_ftr a:visited {
color: #999 !important;
}

#banner_ftr td#cn_footer_site_title {
font-weight: bold;
font-size: 11px;
color: #000;
margin: 0 5px 0 8px;
padding: 0 0 5px 10px;
}
#banner_ftr * strong {

font-weight: bold;
}

table.cn_footer_sitenav_col {
margin: 0;
padding: 0 0 0 5px;
}
table.cn_footer_sitenav_col td {
margin: 0;
padding: 0 0 0 5px;
}
#banner_ftr div.cn_footer td.cn_footer_sitenav {
background: url('/images/world/m/module_top_740x5.gif') no-repeat top #F5F5F5 ;
width: 740px;
padding: 10px 0 10px 0;
}
#banner_ftr .cn_footer_sitenav_col {
padding: 5px 10px 0 10px;
font-size: 11px;
}

#banner_ftr .cn_footer_sitenav_col_title, .cn_footer_sitenav_col_link {
font-weight: bold;
font-size: 11px;
color: #999;
font-family: arial, helvetica, sans-serif;
padding: 0 0 5px 0;
}
tr.cn_footer_sitenav_col_link td *, tr.cn_footer_sitenav_col_link td {
font-weight: normal;
font-size: 11px !important;
font-family: arial, helvetica, sans-serif;
line-height: 1.1em;
}


ul.footer_gray_bar {
background: url('/images/world/f/footer_740x31.gif') no-repeat;
clear: both;
width: 740px;
height: 31px;
margin:0;
padding: 3px 0 0 0;
font-size: 11px;
text-align:left;
font-family: arial, helvetica, sans-serif;
}

ul.footer_gray_bar li a:hover {
text-decoration: underline;
}
ul.footer_gray_bar li {
display: block;
float: left;
margin: 5px 2px 5px 2px;
padding: 0 0 0 5px;
border-left: solid 1px #ccc;
}
ul.footer_gray_bar li * {
font-weight: normal;
font-size: 11px;
}
ul.footer_gray_bar li.first {
display: block;
float: left;
margin: 5px 2px 5px 2px;
padding: 0 0 0 5px;
border-left: none;
}
p.footer_copyright {
padding: 0 0 10px 8px;
color: #999;
font-size: 11px;
clear: both;
margin:0;
width: 722px;
text-align:left;
}

.cn_pnav_fmenu_ie_select_block { z-index: 0; position: absolute; left: 0px; top: 0px; filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0); }

.cn_footer_gray_bar_selected { text-decoration: none; color: #666666; }

/* basic sidebar styling assumes a structure of

<div id="_sidebar">
<h3>header</h3>
<p>content</p>
</div>

or

<div id="_sidebar">
<h3>header</h3>
<ul>
<li><a href="#">list item</a></li>
<li><a href="#">list item</a></li>
<li><a href="#">list item</a></li>
</ul>
</div>

*/

/* sidebar top (header) for a 175px wide column */
#sidebar h3 {
padding: 7px 10px 5px 12px;
background-image : url("/images/world/s/sidebar_hd_175.gif");
background-repeat : no-repeat;
background-color: #fff;
font-size: 11px;
color: #333;
font-weight: bold;
margin: 0;
}
/* sidebar bottom (content) for a 175px wide column
assumes a <ul> or a <p> immediately follows the <h3> above */
#sidebar p, #_sidebar ul {
background-image : url("/images/world/s/sidebar_content_175.gif");
background-position: bottom left;
background-repeat : no-repeat;
background-color: #fff;
padding: 10px;
font-size: 11px;
color: #666;
}
/* styling a list of links in a sidebar */
#sidebar ul li a {
padding: 0 0 0 9px;
background: url('/images/world/c/carat-pointer-txt_11px.gif') 0 4px;
background-repeat: no-repeat;
font-size: 11px;
color: #666;
list-style-type:none;
}

Edit: Not too much to it, actually. The top and bottom "caps" with the rounded corners, along with the drop shadow for the center container are PNG files with transparency. The background image is just an ordinary jpg told to fill the browser window background. It's a nice effect.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum