I am trying t make an asp.net website, and am using notepad++ so do not have auto setup options eg from visual studio.
I am using a master page which I am trying to use throughout the site.
I am having lots of problems but have finally got a page to display with no errors, but it now does not display any content from the master page.
I am including all the code I have in the hope someone can explain to me why my content from the masterpage is not displaying. I feel I am close but have not found a decent tutorial to show me what I need to do.
Masterpage:
<asp:ContentPlaceHolder ID="CPH1" runat="server">
<HTML>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Style/main_Style.css">
<link rel="stylesheet" type="text/css" href="Style/Responsive-Style.css">
<link rel="stylesheet" href="Style/style.css">
<link rel="stylesheet" href="Style/slicknav.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<link rel="stylesheet" href="Style/flexslider.css" type="text/css" media="screen" />
<script src="Javascript/modernizr.js"></script>
</head>
<body>
<div class="headerOutline">
<div class="logo">
<img class="omTechLogo" src="images/mainLogo.png"></img>
</div>
<div class="headerMenu">
<ul id="menu">
<li class="headerMenuItem"><a class="menuText" href="Home.HTML">Home</a></li>
<li class="headerMenuItem"><a class="menuText" href="About.HTML">About</a></li>
<li class="headerMenuItem"><a class="menuText" href="Services.HTML">Services</a></li>
<li class="headerMenuItem"><a class="menuText" href="Portfolio.HTML">Portfolio</a></li>
<li class="headerMenuItem" id="headerMenuItem_last"><a class="menuText" href="Contact.HTML">Contact</a></li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="JQuery/jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#menu').slicknav();
});
</script>
</div>
</div>
<div class="bodyOutline">
<div class="flexslider" style="height:auto; min-height:150px;">
<ul class="slides">
<li>
<img src="images/SliderImage1.jpg" />
</li>
<li>
<img src="images/SliderImage2.png" />
</li>
<li>
<img src="images/SliderImage3.jpg" />
</li>
<li>
<img src="images/SliderImage4.jpg" />
</li>
</ul>
</div>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<script defer src="JQuery/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>
<div class="homepageBody">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="CPH2" runat="server">
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="CPH3" runat="server">
</div>
</div>
<div class="footerOutline">
<div class="footerInfo">
<a class="footerList" href="Home.HTML">Home</a>
<a class="footerList" href="About.HTML">About</a>
<a class="footerList" href="Services.HTML">Services</a>
<a class="footerList_Last" href="Portfolio.HTML">Portfolio</a>
<a class="footerList_Last" href="Contact.HTML">Contact</a>
<div class="socialMedia">
<div class="socialMediaText">
<a href="http:\\www.linkedin.com"><img src="images/li.png"></img></a>
<a href="http:\\www.twitter.com"><img src="images/tw.png"></img></a>
<a href="http:\\www.youtube.com"><img src="images/yt.png"></img></a>
<a href="http:\\www.facebook.com"><img src="images/fb.png"></img></a>
</div>
</div>
</div>
</body>
</HTML>
</asp:ContentPlaceHolder>
and home page:
<%@ Page Language="C#" MasterPageFile="~/MasterPage/MasterPage.master" Title="Content Page"%>
<asp:Content ContentPlaceHolderId="CPH1" runat="server">
</asp:Content>
<asp:Content ContentPlaceHolderId="CPH2" runat="server">
TExt teX teXt
</asp:Content>
<asp:Content ContentPlaceHolderId="CPH3" runat="server">
</asp:Content>
I want the content from CPH1 and CPH3 to display on all pages, and the content from CPH2 to change with each page
You have html markup within your content placeholder ID=CPH3. When your page inflates, it will render it's content inside of that component replacing what is already there. In your case, it will render the empty contents of your page with contentplaceholderid=CPH3.
This is your problem:
<asp:ContentPlaceHolder ID="CPH3" runat="server">
</div>
</div>
<div class="footerOutline">
<div class="footerInfo">
<a class="footerList" href="Home.HTML">Home</a>
<a class="footerList" href="About.HTML">About</a>
<a class="footerList" href="Services.HTML">Services</a>
<a class="footerList_Last" href="Portfolio.HTML">Portfolio</a>
<a class="footerList_Last" href="Contact.HTML">Contact</a>
<div class="socialMedia">
<div class="socialMediaText">
<a href="http:\\www.linkedin.com"><img src="images/li.png"></img></a>
<a href="http:\\www.twitter.com"><img src="images/tw.png"></img></a>
<a href="http:\\www.youtube.com"><img src="images/yt.png"></img></a>
<a href="http:\\www.facebook.com"><img src="images/fb.png"></img></a>
</div>
</div>
</div>
</body>
</HTML>
</asp:ContentPlaceHolder>
You are basically killing the closing body and html tag along with your footer. Maybe you were trying to do this:?
<div>
<asp:ContentPlaceHolder ID="CPH3" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footerOutline">
<div class="footerInfo">
<a class="footerList" href="Home.HTML">Home</a>
<a class="footerList" href="About.HTML">About</a>
<a class="footerList" href="Services.HTML">Services</a>
<a class="footerList_Last" href="Portfolio.HTML">Portfolio</a>
<a class="footerList_Last" href="Contact.HTML">Contact</a>
<div class="socialMedia">
<div class="socialMediaText">
<a href="http:\\www.linkedin.com"><img src="images/li.png"></img></a>
<a href="http:\\www.twitter.com"><img src="images/tw.png"></img></a>
<a href="http:\\www.youtube.com"><img src="images/yt.png"></img></a>
<a href="http:\\www.facebook.com"><img src="images/fb.png"></img></a>
</div>
</div>
</div>
</body>