espero que me puedan auxiliar saludos
ejemplo vivo
http://geeksquadsolutions.com.mx/cw/
saluodos
menu.css
Código:
menu.php @charset "utf-8";
/* CSS Document */
a
{
display:block;
height:43px;
padding-top:0px;
float:left;
text-indent: -99999em;
}
a#menu_home {background:url(../images/menu-01.jpg) top left no-repeat; width:70px;}
a#menu_home:hover {background-position:0 -43px;}
a#menu_products {background:url(../images/menu-02.jpg) top left no-repeat; width:88px;}
a#menu_products:hover {background-position:0 -43px;}
a#menu_services {background:url(../images/menu-03.jpg) top left no-repeat; width:83px;}
a#menu_services:hover {background-position:0 -43px;}
a#menu_about {background:url(../images/menu-04.jpg) top left no-repeat; width:60px; }
a#menu_about:hover {background-position:0 -43px;}
a#menu_resources {background:url(../images/menu-05.jpg) top left no-repeat; width:98px;}
a#menu_resources:hover {background-position:0 -43px;}
a#menu_news {background:url(../images/menu-06.jpg) top left no-repeat; width:56px;}
a#menu_news:hover {background-position:0 -43px;}
a#menu_order {background:url(../images/menu-07.jpg) top left no-repeat; width:118px;}
a#menu_order:hover {background-position:0 -43px;}
a#menu_employment {background:url(../images/menu-08.jpg) top left no-repeat; width:105px;}
a#menu_employment:hover {background-position:0 -43px;}
a#menu_contact_us {background:url(../images/menu-09.jpg) top left no-repeat; width:88px;}
a#menu_contact_us:hover {background-position:0 -43px;}
Código:
<a href="index.php" id="menu_home" >home</a> <a href="index.php?action=produtcs" id="menu_products">Products</a> <a href="index.php?action=services" id="menu_services">Services</a> <a href="index.php?action=about" id="menu_about">About</a> <a href="index.php?action=resources" id="menu_resources">Resources</a> <a href="index.php?action=news" id="menu_news">News</a> <a href="index.php?action=order" id="menu_order">Order</a> <a href="index.php?action=employment" id="menu_employment">Employment</a> <a href="index.php?action=contact_us" id="menu_contact_us">Contact</a>
index.php
Código:
<?php
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>C & W</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="include/menu.css" rel="stylesheet" type="text/css" />
</head>
<body class="home">
<div class="Full_Body">
<div id="container">
<div id="header">
<div id="header_left" style="text-align:left; float:left; "><img src="http://www.forosdelweb.com/images/header01.jpg" alt="header" width="356" height="120" /></div>
<div id="header_right" style="text-align:right; float:right; "><?php // include ('swf/cw_truck.php') ?></div>
<!-- end #header --></div>
<div id="menu">
<?php include ('include/menu.php');?>
<!-- end #menu --></div>
<div id="middle_information" >
<?php
//include_once ('include/' . $content);
?>
<!-- end #middle_information -->
</div>
<div id="footer_img" style="float:left; " >
<img src="http://www.forosdelweb.com/images/footer.jpg" alt="imagen" width="646" />
</div>
<div id="footer_logo" >
<img src="http://www.forosdelweb.com/images/footerlogo.jpg" alt="logo" width="120" />
</div>
<!-- end #footer --></div>
<!-- end #container --></div>
<!-- end #Full_Class_Body --></div>
</body>
</html>
styleesheet.css
Código:
@charset "utf-8";
/* CSS Document */
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #FFFFFF;
background-color:#000000;
padding-top:10px;
padding-bottom:15px;
}
h2
{
font-family:Georgia;
color:#5A5B5A;
padding-top:-10px;
padding-left:20px;
font-size:20px;
}
.Full_Body #container
{
width:766px;
background: #FFFFFF; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: center; /* this overrides the text-align: center on the body element. */
margin-right: auto;
margin-left: auto;
padding-left:17px;
padding-top:17px;
padding-right:17px;
padding-bottom:17px;
}
.Full_Body #header
{
width:100%;
padding-top:0px;
padding-bottom:0px;
}
.Full_Body #menu
{
clear:both;
width:100%;
height:43px;
margin-left:-2px;
/*vertical-align:bottom;*/
background-color:#000000;
background-image:url(images/menu_back.jpg);
}
.Full_Body #middle_information
{
width:100%;
float:left;
background-color:#ffffff;
position:relative;
padding-top:0px;
}
.Full_Body #middle_info_left
{
width:35%;
position:relative;
float:left;
padding-top: 20px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
}
.Full_Body #middle_info_rigth
{
width:55%;
position:relative;
float:right;
padding-right: 0px;
padding-top:25px;
}
.Full_Body #middle_cols
{
clear : both;
width:100%;
background-color:#FECB63;
height:200px;
padding-top:5px;
}
.Full_Body #middle_cols_content01
{
width:202px;
height:190px;
float:left;
background-repeat:no-repeat;
background-position:center;
}
.Full_Body #middle_cols_content02
{
width:202px;
height:190px;
float:left;
background-repeat:no-repeat;
background-position:center;
}
.Full_Body #middle_cols_content03
{
width:202px;
height:190px;
float:left;
background-repeat:no-repeat;
background-position:center;
}
.Full_Body #middle_col_footer
{
clear : none;
width:100%;
background-color:#FECB63;
padding-top: 15px;
height:17px;
float: right;
}
.Full_Body #middle_col_footer_image
{
clear : both;
width:100%;
background-image:url(images/yellow-foot.jpg);
height:39px;
}
.Full_Body #contact_form
{
width: 50%;
float:left;
background-color:#FFFFFF;
font-family:Georgia;
font-size: 14px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color:#5A5B5A;
padding-left:20px;
}
.Full_Body #contact_form1
{
width: 30%;
float:right;
margin-right:10px;
background-color:#FFFFFF;
font-family:Georgia;
font-size: 14px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color:#5A5B5A;
}
.Full_Body #footer
{
clear : both;
width:100%;
background-color:#FF0000;
/*padding: 0 10px; EBF5EC/* this padding matches the left alignment of the elements in the divs that appear above it. */
padding-top:0px;
height:104px;
}
.Text_Footer
{
color:#475F4D;
font-weight:bold;
font-size:15px;
}
/* internal pages */
#bodytext
{
width: 760px;
padding:20px;
font-family:Georgia;
font-size: 14px;
margin-left:auto;
margin-right:auto;
color:#5A5B5A;
background-color:#FFFFFF;
text-align:justify;
}
/* heading of internal pages */
.h1{
font-family:Georgia;
font-weight: bold;
font-size: 18px;
color: #475F4D;
}
.h2{
font-family:Georgia;
font-weight: bold;
font-size: 14px;
color: #475F4D;
}
.normaltext {
font-family:Georgia;
font-size: 14px;
font-style: normal;
font-weight: normal;
font-variant: normal;
color:#5A5B5A;
}

