I have a master page in asp.net which will contain other pages content throw a ContentPlaceHolder. I want to have a footer in the master page that sticks at the bottom usin css not matter what is displayed in the pages the uses the content ContentPlaceHolder.
Here is my master page:
<body>
<form id="form1" runat="server" style="height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
<Scripts>
<asp:ScriptReference Path="Scripts/jquery-1.11.2.min.js" />
<asp:ScriptReference Path="Scripts/CommonMethods.js" />
<asp:ScriptReference Path="Scripts/CommonProperties.js" />
<asp:ScriptReference Path="http://code.jquery.com/ui/1.10.4/jquery-ui.js" />
<asp:ScriptReference Path="Scripts/jquery.watermark.min.js" />
</Scripts>
</asp:ScriptManager>
<div id="header">
<h1>
SABIS® Educational Systems INC.
</h1>
</div>
<div id="nav">
</div>
<div id="section">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
Copyright © Sabis.net
</div>
<asp:ContentPlaceHolder ID="cpClientScript" runat="server">
</asp:ContentPlaceHolder>
</form>
I tried lots of css but nothing works properly for me there is always a flow!!.
Okay, I think you're mixing some things up so first: ASP has no impact on the way browsers display your page. That's because ASP is a server-side language that outputs pure HTML. This HTML is then sent to your browser, along with any assets that are linked to (CSS, JavaScript, images...).
So that's where the CSS comes in. CSS is used to add styling to HTML. So you're absolutely right that CSS is the way to get the behavior that you described. Here's how:
div#footer{ // Add the style below to the div with ID "footer"
position: fixed; // Set the position to "fixed" to the screen
bottom: 0px; // The fixed position should be 0px from the bottom of the screen
width: 100%; // Optional, this stretches the div across the width of the screen
}
You can either put this piece of CSS in a <style> tag in the <head> of your page, but it's usually better to put it in a separate .css file and link to it in the <head> of the page, like so:
<link rel="stylesheet" href="path/to/stylesheet.css">
Additional reading: here's a getting started guide about CSS stylesheets.
Related
I'm trying to learn to use stylesheets. I have build several websites, but never used stylesheets.
My first try is to repeat an image at the top of the page to create some kind of header.
So I have created a stylesheet that looks like:
body {
width: 100%;
background-image: url('../images/MasterPageHead.png');
background-repeat: repeat-x;
background-color: #FFFFFF;
}
Now on my master page, I have added the line:
<link href="CSS/MasterPage.css" rel="stylesheet" />
The body of my master page looks like this:
<body>
<form id="form1" runat="server" >
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
Now how can I show this image at the top of the page?
rg,
Eric
Make sure there is something inside the page to give it a height, or specify a min-height inside your current body CSS rule.
My question is pretty simple. I have some style classes that I need to use on individual aspx pages. e.g.
.txtbx
{
margin-bottom: 20px;
border-style:solid;
border-width:thin;
border-color:Gray;
height:30px;
width:250px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Now, can I add such styles to the site.css file (that comes as a default when you choose to create a new web application). If yes how do I apply it to the individual .aspx pages since I don't have a head tag there. I read a solution that asks me to include a content place holder in the content (.aspx) page and put the link in it. However I already have two content place holders on each of my content pages. Do I need to add a third one?
Also, would it be better to have another (external) css file to define & use my personal styles such as the one above..? Thnx..!
On your master page :
<%#
Master Language="C#"
AutoEventWireup="false"
CodeBehind="BaseMaster.Master.cs"
Inherits="BaseMaster"
EnableViewState="false"
%>
<html runat="server" id="htmlTag" xmlns="http://www.w3.org/1999/xhtml" clientidmode="Static">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="cphHead" runat="server"></asp:ContentPlaceHolder>
</head>
<body runat="server" id="bodyTag" clientidmode="Static">
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="cphBody" runat="server"></asp:ContentPlaceHolder>
</form>
</body>
</html>
On your page where you need the style:
<%#
Page Title=""
Language="C#"
MasterPageFile="~/BaseMaster.Master"
AutoEventWireup="false"
CodeBehind="..."
Inherits="..."
EnableViewState="false"
%>
<asp:Content ID="Content2" ContentPlaceHolderID="cphHead" runat="server">
<link runat="server" href="Styles/YOURSTYLE.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphBody" runat="server">
<input type="hidden" id="Field1" runat="server" clientidmode="Static" />
</asp:Content>
Not sure what you want, but I can assume following.
you have a global .css file, which you want to be applied to all the .aspx pages.
then simply , add a Link to the css file in the head section of your .Master page
you have a local css file, i.e. a css you want to be applied only to a given page, but not to the other pages, in that case, you should do this.
a. expose the head section of your Master page, by creating a ContentPlaceHolder inside the head of the Master Page. i.e (head of Master Page below)
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="headerContent" runat="server">
</asp:ContentPlaceHolder>
</head>
b. and use this contentPlaceHolder on your local Page to add link to that local css file.
<asp:Content ID="HeadContent" ContentPlaceHolderID="headerContent"
runat="server">
<link runat="server" href="styleSheet.css" rel="stylesheet"
type="text/css" />
</asp:Content>
I'm new in asp.net. And I am having trouble setting my background image. Here's the master page source:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Master.master.cs" Inherits="Master"%>
<!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">
<link rel="stylesheet" type="text/css" href="scripts/style.css"/>
<title>Tracker</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="container">
<img src="images/cross-header.gif" alt="Insert Logo Here" width="100%" id="Insert_logo" style="background: #C6D580; display:block;" />
<div class="sidebar1">
<nav>
<ul>
<li>Home</li>
<li>LINK</li>
<li>LINK</li>
<li><span style="font-weight:italic">LINK</span></li>
<li><span style="font-weight:italic">LINK</span></li>
</ul>
</nav>
<p>SOME LABEL</p>
<p>SOME QUOTE HERE</p>
<p></p>
</div>
</div>
<footer>
LINK HERE | LINK HERE |
CONTACT | REGISTER | LOGIN
<address>
Copyright 2012 #JRC
</address>
</footer>
</div>
</form>
</body>
</html>
The image that I am trying to use is located at the folder image. I don't know whats wrong.
And here's what the style.css source:
body
{
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background-image:url('images/background.jpg');
background-repeat:no-repeat;
background-attachment:scroll;
background-position:repeat-x;
}
I also tried this url('image/background.jpeg') etc. but still fails.
This largely depends on where your css file is located. If it is located in the same folder where the 'image' folder is located, then this looks correct. However, if you css file is in a different directory (say /css) then your link in your css file will not work. Instead, either change the css link to point to a complete link:
background-image: url('http://mysite.com/images/background.jpg)
I am unsure if the '~' link will work in a stylesheet. Since your css is in the scripts folder, you should be able to do this:
background-image: url('../images/background.jpg')
This worked for me :
background-image: url(<%=ResolveClientUrl("~/images/background.jpg")%>);
it is getting confuse, because of your src, it finding it in current_folder+src, but your image folder is in root folder, for that to reach root_folder+src you have to prefix your source with ~/
background-image:url('~/images/background.jpg');
Add master page, then link css script and paste the link of CSS using drag and drop method
I am trying to put inline css into an mvc page which inherits from a master page. I want to do this because this css is page specific and I feel it shouldn't go into a site wide file. What is the best way of doing this. My failed attempt is below. Nothing on the site will recognize testTwo styling. Thank you
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
.test
{
}
.testTwo *
{
float: left;
padding: 5px;
border: 2px solid gray;
margin: 3px;
}
</style>
</asp:Content>
missing the opening <style> tag? bad copy-paste, not the issue
Where is this ContentPlaceHolder at in your MasterPage?
Often times the TitleContent ContentPlaceHolder is inside the <head> tag within the <title> element like so:
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
Is this the case? If so, those styles will not be interpreted since browsers won't recognize the styles within <title><style>..</style></title>
I would suggest updating your MasterPage like this:
<head>
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link.... />
<link.... />
<asp:ContentPlaceHolder ID="StylesheetContent" runat="server" />
<script.... />
<script.... />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
</head>
Where is your opening
<style type="text/css">
?
I have the following code for my masterpage:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<?xml version="1.0" encoding="UTF-8"?>
<!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" style="position:relative">
<title>Masterpage</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="main" runat="server" style="position:relative">
<div>
<asp:ContentPlaceHolder id="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<br style="clear:both" />
<form id="footer" style="position:relative">
<div>
<center style="font-size:small">Footer content</center>
</div>
</form>
</body>
</html>
My problem is that when the MainContent isn't filling up the page the footer is not at the bottom of the page. Is there a way to force the footer to stay on the bottom of the page if the main content isn't pushing it all the way down? When the main content is "big" enough it pushes the footer down with the content and displays on the bottom when scrolling down, but not if it is to small.
Anybody know how to fix this?
Use the following in your css for the footer div:
bottom:0px;
position:absolute;
Check these related questions for solutions:
How do you get the footer to stay at the bottom of a Web page?
Can not get CSS Sticky footer to work. What am I doing wrong?
I would suggest zigdon's answer.
Good article & demo here also regarding keeping the footer at the bottom
Apply a minimum height to the div wrapping your main content eg style="min-height:400px"