html - CSS in site.css not working with <div id> in layout in asp.net -


i trying this:

enter image description here

but getting this:

enter image description here

my _layout.cshtml:

<!doctype html> <html> <head>      <title>@viewbag.title</title>      <link href="@url.content("~/content/site.css")" rel="stylesheet" type="text/css" />      <script src="@url.content("~/scripts/jquery-1.6.2.min.js")"  type="text/javascript"></script>  </head> <body>  <div id="header">          <div class="title">sports store</div>       </div>       <div id="categories">           @{html.renderaction("menu", "nav");}       </div>       <div id="content">          @renderbody()      </div> </body> </html> 

my menu.cshtml:

@model ienumerable<string>   @{      layout = null;  }   @html.actionlink("home", "list", "product")   @foreach (var link in model) {      @html.routelink(link, new                           {                               controller = "product",                               action = "list",                               category = link,                               page = 1                           })  } 

my site.css:

body { font-family: cambria, georgia, "times new roman"; margin: 0; } div#header div.title, div.item h3, div.item h4, div.pager {     font: bold 1em "arial narrow", "franklin gothic medium", arial; } div#header { background-color: #444; border-bottom: 2px solid #111; color: white; } div#header div.title { font-size: 2em; padding: .6em; } div#content { border-left: 2px solid gray; margin-left: 9em; padding: 1em; } div#categories { float: left; width: 8em; padding: .3em; }  div.item { border-top: 1px dotted gray; padding-top: .7em; margin-bottom: .7em; } div.item:first-child { border-top:none; padding-top: 0; } div.item h3 { font-size: 1.3em; margin: 0 0 .25em 0; } div.item h4 { font-size: 1.1em; margin:.4em 0 0 0; }  div.pager { text-align:right; border-top: 2px solid silver;     padding: .5em 0 0 0; margin-top: 1em; } div.pager { font-size: 1.1em; color: #666; text-decoration: none;       padding: 0 .4em 0 .4em; } div.pager a:hover { background-color: silver; } div.pager a.selected { background-color: #353535; color: white; }  div#categories   {     font: bold 1.1em "arial narrow","franklin gothic medium",arial; display: block;     text-decoration: none; padding: .6em; color: black;     border-bottom: 1px solid silver; } div#categories a.selected { background-color: #666; color: white; } div#categories a:hover { background-color: #ccc; } div#categories a.selected:hover { background-color: #666; } 

this example asp.net mvc 3 pro book. have tried , has worked me. suggest refer code download or check code properly.

from have in code seems correct need refresh cache or check getting rendered using developer tools such firebug.

here should in firebug div id=categories

div#categories {     float: left;     padding: 0.3em;     width: 8em; } 

and tags inside that.

div#categories {     border-bottom: 1px solid silver;     color: black;     display: block;     font: bold 1.1em "arial narrow","franklin gothic medium",arial;     padding: 0.6em;     text-decoration: none; } 

Comments

Popular posts from this blog

c# - SVN Error : "svnadmin: E205000: Too many arguments" -

c++ - Using OpenSSL in a multi-threaded application -

All overlapping substrings matching a java regex -