Call me a noob, but I am terrible at styling. Not my forte. But anyways, on my CSS page I need to have my MasterPage Navigation bar be on the left side.
But when I click on the link to bring me to different page, it has to show up in the middle with the navigation on the left still.
Is this more then just styling? If it is, please help.
Here is my asp code:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="~/MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Travis's Master Page = Resume Information</title>
<asp:ContentPlaceHolder ID="head" runat="server">
<link href="Stylesheet" rel="stylesheet" type="text/css" />
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="page">
<div id="header" >
<asp:Image ID="Image1" runat="server" Height="99px"
ImageUrl="./Pictures/city2.jpg" Width="70px" />
</div>
<div id="sidebar" >
<asp:HyperLink ID="Home" runat="server"
NavigationUrl="./Default.aspx" CssClass="link">Home</asp:HyperLink>
<br /><br />
Education
<asp:HyperLink ID="Proficiencies" runat="server"
NavigationUrl="./Default3.aspx" CssClass="link">IT Proficiencies</asp:HyperLink>
<br /><br />
<asp:HyperLink ID="Involvement" runat="server"
NavigationUrl="./Default4.aspx" CssClass="link">Community Involvement</asp:HyperLink>
<br /><br />
<asp:HyperLink ID="References" runat="server"
NavigationUrl="./Default5.aspx" CssClass="link">References</asp:HyperLink>
<br /><br />
</div>
<div id="main">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="message">
<asp:Label ID="lblMessage" runat="server" Text="This is a Label" CssClass="label"></asp:Label>
<br />
</div>
</div>
</form>
</body>
</html>
And laugh if you want, but this is about as far as i can get with styling.
Body
{
}
Aside
{
}
Footer
{
}
Any help with this will be greatly appreciated. I know this is probably just very basic stuff, but I would like a helping hand.
Thanks!
EDIT: Right now, as it currently stands, it is all on the left side. The information that is entered in on other pages still shows up on the navigation bar. I can't get it to show up in the middle.
the fix would be to use floats:
set your sidebar to float:left.
set your main to float:right:
after your main div add: <div style="clear: both;"></div>
this should do the trick.
here is a very very simple jsfiddle that demostrates it:
http://jsfiddle.net/LM3xp/
Related
I have linked my html elements with ID to can read it
I can access the asp elements inside the same page in this tag
<script></script>
but I can't access its in the separate code file called"Default.aspx.cs"
also the ordinary html elements can't access its inside <script></script>
rather than the separate code file "Default.aspx.cs"
<%# language="C#" %>
<!DOCTYPE html>
<html>
<head>
<title>A few goals</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script runat="server">
</script>
</head>
<body runat="server" onload="checkConnection">
<div class="container">
<div class="row" style="margin-top:200px;">
<center>
<div class="col-xs-12">
<h3>Authentication Step</h3>
<hr />
<form runat="server">
<input type="text" id="untxt" runat="server" placeholder="Username"/>
<input type="password" id="pwdtxt" runat="server" placeholder="Password"/>
<input type="submit" id="enterbtn" runat="server" value="Enter" />
<br />
<br />
<center><asp:Label ID="errmsg" runat="server">
</asp:Label></center>
<br />
<center><b style="color:darkred;">if account not exist , it will create a new account automaticity</b></center>
</form>
</div>
</center>
</div>
</div>
</body>
</html>
I need easy way to access these elements easily , thanks
You can't just access html tags in your .cs file, even if you add IDs to them, this is only for javascript and css. You can access the elements marked with <asp:.../> or <asp:...></asp> and should contain runat=server.
<asp:Button id="id" text="label" OnClick="sub" runat="server" />
This button you should be able to access throgh ID id in your Default.cs. I suggest you to take a look at this documentation.
I want to load website pages with slide effect similar abnieh.
It means when you are click the menu elements, the page changes with slide effect.
I use Umbraco CMS, ASP.NET Web Form and C#.NET.
How can I do it?
Please help me.
a part of my main master page is:
<form id="AbniyehMainForm" runat="server">
<div id="MasterMaster" style="width: 100%;">
<div>
<asp:ContentPlaceHolder runat="server" ID="ContentPlaceHolderDefault">
<div>
<uc1:HeaderControl runat="server" ID="HeaderControl" />
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="homePageContent"></asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="aboutUsContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="serviceSectionContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="projectSectionContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="newsSectionContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="contactUsSectionContent">
</asp:ContentPlaceHolder>
</div>
</asp:ContentPlaceHolder>
<div>
<asp:ContentPlaceHolder runat="server" ID="languagesContent">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder runat="server" ID="menuContent">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</form>
You will need to use a client side javascript effect, Most likely with jQuery and load the pages using ajax then slide the page in after it is loaded. I found this Project that looks like it will do what you want and here is a sample from a tutorial.
<script type="text/javascript">
$(document).ready(function() {
$("body").css("display", "none");
$("body").fadeIn(2000);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
And here is how you load a page via ajax from the jQuery website.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
body {
font-size: 12px;
font-family: Arial;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<b>Footer navigation:</b>
<ol id="new-nav"></ol>
<script>
$( "#new-nav" ).load( "/ #jq-footerNavigation li" );
</script>
</body>
</html>
I have a master page with the following code:
<body>
<form id="form1" runat="server">
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
<div id="headerBar">
<a href="<% = Page.ResolveUrl("~/default.aspx") %>">
<img src="<% = Page.ResolveUrl("~/images/logo.png") %>" id="logo" /></a> <span id="header_text">
Scrum Reports</span>
<asp:LoginStatus ID="LoginStatus1" runat="server" CssClass="login_status" LogoutAction="Redirect"
LogoutPageUrl="~/default.aspx" />
<asp:LoginName ID="LoginName1" runat="server" CssClass="login_user" />
</div>
</div>
</div>
<div id="menuBar">
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1" StaticDisplayLevels="2"
Orientation="Horizontal" >
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" SiteMapProvider="admin" runat="server" />
<asp:SiteMapDataSource ID="SiteMapDataSource2" SiteMapProvider="user" runat="server" />
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="mainContent">
<div id="container">
<div id="content">
<asp:ContentPlaceHolder ID="Main" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Developed by Application Solutions
</div>
</div>
<!-- END: Sticky Footer -->
</form>
</body>
Now I am using the following C# (as part of the master pages Page_Load method)to show or hide the sites menu depending on whether a user is logged in:
Menu1.Visible = Page.User.Identity.IsAuthenticated;
For some reason, this line of code is preventing content from being seen on another page when the user isn't logged in.
<%# Page Language="C#" AutoEventWireup="true" MasterPageFile="~/master/template.master" CodeFile="recoverpassword.aspx.cs" Inherits="password_recoverpassword" %>
<asp:Content ID="Content1" Visible="true" ContentPlaceHolderID="Main" runat="Server">
<div>
Cant see this content when not logged in.
</div>
</asp:Content>
Why is this happening? What can I do about it?
The code above:
Menu1.DataBind();
was causing the issue. When I removed it it it fixed it and everything else continued to work as normal.
This may seem like a simple question, but I have googled the crap out of it and can't find any clues.
Here is a basic page (trimmed down substantially for demo purposes)
<%# Master Language="C#" AutoEventWireup="true" CodeFile="NUBrand.master.cs" Inherits="nuservices_NUBrand" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="language" content="en" />
<script type="text/javascript">
var isiPad = navigator.userAgent.match(/iPad/i) != null;
var ua = navigator.userAgent;
var isiPad = /iPad/i.test(ua);
if (isiPad == false) { // viewport tag breaks ipad portrait... don't use it if it's an ipad
document.write('<meta name="viewport" content="width=device-width,initial-scale=1.0">');
}
</script>
<%--<!--[if gte IE 9]><!-->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="javascript/jquery-2.0.0.min.js"><\/script>')</script>
<!--<![endif]-->--%>
<%--js--%>
<script src="resources/js/jquery.stayInWebApp.js"></script>
<script src="resources/js/global.js"></script>
<%--css--%><link href="resources/css/bootstrap-custom.css" rel="stylesheet" />
<link href="resources/css/bootstrap-custom.css" rel="stylesheet" />
<link href="resources/forms.css" rel="stylesheet" />
<link href="resources/css/normalize.css" rel="stylesheet" />
<link href="resources/css/global.css" rel="stylesheet" />
<link media="all and (max-width: 768px)" rel="stylesheet" type="text/css" href="resources/css/mobile.css" />
<script src="resources/js/modernizr.js"></script>
<asp:ContentPlaceHolder ID="cphHead" runat="server" />
</head>
<body>
<div id="container">
<header id="mainHead">
</header>
<div id="pageHeader">
<div id="breadcrumb">
<asp:ContentPlaceHolder ID="cphHeaderLinks" runat="server" />
</div>
<div class="container-fluid">
<form id="Form1" runat="server" name="form1">
<asp:ContentPlaceHolder ID="cphBodyWithForm" runat="server" />
<asp:ContentPlaceHolder ID="cphBody" runat="server" />
<asp:ContentPlaceHolder ID="cphInputForm" runat="server" />
</form>
<div id="pageChildren">
</div>
</div>
</div>
<footer id="mainFooter">
</footer>
</div>
<asp:ContentPlaceHolder ID="cphPageScripts" runat="server" />
</body>
</html>
If the content is not important, let me know and I can remove that too for the readers sake.
In the main part of the body I have three content placeholders
<asp:ContentPlaceHolder ID="cphBodyWithForm" runat="server" />
<asp:ContentPlaceHolder ID="cphBody" runat="server" />
<asp:ContentPlaceHolder ID="cphInputForm" runat="server" />
I am using cphBody for most of my pages if that matters, the other ones are there for legacy reasons.
An example page that does not work in IE9 (but works fine in Chrome) looks like this:
<asp:Content ContentPlaceHolderID="cphBody" runat="Server">
<div class="row-fluid span12">
<div class="span7">
<%--validation summary--%>
<div class="row-fluid">
<div class="span12">
<asp:ValidationSummary ID="ValidationSummary2" runat="server" HeaderText="You must provide:"
ForeColor="#BF2E1A" />
</div>
</div>
<%--career week date--%>
<div class="row-fluid">
<div class="span6">
<span>Career Week Date:<%= UtilsWww.RequiredAsterisk %></span>
</div>
<div class="span6">
<asp:DropDownList runat="server" ID="inDate">
<asp:ListItem Text="" />
<asp:ListItem Text="February" />
<asp:ListItem Text="May" />
<asp:ListItem Text="August" />
<asp:ListItem Text="November" />
</asp:DropDownList>
<asp:RequiredFieldValidator runat="server" ErrorMessage="Career Week date" ID="RequiredFieldValidator4"
ControlToValidate="inDate" Display="Dynamic" Text="X" EnableClientScript="True" />
</div>
</div>
<%--Contact Email--%>
<div class="row-fluid">
<div class="span6">
<span>Contact's email:<%= UtilsWww.RequiredAsterisk %></span>
</div>
<div class="span6">
<asp:TextBox runat="server" ID="txtContactPersonEmail"></asp:TextBox>
<asp:RequiredFieldValidator runat="server" ErrorMessage="Contact Person's Email"
ID="RequiredFieldValidator3" Display="Dynamic" ControlToValidate="txtContactPersonEmail"
ToolTip="A contact person email must be provided!">X</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator runat="server" ErrorMessage="Valid Email Address"
ID="RegularExpressionValidator1" Display="Dynamic" ControlToValidate="txtContactPersonEmail"
ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" ToolTip="Email addresses must conform to internet email standards!">X</asp:RegularExpressionValidator>
</div>
</div>
<div class="row-fluid">
<asp:LinkButton ID="Linkbutton1" runat="server" CssClass="formSubmitButton" OnClick="Linkbutton1_Click">
Submit<img src="resources/images/icn_getstarted.png" alt="submit" class="btn-arrow"/>
</asp:LinkButton>
</div>
</div>
</div>
<div class="span5">
</div>
</asp:Content>
The codebehind for this example page does this:
protected void Linkbutton1_Click(object sender, EventArgs e)
{
this.Validate();
if (!this.IsValid) return;
...Do some other Stuff...
}
This is the line that is where all my problems are happening:
if (!this.IsValid) return;
In Chrome, that statement does not return, everything is valid, it does it's thing.
In IE9, that line hits the return statement and I am left sad and confused.
So what do you think is happening here? Where can I look (I have tried fiddler, following in the IE dev tools to debug the js, it gets confusing, I have compared they code in the 'broken pages' to the few that do actually work in IE9, no real difference)? I would love to get an answer like "Oh add this and everything will be great!", but I don't see that happening. So I am asking where to look for solutions to this, I am completely lost.
To give credit where credit is due, see the comments on the question. We arrived at the answer from there, so I will post it here.
There were a couple of javascript errors being thrown on the page (in unrelated libraries that we're being pulled in). Chrome obviously did not have an issue with this, but IE did. I correct the js error and the pages worked fine again. woot!
I am developing a C#/SQL VS 2008 website application and I'm trying to set breakpoints in my site.master file--is there a way to do this? The contents of this file are:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>
<!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 id="Head1" runat="server">
<title>Forms Authentication, Authorization, and User Accounts</title>
<link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<form id="form1" runat="server">
<div id="header">
<span class="title">User Account Tutorials</span><br />
<span class="breadcrumb">
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
</span>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<!-- Page-specific content will go here... -->
</asp:ContentPlaceHolder>
</div>
<div id="navigation">
<asp:ContentPlaceHolder ID="LoginContent" runat="server">
<asp:LoginView ID="LoginView1" runat="server">
<LoggedInTemplate>
Welcome back,<asp:LoginName ID="LoginName1" runat="server" />
</LoggedInTemplate>
<AnonymousTemplate>
Hello, stranger!
</AnonymousTemplate>
</asp:LoginView>
<br />
<br />
</asp:ContentPlaceHolder>
<asp:LoginStatus ID="LoginStatus1" runat="server" LogoutAction="Redirect" LogoutPageUrl="~/Logout.aspx" />
<ul>
<li>
<asp:HyperLink runat="server" ID="lnkHome" NavigateUrl="~/Default.aspx">Home</asp:HyperLink>
</li>
<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
<ItemTemplate>
<li>
<asp:HyperLink ID="lnkMenuItem" runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink>
<asp:Repeater ID="submenu" runat="server" DataSource="<%# ((SiteMapNode) Container.DataItem).ChildNodes %>">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink ID="lnkMenuItem" runat="server" NavigateUrl='<%# Eval("Url") %>'><%# Eval("Title") %></asp:HyperLink>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
</div>
</form>
</div>
</body>
</html>
My site.master.cs file contents:
public partial class Site : System.Web.UI.MasterPage
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
You can set breakpoints in the code-behind, and javascript debugging will be as good (or bad) as always. The master page is just another aspx page; nothing differs.
You should put the breakpoint in your code behind. i.e. PageLoad.
So in your case the code behind file is: Site.master.cs
The code behind of my masterpages are mostly empty (like you have). Its main purpose is to define your website's structure and it contains the place holders for you "real content".
Scenarios where you might want to put some logic in your Master page's code-behind is for instance when you want to generate a Google-maps javascript (coming from the database) at the bottom of every page of your website.
You can put breakpoint at the first '{' of the PageLoad method.