Click here to Skip to main content
15,888,610 members
Search within:


In Masterpage Fixed And Footer I Given Position As Fixed But Css Menu Going To Header Having Error(Below I Am Attaching Css And Master Page Code
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
ASP.NET
CSS
Main CSS:
CSS
* { padding: 0; margin: 0; }
HTML {
    BACKGROUND-COLOR: #ebebeb; FONT: 10px "Trebuchet MS", Verdana, "Lucida Grande", Georgia, Sans-Serif; BORDER-TOP: #555555 10px solid
}
body {
 font-family:verdana ;
 font-size: 15px;
 border-color :Black ;
 font-weight:normal;
 font-weight:100;
}
#wrapper {
 margin: 0 auto;
 width: 100%;
}
#header {
 width: 100%;
 color: #333;
 border: 1px solid #ccc;
 height: 15%;
 padding: 0px;
 margin: 0px 0px 0px 0px;
 font-family:verdana;
 font-size: 13px;
 font-weight:normal;


}
img
{
    margin : 0;
    height:54px;
    width:99%;

}
h1
{
    font-size :18px;
    text-align:center;
    padding: 20px;
    font-family:Verdana;
    font-weight:bold;
    color:#3c444d;
    width:100%;
    height:5px;
    vertical-align:middle;
}
#cen
{
    width:100%;
    height:80%;

}
#sidebar
{
float:left ;
width:20%;
color:black;
border: 1px solid #ccc;
border-right-style:dashed #ccc;
background-color:#F3F2ED;
height:100%;
}
#content
{
float :right ;
width: 80%;
color: black;
border: 1px solid #ccc;
background:white;
margin: 0px 0px 0px 0px;
padding: 10px;
height:100%;
}
#footer {
    background-color: #F3F2ED;
    border: 1px solid #CCCCCC;
    color: #000000;
    font-family: verdana;
    font-size: 10px;
    font-weight: normal;
    height: 5%;
    margin: 0;
    padding: 10px;
    text-align: center;
    width: 100%;
    bottom: 0;


}



Menu CSS:
@charset 'UTF-8';
/* Starter CSS for Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
}
#cssmenu ul,
#cssmenu li {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
}
#cssmenu ul li {
float: left;
min-height: 1px;
vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: 0;
left: 100%;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
margin-top: 0;
}
#cssmenu a {
display: block;
line-height: 1em;
text-decoration: none;
}
#cssmenu ul li.last ul {
left: auto;
right: 0;
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
/* Custom CSS Styles */
#cssmenu {
width: auto;
font-family: Helvetica, Arial, sans-serif;
}
#cssmenu:before {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAIAAAC3eAIWAAAAA3NCSVQICAjb4U/gAAAAI0lEQVQImWPwj0hh+v//PxPD//9M////Z/rP8J/p//9/MD4AGUETB+SFfCsAAAAASUVORK5CYII=);
background-color: #606a77;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4f5864), color-stop(1, #49515b));
background-image: -webkit-linear-gradient(top, #4f5864, #49515b);
background-image: -moz-linear-gradient(top, #4f5864, #49515b);
background-image: -o-linear-gradient(top, #4f5864, #49515b);
background-image: linear-gradient(#4f5864, #49515b);
-moz-box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
-webkit-box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
box-shadow: inset 0 2px 0 #586270, inset 0 1px 0 #6b7888;
content: '';
display: block;
height: 8px;
}
#cssmenu > ul {
border-bottom: 1px solid #252A30;
border-top: 1px solid #252A30;
-moz-box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px 0 #8799a9, 0 1px 1px rgba(0, 0, 0, 0.5);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABNCAIAAADo7ZnJAAAAA3NCSVQICAjb4U/gAAAAUUlEQVQYlXWPyRGAMAwDd1wwHVADJS+POERk4OVD1mGO8yq1wFIKLXHsJLDGH8wSou8q0bfGxplYcpaHRerG/J/zS/edLTnrjvDo7PHv1Nhy3lZMnHg0MO2JAAAAAElFTkSuQmCC);
background-color: #566171;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #6e7d8f), color-stop(1, #404854));
background-image: -webkit-linear-gradient(top, #6e7d8f, #404854);
background-image: -moz-linear-gradient(top, #6e7d8f, #404854);
background-image: -o-linear-gradient(top, #6e7d8f, #404854);
background-image: linear-gradient(#6e7d8f, #404854);
height: 27px;
padding: 15px 15px 15px 5px;
}
#cssmenu > ul > li {
margin: 0 10px;
}
#cssmenu > ul > li.has-sub:hover > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#cssmenu > ul > li:hover > a {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAGElEQVQImWP4//8/079//0jGf//+JVUPAADfUJPhbDTaAAAAAElFTkSuQmCC);
background-color: #e2e2e2;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #c8c8c8));
background-image: -webkit-linear-gradient(top, #ffffff, #c8c8c8);
background-image: -moz-linear-gradient(top, #ffffff, #c8c8c8);
background-image: -o-linear-gradient(top, #ffffff, #c8c8c8);
background-image: linear-gradient(#ffffff, #c8c8c8);
}
#cssmenu > ul > li.active:hover > a {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAJklEQVQImWP4MruP6d+/f0z//v5Fo/8x/fv3F41GyP8lUf2/v38BoDRPnb8AZS4AAAAASUVORK5CYII=);
background-color: #cb7b72;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f49b8e), color-stop(1, #bd584d));
background-image: -webkit-linear-gradient(top, #f49b8e, #bd584d);
background-image: -moz-linear-gradient(top, #f49b8e, #bd584d);
background-image: -o-linear-gradient(top, #f49b8e, #bd584d);
background-image: linear-gradient(#f49b8e, #bd584d);
}
#cssmenu ul a {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAAIUlEQVQImWP4+PEj09+/f5n+/fvH9PfvXzhG5uNik6gOAOTaUDaAXrIOAAAAAElFTkSuQmCC);
background-color: #c2c2c2;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1f1f1), color-stop(1, #a8a8a8));
background-image: -webkit-linear-gradient(top, #f1f1f1, #a8a8a8);
background-image: -moz-linear-gradient(top, #f1f1f1, #a8a8a8);
background-image: -o-linear-gradient(top, #f1f1f1, #a8a8a8);
background-image: linear-gradient(#f1f1f1, #a8a8a8);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.5);
color: #3c444d;
font-size: 12px;
line-height: 27px;
padding: 0 20px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
#cssmenu ul ul {
width: 170px;
}
#cssmenu ul ul a {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
line-height: 150%;
}
#cssmenu ul .active > a {
color: #FFF;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAbCAIAAAAyOnIjAAAAA3NCSVQICAjb4U/gAAAANUlEQVQImXXMsQ0AIRTD0FMmvRlYnAm+TQEIGronxcrX2x80hUEDpNx2em0lx9wNj37+rX4AhN5PdtvsqRUAAAAASUVORK5CYII=);
background-color: #c46a60;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ef7260), color-stop(1, #b04c41));
background-image: -webkit-linear-gradient(top, #ef7260, #b04c41);
background-image: -moz-linear-gradient(top, #ef7260, #b04c41);
background-image: -o-linear-gradient(top, #ef7260, #b04c41);
background-image: linear-gradient(#ef7260, #b04c41);
}
#cssmenu ul .has-sub {
position: relative;
}
#cssmenu ul .has-sub ul {
-moz-border-radius: 0 3px 3px 3px;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0 2px 1px 1px rgba(0, 0, 0, 0.5);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAA2CAMAAAAxtAOuAAAAolBMVEXp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enp6enCAApGAAAANXRSTlP9+vf08Ozp5eDc19POycS+ubOuqKOdl5GLhYB6dG5oYlxXUUxGQTs2MSwoIx8aFhMPCwgFAqv7N0MAAABMSURBVHheBcCDEcMAAADAj1Hbtr3/aj0/BEKRWCKVyRVKFVU1dQ1NLW0dXT19A0MjYxNTM3MLSytrG1s7ewdHJ2cXVzd3D08vbx/fP9L5BZigzasGAAAAAElFTkSuQmCC) repeat-x;
background-color: #c3c3c3;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e9e9e9), color-stop(1, #aaaaaa));
background-image: -webkit-linear-gradient(top, #e9e9e9, #aaaaaa);
background-image: -moz-linear-gradient(top, #e9e9e9, #aaaaaa);
background-image: -o-linear-gradient(top, #e9e9e9, #aaaaaa);
background-image: linear-gradient(#e9e9e9, #aaaaaa);
padding: 3px 0;
}
#cssmenu ul .has-sub ul a {
background: none;
padding: 8px 8px 8px 16px;
border-bottom: 1px solid transparent;
text-align: left;
}
#cssmenu ul .has-sub ul .has-sub a:after {
content: none;
}
#cssmenu ul .has-sub li:hover > a {
border-bottom: 1px solid #1D2024;
color: #FFF;
background-color: #55616f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #56606f), color-stop(1, #3f4852));
background-image: -webkit-linear-gradient(top, #56606f, #3f4852);
background-image: -moz-linear-gradient(top, #56606f, #3f4852);
background-image: -o-linear-gradient(top, #56606f, #3f4852);
background-image: linear-gradient(#56606f, #3f4852);
-moz-box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
-webkit-box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
box-shadow: inset 1px 2px 0 #5c6778, inset 0 1px 0 #4e5866;
position: relative;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
#cssmenu ul .has-sub li:hover > a:after {
border-left: 0 none;
background-color: #c35f54;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ea5f51), color-stop(1, #a9463b));
background-image: -webkit-linear-gradient(top, #ea5f51, #a9463b);
background-image: -moz-linear-gradient(top, #ea5f51, #a9463b);
background-image: -o-linear-gradient(top, #ea5f51, #a9463b);
background-image: linear-gradient(#ea5f51, #a9463b);
-moz-box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
-webkit-box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
box-shadow: inset -1px 2px 0 rgba(255, 255, 255, 0.2), inset 0 1px 0 #ce5448;
content: '';
height: 100%;
width: 6px;
position: absolute;
right: 0;
top: 0;
}
#cssmenu ul .has-sub > a {
padding-right: 0;
}
#cssmenu ul .has-sub > a:after {
content: '▼';
border-left: 1px solid rgba(100, 100, 100, 0.2);
color: #5D6A7A;
-moz-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2);
display: inline-block;
font-size: 9px;
margin-left: 5px;
text-align: center;
height: 25px;
width: 24px;
text-shadow: 0 -1px 0 #101417;
}
#cssmenu ul .active > a:after {
color: #FFF;
}
#cssmenu ul ul a {
font-size: 12px;
}
#time
{
font-family :Times New Roman;
font-size:medium;
text-align:right;
color:Red ;
}
Master Pages Code
XML
<%@ Master Language="C#" %>

<!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 runat="server">
    <title>Testing</title>
   <link rel ="Stylesheet" type="text/css" href="css/styles.css" />
   <link rel ="Stylesheet" type="text/css" href="Styles/styles.css" />
   <script type="text/javascript">
                        TimerStart = function() {
                        window.setInterval ( "TickTimer()", 10 );
                         }
                        TickTimer = function()   {
                        var dt = new Date()
                        var d =  (dt.getDate() > 9 ? "" : "0" ) + dt.getDate()
                        var m =  (dt.getMonth () > 8 ? "" : "0" ) + (dt.getMonth()+1)
                        var dts = d + "/" + m + "/" + dt.getFullYear()
                        tdtime.innerHTML =  dts + " " + dt.toTimeString().substr(0,8) ;

                        }
                        </script>

    <script language="javascript" src="Scripts/datepicker_min.js" type="text/javascript"></script>
    <script language="javascript" src="Scripts/JQuery.js" type="text/javascript"></script>
    <link href="Styles/datepicker.css" rel="stylesheet" type="text/css" />
    <link href="css/style1.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
<div id="wrapper">
       <div id="header">
        <table width="100%" >
           <tr >
                <td width="5%" valign="top" ><div align="left">
                    <img src="img/1.jpg" alt="Loan" style="height: 72px; width:100%"/>
                </div>
                </td>
                <td width="35%" valign ="bottom"><div align="left"><img src="img/2.jpg" alt="Loan" style=" width:90%"/></div></td>
                <td width="25%" valign ="bottom"><div align="left">
                    <table width="100%" cellspacing="4">
                        <tr>
                            <td  valign="top" >
                                <asp:Label ID="lbl1" runat="server" ><b>User</b></asp:Label>
                            </td>
                            <td>
                                <asp:Label ID="Label1" runat="server" Text=":"></asp:Label>
                            </td>
                             <td>
                                    <b><script type="text/javascript">
                                    var WinNetwork = new ActiveXObject("WScript.Network");
                                    document.write(WinNetwork.UserName);
                                    </script></b>
                             </td>
                        </tr>
                        <tr >
                            <td width="30%" valign="middle">
                                <asp:Label ID="lbl2" runat="server" ><b>System</b></asp:Label>
                             </td>
                             <td>
                                 <asp:Label ID="Label2" runat="server" Text=":"></asp:Label>
                             </td>
                             <td>
                                   <b><script type="text/javascript">
                                    var WinNetwork = new ActiveXObject("WScript.Network");
                                    document.write(WinNetwork.ComputerName);
                                    </script> </b>
                             </td>
                       </tr>
                       <tr>
                            <td width="30%">
                                <asp:Label ID="lbl3" runat="server" ><b>IP Address</b></asp:Label>
                            </td>
                            <td>
                                 <asp:Label ID="Label3" runat="server" Text=":"></asp:Label>
                            </td>
                            <td>
                                <b>
                                <script type="text/javascript">
                                var ipAddress = "";
                                var wmi = GetObject("winmgmts:{impersonationLevel=impersonate}");
                                e = new Enumerator(wmi.ExecQuery("SELECT * FROM Win32_NetworkAdapterConfiguration WHERE IPEnabled = True"));
                                for(; !e.atEnd(); e.moveNext()) {
                                var s = e.item();
                                ipAddress = s.IPAddress(0);
                                document.write(ipAddress);
                                }
                                </script></b>
                            </td>
                       </tr>
                    </table>
                    <td width="33%" valign="bottom">
                        <div align="left"><img src="img/3.jpg" alt="Loan" style="width:100%"/></div>
                    </td>
                </div>
               </td>


            </tr>
        </table>
   <asp:ContentPlaceHolder ID="ContentPlaceHolder5" runat="server">

                    </asp:ContentPlaceHolder>
  </div>
 <div id="cen">
  <div id='cssmenu'>
<ul>
   <li class='active'><a href="cyl_home.aspx"><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Masters</span></a>
      <ul>
         <li class='has-sub'><a href="cyl_gas_master.aspx"><span>Gas Master</span></a>
           <%-- <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>--%>
         </li>
         <li class='has-sub'><a href="cyl_dept_master.aspx"><span>Department Master</span></a>

         </li>
         <li class='has-sub'><a href="cyl_supplier_master.aspx"><span>Supplier Master</span></a></li>
      </ul>
   </li>
   <li class='has-sub'><a href='#'><span>Transactions</span></a>
     <ul>
         <li class='has-sub'><a href="cyl_receipt_details.aspx"><span>Gas Cylinder Receipts</span></a></li>
         <li class='has-sub'><a href="cyl_issue_details.aspx"><span>Gas Cylinder Issues</span></a> </li>
        <li class='has-sub'><a href="cyl_return_details.aspx"><span>Gas Cylinder Return</span></a>
         </li>
         <li class='has-sub'><a href="cyl_return_supplier_details.aspx"><span>Gas Cylinder Return to Supplier</span></a>
         </li>

      </ul>
      </li>
   <li class='has-sub'><a href='#'><span>Reports</span></a>
       <ul>
         <li class='has-sub'><a href="cyl_gas_report.aspx"><span>Gas Report</span></a>
       </ul>
   </li>
    <li class='last'><a href=login.aspx><span>Logout</span></a></li>
      <li class='last'><div align="right">
        <table width="100%">
           <tr>
                <td id="tdtime" WIDTH="16%"  STYLE="font-weight:bold; color:White" >
                      </td>
           </tr>
        </table>
      </div> </li>


</ul>



</div>



        <table width="100%" >
            <tr>
                <td width="20%" colspan="4">
                     <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">

                    </asp:ContentPlaceHolder>
                </td>
                <td width="80%" colspan="4">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">

                  </asp:ContentPlaceHolder>
                </asp:ContentPlaceHolder>
                </td>
            </tr>
        </table>


         </div>

</div>
<div id="footer"><span lang="en-us"><p align="center">Copyright &copy;The Ramco Cements Limited &reg;</p></span></div>
</form>
</body>
</html>
Posted
Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month
Related Questions
Fix color code within CSS file
Scrollable gridview with fixed headers and footer
Css Position fixed cannot view hole page text
Fixed Header Footer in GridView
How Do I Fix The Drop Down Menu In Asp.Net Masterpage
problems in attaching css tmplate to the already master page in asp.net
Css - how do I make my footer positioned at the bottom of the page?
how use css inside a aspx page?
Fixed Header and First Column CSS
How can I fix my CSS grid?

Advertise
Privacy
Cookies
Terms of Use
Last Updated 1 Apr 2014
Layout: fixed | fluid
Copyright © CodeProject, 1999-2024
All Rights Reserved.

Web02 2.8:2024-04-02:1

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900