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
Related
While testing JSP files, I'm getting the problem with displaying on the screen because of alignment:
I want the text to be center aligned and not have a configuration heading on top.
Here's my example of JSP file:
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%#include file="/includes/head.jsp"%>
<style type="text/css">
body {
background-color: rgba(26, 35, 115, 0.47);
color: #fff;
}
</style>
</head>
<body class="text-center vsc-initialized">
<%#include file="/includes/header.jsp"%>
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<main role="main" class="inner cover">
<h1 class="cover-heading">Welcome</h1>
<h1 class="cover-heading">to</h1>
<h1 class="cover-heading">Project Management</h1>
<h1 class="cover-heading">System</h1>
</main></div>
<%#include file="/includes/footer.jsp"%>
</body>
</html>
Can someone tell me, please, is it CSS problem or JSP? Do I need to fix something in JSP to get another result of displaying?
If you need some additional information, I'm ready to update this question.
I appreciate any recommendations/ideas here.
The problem was not specifically with css, but in the way of displaying.
After I changed the path and the way of displaying inside application.properties:
instead of:
spring.thymeleaf.prefix=classpath:/templates/jsp/
spring.thymeleaf.suffix=.jsp
to:
spring.mvc.view.prefix=/
spring.mvc.view.suffix=.jsp
and location of JSP files:
instead of the folder:
/resources/templates/jsp/
to the folder:
/webapp/
the problem with alignment while using CSS styles in JSP, was fixed.
I've created a basic page, from a template I had for the rest of my site, but pulled most of it apart to make the page look "not designed". It only has an unordered list with a short paragraph fixed to the top and a logo float right. It works in system preview, but when uploaded to the server it loses all the CSS styling.
This is the html:
#title {
width:400px;
position:fixed;
}
#icon {
position:relative;
float:right;
}
h5 {
font-size:25px;
color:#ff6682;
line-height:1.35em;
}
a:link {
color:#253b84;
}
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>/other</title>
<link href="assets/scripts/AMK_Website.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="icon">
<img src="assets/images/icon/icon.gif" width="80" height="106" alt=""/>
</div>
<div id="title">
<h5> /other is a collection of personal work in design photography, as
well as work that inspires me. To get back to
the important stuff, click here
</h5>
</div>
<div id="photolist">
<ul>
<li><img src="assets/images/other/1.jpg" width="768" height="1024"
alt=""/></li>
</ul>
</div>
</body>
</html>
Help appreciated!
Sounds like your css isn't where the html link expects it to be. If you're pointing to a file in assets/, make sure that folder is in the same directory as your html file, and make sure it contains that specific css file.
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 have the following:
<!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>
<title>Testing PasteHTML.com</title>
<link type="text/css" href="http://optdev.shellprompt.net/css/jquery-ui-1.8.1.custom.css" rel="stylesheet">
</head>
<body>
<div class="notification" id="notification-message">
<div class="ui-widget">
<div style="padding: 0 .7em;" class="ui-state-error ui-corner-all">
<span style="float: right;cursor:pointer" onclick="$x_Remove('notification-message')" class="ui-icon ui-icon-closethick"></span>
<div id="message" style="float:left">Invalid Login Credentials</div>
</div>
</div>
</div>
</body>
</html>
Both the Message and "X" apear outside of their parent div. How do I place them inside their parent?
Here is a demo http://pastehtml.com/view/bngl4k1th.html and I would like it to look like JQuery UI Theme http://tinyurl.com/dbqg2t Alert message
Just been working through the jQuery UI Theme and I was missing the ui-helper-clearfix class once I added that it worked perfectly.
You can either add overflow:hidden to the parent tag or a new div with the clear:both property, before ending the parent tag.
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"