I have a sitemap in my project i did some changes and then the sitemap lost its appearance and its appearing like this.
And what I have in another site is like this..
Both of them are using the same style sheet. Even I tried copying from one to another but when i paste it then it will loose its design color. I don't know what's wrong. I checked the config file and other project properties but doesn't seems like working.
I'm using Visual Studio 2010 SP1 and .Net framework 4.0 in both cases
Code for the Menu control(Which is same in both):
CSS :
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:white;
width:100%;
}
div.menu
{
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: #F87431;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #F87431;
color: #cfdbe6;
text-decoration: none;
}
Your CSS targets a list but old versions of .NET render the menu as a table - see if you have this setting somewhere in your Web.Config
controlRenderingCompatibilityVersion=3.5
This tells .NET to render controls the old way via tables so your CSS will not be applied - remove that and it should render as UL/LI tags and your styles will now work.
Related
I have a div with a background image with an image nested inside of it. I am using a CSS class to set the background and positioning properties of that div. I would like for the user to control which background they see via a query string. The code behind would basically change (switch) the class of that div so that the background image would change based on the string typed in the address box.
Here is the HTML with the div and Css.
.background1 {
background-image: url(../Background1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
height: 100vh;
width: 100%;
max-height: 100vh;
max-width: 100vw;
margin-left: auto;
margin-right: auto;
display: block;
}
.background2 {
background-image: url(../Background2.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
height: 100vh;
width: 100%;
max-height: 100vh;
max-width: 100vw;
margin-left: auto;
margin-right: auto;
display: block;
}
.background3 {
background-image: url(../Background3.png);
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
height: 100vh;
width: 100%;
max-height: 100vh;
max-width: 100vw;
margin-left: auto;
margin-right: auto;
display: block;
}
<div id="div" class="background1" runat="server"></div>
Here is what I (currently) have in the code behind.
if (Request["nobg"] != null)
{
div.Style.Add("display", "none");
}
So in the end I would like the user to switch between classes by typing in something like "?Background3" after the url to change the class (to see a different background) But I am sort of stuck as I really do not know if what I would like to do (switch between the background classes via query-string) is possible. Any help would be great. Thanks.
I am creating an Windows phone application which is rendering html content on web browser.
I have a css file where i need to alter some values which are in a special format.
Following is an example of my data, where you can see a number of '.position-page{n}-{n}'
style tags there includes 3 properties in each margin left ,right & top.
</style><style type='text/css'>
.position-page2-1 {
margin-right: 180px;
margin-left: 180px;
margin-top: 280px;
}
.position-page2-2 {
margin-right: 350px;
margin-left: 150px;
margin-top: 20px;
}
.position-page2-3 {
margin-right: 180px;
margin-left: 220px;
margin-top: 80px;
}
.position-page2-4 {
margin-right: 180px;
margin-left: 220px;
margin-top: -20px;
}
.position-page2-5 {
margin-right: 350px;
margin-left: 140px;
margin-top: -10px;
color: #5ED6FB;
}
.page2-2 {
font-size: 20px;
text-align: justify;
line-height: 25px;
}
.page2-3 {
font-size: 15px;
text-align: justify;
line-height: 20px;
}
.page2-4 {
font-size: 15px;
text-align: justify;
line-height: 20px;
}
.page2-5 {
font-size: 20px;
text-align: justify;
line-height: 25px;
}
</style>
We are getting this style text as response from a 3rd party service.
As per our requirement i need to reduce margin's value to some percentage. Suppose if 150px is the margin i want replace it by 30px , i need to replace each margin value in to currentmargin/5 px.
What is the best way to do this?
Is that possible for you to use viewport scale?
In that case you should not change anything in css at all.
<meta name="viewport" content="width=320, initial-scale=1">
Here is more info about design adaptation, provided by Microsoft:
Managing the Windows Phone Browser Viewport
I have two model popup windows in my project. When i clcik a search button first modul popup will popp in the window. This model popup have option to view details. When i click on it i need another popup to pop and show details.
Now problem is when i click on the view option the second popup is coming behind first popup and its not visible.
What may be the mistake i have done
if (e.CommandName.Equals("View"))
{
ModalRearrangement.Show();
ModalViewDocument.Show();
}
In the above code ModalRearrangement is the first popup.
Update
CSS
.modalBackground
{
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
}
.modalPopup
{
background-color: #FFFFFF;
width: 300px;
border: 3px solid #3CB371;
border-radius: 12px;
padding:0
}
.modalPopup .header
{
background-color: #2FBDF1;
height: 30px;
color: White;
line-height: 30px;
text-align: center;
font-weight: bold;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.modalPopup .body
{
min-height: 50px;
line-height: 30px;
text-align: center;
font-weight: bold;
}
.modalPopup .footer
{
padding: 6px;
}
This is common css for both popup.
Add This To your HTML in Popup Div
Give z-index : 990 To First Pop up
And z-index : 9990 To Second Pop up
On my Master page, I have created a Horizontal menu, styled by CSS. The list items show panels with link buttons on them to take users to different pages.
The Panels always show above controls, except for one page.
The content of the page shows 2 asp:Buttons. On this page, the panel gets hidden behind the buttons, but the border for the panel still shows.
The image below will illustrate clearly:
The CSS for the horizontal menu is as follows:
/* Horizontal menue style */
ul
{
padding: 0;
margin: 0 0 0 0 ;
list-style: none;
}
li
{
cursor: default;
float: left;
position: relative;
width: 90px;
color: darkgray;
text-align: center;
background-color: white;
height: 23px;
padding-top: 2px;
}
li:hover {
background-color: white;
color: black;
padding-top: 2px;
}
li ul
{
display: none;
position: absolute;
margin: 0;
padding: 0;
margin-top: -9px;
width: 100px;
}
li > ul
{
top: auto;
left: auto;
}
li:hover ul, li.over ul
{
display: block;
}
The panel goes through a skin file:
<asp:Panel runat="server" CssClass="menuWrapper" SkinID="MenuWrapper"></asp:Panel>
.menuWrapper
{
z-index: 500;
font-size: small;
margin-top: 15px;
margin-left: -2px;
padding: 5px;
padding-left: 15px;
line-height: 25px;
background-color: white;
width: 190px;
text-align: left;
border-left: 1px lightgray solid;
border-bottom: 1px lightgray solid;
border-right: 1px lightgray solid;
border-top-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
}
Ive even fiddles with the z-index. How can I create a solution.
The answer lies in the z-index of the UL.
I have changed the UL css to the following:
ul
{
padding: 0;
margin: 0 0 0 0 ;
list-style: none;
z-index: 499;
}
Which has now fixed the issue.
I am using asp.NET 4.0 with C# and have recently created a custom design for my local web application. I would like that when a page is selected, it has a different background colour (usually in plain html + css we just set a menu item as active). I tried using but it is not working, it stays the same colour as the others. Does any one has any experience with this?
Code in Site Master:
<h2>Dashboard</h2>
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Vertical" >
<StaticSelectedStyle CssClass="selectedMenu" />
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="View Submissions"/>
<asp:MenuItem NavigateUrl="~/Imports.aspx" Text="Import"/>
<asp:MenuItem NavigateUrl="~/Submission.aspx" Text="Insert Submission"/>
<asp:MenuItem NavigateUrl="~/Reports.aspx" Text="Reports"/>
<asp:MenuItem NavigateUrl="~/CurrencyMaintenance.aspx" Text="Currency Maintenance" />
<asp:MenuItem NavigateUrl="~/Remittance.aspx" Text="Remittance" />
</Items>
</asp:Menu>
CSS:
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
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: #FFF; /*680840*/
border: 1px #4e667d solid;
height: 20px;
width: 175px;
color: #000; /*FFF*/
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #680840;
color: #FFF;
text-decoration: none;
}
.selectedMenu
{
background-color: #680840 !important;
color: #FFF !important;
text-decoration: none !important;
}
div.menu ul li a:active
{
background-color: #680840;
color: #cfdbe6;
text-decoration: none;
}
This is what it looks like on Hover, I would like a similar effect on selected.
This seems to be a bug with the .NET menu. There is some information regarding this here. What you might want to do then is remove the staticSelectedStyle attribute and simply add this to your css:
.menu a.static.selected
{
background-color: #680840 !important;
color: #FFF !important;
text-decoration: none !important;
}
You might also have to add some code to your master's page load to determine which should be the selected item like this:
protected void Page_Load(object sender, EventArgs e)
{
string path = Request.AppRelativeCurrentExecutionFilePath;
foreach (MenuItem item in NavigationMenu.Items)
{
item.Selected = item.NavigateUrl.Equals(path, StringComparison.InvariantCultureIgnoreCase);
}
}