Keep width even when column changes. (HTML) - asp.net

I have a login on the left sidebar of my website. When a user is logged in, the sidebar width doesn't remain the same as it was when the user wasn't logged in.
Is there a way to keep the width the same?
<!-- Start Sidebar -->
<td id="sidebar" valign="top" height="400px" style="width: 200px">
<!-- Login Form -->
<table id="TABLE2">
<tr>
<td valign="top">
<asp:LoginView ID="LoginView1" runat="server">
<LoggedInTemplate>
<br />
<br />
You are currently logged in.
</LoggedInTemplate>
<AnonymousTemplate>
<asp:Login ID="Login1" runat="server" BorderPadding="0" BorderStyle="None" BorderWidth="0px"
Font-Names="Verdana" Font-Size="0.8em" CreateUserText="Sign Up Now!" CreateUserUrl="http://www.tiltonindustries.com/Tilton/Login/CreateAccount.aspx"
Height="1px" PasswordRecoveryText="Forgot your password?" PasswordRecoveryUrl="http://www.tiltonindustries.com/Tilton/Login/ForgotPassword.aspx"
TextLayout="TextOnTop" Width="200px" DestinationPageUrl="http://www.tiltonindustries.com/Tilton/default.aspx">
<TitleTextStyle Font-Bold="True" Font-Size="0.9em"/>
<InstructionTextStyle Font-Italic="True" ForeColor="Black" />
<TextBoxStyle Font-Size="0.8em" />
<LoginButtonStyle BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" Font-Size="0.8em"
ForeColor="#990000" />
<LayoutTemplate>
<table border="0" cellpadding="4" cellspacing="0" style="border-collapse: collapse;
height: 159px;">
<tr>
<td style="height: 176px; width: 135px;">
<table border="0" cellpadding="0" style="width: 219px; height: 1px" id="TABLE1">
<tr>
<td align="center" style="font-weight: bold; font-size: 0.9em; color: white; height: 18px;
background-color: #990000; text-align: center" colspan="2">
Log In</td>
</tr>
<tr>
<td style="width: 94px; height: 10px;">
</td>
<td style="height: 10px; width: 78px;">
</td>
</tr>
<tr>
<td style="width: 94px; height: 20px; text-align: right">
<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User Name:</asp:Label>
</td>
<td style="height: 20px; text-align: left; width: 78px;">
<asp:TextBox ID="UserName" runat="server" Font-Size="0.9em" EnableViewState="False"
Width="100px" MaxLength="20"></asp:TextBox><asp:RequiredFieldValidator ID="UserNameRequired"
runat="server" ControlToValidate="UserName" ErrorMessage="User Name is required."
ToolTip="User Name is required." ValidationGroup="ctl01$Login1">*</asp:RequiredFieldValidator></td>
</tr>
<tr>
<td style="width: 94px; text-align: right">
<asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label>
</td>
<td style="text-align: left; width: 78px;">
<asp:TextBox ID="Password" runat="server" Font-Size="0.9em" TextMode="Password" Width="100px"></asp:TextBox><asp:RequiredFieldValidator
ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="Password is required."
ToolTip="Password is required." ValidationGroup="ctl01$Login1">*</asp:RequiredFieldValidator></td>
</tr>
<tr>
<td style="height: 20px; width: 94px;">
</td>
<td style="height: 20px; text-align: left; width: 78px;">
<asp:CheckBox ID="chkRememberMe" runat="server" Text="Remember Me" Width="104px" /></td>
</tr>
<tr>
<td align="center" style="color: red; width: 94px; height: 20px;">
</td>
<td align="center" style="color: red; text-align: left; width: 78px; height: 20px;">
<asp:Button ID="LoginButton" runat="server" BorderStyle="Solid" BorderWidth="1px"
CommandName="Login" Font-Names="Verdana" Font-Size="1.0 em" Text="Log In" ValidationGroup="ctl01$Login1"
Width="59px" BackColor="Gray" BorderColor="Black" Height="20px" /></td>
</tr>
<tr>
<td align="center" style="width: 250px; color: red; height: 35px; text-align: center;"
colspan="2">
<asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal></td>
</tr>
<tr>
<td style="height: 26px; width: 94px;">
<asp:HyperLink ID="CreateUserLink" runat="server" NavigateUrl="http://www.tiltonindustries.com/Tilton/Login/CreateAccount.aspx">Sign Up Now!</asp:HyperLink>
</td>
<td style="width: 78px; height: 26px">
<asp:HyperLink ID="PasswordRecoveryLink" runat="server" NavigateUrl="http://www.tiltonindustries.com/Tilton/Login/ForgotPassword.aspx">Forgot your password?</asp:HyperLink></td>
</tr>
</table>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:Login>
</AnonymousTemplate>
</asp:LoginView>
<!-- End Login Form -->
<!-- Quick Links -->
<br />
<br />
<p style="font-size: 14px; font-weight: bold; color: White">
Quick Links:<br />
</p>
<br />
<p id="quicklinks">
Home<br />
Services<br />
Color Matching<br />
Custom Packaging<br />
Decorals<br />
Delivery<br />
Items<br />
MSDS<br />
Plant Capabilities<br />
Standard Colors<br />
Special Effects<br />
Spray Coatings<br />
Warranty<br />
My Account<br />
Gallery<br />
About<br />
F.A.Q<br />
Links<br />
Careers<br />
Contact<br />
<br />
</p>
</td>
</tr>
</table>
</td>
<!-- End Sidebar -->

If the markup is the same, you could always just add a fixed width to it in CSS:
<div id="sidebar">
...
</div>
#sidebar { width: 200px; }
This, of course, assumes the markup for the sidebar itself is the same both when logged in and when not logged in.
...assuming you use a non-table layout. You can still set a fixed width on the sidebar-cell, but tables should generally not be used for layout purposes.
Edit: Ah, and there is the code. I advice you to read up on CSS (google "CSS tutorial" and the like) and remove all the style-attributes from your code. The way it looks today makes it really, really unreadable and not very easily changeable.

Related

Align image to left is not working. Tried text-align, float, etc

Hi I am a beginner in ASP.Net. I have a web page that was working yesterday but now it's broken. I tried every solution that I found but it's not working. I'm sorry if there is a duplicate question but the solution didn't work for me.
Can you please help me.
My Code is:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap.min.js" rel="stylesheet" />
<link href="bootbox.js" rel="stylesheet" />
<link href="bootbox.min.js" rel="stylesheet" />
<link href="jquery.js" rel="stylesheet" />
<link href ="jquery-1.11.3.min.js" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootbox.min.js"></script>
<title>
</title>
<style type="text/css">
.auto-style1 {
width: 100%;
}
.auto-style2 {
height: 23px;
}
.auto-style3 {
width: 252px;
}
.auto-style4 {
height: 23px;
width: 252px;
}
.auto-style5 {
width: 381px;
}
.auto-style6 {
height: 23px;
width: 381px;
}
#ImageButton2{
position: absolute;
top: 0px;
right: -1px; }
.auto-style7 {
width: 5px;
}
.auto-style8 {
height: 23px;
width: 5px;
}
#Image2{
float:left;
text-align: left;
}
.left{
float:left;
}
.test{
float:left;
text-align: left;
}
</style>
<script type="text/javascript" lang="javascript">
function pLogin() {
var result;
bootbox.confirm("Do you have an existing account?", function (result) {
if (result == true) {
window.location.href ="/login.aspx"
}
else
{}
});
return false
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="auto-style1">
<tr>
<td class="auto-style7"> </td>
<td class="auto-style3"> </td>
<td class="auto-style5"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style8">
</td>
<td class="auto-style4">
<asp:ImageButton ID="ImageButton1" runat="server" Height="113px" ImageUrl="~/images/baby's logo.png" Width="407px" />
</td>
<td class="auto-style6"> </td>
<td class="auto-style2"></td>
<td class="auto-style2">
<asp:ImageButton ID="ImageButton2" runat="server" Height="111px" ImageUrl="~/images/ordernow.jpg" Width="135px" OnClientClick="javascript: return pLogin();" />
</td>
</tr>
</table>
</div>
<div>
<hr />
</div>
<div>
<p class="test">
<asp:Image ID="Image2" runat="server" Height="500px" Style="float:left" ImageUrl="~/images/puto cake.jpg" Width="960px" />
</p>
</div>
<div>
</div>
<div>
<table class="nav-justified">
<tr>
<td class="auto-style11"> </td>
<td class="auto-style22">
<asp:Label ID="Label1" runat="server" Font-Bold="False" Font-Names="Tw Cen MT Condensed Extra Bold" ForeColor="Gray" Text="ORDER" ViewStateMode="Enabled" Width="100px"></asp:Label>
</td>
<td class="auto-style22">
<asp:Label ID="Label2" runat="server" Font-Bold="False" Font-Names="Tw Cen MT Condensed Extra Bold" ForeColor="Gray" Text="CUSTOMER SERVICE" ViewStateMode="Enabled" Width="239px"></asp:Label>
</td>
<td class="auto-style16">
<asp:Label ID="Label3" runat="server" Font-Bold="False" Font-Names="Tw Cen MT Condensed Extra Bold" ForeColor="Gray" Text="MY ACCOUNT" ViewStateMode="Enabled" Width="100px"></asp:Label>
</td>
<td>
<asp:Label ID="Label4" runat="server" Font-Bold="False" Font-Names="Tw Cen MT Condensed Extra Bold" ForeColor="Gray" Text="CONNECT WITH BABY'S PUTO CAKE" ViewStateMode="Enabled" Width="317px"></asp:Label>
</td>
</tr>
<tr>
<td class="auto-style17"></td>
<td class="auto-style23">
<asp:HyperLink ID="HyperLink1" runat="server" Font-Names="Arial Black" ForeColor="Black">Puto Cake</asp:HyperLink>
</td>
<td class="auto-style23">
<asp:HyperLink ID="HyperLink2" runat="server" Font-Names="Arial Black" ForeColor="Black">Contact Us</asp:HyperLink>
</td>
<td class="auto-style20">
<asp:HyperLink ID="HyperLink3" runat="server" Font-Names="Arial Black" ForeColor="Black">Create an Account</asp:HyperLink>
</td>
<td class="auto-style21">
<asp:ImageButton ID="ImageButton3" runat="server" Height="36px" ImageUrl="~/images/Facebook-128 (1).png" Width="44px" />
<asp:ImageButton ID="ImageButton4" runat="server" Height="36px" ImageUrl="~/images/Twitter-Bird-128 (1).png" Width="44px" />
<asp:ImageButton ID="ImageButton5" runat="server" Height="36px" ImageUrl="~/images/youtube_circle_color-512.png" Width="44px" />
</td>
</tr>
<tr>
<td class="auto-style11"> </td>
<td class="auto-style22"> </td>
<td class="auto-style22"> </td>
<td class="auto-style16">
<asp:HyperLink ID="HyperLink4" runat="server" Font-Names="Arial Black" ForeColor="Black">Sign In</asp:HyperLink>
</td>
<td> </td>
</tr>
<tr>
<td class="auto-style11"> </td>
<td class="auto-style22"> </td>
<td class="auto-style22"> </td>
<td class="auto-style16"> </td>
<td> </td>
</tr>
<tr>
<td class="auto-style11"> </td>
<td class="auto-style22"> </td>
<td class="auto-style22"> </td>
<td class="auto-style16"> </td>
<td> </td>
</tr>
</table>
</div>
</form>
<div>
<br />
<br />
<br />
</div>
</body>
</html>
As I could see you didn't make you images like block elements (images are inline elements by default). Try try use display: block; or display: inline-block; in your CSS classes and then use text-align: left;.
Also floated elements could behave wrong, because they "condensed" to the content even if you use a block level element. So also try to delete float rules from CSS classes or use clear:left;.

How do I pass a parameter in an asp onclick call in a table row?

Here I have a table row in a listview declared as follows:
<tr onclick="<%= _jsPostBackCall %>;" />
I am calling a postback method on the backend but must get the tr index:
public void RaisePostBackEvent(string eventArgument)
{
//selected index here
}
aspx page content - below is the html in the aspx page. This contains the listview.
<asp:ListView ID="lvEquipmentList" runat="server" OnSelectedIndexChanged="lvEquipmentList_SelectedIndexChanged" OnSelectedIndexChanging="lvEquipmentList_SelectedIndexChanging">
<LayoutTemplate>
<table runat="server" class="TableCSS">
<tr runat="server" class="TableHeader">
<td runat="server" style="width: 30%;">PRODUCT LINE</td>
<td runat="server" style="width: 20%;">MODEL</td>
<td runat="server" style="width: 20%;">SERIAL #</td>
<td runat="server" style="width: 12%; text-align:center">DAR STATUS</td>
<td runat="server" style="width: 18%; text-align:right;">SHIP DATE</td>
</tr>
<tr id="ItemPlaceholder" runat="server">
</tr>
</table>
</LayoutTemplate>
<EmptyDataTemplate>
<table id="Table1" runat="server" class="TableCSS">
<tr runat="server" class="TableHeader">
<td id="Td1" runat="server" style="width: 30%;">PRODUCT LINE</td>
<td id="Td2" runat="server" style="width: 20%;">MODEL</td>
<td id="Td3" runat="server" style="width: 20%;">SERIAL #</td>
<td id="Td4" runat="server" style="width: 12%; text-align:center;">DAR STATUS</td>
<td id="Td5" runat="server" style="width: 18%; text-align:right;">SHIP DATE</td>
</tr>
<tr runat="server" class="TableData">
<td style="column-span:all;">
<asp:Label runat="server" Text="There are no reports to display."></asp:Label>
</td>
</tr>
</table>
</EmptyDataTemplate>
<ItemTemplate>
<tr style="border-bottom:1pt solid #E2E2E8;" onclick="<%= _jsPostBackCall %>;" onmouseover="this.style.background='#f6f6f6';" onmouseout="this.style.background='white'">
<td style="width: 30%; padding: 0px 15px 0px 15px;">
<table>
<tr class="NoBorder">
<td style="width: 20%;">
<img src='<%#Eval("standard_image") %>' alt="" width="80" onerror="this.src='Content/Images/placeholder.png';"/>
</td>
<td>
<asp:Label ID="lblProductLine" runat="server" Text='<%#Eval("product_line")%>'/>
</td>
</tr>
</table>
</td>
<td style="width: 24%; padding: 0px 15px 0px 15px;">
<asp:Label ID="lblModelNum" runat="server" Text='<%#Eval("model")%>'/>
</td>
<td style="width: 16%; padding: 0px 15px 0px 15px;">
<asp:Label ID="lblSerialNum" runat="server" Text='<%#Eval("serial_number")%>'/>
</td>
<td style="width: 12%; padding: 0px 15px 0px 15px; text-align:center;">
<asp:LinkButton runat="server" ID="SelectCategoryButton" CommandName="Select">
<img id="Img1" runat="server" src='<%#Eval("display_status") %>' alt="" width="20"/>
</asp:LinkButton>
</td>
<td style="width: 18%; padding: 0px 15px 0px 15px; text-align:right;">
<asp:Label ID="lblShipDate" runat="server" Text='<%#Eval("date")%>'/>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
When registering postback call - second argument will be the parameter:
_jsPostBackCall = ClientScript.GetPostBackEventReference(this, "The Parameter");

Weird behavior in asp.net

Can someone tell one why do i get the blue line that i show here: (and also it is really a good practice to define a class for just text-align:center instead of inline code?)
Code:
<asp:Panel ID="PnlBarraFinalizarMostrar" runat="server" CssClass="izq">
<asp:LinkButton ID="LkBRegresar" runat="server" CssClass="LKBPequeño" OnClick="LkBRegresar_Click">Regresar</asp:LinkButton>
</asp:Panel>
<%--alumn's info--%>
<asp:Panel ID="PnlAlumno" runat="server" BackColor="Yellow">
<table runat="server" class="datos" style="background-color:Green;">
<tr>
<td rowspan="4" style="width: 65px;">
<asp:Image ID="ImgAlumno" runat="server" BorderWidth="0px"
Width="62.7" Height="84" />
</td>
<td style="width: 75px;">
Alumno:
</td>
<td style="width:225px; white-space:nowrap;">
<asp:Label ID="LbDAlumno" runat="server" />
</td>
<td style="width: 40px;">
Ciclo:
</td>
<td>
<asp:Label ID="LbDciclo" runat="server" />
</td>
</tr>
<tr>
<td>
Carrera:
</td>
<td>
<asp:Label ID="LbDCarrera" runat="server" />
</td>
<td>
Plan:
</td>
<td>
<asp:Label ID="LbDPlan" runat="server" />
</td>
</tr>
<tr>
<td>
Maximo UV:
</td>
<td>
<asp:Label ID="LbDMaximoUV" runat="server" />
</td>
<td>
CUM:
</td>
<td>
<asp:Label ID="LbDCum" runat="server" />
</td>
</tr>
<tr style="vertical-align: text-top; background-color:Gray;">
<td>
UV Inscritas:
</td>
<td>
<asp:Label ID="LbDUVInscritas" runat="server" />
</td>
<td>
Avance:
</td>
<td>
<asp:Label ID="LbDAvance" runat="server" />
</td>
</tr>
</table>
</asp:Panel>
<br />
<%--Detalle de Asignaturas--%>
<asp:Panel ID="PnlHojaAsesoriaCursosInscritos" runat="server" Width="100%" BackColor="Sienna">
<table class="encabezado">
<tr>
<td>
<asp:Label ID="lbTituloHAsesoriaCInscritos" runat="server" Text="Hoja Asesoria o Cursos Inscritos" />
</td>
</tr>
</table>
<table id="THojaA" runat="server" class="tabla" style="padding:0px;background-color:Red;">
...
encabezado.css (header)
.encabezado
{
font-size:10pt;
text-align:left;
background-color:#152B81; color:#FFFFFF;
border-spacing: 2px;
padding:3px 4px 2px 5px;
width:100%;
}
datos.css (data)
.datos
{
font-size: 9pt;
border: 1px solid #152B81;
background-color: #DBE7F6;
color: #152B81;
width: 100%;
text-align: left;
border-spacing:0px;
padding:4px 4px 4px 5px;
}
after using inspection i detect a border-bottom!:
inspector:
Use inspect element to check what is happening once the code is parsed. or you can post the parsed html here.

How to show DIV just on top of button

I have a custom control, which has a Button + image, if image(down arrow) is clicked, a DIV should display, just like Dropdownlist.
However, its pushing the page contents to down to display the DIV. How to fix this.
It should just behave like dropdown
List should display on top of Button instead button
<table id="container" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<asp:Button ID="btnPost" runat="server" CssClass="postButton" OnClick="btnPost_Click" />
<asp:Button ID="btnDropDown" runat="server" CssClass="dropdownButton" OnClick="btnDropDown_Click" />
</td>
</tr>
<tr>
<td>
<div runat="server" id="divDropDownPanel" visible="false" style="text-align: left;
overflow: scroll; float: left; border: thin solid lightgrey; width: 160px; height: 120px;
background-color: #FFFFFF; position: absolute; z-index: 999;">
<asp:Repeater ID="rptDropDownContent" runat="server" OnItemDataBound="rptDropDownContent_ItemDataBound">
<HeaderTemplate>
<table>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td align="left">
<asp:CheckBox ID="chkChannel" runat="server" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tr> </table>
</FooterTemplate>
</asp:Repeater>
<br />
</div>
</td>
</tr>

how to use the img tag

i am a student working in an simple application and i do not know how to use the img tag and i have tryed one such code but while executing the code the image is not showing plz see the code and help me to saw what is the wrong in the code.
code is:
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 100%;
height: 100%;">
<tr style="width: 100%; height: 300px;">
<td valign="middle" align="center">
<img alt="" src="C:\Documents and Settings\temp.intern1\My Documents\My Pictures\images4.jpg" />
</td>
</tr>
<tr style="height: 65%; vertical-align: top;">
<td style="width: 90%;" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="height: 20px">
</td>
</tr>
<tr>
<td align="center" valign="middle" width="100%" style="height: 100%">
<div id="Panel1" style="background-color: #87BDEF; height: 300px; width: 600px;">
<table cellpadding="0" cellspacing="0" style="height: 400px" width="600px">
<tr>
<td>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" style="height: 200px" width="600px">
<tr>
<td align="right" style="padding-left: 5px; width: 50%;">
<asp:Label ID="lblUserName" runat="server" Text="USER NAME :"></asp:Label>
</td>
<td align="left" style="padding-left: 5px; width: 50%;">
<br />
<asp:TextBox ID="txtUserName" runat="server" Width="70%"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvUserName" ErrorMessage="Please enter Username"
ControlToValidate="txtUserName" runat="server" Width="70%" ForeColor="red" Style="margin-left: 0px;" />
</td>
</tr>
<tr>
<td>
<br />
</td>
<td>
<br />
</td>
</tr>
<tr>
<td align="right" style="width: 50%;">
<asp:Label ID="lblPassword" runat="server" Text="PASSWORD :"></asp:Label>
</td>
<td align="left" style="padding-left: 5px; width: 50%;">
<br />
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" Width="70%"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvPassword" ErrorMessage="Please enter Password"
ControlToValidate="txtPassword" runat="server" Width="70%" ForeColor="red" Style="margin-left: 0px" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<span id="lblInValid" style="color: #C00000; font-family: Verdana; font-size: Small;">
</span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<table width="50%">
<tr>
<td align="left" style="padding-left: 5px; width: 50%;">
<asp:Button ID="btnSubmit" runat="server" Text="SUBMIT" OnClick="btnSubmit_Click" />
<br />
<br />
<br />
</td>
<td align="left" style="padding-left: 5px; width: 50%;">
<asp:Button ID="btnClear" runat="server" Text="CLEAR" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<br />
</td>
<td>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td height="180px">
<br />
</td>
</tr>
<tr>
<td>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</asp:Content>
plz some one help me on this code...,
Your image should be in the folder accessible to your web server. Try including your image into your solution file (assuming you are using Visual Studio), and use relative path, such as "/images/image4.jpg"
Go to some web site (like www.cnn.com), view source for any page and see how they set path to img tags.
You can also use ASP.Net image tag, check out MSDN for examples and usage.
The problem is that you are using an address to an image on your computer, so that will only work when you view the page from that specific computer.
You should copy the image into the web application, for example into a folder named images, then you use that address in the image tag:
<img alt="" src="images/images4.jpg" />

Resources