Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Dec 2007
    Posts
    269
    Thanks
    28
    Thanked 0 Times in 0 Posts

    shaded table or picture

    how can i make like xerox.com ? is it shaded table or picture ? if it is shaded table how to ?

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    What do you mean like shaded? The color of the tables? If thats it then they just used a color.

  • #3
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    If you mean the background gradient, drop shadow and rounded corners of the main layout, it's in here somewhere:

    Code:
    /* 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.
    Last edited by BoldUlysses; 07-23-2008 at 09:19 PM.
    matt | design | blog


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •