HTML site master not appearing on child pages

Question

coder91 0 Junior Poster

11 Years Ago

Hi, so for my .net project I've to use HTML/CSS provided by another colleague. Ive copied this into the site master page in .net but it doesn't appear in the child pages, anyone have any ideas how I can fix this. The code is:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Reports | StoreIT</title>
    <asp:ContentPlaceHolder ID="head" runat="server">
        <meta charset="UTF-8!"/>

        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>

        <!-- Link the CSS files to see the styling -->
        <link rel="stylesheet" href="css/reset.css"/>
        <link rel="stylesheet" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/custom.css"/>

        link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>

        <!-- Link angular, including the route file either CDN or local -->
        <script type="text/javascript" src="angular/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-route.min.js"></script>

        <!-- Link all other javascript files -->
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/respond.js"></script>
        <script type="text/javascript" src="js/main.js"></script>
        </asp:ContentPlaceHolder>
</head>
<body>
    <div class="container-fluid">
        <section class="col-md-2 hidden-sm hidden-xs main-menu">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                <nav>
                   <div class="nav-header">
                     <center>
                         <img src="images/storeit-logo2.png" alt="" class="img-responsive"/>
                     </center>
                    </div>
                    <ul>
                        <li><a href="index.html"><span class="glyphicon glyphicon-home"></span> Home</a></li>
                        <li><a href="requests.html"><span class="glyphicon glyphicon-file"></span> Requests</a></li>
                        <li><a href="inventory.html"><span class="glyphicon glyphicon-shopping-cart"></span> Inventory</a></li>
                        <li><a href="logs.html"><span class="glyphicon glyphicon-list-alt"></span> Logs</a></li>
                        <li class="active"><a href="reports.html"><span class="glyphicon glyphicon-inbox"></span> Reports</a></li>
                        <li><a href="users.html"><span class="glyphicon glyphicon-user"></span> Users</a></li>
                        <li><a href="settings.html"><span class="glyphicon glyphicon-cog"></span> Settings</a></li>
                        <hr/>

                         <asp:Label ID="Label2" runat="server" Text="Label">Quick Links</asp:Label>
                        <li><a href="#" class="baby-blue"><span class="glyphicon glyphicon-exclamation-sign"></span> Todays Requests</a></li>
                        <li><a href="#" class="apple-green"><span class="glyphicon glyphicon-exclamation-sign"></span>Print Barcodes</a></li>
                    </ul>
                 </nav>
            </asp:ContentPlaceHolder>
        </section>
        <section class="visible-sm col-sm-2 visible-xs col-xs-2 main-menu">
             <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
                 <nav>
                    <div class="nav-header small">
                        <center>
                            <img src="images/storeit-icon.png" alt="" class="img-responsive"/>
                        </center>
                    </div>
                    <ul class="small">
                        <li><a href="index.html"><span class="glyphicon glyphicon-home"></span></a></li>
                        <li><a href="requests.html"><span class="glyphicon glyphicon-file"></span></a></li>
                        <li><a href="inventory.html"><span class="glyphicon glyphicon-shopping-cart"></span></a></li>
                        <li><a href="logs.html"><span class="glyphicon glyphicon-list-alt"></span></a></li>
                        <li class="active"><a href="reports.html"><span class="glyphicon glyphicon-inbox"></span></a></li>
                        <li><a href="users.html"><span class="glyphicon glyphicon-user"></span> </a></li>
                        <li><a href="settings.html"><span class="glyphicon glyphicon-cog"></span> </a></li>
                        <hr/>


                        <asp:Label ID="Label1" runat="server" Text="Label">Quick Links</asp:Label>
                        <li><a href="#" class="baby-blue"><span class="glyphicon glyphicon-exclamation-sign"></span></a></li>
                        <li><a href="#" class="apple-green"><span class="glyphicon glyphicon-exclamation-sign"></span></a></li>
                    </ul>
                 </nav>
             </asp:ContentPlaceHolder>
         </section>
        <section class="col-md-5 col-sm-5 col-xs-5 first-content">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
                 <h1>Reports</h1>
                 <h3>Select a report to see more details</h3>
                 <hr/>
                 <h4>Report Categories</h4>
                 <ul>
                    <li><a href="#">Report Name 1</a></li>
                    <li><a href="#">Report Name 2</a></li>
                    <li><a href="#">Report Name 3</a></li>
                    <li><a href="#">Report Name 4</a></li>
                </ul>
                <div class="spacer"></div>

                <h4>Report Details</h4>
                <form action="#">
                    <label for="report name">Report Name</label>
                    <input type="text" class="form-control" id="reportName" name="report name" placeholder="Enter report name"/>

                    <label for="begin date">Begin Date</label>
                    <input type="date" class="form-control" id="beginDate" name="begin date"/>

                    <label for="end date">End Date</label>
                    <input type="date" class="form-control" id="endDate" name="end date"/>

                    <button class="btn btn-success pull-right">Generate Report</button>
                </form>

                <div class="spacer"></div>
            </asp:ContentPlaceHolder>
         </section>
        <section class="col-md-5 col-sm-5 col-xs-5 second-content">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server">
                <h1>{Report Name}</h1>
                <h3>{Dates}</h3>
                <hr/>

                <!-- Add Report Content here -->

               <button class="btn btn-success pull-right">Download Report</button>
            </asp:ContentPlaceHolder>
        </section>
    </div>
</body>
</html>

When I create a new page it comes up as:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="reporting.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder3" runat="server">
</asp:Content>
<asp:Content ID="Content5" ContentPlaceHolderID="ContentPlaceHolder4" runat="server">
</asp:Content>

.net html-css javascript

Edited 11 Years Ago by pritaeas because: Moved to ASP.NET

2 Contributors
2 Replies
328 Views
3 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by coder91

Dani AI

Generated 9 Months Ago

Quick follow-up to and with a few practical checks and fixes that often get missed when a master page "disappears" from child pages.

First, empty Content controls generated for a new content page will replace whatever is inside the matching ContentPlaceHolder in the master. If a child page contains an empty content block for the head placeholder you will effectively remove the master’s CSS/JS links. Two safe fixes: delete the child page’s empty Content tags you do not need, or move essential CSS/JS out of a head placeholder so they always render.

Paths are another common culprit when styling looks missing on child pages in subfolders. Prefer root-absolute or server-resolved URLs so asset locations do not depend on the child page folder. Examples:

<link rel="stylesheet" href="/css/custom.css" />
<link rel="stylesheet" href='<%= ResolveUrl("~/css/custom.css") %>' />

Either approach keeps links valid from any child page location.

Also validate the master page head markup: a single malformed tag (bad meta, missing angle bracket) can break parsing and prevent later head content from applying. Use the browser DevTools (F12) to check the rendered DOM, the Network tab for 404s on CSS/JS/images, and the Console for HTML/CSS/JS errors. If you need per-page additions but want a reliable baseline, put core assets outside placeholders and reserve a placeholder only for extra per-page head items.

If problems persist, confirm the MasterPageFile path in the page directive and remove unneeded auto-generated content blocks. These steps cover the most common, easy-to-fix causes.

All 2 Replies

JorgeM 958 Problem Solver

11 Years Ago

Ok, when you create a masterpage, you add contentPlaceHolder controls in the master as a placeholder for the "child page". In your example, your master page includes 5 of these controls.

so when you create a "child" page, you see ONLY see content controls. So in your example, if you were to add content to the content control with an id="Content5", that content will be rendered in the master in this section...

<asp:ContentPlaceHolder ID="ContentPlaceHolder4" runat="server">
  <h1>{Report Name}</h1>
  <h3>{Dates}</h3>
  <hr/>
  <!-- Add Report Content here -->
  <button class="btn btn-success pull-right">Download Report</button>
</asp:ContentPlaceHolder>

This is because in your child, Content5 maps back to ContentPlaceHolder4 in the master page.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

coder91 0 Junior Poster · Answer 1 · 2015-01-15T14:21:09+00:00

coder91 0 Junior Poster

11 Years Ago

Thank you, was able to get it working :)

HTML site master not appearing on child pages

Dani AI

Recommended Answers Collapse Answers

All 2 Replies

Recommended Answers