Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 14th, 2012  |  syntax: None  |  size: 2.87 KB  |  hits: 13  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. the menu button backgrounds are overridden by page image background, how do i prevent this?
  2. /********markup********/
  3.  
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7.     <meta charset="utf-8" />
  8.     <title>@ViewBag.Title</title>
  9.     <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
  10.     <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
  11.     <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
  12. </head>
  13. <body>
  14.     <div class="page">
  15.         <header>
  16.             <div id="title">
  17.                 <h1>My MVC Application</h1>
  18.             </div>
  19.             <div id="logindisplay">
  20.                 @Html.Partial("_LogOnPartial")
  21.             </div>
  22.             <nav>
  23.                 <ul id="menu">
  24.                     <li >@Html.ActionLink("Home", "Index", "Home")</li>
  25.                     <li>@Html.ActionLink("About", "About", "Home")</li>
  26.                 </ul>
  27.             </nav>
  28.         </header>
  29.         <section id="main">
  30.             @RenderBody()
  31.         </section>
  32.         <footer>
  33.         </footer>
  34.     </div>
  35. </body>
  36. </html>
  37.  
  38. /*******body***********/
  39.  
  40. body
  41. {
  42.  
  43.     font-size: .85em;
  44.     font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
  45.     margin: 0;
  46.     padding: 0;
  47.  
  48.   background-image:url('/Content/bw.jpg');
  49.  
  50.  
  51. }
  52.  
  53. /*******menu**********/
  54.  
  55. #menu
  56. {
  57.  
  58.  
  59.         position:relative;
  60.     float:left;
  61.     clear:left;
  62.     margin-right:50px;
  63.  
  64. }
  65.  
  66. #menu li
  67. {
  68.  
  69.     list-style-type: none;
  70.     padding: 0px;
  71.     display: block;    
  72.         width:150px;
  73.     overflow:visible;
  74.  
  75. }
  76.  
  77. #menu li a
  78. {
  79.         overflow:visible;
  80.         background: rgba(0,0,0,0.2);
  81.         text-shadow: 0px 0px 1px white;
  82.         color: white;
  83.     text-decoration: none;
  84.     font-size: 13px;
  85.     display: block;
  86.     font-family: arial;
  87.     text-transform: uppercase;
  88.     text-shadow: 0px 0px 5px #eee;
  89.     padding:10px 20px 10px;
  90.     margin: 5px;
  91.     font-weight: bold;
  92.     letter-spacing: 1px;
  93.     -webkit-transition: all 0.2s linear;
  94.     -moz-transition: all 0.2s linear;
  95.     -o-transition: all 0.2s linear;
  96.     -ms-transition: all 0.2s linear;
  97.     transition: all 0.2s linear;
  98.  
  99.  
  100.     -webkit-box-shadow: 2px 3px 3px rgba(0,0,0,0.6);  
  101.     -moz-box-shadow: 2px 3px 3px rgba(0,0,0,0.6);  
  102.     box-shadow: 2px 3px 3px rgba(0,0,0,0.6);  
  103.  
  104.     -webkit-border-radius: 3px;  
  105.     -moz-border-radius: 3px;  
  106.     border-radius: 3px;  
  107.  
  108. }
  109.  
  110.  
  111.  
  112. #menu li a:hover
  113. {
  114.     opacity: 1;
  115.     color:White;
  116.     background:#FF00D0  ;
  117.     text-shadow: 0px 0px 1px #ffffff;
  118.     -webkit-transform: scale(1.1);  
  119.     -moz-transform: scale(1.2);  
  120.     -ms-transform: scale(1.2);  
  121.     -o-transform: scale(1.2);  
  122.     transform: scale(1.2);
  123.  
  124. }
  125.  
  126.  
  127. #menu li a:active {  
  128.     background: rgba(0,0,0,0.1);  
  129.     -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);  
  130.     -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);  
  131.     box-shadow: 1px 1px 1px rgba(0,0,0,0.4);  
  132. }
  133.        
  134. background: #FF0000;
create a new version of this paste RAW Paste Data