i am having a html form in which i had given a theme. now i want to show that theme in div tag in asp page..
my html page is :
<html>
<head runat="server">
<title>Untitled Page</title>
</head>
<body background="file:/C:/Documents and Settings/Desktop/themes/images8.jpg">
<form id="form1" runat="server">
<div>
<h1>
header_picture
</h1>
<img src="file:/C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Water lilies.jpg" style="width:480px; height:150px; background-position:centre;"/>
</div>
<div>
<h1>
here comes the content
</h1>
</div>
<div>
<h2>
footer_picture
</h2>
<img src="file:/C:/Documents and Settings/All Users/Documents/My Pictures/Sample Pictures/Blue hills.jpg" style="width:480px; height:150px; background-position:centre;" />
</div>
</form>
</body>
</html>
and i use the code to display the theme as :
<asp:Image ID="img1" runat="server" Width="80px" Height="80px" ImageUrl="~/themes/form.html"/>
but this is not showing any theme.
please help me out..
You are assigning an html page to ImageUrl attribute so it won't work.
Please map it to the required Image file if you want that image to be displayed in the webpage.
Related
Excuse me, my English is bad, I'm Brazilian!!!
I'm developing a application in Aspx and WebForms. I included Bootstrap in my application, but in Design failed the rendering.
See bellow the image:
enter image description here
<body>
<form id="form1" runat="server">
<div>
<header>
<label class="hamburger" for="nav-toggle"></label>
<input id="nav-toggle" type="checkbox" class="hidden" />
<nav>
<ul>
<li>Entidades</li>
<li>Usuários</li>
<li>Logoff</li>
</ul>
</nav>
</header>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
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>
I'm trying to get the dropzonejs script to work in a asp.net site with master page and child webforms. I got a good idea how to from this question but that works on a simple webform..how do I get it to work on an aspx page that has a master page?
So my masterpage right now has this:
<body class="fixed-top">
<form id="form1" runat="server" autocomplete="off" class="dropzone">
<div id="container">
<div id="body">
<div class="container-fluid">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</div>
</form>
</body>
and in my aspx page I have this:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h3 class="page-title">Filemanager</h3>
<div class="box"> <!--INSIDE THIS IS WHERE I WOULD WANT DROPZONE TO LOAD-->
<div>
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</div>
</asp:Content>
the problem is that it loads but outside the containers..any ideas?
I was able to make it work in a Master/Child page scenario.
Since I am using a div element instead of the form element in the child page, I need to assign the url as an option. (see script block below)
Make sure give your form element the class="dropzone", it is missing in your code.
<script type="text/javascript">
Dropzone.options.myAwesomeDropzone = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
url: "/user/tasks/photoupload.aspx?tid=<%=Request.QueryString["tid"]%>"
};
</script>
<div id="my-awesome-dropzone" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple="multiple" runat="server"/>
<input name="btnUpload" type="submit" /><br /><br />
<asp:Label id="lblFallbackMessage" runat="server" />
</div>
</div>
Good luck.
I am having some problems with Safari.
While all browsers display the pages fine, Safari adds a huge white area above the main ContentPlaceholder as shown in the images below. This happens on every page so I guess the problem is in the master page but I can't figure out how to fix it.
There is also a small problem with some extra padding above the menu (same happens in Chrome)
I'd appreciate any help. thanks in advance.
Here is my master page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
................
</AnonymousTemplate>
<LoggedInTemplate>
................
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
................
</Items>
</asp:Menu>
</div>
</div>
<div class="leftMenu">
<asp:ContentPlaceHolder ID="LeftMenuContent" runat="server"/>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
And here is the source code and CSS: http://jsfiddle.net/V5aCa/6/
It is because you are using display:table safari treats this differently to other browsers
have a look at this question:
Safari 5.1 breaks CSS table cell spacing
or try using border-box:
CSS does the width include the padding?
Your space above the navigation appears because of the skip nav anchor, if you position this absolutely or float it your space should disappear
Try resetting the Margin and Padding of the browser.
body {
margin: 0px;
padding: 0px;
}
that should force safari to start from your set values rather than build up on its default.
i have a website with master pages and content pages. the code for master page is:
<%# Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="ProjectX1.Site" %>
<!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/style.css" rel="stylesheet" type="text/css" />
<link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" />
</head>
<body style="height: 800px">
<form id="form1" runat="server">
<div id="TopNav">
<ul>
<li>Top Deals</li>
<li>All Deals</li>
<li>Account</li>
<li>
<asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
<asp:Button ID="Search" runat="server" Text="Search" />
</li>
</ul>
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<!--Adding jQuery-->
<script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<!--JavaScript and jQuery functions-->
<script type="text/javascript">
$(document).ready(function () {
$("#TopNav").tabs();
});
</script>
</body>
</html>
And my content pages are like:
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="TopDeals.aspx.vb" Inherits="ProjectX1.TopDeals" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Top deals page.
</asp:Content>
Now, the tabs renders perfectly but the text used inside tabs or section is displayed back again in each tab content.
Screenshot of how it is rendering:
And here is the rendered HTML:
<!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>
</title>
<link href="css/style.css" rel="stylesheet" type="text/css" /><link href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" /></head>
<body style="height: 800px">
<form method="post" action="TopDeals.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkc9+hm0xMYZPW5kzqPGh5scwv9zQtVHHjF3TK0OClx8M=" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLG75v1DwKuh5WeCAKF1vrqBsex0rMLZ1SKDXK1SSR/NgIGfr4ldbcVrFvXw7cqxVna" />
</div>
<div id="TopNav">
<ul>
<li>Top Deals</li>
<li>All Deals</li>
<li>Account</li>
<li>
<input name="ctl00$SearchBox" type="text" id="SearchBox" />
<input type="submit" name="ctl00$Search" value="Search" id="Search" />
</li>
</ul>
</div>
<div>
Top deals page.
</div>
</form>
<!--Adding jQuery-->
<script src="scripts/jquery/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<!--JavaScript and jQuery functions-->
<script type="text/javascript">
$(document).ready(function () {
$("#TopNav").tabs();
});
</script>
</body>
</html>
Anyone can tell what I am doing wrong here?
The behavior that you are seeing is as per jQuery tabs - you are not using it correctly.
One of the typical use case scenario will have markup such as:
<div id="tabs">
<ul>
<li>First Tab</li>
<li>Second Tab</li>
</ul>
<div id="tabs-1">
Tab 1 Content
</div>
<div id="tabs-2">
Tab 2 Content
</div>
</div>
Note local referencing href on li and corresponding tab content div (with same id).
In case, URLs are used then jquery tabs will create the content div automatically and load them using AJAX (see content via AJAX exaple - http://jqueryui.com/demos/tabs/#ajax).
This is the case with your code, you are using urls - jquery is loading the url content in a tab. So, for first tab, you can see the content of TopDeals.aspx page - and this page use the same master and hence the tab markup appears in the content div.
EDIT: work-around
Firstly, opening a new page via tab is frowned upon by usability experts - check http://www.useit.com/alertbox/tabs.html! However, to achieve what you want, you need to set the href of active tab to a local link.
For example, in master page
<div id="TopNav">
<ul>
<li><a href="TopDeals.aspx" runat="server" id="Tab1" >Top Deals</a></li>
<li><a href="AllDeals.aspx" runat="server" id="Tab2" >All Deals</a></li>
<li><a href="Account.aspx" runat="server" id="Tab3" >Account</a></li>
<li>
<asp:TextBox ID="SearchBox" runat="server"></asp:TextBox>
<asp:Button ID="Search" runat="server" Text="Search" />
</li>
</ul>
<div id="TabContent">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
Notice the placement of content placeholder. Now, in each page, you have to adjust the active's tab href accordingly. For example, in TopDeals.aspx, you have to add following line in say page_load or page_prerender:
Tab1.HRef = "#TabContent";
Instead of using hard-coded tab ids etc, I would suggest to use a Repeater in master page and populating it from code-behind. That way, you can expose ActiveTab property in master page (set by content pages) that will adjust href of the correct tab.
Finally last part is tab navigation: see this FAQ from jquery tabs so that when other tab is clicked, browser will open that page (instead of content getting loaded via AJAX).
EDIT: It appears that above FAQ has been removed by jquery team. To follow the tab URL, one needs handle select event - e.g.
$('.tabs').tabs({
select: function(event, ui) {
var url = $.data(ui.tab, 'load.tabs');
location.href = url; // follow url
return false; // to disable default handling
}
});