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.
Related
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.
I'm very new to ASP.NET and have to confess I'm having great difficulty achieving even the most basic of results.
I am currently having trouble getting CSS formatting to work in my content pages.
My master page is as follows -
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Main.master.cs" Inherits="Master_Main" %>
<!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">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="../CSS/Main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="Container">
<div id="Header">Header Goes Here</div>
<div id="LeftBar">Left Bar Goes Here</div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<div id="RightBar">Right Bar Goes Here</div>
<div id="Footer">Footer Goes Here</div>
</div>
</div>
</form>
</body>
</html>
The CSS stylesheet is referenced in the < head > tag and when in Design view on the master page I can see the formatting is in place.
However, when I create a Content Page based on this master page, none of the CSS formatting follows through.
<%# Page Title="" Language="C#" MasterPageFile="~/Master/Main.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Pages_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div>
<p>Content Goes Here</p>
</div>
</asp:Content>
The source for the Content page references the Master Page correctly I believe, but the formatting is simply not working. My content page is entirely black and white text down the left hands side of the browser.
I'm sure this will be a simple matter to those who are good at ASP, but like I said, I'm struggling with it at the moment, so any help is much appreciated.
For completeness the CSS file is as follows -
*
{
font-family: Calibri;
}
#Header
{
width: 100%;
background-color: Gray;
}
#LeftBar
{
width: 15%;
float: left;
background-color: Lime;
}
#Content
{
width: 70%;
float: left;
background-color: White;
}
#RightBar
{
width: 15%;
float: left;
background-color: Yellow;
}
#Footer
{
width: 100%;
float: none;
background-color: Red;
}
The CSS formatting does appear on the Master Page when in Design view in VWD, but never in the Content Page.
Known issue (if this is what is happening in this case) with Visual Studio. The way to be sure of applying the correct path is to drag the CSS file from Solution Explorer into the head section of the master page (in design view).
I've following dummy HTML which properly displays a header, a left div (completely covering body) and a right div for contents. But as I add <Form> in ASPX page (or any html page) after body tag, my css formatting gets too much distorted. Please suggest.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body{
margin:0px 0px 0px 0px;
height:100%;
width:100%;
}
.leftNav {
background:red;
height:85%;
width:200px;
float:left;
}
.content{
background:orange;}
.header {
height:15%;
background:blue;
}
</style></head>
<body>
<div class="header">dd</div>
<div class="leftNav">abcd</div>
<div class="content">asdasd<br>asdasd<p>asdasd</p>asd asifj sadjf</div>
</body></html>
Problem with IE:
Body has a 100% height and width. When div(s) inside form tag are set to 100%, Firefox and Chrome are able to expand 100%. But with IE, I had to set Form tag too with 100% height and width
<Form style="height:100%;width:100%"> ...DIVs ... </form>
This fixed my issue.
I guess you are having some "contact us" form or some other form in your html.
Remove the additional html tag (in your html) inside the ASP.NET FORM Tag and see if it makes any difference.
Replace the below code
<form id="form1" runat="server"> //this is asp.net form
<form name="blunder"> //some html form in your page
<!-- Some content -->
</form>
</form>
with
<form id="form1" runat="server">
<divname="blunder">
<!-- Some content -->
</div>
</form>
Thanks.! Hope it helps.!
I am having problems to display a image in a div element.
In the div is a custom web control (a login control).
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" Theme="Styles" %>
<%# Register src="wucLogin.ascx" tagname="wucLogin" tagprefix="log" %>
<!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">
<title>Login</title>
<link rel="Stylesheet" type="text/css" href="App_Themes/Styles/LoginStyleSheet.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="divLogin">
<log:wucLogin id="WebUserControlLogin" runat="server" />
</div>
</form>
</body>
</html>
Everything gets displayed as it should. A basic login control with some basic layout and a blue background.
But when i try to put a picture in the div i cannot get it to display. I tried every possible path for the image so i do not think i have made a error there.
Basicly i want the login control to display, with behind it a picture (centered).
Css for the div element (the map images is directly a map in the root:
#divLogin
{
background-image: url('../Images/test2.png');
background-repeat: no-repeat;
background-position:center;
position: absolute;
text-align: center;
top: 40%;
left: 52.8%;
width: 401px;
height: 123px;
margin-top: -61,5px;
margin-left: -250px;
}
Best regards.
I dont see an ID of "divLog" on your page .. just "divLogin" .. could that be the issue?
change position to relative, and put the login stuff inside the image div. also update the top and left for the relative positioning.
just a thought.
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">
?