I am designing a master page of a website, which i am designing in asp.net web forms. Like the website :
http://bayyinah.com/dream./
I have worked up some stuff and below is the image, of how my website really looks now :
i have to make a footer and a menu, using jquery like the one in http://bayyinah.com/dream./
And here is my html of master page :
<%# Master Language="C#" AutoEventWireup="true" CodeFile="LeaveManagementSystemMasterPage.master.cs" Inherits="LeaveManagementSystemMasterPage" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link rel="Stylesheet" type="text/css" href="Menu.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width:100%;height:100%">
<tr>
<td>
<table width="100%" style="background-color: #202020">
<tr>
<td>
<asp:Image runat="server" ImageUrl="~/Images/LeaveImage.PNG"/>
</td>
<td width="100%">
</td>
</tr>
</table>
<%-- Provide header in the cell--%>
</td>
</tr>
<tr>
<td>
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Width="100%" MaximumDynamicDisplayLevels="10" CssClass="MenuBar">
<StaticMenuStyle CssClass="StaticMenuItem" />
<StaticMenuItemStyle CssClass="StaticMenuItemStyle" />
<StaticHoverStyle CssClass="StaticHoverStyle" />
<StaticSelectedStyle CssClass="StaticSelectedStyle" />
<DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
<DynamicHoverStyle CssClass="DynamicHoverStyle" />
</asp:Menu>
</td>
</tr>
<tr>
<td>
content here.
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
<tr>
<%--Footer would be provided here--%>
<td >
footer here
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Note that the website is the same website which i had mentioned in my previous questions :
Styling a data drive menu control in asp.net
Issue in creating a data driven menu in asp.net
If you're looking for general advice then Stack Overflow is the wrong place to look. I suggest that you check out the faq to determine what kind of questions to ask.
That being said, I do have some advice for you. I would ditch IE8 for development. Learn to develop on Chrome (or Firefox with Firebug) and then see if it works on other browsers. At the rate that IE8 is dropping, it will only be a concern for another year or two. Since it seems that you're learning web development for fun or a hobby, I don't think it's worth the pain. You can bring up the developer tool in Chrome by hitting F12. Learn to use these kinds of tools.
As for web forms, they can sometimes be difficult to handle. Learning the MVC architecture will help you loads to know how to program web sites. That's not to say you won't encounter web forms in the workplace. I personally rarely deal with web forms.
It seems that you're having problems understanding CSS. I suggest that you learn about the Box Model. The Mozilla Developer Network and w3schools are great resources to get you started. Don't be surprised if w3schools sometimes gives you bad advice. It helped me learn a great deal when I was starting out but it's not a place to go to for best practices.
If anyone else has any more advice to add feel free. I'm still a novice in my Senior year at College. Also feel free to correct me.
Related
I am not particularly proficient in ASP, so I might be missing something obvious here. I have a series of webpages that are using a wizardstep in asp to process. In the HTML markup that is returned there are some issues that have been brought to my attention to do with accessibility. The problem is that basically the HTML table returned is using attributes, rather than css style to display the data. I cannot see anywhere in the asp code where these attributes are being specified so I am unable to amend them. Would anyone be able to point me in the right direction?
Cheers.
<form id="form1" runat="server">
<h2><span style="font-size:90%;">
Code of Conduct for Members</span></h2>
<div style="text-align: center">
<asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="false" width="550px" ActiveStepIndex="0" OnFinishButtonClick="Wizard1_FinishButtonClick">
<WizardSteps>
<asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1">
<!-- <h2> -->
<span style="font-size:110%;position:relative;">Introduction</span></h2>
<p >
<span style="font-size:90%;">
This is from the iframe within this webpage: http://www.leicestershire-fire.gov.uk/cfa/complaints_members.shtml
Basically I can see this on the generated page as:
<table cellspacing="0" cellpadding="0" border="0" id="Wizard1" style="width:550px;border-collapse:collapse;">
<tr style="height:100%;">
<td align="left" valign="top" style="background-color:White;border-color:White;border-style:Solid;">
It looks like you are using an old version of ASP.NET, which is notorious for using inline styles instead of css classes.
There are two possible solutions:
Upgrade to ASP.NET 4. Search this page for "wizard": http://msdn.microsoft.com/en-us/library/s57a598e.aspx. This is preferable, although upgrading may alter the look and feel of your other pages and components. There are ways of making it backwards-compatible (see TargetFramework)
Install a CSS Adapter: http://www.asp.net/CssAdapters/ - as you can see though, this hasn't been updated since 2006.
You may also find this page useful so you can see an example of what the issue is and how they solve it with CSS Adapters: http://www.asp.net/cssadapters/Membership/CreateUserWizard.aspx
I have a Web Content Form containing a Div and various Server controls like DropDownList. When I run the application, it runs well without any errors, but when I view the HTML source, the Server controls are red underlined. On bringing the mouse over, say, DropDownList, a tooltip warning is displayed:
DropDownList is not a known element. This can occur if there is a compilation error in a website.
Edited
<%# Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="contentReportSchemesMenu.aspx.cs" Inherits="contentReportMenu" Title="Reports Menu" %>
<asp:Content ID="ContentReportMenu" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="divMenu" class="divMenu" runat="server">
<table id="tblMenuLayout" class="Options" runat="server">
<tr>
<td colspan="2" class="Top">Scheme Reports Menu</td>
<td></td>
</tr>
<tr>
<td class="Left">Report Type</td>
<td class="Right">
<asp:DropDownList ID="ddlReportType" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlReportType_SelectedIndexChanged"></asp:DropDownList>
</td>
</tr>
<tr>
<td class="Left">Select District</td>
<td class="Right">
<asp:DropDownList ID="ddlDistrict" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlDistrict_SelectedIndexChanged" Enabled="False"></asp:DropDownList>
</td>
</tr>
<tr>
<td class="Left">Select Block</td>
<td class="Right">
<asp:DropDownList ID="ddlBlock" runat="server" AutoPostBack="true" Enabled="False" OnSelectedIndexChanged="ddlBlock_SelectedIndexChanged"></asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" Enabled="False" />
</td>
<td></td>
</tr>
</table>
</div>
</asp:Content>
A quick Google search soon found the solution: Delete the files from “C:\Documents and Settings[Username]\Application Data\Microsoft\VisualStudio\9.0\ReflectedSchemas” folder (or “…\VisualStudio\8.0\…” if running Visual Studio 2005) in Windows XP. In Windows 7 it is under "C:\Users{User Profile}\AppData\Roaming\Microsoft...etc". Remember also the "VisualStudio" part of the path will be different depending on the version installed.
I closed Visual Studio (always a good ideas for changes that will affect the IDE), deleted the files then re-opened the project. The warnings were gone.
I found references to this solution at:
http://forums.asp.net/t/1205528.aspx
http://blogs.msdn.com/mikhailarkhipov/archive/2005/04/21/410557.aspx
FYI, the search term I used in Google was “element is not supported”.
I don't know why this happens but I do know there are some flakey domain profile things happening in the network environmnet.
You're receiving this error because the table is running at the server, but the tr and td elements are not. When you specify runat="server" on a table element, it expects child elements to run at the server as well.
There are two easy ways to verify this:
Remove runat="server" from the table declaration;
Take the DropDownList(s) outside of the table
Try one of these two options, and see if it fixes the problem.
EDIT
Make sure that the ContentPlaceHolderID on the content form matches the ID of the corresponding content area in the master page. If that doesn't fix your problem, try creating a new content form, applying the advice above, and add a control to the form in the content area. If there are no errors, then you know the issue is somewhere in your markup.
Try deleting the schema cache. To do this, close Visual Studio and delete all of the files in the following directory:
C:\Users\USERNAME\AppData\Roaming\Microsoft\VisualStudio\10.0\ReflectedSchemas
Once the files have been deleted, open Visual Studio again and the problem should be fixed.
You said that "when I view the HTML source, the Server controls are red underlined", but HTML source can not contains such elements like DropDownList because this is the ASP.NET control which is generated as HTML Select tag. Considering that common solution with schema cleanup is not helped you perhaps a problem is in an other place... I'll try to assume that you are opening ASPX/ASCX file itself using some third party editor which is not aware of ASP.NET controls, am I right?
I used Html Editor with firefox on my pc. I switched pcs and I tested my site again.. The HTML editor appears completely messed up across browsers ..It doesnt even look as good as it
is on the original pc i deployed it.
The question is why? And should I use ajax at all instead of jquery?
All the pages markup:
<%# Page Title="" Language="C#" MasterPageFile="~/YourGuruMaster.master" AutoEventWireup="true" CodeFile="PostEdit.aspx.cs" Inherits="PostEdit" %>
<%# Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit.HTMLEditor" tagprefix="cc1" %>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
<asp:PlaceHolder ID="PlaceHolder2" runat="server"></asp:PlaceHolder>
<cc1:Editor
ID="Editor1"
Width="850px"
Height="400px"
runat="server"/>
<br />
<asp:Button
id="btnSubmit"
Text="Submit"
Runat="server" onclick="btnSubmit_Click" />
<br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="Editor1" ErrorMessage="אין להשאיר שדות רקים"
ForeColor="#CC0000"></asp:RequiredFieldValidator>
1.) This is a much deeper problem. You probably need to add more rules to your css stylesheet. If you want the site to look the same across different browsers, you have to look into cross browser support and cross browser compatibility.
2.) The jQuery library has a full suite of AJAX capabilities. There is no need to use self-made js functions to create AJAX calls. Stick with jQuery.
I have placed an image on the master page.
I see the image at design time.
But I don't see the image at run time.
What can be the problem?
I have tried to place the image on an image box. But it didn't work either.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="Ice_Web_Portal.UI.MasterPage" EnableTheming="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>.::ICE Web Portal::.</title>
<link href="App_Themes/SmokeAndGlass/SmokeAndGlass.css" rel="stylesheet" type="text/css" />
</head>
<body >
<form id="form1" runat="server">
<table style="position: static">
<tr>
<td align="left" colspan="2">
<asp:Image ID="Image1" runat="server" ImageUrl="~/App_Themes/Banner.JPG" /></td>
<td>
</td>
</tr>
<tr>
<td rowspan="2">
<div>
</div>
</td>
<td style="width: 3px">
<asp:LoginView ID="LoginView1" runat="server">
<LoggedInTemplate>
<table style="width: 204px">
<tr>
<td>
Login Status :</td>
<td>
<asp:LoginStatus ID="LoginStatus1" runat="server" />
</td>
<td>
</td>
</tr>
<tr>
<td>
Login Name :</td>
<td>
<asp:LoginName ID="LoginName1" runat="server" />
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</LoggedInTemplate>
</asp:LoginView>
</td>
<td>
</td>
</tr>
<tr>
<td style="width: 3px">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td style="width: 3px">
</td>
<td>
</td>
</tr>
</table>
</form>
</body>
</html>
It sounds like you may have a URL mapping issue of some kind... For the ImageURL property try setting it to "~/Images/MyImage.png"...
Rather than storing an image directly in the App_Theme folder, create a folder for images and try to use that instead. The App_Theme directory is handled differently...
It sounds like an issue with Relative Paths in Master Pages to me. The solution is the tilda (~) character, which signifies the root folder regardless where the content page resides.
I just tested your code and it worked for me.
Have you tried it using multiple web browsers? (a caching issue perhaps?)
Are you manipulating the image in the code-behind?
I think your image files are not accessible on runtime.
Just paste this code in your web.config file and the images will be displayed.
<?xml version="1.0" encoding="utf-8"?>
<configuration xmlns="http://schemas.microsoft.com/.NetConfiguration/v2.0">
<system.web>
<authorization>
<allow users="*" />
</authorization>
</system.web>
</configuration>
It is a relative path issue, change your stylesheet to:
<link href="~/App_Themes/SmokeAndGlass/SmokeAndGlass.css" rel="stylesheet" type="text/css" runat="server"/>
i had the same problem, it was permissions, just check images that show up in the web form and copy the same permissions to the img not showing up.
I know this is a long time question but i happen to see it now, i want to share with you all how i solve mine challenge:
Just replace bellow code in your web.config and put the image path as illustrated
<location path="Image Path">
<system.web>
<authorization>
<allow user="*"/>
</authorization>
</system.web>
</location>
Hope it help
Hmm..seems to be perfectly fine. Did you try to use normal HTML tags like
<img src="<sourceToImage>/App_Themes/Banner.JPG"/>
..just to see whether that works.
Another problem could be the UPPER-case "JPG" extension (although I don't know whether that really matters).
Check whether your stylesheet does some operations upon images.
Simple.
Create a folder Images inside your Project folder.
Place your image, e.g. logo.jpg, inside the Images folder
Back to your project, in your Image properties provide the relative path, i.e your ImageURL, as ~\Images\hlogo.jpg.
Your image will then display in the web browser.
In IIS 7 when you install the ASP.NET modules, static content is not installed by default. You will need to go into programs and features, then "Turn windows features on or off".
Under IIS section, drill down into WWW services, Common Http features, and check "Static Content".
Without that css, images, html, and other non-dynamic content will not show up.
I had a similar issue with my VB.NET application using IIS 8.5 on 2012 R2. I has to specifically add my image extensions (.jpg, .png) to 'Request Filtering' for my Default site in IIS 8.5.
try the below format:
("../App_Themes/Banner.JPG")
I have a asp.net page, the main content section displays the custom html content from the database. To the right of it, it has a few user control that lets the user make drop down selections and go to its perspective links.
So it's something like this:
<asp:Content ID="Content3" ContentPlaceHolderID="mainContentPlaceHolder" Runat="Server">
<atlas:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" />
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<%=Session["xyz"].ToString()%>
</td>
</tr>
</table>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="rightContentPlaceHolder" Runat="Server">
<table cellpadding="0" cellspacing="0" border="0" style="margin-left: 4px;">
<tr>
<td style="width: 239px;">
<uc18:x ID="x1" runat="server" referer="Home" />
<uc17:y ID="y1" runat="server" />
<uc4:z ID="z1" runat="server" />
</td>
</tr>
</table>
</asp:Content>
The user contorls are pretty straight forward. Each one of them has drop downs. If one selects, it populates the next one..etc, and they are wrapped around a update panel so the page won't referesh itself on selection.
The issue i have is when the page first loaded, the content in <%=Session["xyz"].ToString()%>, which sometimes have css inline style, loads fine. However as soon as the user clicks on the first drop down of any user control, the css inline style disappears.
My question is why is the inline style not being rendered by the browser again on ajax postback (only happening in IE, firefox is ok)? What should i do about this?
Thanks in advance.
Angela.
It turns out that there's bug with Atlas. If i use the asp.net ajax, it works fine. Unfortunately i cannot change Atals ajas to asp.net for the time being. My easiest solution was to let the full post back happen.