I have a html table and I am trying to have it span the entire page height. For some reason I am not able to get this to work. I have set the html, body and table height to be 100%, but the table still does not occupy the entire 100%.
Heres the code. It is very basic because I am just trying to have the table occupy the entire height.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!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>
<style type="text/css">
body,html {
margin:0;
padding:0;
height:100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table border="2" cellpadding="0" cellspacing="0" style="height:100%; width:100%" >
<tr>
<td>ABCD</td>
</tr>
</table>
</form>
</body>
</html>
I tried for couple of hours and I could not get it to work. Any help is really appreciated.
This should work:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!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>
<link rel="Stylesheet" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">
<style>
body, html, form, table { height:100%; }
table { border:2px solid gray; }
</style>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>ABCD</td>
</tr>
</table>
</form>
</body>
</html>
Is the table in a form ? make its height 100% too by using style
Try setting the html height attribute to 100%.
<table height="100%">
It appears that the height is relative to the current container, which may not be at 100%. See this article:
http://apptools.com/examples/tableheight.php
Related
I have this markup:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="TestCSSTemplates.WebForm1" %>
<!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>
<style type="text/css">
ul { list-style: none }
span { display:inline-block; text-align: right; width: 100px; }
.DespliegaEnLinea { display: inline-block; }
</style>
</head>
<body>
<form id="form1" runat="server">
<ul >
<li>
<span >Are you sure?: </span>
<asp:RadioButtonList ID="RadioButtonList1" runat="server"
RepeatDirection="Horizontal" CssClass="DespliegaEnLinea">
<asp:ListItem>yes</asp:ListItem>
<asp:ListItem>no</asp:ListItem>
</asp:RadioButtonList>
</li>
</ul>
</form>
</body>
</html>
When the page is displayed in Chrome or Internet Explorer (9 or less with comptaibility mode activated), the page renders as I intended: all the content inside the li tag is in just one line.
However when the above page is displayed in Internet Explorer 11 (or 9, 8 without compatibility mode activated), it's rendered with a line break between the span tag and the radiobuttonlist control.
How can i make this page always render the content of the li tag in one line, regardless of the browers it's being used to see it?
I have a problem creating a Shield UI ASP.NET Chart on my web page. What I need is to have the control with not data, but yet visible on the page.
I have the reference to the control at the beginning:
<%# Register Assembly="Shield.Web.UI" Namespace="Shield.Web.UI" TagPrefix="shield" %>
And here is the complete code actually:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>
<%# Register Assembly="Shield.Web.UI" Namespace="Shield.Web.UI" TagPrefix="shield" %>
<!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">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="chart" style="width: 390px; height: 290px; left: 5px; top:5px; margin: auto; position:inherit;">
<shield:ShieldChart ID="ShieldChart1" runat="server" Width="320px" Height="330px"
OnTakeDataSource="ShieldChart1_TakeDataSource">
<DataSeries>
</DataSeries>
</shield:ShieldChart>
</div>
</form>
</body>
Dragging and dropping the control in the VS doesn’t do all the work needed to show the control when page is launched. What you need is to add some more lines of code, and namely:
<link rel="stylesheet" type="text/css" href="shield-chart.1.2.2-Trial/shield-chart.1.2.2-Trial/css/shield-chart.min.css" />
<script src="shield-chart.1.2.2-Trial/shield-chart.1.2.2-Trial/js/jquery-1.9.1.min.js" type="text/javascript"> //</script>
<script src="shield-chart.1.2.2-Trial/shield-chart.1.2.2-Trial/js/shield-chart.all.min.js" type="text/javascript"> //</script>
These are the actual references to the runtime components you need to use the control in your web application.
The more I work with CSS, the more depression I get
I want to set a background picture stored on the same folder where my aspx and cs files
are located, still it wont put a background picture:
/* DEFAULTS
----------------------------------------------------------*/
body
{
background-image:url(banner.gif);
display:block; // have tried without it as well, no change :(
}
Default.aspx:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>
<!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">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
Please help how to set the background picture ?
You said that your CSS and image are in same folder where you've your aspx file and CSS so
First try setting a background color for body say
body {
background: #f00; /*This should give you red*/
}
If this works than fine, something is wrong with the image path, if you fail to see the color too, that means your stylesheet is at the wrong path, so instead of
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
Should be
<link href="Site.css" rel="stylesheet" type="text/css" />
here is the image, I dont thin there is any problem with paths:
I'm somewhat new to html and css and I am having a really strange issue with this ASP.NET page. The following code draws the div (should be 50x50) as 50x100 in IE9. It may be drawing twice. In Compatibility mode it works just fine. As you can see it's a super-simple piece of code.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DivAlignmentTest.Default" %>
<!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>
<style type="text/css">
html, body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#Div1
{
width: 50px;
height: 50px;
background-color: Red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="Div1" />
</form>
</body>
</html>
Any help would be appreciated,
Jason
Change
<div id="Div1" />
to
<div id="Div1"></div>
should make it work properly.
You cant self close a div tag
Try:
<div id="Div1"></div>
In a webform iam have placed one textbox, i want to choose a background image for that particular textbox during runtime. need coding in C#, ASP .NET
You could use css to set the background image and javascript to change it. Here's an example:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ToDDDD._Default" %>
<!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>
<style type="text/css">
input
{
background-image: url(/initialImage.png)
}
</style>
<script type="text/javascript">
function changeImage() {
document.getElementById('txt').style.backgroundImage = 'url(/newImage.png)';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txt" runat="server" />
Change background image
</div>
</form>
</body>
</html>
If you have a limited number of images that you want to use for the background then it would probably be cleanest to define each of them as a separate class in you css and then programatically either with javascript or C# change the class on the input.
<style>
.image1 { background-image: url(/image1.png);}
.image2 { background-image: url(/image2.png);}
.image3 { background-image: url(/image3.png);}
</style>
In you Page_Load of you page you can then write this:
txtBox1.CssClass = "image1";
Or using javascript:
document.getElementById('<%=txtBox1.ClientID%>').setAttribute("class", "image2");