Click here to Skip to main content
15,902,189 members
Please Sign up or sign in to vote.
3.00/5 (2 votes)
See more:
hey guys my nav bar css is not working when i viewing it in design view ? but it is working properly in localhost. is this fine ?or this will cause errors in deployment?

What I have tried:

nothing tried yet. heres my css

body 
{
   background-color: #e6e6e6;
}
@import url(http://fonts.googleapis.com/css?family=Lato);

*, *:before, *:after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  font-family: 'Lato', sans-serif;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/*| Navigation |*/

nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #E55C40;
  box-shadow: 0 3px 10px -2px rgba(0,0,0,.1);
  border: 1px solid rgba(0,0,0,.1);
}
  nav ul{
    list-style: none;
    position: relative;
    margin-right: 50px;
    display: inline-table;
  }
    nav ul li{
      float: left;
      -webkit-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
    }

    nav ul li:hover{background: rgba(0,0,0,.15);}
    nav ul li:hover > ul{display: block;}
    nav ul li{
      float: left;
      -webkit-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;
    }
      nav ul li a{
        display: block; 
        padding: 30px 9px;
        color: white; 
        font-size: .9em;
        letter-spacing: 1px;
        font-weight: bold;
        font-size: 0.85rem;
        text-decoration: none;
        text-transform: uppercase;
      }
      nav ul ul{
        display: none;
        background: #E55C40;
        position: absolute; 
        top: 100%;
        box-shadow: -3px 3px 10px -2px rgba(0,0,0,.1);
        border: 1px solid rgba(0,0,0,.1);
      }
        nav ul ul li
        {
            float: none; position: relative;
                     }
          nav ul ul li a {
            padding: 15px 30px; 
            border-bottom: 1px solid rgba(0,0,0,.05);
          }
          nav ul ul ul {
            position: absolute; 
            left: 100%; 
            top:0;
          }


heres how i link the css:

<pre> <link href="CSS/mp.css" rel="stylesheet" type="text/css" />



heres my navbar:
<nav role='navigation'>
  <ul>
  <li><a href="adminfirst.aspx"> <asp:Label ID="Label2" runat="server" Text="Welcome ">
  </asp:Label><asp:Label ID="teachername" runat="server" Text=" teachername"></asp:Label></a>
  <ul>
        <li><a href="#" style="padding: 0% 0% 0% 0%;"><asp:Button ID="Logout" runat="server" Text="LOGOUT" 
        style="color: white; 
        font-size: .9em;
        padding: 20px 20px 20px 20px;
        letter-spacing: 1px;
        font-weight: bold;
        font-size: 0.85rem;
        background-color: #e6e6e6;
        background: #E55C40; border:none;" OnClientClick="return confirm('Are You Sure You Want To Logout?');"></asp:Button>
</a></li>
  </ul></li>

    <li ><a href="#" style="cursor:default">Teachers Corner</a>
    <ul>
        <li><a href="admingradecomponents.aspx">Grade Components</a></li>
        <li><a href="adminnewteacher.aspx">Teachers information</a></li>
        <li><a href="adminmanageaccount.aspx">Accounts Designation</a></li>
         <li><a href="adminadviseree.aspx">class assigning</a></li>
         <li><a href="adminassignsubject.aspx">Subject assigning</a></li>
          <li><a href="admintransactionhistory.aspx">Login History</a></li>
    </ul>
    </li>
    <li><a href="#" style="cursor:default">Students corner</a>
      <ul>
        <li><a href="adminaddstudent.aspx">Students Information</a></li>
        <li><a href="adminstudentaccount.aspx">Students Account</a></li>
       </ul>  
       </li>
    <li><a href="#"  style="cursor:default">Print</a>
     <ul>
        <li><a href="adminprintform137.aspx">Transcript of Record</a></li>
        <li><a href="adminprintreportcard.aspx">Report Cards</a></li>
     </ul>
    </li>
    <li><a href="#" style="cursor:default">Send Notifications</a>
    <ul>
        <li><a href="adminnotif.aspx">SMS Notification</a></li>
         <li><a href="adminnotifhistory.aspx">Notification History</a></li>
    </ul>
    </li>
    <li><a href="#" style="cursor:default">Archive Files</a>
      <ul>
          <li><a href="adminarchiveteacher.aspx">Teachers Information Files</a></li>
        <li><a href="adminarchivestud.aspx">Students Information Files</a></li>
       </ul>
    </li>
    <li><a href="#"  style="cursor:default"><asp:Label ID="oras" runat="server" Text="Label" style="cursor:default"></asp:Label></a></li>
  </ul>
</nav>
Posted
Updated 2-Feb-17 8:17am
v2
Comments
CHill60 2-Feb-17 11:36am    
What do you mean by "not working"?
Member 12919944 2-Feb-17 11:38am    
when i view the page in design view of the visual studio the design is not like in the browser . but when i run the program it works fine
Member 12919944 2-Feb-17 11:39am    
for example my nav bar color is red. when i view it in the design view it does not have any color but in browser the red design is working
Richard Deeming 2-Feb-17 11:57am    
That just means the designer can't resolve your CSS file. We can't tell you why without seeing how you've linked it to your page.

But if it works when you run/deploy it, then it's just a minor inconvenience.
Member 12919944 2-Feb-17 12:14pm    
i update my question sir

1 solution

I would not worry about it. If it works fine in the browser when you run it, then go with that. It won't look exact in design view because of the way design view works. In fact, I think you'll find most developers do not ever use design view because it is usually faster in source view and design will not always be accurate.
 
Share this answer
 
Comments
Karthik_Mahalingam 3-Feb-17 0:09am    
5
Member 12919944 3-Feb-17 3:44am    
so basically when it works to the browser it well work as well too when i deploy it ?
ZurdoDev 3-Feb-17 10:30am    
Yes, it should.

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



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