Databases
StackOverflow2013
Postsdbo
POthe menu button backgrounds are overridden by page image background, how do i prevent this?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POthe menu button backgrounds are overridden by page image background, how do i prevent this?
    text
    copied!<p>after applying a background image to the body, the menu buttons backgrounds are overridden as seen below. i want the menu buttons to preserve their visibility.</p> <p>link to image is below <a href="http://s11.postimage.org/4ndla4hxf/111111111.jpg" rel="nofollow">http://s11.postimage.org/4ndla4hxf/111111111.jpg</a></p> <pre><code>/********markup********/ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;@ViewBag.Title&lt;/title&gt; &lt;link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /&gt; &lt;script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="page"&gt; &lt;header&gt; &lt;div id="title"&gt; &lt;h1&gt;My MVC Application&lt;/h1&gt; &lt;/div&gt; &lt;div id="logindisplay"&gt; @Html.Partial("_LogOnPartial") &lt;/div&gt; &lt;nav&gt; &lt;ul id="menu"&gt; &lt;li &gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt; &lt;li&gt;@Html.ActionLink("About", "About", "Home")&lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;/header&gt; &lt;section id="main"&gt; @RenderBody() &lt;/section&gt; &lt;footer&gt; &lt;/footer&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; /*******body***********/ body { font-size: .85em; font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif; margin: 0; padding: 0; background-image:url('/Content/bw.jpg'); } /*******menu**********/ #menu { position:relative; float:left; clear:left; margin-right:50px; } #menu li { list-style-type: none; padding: 0px; display: block; width:150px; overflow:visible; } #menu li a { overflow:visible; background: rgba(0,0,0,0.2); text-shadow: 0px 0px 1px white; color: white; text-decoration: none; font-size: 13px; display: block; font-family: arial; text-transform: uppercase; text-shadow: 0px 0px 5px #eee; padding:10px 20px 10px; margin: 5px; font-weight: bold; letter-spacing: 1px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; -webkit-box-shadow: 2px 3px 3px rgba(0,0,0,0.6); -moz-box-shadow: 2px 3px 3px rgba(0,0,0,0.6); box-shadow: 2px 3px 3px rgba(0,0,0,0.6); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #menu li a:hover { opacity: 1; color:White; background:#FF00D0 ; text-shadow: 0px 0px 1px #ffffff; -webkit-transform: scale(1.1); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #menu li a:active { background: rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4); -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: 1px 1px 1px rgba(0,0,0,0.4); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload