Im making a website in Visual Studios. Im trying to change the Background of my website. When i add the image in Visual Studios it changes but when i launch it to see it in a web browser the background image is gone.
'<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.auto-style1 {
width: 100%;
}
h1{
text-align:center;
font-family:Andalus;
color:white;
}
body{
background-image: url('C:\Users\........\Desktop\wood.jpg');
text-align:center;
}
.auto-style2 {
width: 664px;
}
p{
font-family:Cambria;
color:white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1> Welcome</h1>
</div>
<table class="auto-style1">
<tr>
<td class="auto-style2"><p>Username</p></td>
<td class="auto-style2"><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
<td class="auto-style2"> </td>
<td>
</td>
</tr>
<tr>
<td class="auto-style2">
<p>Password</p></td>
<td class="auto-style2">
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</td>
<td class="auto-style2">
</td>
<td>
</td>
</tr>
<tr>
<td class="auto-style2">
</td>
<td class="auto-style2">
<asp:Button ID="Login" runat="server" OnClick="Login_Click" Text="Log in " />
</td>
<td class="auto-style2">
</td>
<td>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Log in as guest" />
</td>
</tr>
</table>
<asp:Label ID="Label1" runat="server"></asp:Label>
</form>
It sounds like you haven't set up a project folder if you're referring to an image on your desktop. You're also using absolute values in the code so depending on how you upload your site this may cause issues. I'm not familiar with how Visual Studio's uploads the content.
Create a new project folder and then a sub-folder called images or something, and refer to them by like this:
body{
background-image: url('/images/wood.jpg');
text-align:center;
}
Have a look here: http://www.w3schools.com/html/html_images.asp for some more tips.
If you still have issues, paste the code here by viewing the source from your browser rather than the program, might give some idea of where it's going wrong.
Related
I have a web page I'm trying to set up that will show some Ajax Tables nested inside a CollapsiblePanelExtender. The table is nesting correctly, but the styles are behaving strangely. I recently started using Chrome's Inspector tool, and I think it's pointing me in the right direction, but I'm having trouble understanding why what the Inspector is showing is different from what is in my .aspx file. I've tried this in Firefox as well, and the behavior is similar, so this doesn't seem to be a Chrome-only bug.
I set overflow:hidden; in the style for the Ajax Panel that the tables are directly nested in, but when shown in a browser, a horizontal scrollbar appears, and the Inspector shows that the style has changed to overflow-y:hidden;. What could cause my style to change between the design in my .aspx file and the way it appears in the browser?
It seems the Ajax Panel I specify in my .aspx file is converted into a <div> by the browser. I can accept that. The odd part is, it appears that an additional <div> appears in the Inspector that I don't specify anywhere in my .aspx file. Where could this additional <div> be coming from?
Minimal reproduction of my .aspx file:
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site_old.Master" CodeBehind="TEST.aspx.vb" Inherits="MyProject.TEST" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
.MyCollapsePanelHeader
{
height:20px;
font-weight: bold;
padding:5px;
cursor: pointer;
vertical-align:middle;
font-size:small;
overflow:hidden;
}
.MyCollapsePanel
{
width:100%;
height:100%;
border: 1px solid #BBBBBB;
border-top: none;
overflow:hidden;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<table width="960px">
<tr>
<td> </td>
</tr>
<tr>
<td>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
TargetControlID="PanelContent"
ExpandControlID="PanelHeader"
CollapseControlID="PanelHeader"
Collapsed="true"
TextLabelID="lblHideShow"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ImageControlID="img"
ExpandedImage="images/minus.gif"
CollapsedImage="images/plus.gif"
SuppressPostBack="true" >
</asp:CollapsiblePanelExtender>
<asp:Panel ID="PanelHeader" runat="server" CssClass="MyCollapsePanelHeader">
<table width="100%">
<tr>
<td>
<asp:Image ID="img" runat="server" Height="16px" ImageUrl="images/plus.gif" Width="19px" />
TITLE
<asp:Label ID="lblHideShow" runat="server" Text="Label">(Show Details...)</asp:Label>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td>
<asp:Panel id="PanelContent" class="MyCollapsePanel" runat="server">
<table width="100%">
<tr>
<td height="100%" runat="server">
<asp:Table ID="tbl1" runat="server" Width="100%" Height="100%"/>
</td>
<td height="100%" runat="server">
<asp:Table ID="tbl2" runat="server" Width="100%" Height="100%"/>
</td>
<td height="100%" runat="server">
<asp:Table ID="tbl3" runat="server" Width="100%" Height="100%"/>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
Screenshot of Inspector Output:
I seem to have resolved this issue. I believe it was due to the fact that the CollapsiblePanelExtender and the Panel it was targeting were separated into different cells. After moving the target Panel up into the same cell as the CollapsiblePanelExtender, the scrollbars disappeared.
The <div> element is being duplicated and the overflow-y element is still present. I still don't understand why these appear the way they do. But it seems to be unrelated to why the scrollbar was showing. Since that was the issue I was originally trying to fix, I guess this counts as a solution.
Working .aspx
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<table width="960px">
<tr>
<td> </td>
</tr>
<tr>
<td>
<asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
TargetControlID="PanelContent"
ExpandControlID="PanelHeader"
CollapseControlID="PanelHeader"
Collapsed="true"
TextLabelID="lblHideShow"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ImageControlID="img"
ExpandedImage="images/minus.gif"
CollapsedImage="images/plus.gif"
SuppressPostBack="true" >
</asp:CollapsiblePanelExtender>
<asp:Panel ID="PanelHeader" runat="server" CssClass="MyCollapsePanelHeader">
<table width="100%">
<tr>
<td>
<asp:Image ID="img" runat="server" Height="16px" ImageUrl="images/plus.gif" Width="19px" />
TITLE
<asp:Label ID="lblHideShow" runat="server" Text="Label">(Show Details...)</asp:Label>
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel id="PanelContent" class="MyCollapsePanel" runat="server">
<table width="100%">
<tr>
<td height="100%" runat="server">
<asp:Table ID="tbl1" runat="server" Width="100%" Height="100%"/>
</td>
<td height="100%" runat="server">
<asp:Table ID="tbl2" runat="server" Width="100%" Height="100%"/>
</td>
<td height="100%" runat="server">
<asp:Table ID="tbl3" runat="server" Width="100%" Height="100%"/>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
I have this asp code:
<table>
<tr>
<td>Text:
</td>
<td>
<asp:TextBox ID="txtDescPoint" runat="server" EnableViewState="False" />
</td>
<td>
<input type="button" value="..." id="ffcolorswtach" style="width: 20px; height: 23px;color: #ffffffff; background-color: #ffffffff" onclick="PickColor(1, false, false)" role="button"/>
</td>
</tr>
<tr>
<td>X:
</td>
<td>
<asp:TextBox ID="txtLon" runat="server" EnableViewState="False" />
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtLon" Display="Dynamic" ErrorMessage="*"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>Y:
</td>
<td>
<asp:TextBox ID="txtLat" runat="server" EnableViewState="False" />
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="txtLat" Display="Dynamic" ErrorMessage="*"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
Here how it looks in view:
I need the view like this:
My question is what do I have to change in asp code to make appearance like in picture above?
I'm new to ASP, but I think you can just use CSS/html styling principles.
In
<input type="button" value="..." id="ffcolorswtach" style="width: 20px; height: 23px;color: #ffffffff; background-color: #ffffffff" onclick="PickColor(1, false, false)" role="button"/>
add this somewhere between the quotes after style=
left: 80px; //play with the amount to find what works.
If you're unable to get the button close enough, it may be because the textbox has padding or margin around it. Search your css files for a reference to #txtDescPoint and edit the padding/margin attribute if it has one.
I have the following table:
For some reason, When I render this there is an enormous space between each row! I have searched everywhere and I just don't know how to eliminate the space. I tried manually setting the height of each row but that still did not prove useful, the default huge space overrides everything i throw at it. Any suggestions?
<table style="display:block;">
<tr>
<td class="auto-style1"><p>תעודת זהות</p></td>
<td><telerik:RadTextBox runat="server" id="txtId" Skin="Metro"/></td>
</tr>
<tr>
<td class="auto-style1"><p>סיסמא</p></td>
<td>
<telerik:RadTextBox ID="txtPassword" runat="server" Skin="Metro" />
</td>
</tr>
<tr>
<td class="auto-style1"><p>שם פרטי</p></td>
<td>
<telerik:RadTextBox ID="txtfName" runat="server" Skin="Metro" />
</td>
</tr>
<tr>
<td class="auto-style1"><p>שם משפחה</p></td>
<td>
<telerik:RadTextBox ID="txtlName" runat="server" Skin="Metro" />
</td>
</tr>
<tr>
<td class="auto-style1"><p>מספר טלפון</p></td>
<td>
<telerik:RadTextBox ID="txtmPhone" runat="server" Skin="Metro" />
</td>
</tr>
<tr>
<td class="auto-style1"><p>כתובת</p></td>
<td>
<telerik:RadTextBox ID="txtAddress" runat="server" Skin="Metro" />
</td>
</tr>
<tr>
<td class="auto-style1"><p>אימייל</p></td>
<td>
<telerik:RadTextBox ID="txtEmail" runat="server" Skin="Metro" />
</td>
</tr>
</table>
style:
<style type="text/css">
.auto-style1 {
width: 126px;
}
table tr td p {
font-family: Arial;
}
</style>
NOTE: In the design view of visual studio there is no spacing, it looks fine. only when rendering it comes out this way.
Try
<style type="text/css">
tr, td, p {
margin: 0px;
padding: 0px;
}
</style>`
A table always has a padding. So add to your CSS padding: 0;
<style type="text/css">
.auto-style1 {
width: 126px;
}
table tr td p {
font-family: Arial;
padding: 0;
}
</style>
I have an asp.net page that I'm trying to have an image be in the center of a table cell and have that image be a link to another page. I'm not too good with CSS but I tried a couple of different things and here's a screenshot of my outcome:
As you can see, the link is beside the image...I'd like to have that link be in the center of that image, but also have the image be clickable (as part of the link), like so:
Here's my table (keep in mind that this is part of a ASPx GridView control so it gets repeated for each row in it's datasource):
<table style="text-align: left; border-collapse: collapse; width: 100%">
<tr>
<td style="width: 5%;"><strong>Request ID</strong></td>
<td class="field">Date</td>
<td class="field">Requestor</td>
<td class="field">Status</td>
</tr>
<tr>
<td rowspan="4" align="center" style="position:relative;">
<%# Eval("RequestID") %>
</td>
<td>
<dx:ASPxLabel ID="labelRequestDate" runat="server" Text='<%# Eval("RequestDate") %>'></dx:ASPxLabel>
</td>
<td>
<dx:ASPxLabel ID="labelICAO" runat="server" Text='<%# Eval("ICAO") %>'></dx:ASPxLabel>
</td>
<td>
<dx:ASPxLabel ID="labelStatus" runat="server" Text='<%# Eval("Status") %>'></dx:ASPxLabel>
</td>
</tr>
<tr>
<td class="field" colspan="4">Summary</td>
</tr>
<tr>
<td colspan="4" valign="top">
<dx:ASPxLabel ID="labelSummary" runat="server" Text='<%# Eval("Summary") %>'></dx:ASPxLabel>
</td>
</tr>
<tr>
<td colspan="4">
<strong>Description:</strong>
<br />
<%# Eval("Description") %>
<br />
<br />
<strong>Comments</strong>
<br />
<%# Eval("Comments") %>
</td>
</tr>
</table>
The class "field" simply makes the text bold and sets the width to 10%.
Please keep in mind that I need this to work in IE7 and above, Chrome, and Firefox as well.
Any help is appreciated!
How about using a background image for a div tag which is wrapped around using an a tag?
Demo (You can remove border, just used it for test purpose)
<div><span>495</span></div>
div {
background-image: url('http://i.stack.imgur.com/aNy9C.jpg');
height: 90px;
width: 75px;
background-repeat: no-repeat;
border: 1px solid #f00;
position: relative;
}
div span {
position: absolute;
font-family: Arial;
font-size: 24px;
top:35%;
left: 20%;
}
a {
color: black;
}
I have the following html :
<table id="TableNewUser" runat="server" width="50%" cellpadding="3" cellspacing="1"
border="0">
<tr>
<th colspan="2">
New User
</th>
</tr>
<tr>
<td width="50%" align="right">
<asp:TextBox ID="TextBoxUsername" runat="server" Style="direction: rtl;" MaxLength="25"></asp:TextBox>
</td>
<td align="left" width="50%">
UserName
</td>
</tr>
<tr>
<td align="right">
<asp:TextBox ID="TextBoxPass" runat="server" MaxLength="25"></asp:TextBox>
</td>
<td align="left">
Password :
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="ButtonSubmit" runat="server" Text="Submit" OnClick="ButtonSubmitClick" />
</td>
</tr>
</table>
I wanna change the tr style whenever the text-boxes are focused.
I've used below CSS code but it doesn't work.
input[type="text"]:focus tr
{
background-color: #e7e7e7;
}
Could you please guide me?
As Mr. Dissappointment stated, you must use JavaScript (or jquery) to achieve what you want.
I coded a very simple HTML page to exemplify:
<html>
<head>
<script type="text/javascript">
function changeTrStyle()
{
document.getElementById("trId").style.background = "red";
}
</script>
</head>
<body>
<table>
<tr id="trId">
<td>
<input type="text" onfocus="changeTrStyle()"/>
</td>
</tr>
</table>
</body>
</html>
If you focus the textbox, the tr background will become red.
Note: Tested on Safari and Chrome.