HTML and ASP.NET
Question
I created a master page and copied the html from another website and i want to use its design on my master page. I got the design in order by my issues comes when clicking the link. When the app starts, i click a link and it navigates to that link. If i want to navigate to another link, it adds the folder name to my other page location. the example is blow:
- page 1 - now if want to navigation to another page this is what happens in the url
http://mydomain.com/AdminSetup/Financial/Payroll/InitiatePayroll.aspx
- the actual location of this second page is /Payroll/InitiatePayroll.aspx
I dont get what this is happening, some help please. thank you
<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="SSP.master.vb" Inherits="SSPayroll.SSP" %>
<!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">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Free template built by slicejack.com</title>
<link type="text/css" media="screen" rel="stylesheet" href="stylesheets/reset.css" />
<link type="text/css" media="screen" rel="stylesheet" href="stylesheets/main.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="header">
<h1><a href="Default.aspx">Company logo</a></h1>
<ul>
<li><a href="Default.aspx" class="active">Home</a></li>
<li><a href="Payroll/InitiatePayroll.aspx">Payroll</a></li>
<li><a href="~/AdminSetup/Financial/AddIncome.aspx">Finance</a></li>
<li><a href="interior.html">Testimonials</a></li>
<li><a href="interior.html">Blog</a></li>
<li><a href="interior.html">Contact</a>
</li>
</ul>
</div>
<!-- //#header -->
<div id="sub-header">
<div id="sub-header-inner">
<h2>Free high quality template</h2>
<p class="highlight">The template is made by following the latest web standards.
PSD Files are available upon request. </p>
<p>This website is ideal for representing a product or service. Its code is descriptive so that is understandable even to those who don't have good knowledge of web technology. All of the images are optimized for web and website will display correctly in all web browsers.</p>
<p class="learn-more"><a href="interior.html">Learn more</a></p>
<img src="images/layout/sub_header_img.png" alt="" /> </div>
</div>
<!-- //#sub-header -->
<div id="content" class="clearfix">
<div id="content-inner">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<!-- //#content -->
<div id="footer">
<ul>
<li><a href="Default.aspx" class="active">Home</a></li>
<li><a href="Payroll/InitiatePayroll.aspx">Payroll</a></li>
<li><a href="interior.html">Services</a></li>
<li><a href="interior.html">Testimonials</a></li>
<li><a href="interior.html">Blog</a></li>
<li><a href="interior.html">Contact</a></li>
</ul>
<p>Website designed by: <a href="http://www.agilo.hr">Agilo</a>, Code: <a href="http://www.slicejack.com" title="PSD to (X)HTML service">Slicejack</a></p>
</div>
<!-- //#footer -->
</form>
</body>
</html>
this is my master page.
body { background: #fff url(../images/layout/body.gif) top center no-repeat; font-family: Arial, Helvetica, sans-serif; }
#header { width: 960px; margin: 0 auto; height: 118px; position: relative; }
#header h1 { padding-top: 29px; }
#header h1 a { background: url(../images/layout/logo.png) no-repeat; display: block; text-indent: -5000px; width: 156px; height: 22px; }
#header fieldset { background: url(../images/layout/search.png) no-repeat; width: 181px; height: 25px; position: absolute; right: 0; top: 26px; }
#header fieldset .search { background: none; font-size: 11px; display: block; color: #969696; border: none; padding: 0 8px 0 8px; width: 138px; margin-top: 5px; }
#header ul { position: absolute; top: 88px; left: 0; }
#header ul li { display: inline; }
#header ul li a { font-size: 11px; text-decoration: none; text-transform: uppercase; margin-right: 20px; color: #fff; }
#header ul li a:hover, #header ul li a.active { color: #acfc5d; }
#sub-header { background: #7db63c url(../images/layout/sub_header.gif) top repeat-x; color: #fff; height: 281px; }
#sub-header-inner { width: 960px; margin: 0 auto; padding: 34px 0; position: relative; }
#sub-header h2 { background: url(../images/headings/main.png) no-repeat; width: 298px; height: 23px; margin-bottom: 12px; text-indent: -5000px; }
#sub-header p { margin-bottom: 18px; width: 610px; font-size: 13px; line-height: 1.5; }
#sub-header p.highlight { font-size: 16px; }
#sub-header p.learn-more { margin: 0; }
#sub-header p.learn-more a { display: block; text-align: center; font-size: 13px; color: #fff; background: url(../images/buttons/learn_more.png) no-repeat; height: 27px; width: 105px; text-decoration: none; padding-top: 4px; }
#sub-header p.learn-more a:hover { background-position: right; }
#sub-header img { position: absolute; right: 0; top: 30px; }
#sub-header.interior { height: 142px; background: url(../images/layout/sub_header_interior.gif) repeat-x; }
#sub-header.interior p { width: auto; }
#sub-header.interior #sub-header-inner { padding: 30px 0 0 0; }
#sub-header.interior h2 { background: url(../images/headings/interior.png) no-repeat; }
#content { background: url(../images/layout/content.gif) top repeat-x; margin-bottom: 20px; }
#content-inner { width: 960px; margin: 0 auto; padding: 30px 0; }
#content .column { width: 305px; float: left; margin-right: 20px; }
#content .column.last { margin-right: 0; }
#content .column h3 { text-indent: -5000px; height: 16px; width: 300px; margin-bottom: 8px; }
#content .column h3#about { background: url(../images/headings/about.png) no-repeat; }
#content .column h3#services { background: url(../images/headings/services.png) no-repeat; }
#content .column h3#connect { background: url(../images/headings/connect.png) no-repeat; }
#content .column p { font-size: 11px; line-height: 1.6; margin-bottom: 12px; color: #333; }
#content .column a { color: #6fa235; }
#content .column a:hover { color: #527628; }
#content .column p.read-more a { display: block; width: 95px; height: 23px; font-size: 11px; text-decoration: none; color: #360; background: url(../images/buttons/read_more.gif) left no-repeat; text-align: center; padding-top: 5px; }
#content .column p.read-more a:hover { background-position: right; }
#content .column img.left { float: left; margin: 3px 10px 0 0; padding: 1px; background: #fff; border: 2px solid #ececec; }
#content .column strong { font-weight: bold; }
#content .column em { font-style: italic; }
#content .column.main { width: 600px; }
#content .column.main h2, #content .column.main h3, #content .column.main h4, #content .column.main h5 { margin-bottom: 12px; font-weight: bold; color: #333; }
#content .column.main h2 { text-indent: -5000px; height: 15px; width: 590px; }
#content .column.main h2#lorem { background: url(../images/headings/lorem.png) no-repeat; }
#content .column.main h3 { text-indent: 0; font-size: 14px; }
#content .column.main h4 { font-size: 12px; }
#content .column.main h5 { font-size: 11px; }
#content .column.main table { width: 100%; border: 1px solid #e3e3e3; font-size: 11px; margin-bottom: 12px; }
#content .column.main table th { padding: 6px 10px; border: 1px solid #e3e3e3; font-weight: bold; color: #6fa235; }
#content .column.main table td { padding: 6px 10px; border: 1px solid #e3e3e3; color: #333; }
#content .column.main table .odd { background: #fafafa; }
#content .column.main ul li { font-size: 11px; margin-left: 25px; list-style: disc; }
#content .column.sidebar { width: 310px; float: right; margin-right: 0; }
#content .column.sidebar h3 { text-indent: -5000px; height: 15px; width: 310px; }
#content .column.sidebar h3#example { background: url(../images/headings/example.png) no-repeat; }
#content .column.sidebar h3#touch { background: url(../images/headings/touch.png) no-repeat; }
#content .column.sidebar p { color: #666; }
#content .column.sidebar p.read-more { margin-bottom: 20px; }
#content .column.sidebar fieldset label { font-size: 11px; display: block; margin-bottom: 5px; color: #666; }
#content .column.sidebar fieldset li { margin-bottom: 10px; }
#content .column.sidebar fieldset .text, #content .column.sidebar fieldset textarea { border: 1px solid #e3e3e3; -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px; padding: 3px; font-size: 11px; color: #666; width: 202px; }
#content .column.sidebar fieldset .text:hover, #content .column.sidebar fieldset textarea:hover { border: 1px solid #c5c4c4; }
#content .column.sidebar fieldset textarea { height: 90px; width: 302px; }
#content .column.sidebar fieldset .button { background: url(../images/buttons/read_more.gif) no-repeat; width: 95px; height: 28px; text-align: center; color: #360; font-size: 11px; border: none; cursor: pointer; }
#content .column.sidebar fieldset .button:hover { background-position: right; }
#footer { clear: both; margin: 0 auto; width: 940px; padding: 6px 10px 12px 10px; border-top: 1px solid #e5e5e5; position: relative; }
#footer ul li { display: inline; }
#footer ul li a { font-size: 11px; text-decoration: none; color: #b5b5b5; margin-right: 12px; }
#footer ul li a.active, #footer ul li a:hover { color: #6b9f3c; }
#footer p { position: absolute; right: 10px; top: 10px; font-size: 11px; color: #b5b5b5; }
#footer p a { text-decoration: none; color: #6b9f3c; }
this is my css class
3 answers
solution1
1 2013-02-28 15:40:52
The tilde ~ as suggested by others can only be used in server controls to render relative to the root. Try changin the links to server controls
<asp:HyperLink ID="myId" CssClass="active" NavigateUrl="~/Default.aspx" runat="server">Home</asp:HyperLink>
solution2
0 2013-02-28 15:38:00
The URL is being resolved relative to the current folder.
Change your payroll link to one of the following:
<li><a href="~/Payroll/InitiatePayroll.aspx">Payroll</a></li> (resolve relative to the root)
<li><a href="../Payroll/InitiatePayroll.aspx">Payroll</a></li> (resolve as sibling of current folder)
solution3
0 2013-02-28 15:42:13
Try using asp:HyperLink s instead of just plain a s:
<asp:HyperLink id="hlPayroll" runat="server"
NavigateUrl="~/Payroll/InitiatePayroll.aspx"
Text="Payroll"></asp:HyperLink>
The server control will resolve a client url with the root where the tilde is.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.