CSS - Background-image not showing - css

This is my CSS:
body {
text-align:center;
vertical-align:central;
width:480px;
height:800px;
}
#content {
width:100px;
height:200px;
background-image:url("../App_GlobalResources/TopBanner.png");
display:inline-block;
}
And my HTML (Master page):
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Mobile.master.cs" Inherits="m.mysite" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>TestTitle</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div id="header">
test1234
</div>
<form id="form1" runat="server">
<div id="content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
And i have a Default.aspx site which uses my masterpage, but it simple wont show my image..
if i make an img scr tag in the html it shows fine.. so the path is correct.. what else could it be?
'
This is the output HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
TestTitle
</title>
<link href="App_Themes/MobileTheme/MobileLayout.css" type="text/css" rel="stylesheet" /> </head>
<body>
<div id="header">
test1234
</div>
<form method="post" action="" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkNWnHplPoHce7cSIeDENrnMaUn20Ibq7H6yKbaedCCPw=" />
</div>
<div id="content">
test
</div>
</form>
</body>
</html>

Okay it works now, seems like Internet explorer was looking in the wrong folder.. must be somekind om Visual studio bug/setting i diden't notice..

Related

How do I use SyncFusion Signature Box

I'll be frank, I have little to no experience in asp.net. I've been building a website in Web Forms for a past few weeks. I would like to put a Signature control on a page on this site. I'm using SyncFusion.
I tried to add it to a new web form for testing;
<%# Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %>
<%# Register Assembly="Syncfusion.EJ.Web, Version=14.4460.0.15, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" Namespace="Syncfusion.JavaScript.Web" TagPrefix="ej" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ej:Signature ID="Signature1" runat="server"></ej:Signature>
</div>
</form>
</body>
</html>
But all I get is a blank page. What am I doing wrong?
EDIT:
This is the page source in the empty browser;
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form method="post" action="./test.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="a7KupFN2IvhJ2xB1RbT9gIJGuq/sSUKCZso7ZYfDhZZR5c9XFfZfctDoaphqu0eXI/FCiapkZDDbKmONWUwSOmQKYeon2OakrX+JCtQ7AzWaYNkS0W6XPn/XQBIl+5gAepOk5prBxAIOUrIv0L7g5r3+LM7yeET8ztjWzCD5ADZ/Vu9CmgE/1wjB9IylHFpocDDNZu4mUru4RbOR0yPzeuhBBdXxMk2Vi7PIUHJ7Dk8cRKdncxSwSsQlUyAZxcl1ZxbUP/vGdOBcxmx2ReO/AS+VvvDZUlfMq8bLkyMc7UJH+Xl+jyxlRCVLkVWIeC5sdMhqPYgnK8MRmlEkba+Nlk2Bipz6IEpvDXw/j+dEUVu/sKoB2O/CJzryw+Hqk27AG67pYTkVs7PRDyFv0+D2it1m023YGbJJX6FxV8GqNeUpPI/kR66jpkZES2RzwWCw3wfdhDocvBTcPGndETFi2Ed1lwbXYeqUXG+ER6kV/PILZSUhj5c74u8QFaKOUtVRMN0mALPkt5VDfmD9CTaKsoHI8H2zBSXPLche+evxHY8dLVJpE5N2MqyT1ETGj+PEPC5hMKaFRyf1KVopBqbPcbmGE+r2bJ/KXwvddQucuIYJPKBNE3gK0ab30ewSHW0fOaums+7P0hN8btfvSQGkFZwfiKerQq8Okpup7DJTB2WE3WFowT7XqYvmoatuqDt80l3VJQovJ3Mg+sJY0lpTg0eikqto6evySKW12tC9tmevkvvnbpoi4fNlmna/rwcO8Nu/wF/ns91CpC2xVHYDsg0x5dYz9vTHRYxJvbbH5WnqtJ5donHgPoM1UqFbDNve" />
</div>
<script type="text/javascript">
//<![CDATA[
function WebForm_OnSubmit() {
typeof EJ_ClientSideOnPostBack == 'function' && EJ_ClientSideOnPostBack();
return true;
}
//]]>
</script>
<div>
<div id="Signature1"></div>
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="75BBA7D6" />
</div>
<script type="text/javascript">
//<![CDATA[
$("#Signature1").ejSignature({"strokeWidth":2,"enabled":true,"height":"400px","backgroundColor":"#ffffff","strokeColor":"#000000","clientId":"Signature1","uniqueId":"Signature1"});
//]]>
</script>
</form>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"958d69901e2943e493e9b4da9976b691"}
</script>
<script type="text/javascript" src="http://localhost:55500/690a8379ccf649d289724e7760d89595/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Syncfusion Signature doesn't have any default height or width value. It has the both the height and width as 100% by default.It fits inside the given div. Hence we need to set the height value for the signature.
<div>
<ej:Signature ID="Signature1" height="400px" runat="server"></ej:Signature>
</div>

asp net user control with angularjs

I'm using angularJS in an asp.net user control (UC), but, unfortunately, when I try to add my UC in my page, the whole page part that uses angular stops working.
I tried to use angular reference separate from UC and the page, but no success.
Page Code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Abc.aspx.cs" Inherits="WebApplication1.Abc" %>
<%# Register Src="~/filterUC.ascx" TagPrefix="uc1" TagName="filterUC" %>
<!doctype html>
<html>
<head>
</head>
<body>
<uc1:filterUC runat="server" ID="filterUC" />
<div>
<label>Name:</label>
<input type="text" ng-model="myModel" placeholder="Enter a name here">
<hr>
<h1>Hello {{myModel}}!</h1>
</div>
</body>
</html>
UC code:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="filterUC.ascx.cs" Inherits="WebApplication1.filterUC" %>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
How can I accomplish it?
Regards.
I made your example work with these changes:
Move the script to invoke AngularJS into the page Abc.aspx.
Set in the <body> tag ng-app="app" and remove it from the div in your User Control.
Add a script to create your Angular app module.
<%# Register Src="~/Controls/filterUC.ascx" TagPrefix="uc1" TagName="filterUC" %>
<!DOCTYPE html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js">
</script>
<script>
angular.module('app', []);
</script>
</head>
<body ng-app="app">
<div>
<label>Name:</label>
<input id="input1" type="text" ng-model="myModel" placeholder="Enter a name here">
<hr>
<h1>Hello {{myModel}}!</h1>
</div>
<uc1:filterUC runat="server" id="filterUC" />
</body>
</html>

css not working in certain section of master page but working in separate web form asp.net

I have created a master page with a basic login page and applied css in it. But i get styles only for background and footer only, other divs does not get applied.
so i decided to create a web form and copied it without contentplaceholder it works
My css code:
http://pastebin.com/raw.php?i=0N6SzL5p
My css working Web form code:
http://pastebin.com/raw.php?i=QrvttGqN
Master page code:
http://pastebin.com/raw.php?i=C2LH0SrE
And its content login page:
http://pastebin.com/raw.php?i=GdQpWnVX
I'm a newbie in asp and i'm not trolling.
If it is a silly mistake please point it out and help me
Based on your stylesheet, the problem with the master page was that you should have a wrapper <div> that surrounds all of your nested elements.
A lot of your <div id="xx"> elements should be changed to <div class="xx"> as your stylesheet is CSS class definitions. e.g.
From:
<div id="top" runat="server">
and..
<div id="mainpage" runat="server">
and..
To:
<div class="top">
and..
<div class="mainpage">
and..
<div class="footer">
Complete Master Page Changes
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Demo.master.cs" Inherits="UI.Master.Demo" %>
<!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 id="Head1" runat="server">
<link href="../CSS/Site.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<title>Demo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="top">
<div class="topmiddle">
<div class="logreg" id="login_reg" runat="server">
Login
Register
</div>
<div class="userlog" id="user_logout" runat="server" visible="false">
Welcome<asp:Label ID="username" runat="server">!</asp:Label>
<a id="A3" href="Logout.aspx" class="atypesty" runat="server">LogOUT</a>
</div>
</div>
</div>
<div class="mainpage">
<table class="maintable">
<tr>
<td>
<img src="../Images/logo.jpg" class="logo" />
</td>
<td class="menucenter">
<ul id="Nav">
<li>
Home
</li>
<li id="Navprofile" runat="server">
<asp:LinkButton ID="lnbtn_Profile" runat="server"></asp:LinkButton>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
</td>
</tr>
</table>
<asp:ContentPlaceHolder ID="demo" runat="server"></asp:ContentPlaceHolder>
</div>
<div class="footer">
<p>All words, images and code copyright ©2014 demo.com. All rights reserved.</p>
</div>
</div>
</form>
</body>
</html>

nothing show in designer page After created the html page in .aspx in web form in visual studio?

i have created the .aspx in webform in visual studio. but after i have created the htmlcoding in source and then i could not see my form filling page in designer view in visual studio?
below i mentioned the html code
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="MainMaster.master.cs" Inherits="ssweb.Admin.MasterPages.MainMaster" %>
<!DOCTYPE html >
<html>
<head id="head2" runat="server">
<meta charset="UTF-8" />
<asp:ContentPlaceHolder ID="Title" runat="server">
<title>Specialed India</title>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
<link href="../../Scripts/css/foundation.css" rel="Stylesheet" type="text/css" />
<script src="../../Scripts/js/foundation.min.js" type="text/javascript" />
<script src="../../Scripts/js/vendor/custom.modernizr.js" type="text/javascript"/>
</head>
<body>
<form >
<div class="row">
<div class="large-12 columns">
<img src="../../Scripts/img/logo.png" />
</div>
</div>
</form>
</body>
</html>
after i analysed well in my code,
then the problem is, if i close the script tag in open tag itself.then i could not get any thing in designer view
eg:
<script src="../../Scripts/js/foundation.min.js" type="text/javascript" />
if i close the script tag like() below , i can view the changes in designer view.
eg:
<script src="../../Scripts/js/foundation.min.js" type="text/javascript" ></script>

Images moved to left on Windows 7

Recently, my company migrated to Windows 7 operating system.
I was using the following master file in Visual Studio 2010 on my Windows XP machine and everything was working fine, now that I migrated the following code to Windows 7 and same Visual Studio 2010, all the images below are moved to left. I can adjust them, but I am curious why all the images are moved to left, I am using the same monitor and Visual Studio 2010 version is same.
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Login.master.cs" Inherits="Masters_Login" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="../App_Themes/NG/style.css" rel="Stylesheet" type="text/css" />
<style type="text/css">
div ,
div img { display:block }
.fl
{
float:left;
margin-left:15%;
background-color:#8e2826;
width:68.1%;
margin-right:18%;
text-align:center;
}
.f2
{
float:left;
margin-left:15%;
background-color:#e5e0dd;
width:68.1%;
margin-right:18%;
text-align:center;
}
.f3
{
float:left;
margin-left:15%;
background-color:#d4cfcd;
width:68.1%;
margin-right:18%;
text-align:center;
}
.style1
{
color: #8e2826;
}
</style>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body >
<form id="form1" runat="server" >
<div style="margin-left:15%; background-color:#343434; width: 68.1%; margin-right:18%; ">
<asp:Image ID="imgIS" ImageUrl="~/images/improved_LOGO.jpg" runat="server" />
</div>
<div class="fl" >
<asp:Image ID="imgTop" runat="server" ImageUrl="~/images/m_banner_top.jpg" />
</div>
<div class="f2">
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/m_banner_btm_5.jpg" />
</div>
<div class="f3" ></div>
<div class="f3">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div style="margin-left:15%; margin-right:18%; width: 68.1%; background-color:#8e2826; text-align:center">
<asp:Image ID="banner" runat="server" ImageUrl="~/images/b_banner_calibri.jpg"/>
</div>
</form>
</body>
</html>
If you want to align them to the center of the page, add the following lines to you CSS:
width://fixed width;
margin-left: auto;
margin-right:auto;

Resources