The menuitem's background color of asp.net 4 (developed via Visual Studio 2010)can't be change after be selected (I want the selected menuitem's background color is YellowGreen). I google this issue and try all ways found from internet. But they don't work. The menu is in a master file and uses the project's default menu css style:
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="Statistics.aspx" Text="Statistics"/>
<asp:MenuItem NavigateUrl="Change.aspx" Text="Change"/>
<asp:MenuItem NavigateUrl="HistoryData.aspx" Text="History Data" />
<asp:MenuItem NavigateUrl="ChangePassword.aspx" Text="Change Password"/>
<asp:MenuItem NavigateUrl="About.aspx" Text="About"/>
</Items>
</asp:Menu>
The menu css in Site.css is
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 0px 0px 0px 0px; /*padding: 4px 0px 4px 8px;*/
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 2.0em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
font-size:medium;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color:#ADFF2F;
color:White;
text-decoration: none;
}
I can see the color change when I click a menuitem but the color is back to dark blue after release the mouse button. I tried change its static selected/dynamic selected style; change the menuitem's select status as true in MenuItemClick event; add selected css style;etc. But the selected menuitem's back color can't be changed. Thanks for your help
use following style:
a:active{background-color:color;}
Related
Textbox and button not aligned properly
Hi everyone, I'm facing problem here that my textbox and the button couldn't align properly. I tried to adjust the margin including margin top and margin bottom, they still stay exactly the same location. I am clueless on what's wrong here. Can you please help me?
Asp.Net:
<asp:Panel HorizontalAlign="center" runat="server">
<asp:TextBox ID="SearchTextBox" runat="server" placeholder=" Search your item here." CssClass="textbox"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" OnClick="SearchOnClick" CssClass="button-add" />
</asp:Panel>
Css:
.textbox {
border: 1px solid #848484;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 25px;
outline: none;
margin-bottom:10px;
height: 25px;
width: 350px;
background-color: #ede6e6;
}
.button-add {
background-image: url(../Images/button_searchSmall.gif);
background-size: auto;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center;
margin-top:20px;
color: transparent;
background-color: transparent;
outline: 1px;
border: none;
}
Add display: inline-block; vertical-align: middle; in .button-add and .textbox see here
Instead of using margin-bottom in the textbox class, you can use margin-bottom in the button-add class. That way x amount of margin will be left under button-add and then your textbox can come. Dont put any margin command in the textbox class.
Hope this helps!
I have an autocompleteextender in my web application. When the user uses the Up and Down arrows of the keyboard to navigate through the list items, sometimes the item in focus would be outside of the scroll view range. How can I set the listbox to automatically scroll if "most" of the item is not visible in the current scrolling view ?
This is the CSS I apply on the control:
<style type="text/css">
/*AutoComplete flyout */
.completionList {
border:solid 1px #444444;
margin:0px;
padding:0px;
height: 143px;
overflow:auto;
background-color: #FFFFFF;
}
.listItem {
display: block;
padding: 5px 5px;
border-bottom: 1px solid #DDD;
font-size:small;
font-style:normal;
font-weight:400;
}
.itemHighlighted {
background-color: lightgray;
display: block;
padding: 5px 5px;
font-size:small;
border-bottom: 1px solid #DDD;
}
</style>
This is the control:
<ajaxToolkit:AutoCompleteExtender ID="ACSource" runat="server" TargetControlID="txtSource_Type" ServiceMethod="AutoCompleteSourceType" CompletionListCssClass="completionList"
CompletionListHighlightedItemCssClass="itemHighlighted" CompletionListItemCssClass="listItem" MinimumPrefixLength="1"
OnClientItemSelected="SourceTypeSelected" ></ajaxToolkit:AutoCompleteExtender>
I'm having issues centering an ASP menu, it is 100% of the time aligning to the left of the window. I have it enclosed in a Div, and then nested in another Div.
I can get it to align right if I have the nested Div to float:right. I've been reading on including !important to override some styles from other divs that may be causing this Header div to not align properly.
CSS
body {
}
#Header
{
width: 100%;
height: 40px;
font-family: Calibri;
text-align:center !important;
}
#LeftColumn
{
font-family: Verdana;
font-size: small;
text-align: left;
float: left;
padding-top: 20px;
padding-left: 2%;
width: 19%;
height: 250px;
}
#MainContent
{
font-family: Verdana;
font-size: medium;
padding-top: 20px;
width: 79%;
height: 250px;
float: right;
text-align: center;
position: relative;
}
#Footer
{
font-family: Verdana;
font-size: x-small;
color: white;
padding-left: 20%;
width: 79%;
height: 15px;
float:
}
Default.aspx
<div id="Header">
<div style="text-align:center !important">
<asp:Menu ID="Menu" runat="server" Orientation="Horizontal" >
<Items>
<asp:MenuItem Text="MenuItem1" Value="MenuItem1">
<asp:MenuItem Text="Test1" Value="Test1" />
<asp:MenuItem Text="Test2" Value="Test2" />
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
</div>
Asp:Menu alignment depends on "dir" attribute of parent element which is "ltr" by default.
Set dir="rtl" attribute on a parent element for asp:Menu right alignment, for example:
<div dir="rtl">
<asp:Menu>
</asp:Menu>
</div>
I have a menu bar in the site master in a table. For some reason I cant figure out there is always padding above it.
This is the css:
div.menu
{
padding: 0px 0px 0px 0px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
}
div.menu ul li
{
color: white;
font-family:arial;
font-size:12px;
font-weight:bold;
display: block;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a
{
padding: 4px 20px;
color: white;
font-family:arial;
font-size:12px;
font-weight:bold;
display: block;
text-decoration: none;
white-space: nowrap;
background-color: #2c4257;
}
div.menu a ul li a:visited
{
background-color: #25394B;
color: white;
font-family:arial;
font-size:12px;
font-weight:bold;
display: block;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #25394B;
color: #ef7c31;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #25394B;
color: #ef7c31;
text-decoration: none;
text-align:left
}
and this is in the site master
<table style="background-color: #2E4459">
<tr>
<td>
<asp:Menu ID="SettingsMenu" runat="server" EnableViewState="True" IncludeStyleBlock="false" Orientation="Horizontal" CssClass="menu">
<DynamicSelectedStyle ForeColor="#ef7c31" />
<Items>
<asp:MenuItem ImageUrl="Images/settings.png">
<asp:MenuItem NavigateUrl="~/Pages/CRMSettings/Area.aspx" Text="Area" />
<asp:MenuItem NavigateUrl="~/Pages/CRMSettings/Post.aspx" Text="Post" />
I don't know how to fix it there is around 30 px.
Its also happening with out the image, if I just put text.
This is the setting.png
div.menu
{
padding: 0px !important;
}
try that
I think this is what you need. Try this. Add this to your CSS
html,body
{
padding:0px;
margin:0px;
}
what I figured-out was there is a padding padding: 4px 20px; value for div.menu ul li a changing that will help you. change it to div.menu ul li ul li a
div.menu ul li ul li a
{
padding: 4px 20px;
color: white;
font-family:arial;
font-size:12px;
font-weight:bold;
display: block;
text-decoration: none;
white-space: nowrap;
background-color: #2c4257;
}
I have a FileUpload Control like this
<asp:FileUpload ID="fileuploader" runat="server" />
Now I want to apply css only on the Browse button part
How can I do this?
Styling an input tag with type="file" requires a bit of work, browsers don't behave similarly when you try to style them unfortunately.
There are a few methods of doing so though:
http://www.quirksmode.org/dom/inputfile.html
http://www.appelsiini.net/projects/filestyle
This is possible you can change the FileUpload control using following code.
Step 1: Change FileUpload control with this code on aspx page
<label class="file-upload">
<span><strong>Upload Image</strong></span>
<asp:FileUpload ID="FileUpload1" runat="server" >
</asp:FileUpload>
</label>
Step 2: now add below CSS code into your main CSS file
.file-upload {
display: inline-block;
overflow: hidden;
text-align: center;
vertical-align: middle;
font-family: Arial;
border: 1px solid #124d77;
background: #007dc1;
color: #fff;
border-radius: 6px;
-moz-border-radius: 6px;
cursor: pointer;
text-shadow: #000 1px 1px 2px;
-webkit-border-radius: 6px;
}
.file-upload:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
background: -moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: -ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
background-color: #0061a7;
}
/* The button size */
.file-upload {
height: 30px;
}
.file-upload, .file-upload span {
width: 90px;
}
.file-upload input {
top: 0;
left: 0;
margin: 0;
font-size: 11px;
font-weight: bold;
/* Loses tab index in webkit if width is set to 0 */
opacity: 0;
filter: alpha(opacity=0);
}
.file-upload strong {
font: normal 12px Tahoma,sans-serif;
text-align: center;
vertical-align: middle;
}
.file-upload span {
top: 0;
left: 0;
display: inline-block;
/* Adjust button text vertical alignment */
padding-top: 5px;
}
It's done.
apparently you cannot style them directly with CSS but you can "hack" a new style into them - read the following article for details
http://www.quirksmode.org/dom/inputfile.html