I am new to Html designing. There is a small section of page that I have to design using html and CSS.
I have the back ground image with the image of login button. How to develop the Html of this so that it looks the same form in the attached picture.
Till now I have tried this but it is looking distorted:
<div class="dvEmployee">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<br />
<span class="EmployeeLable">Enter your employee number to vote </span>
</td>
</tr>
<tr>
<td>
<asp:TextBox runat="server" ID="txtEmpID" ValidationGroup="vdLog" CssClass="input"
Height="49px" Width="161px" /><br />
<asp:RequiredFieldValidator ID="rfgEmp" runat="server" ValidationGroup="vdLog" ControlToValidate="txtEmpID"
ErrorMessage="Please enter employee number!"></asp:RequiredFieldValidator>
<asp:Label runat="server" ID="lblError" Text="" CssClass="lblError"></asp:Label>
</td>
<td>
<asp:ImageButton ID="imgBtn" runat="server" ImageUrl="Images/log_in_button.png" ValidationGroup="vdLog"
AlternateText="Log In" OnClick="imgBtn_Click" />
</td>
</tr>
</table>
</div>
Css classes that I have made:
.dvEmployee
{
background-image: url('images/log_in_window.png');
background-repeat: no-repeat;
width: 466px;
height: 206px;
position: relative; /* padding: 100px 30px;*/
margin: 180px 107px;
z-index: 2000px;
}
.lblError
{
font: Arial Regular 12pt #000000;
}
.EmployeeLable
{
font-family: Arial regular;
font-size: 29pt;
color: #404040;
line-height: 17px;
}
Just to give all, following image is how it is currently looking:
use this srtuctuer :
<table>
<tr>
<td colspan="2">
<br />
<span class="EmployeeLable">Enter your employee number to vote </span>
</td>
</tr>
<tr>
<td class="center">
<asp:TextBox runat="server" ID="txtEmpID" ValidationGroup="vdLog" CssClass="input"
Height="49px" Width="161px" /><br />
<asp:RequiredFieldValidator ID="rfgEmp" runat="server" ValidationGroup="vdLog" ControlToValidate="txtEmpID"
ErrorMessage="Please enter employee number!"></asp:RequiredFieldValidator>
<asp:Label runat="server" ID="lblError" Text="" CssClass="lblError"></asp:Label>
</td>
<td class="center">
<asp:ImageButton ID="imgBtn" runat="server" ImageUrl="Images/log_in_button.png" ValidationGroup="vdLog"
AlternateText="Log In" OnClick="imgBtn_Click" />
</td>
</tr>
</table>
css :
.center{
text-align:center;
}
Related
So, I have this table in which I need to place the td that contains the profile info further to the right as following:
Example
this is my HTML:
<table>
<tr>
<td>
<asp:Label ID="****" runat="server" CssClass="FieldLabelRqrd" Text="Name"></asp:Label>
</td>
<td>
<asp:Label ID="***" runat="server" Text="ID=****"></asp:Label>
</td>
<td colspan="4">
<div id="cssProfile">
<asp:Label ID="lblProfile" runat="server" Text="Profile:" CssClass="lblProfile"></asp:Label>
<asp:HyperLink ID="hlGoProfile" runat="server" ForeColor="blue" Target="_blank" CssClass="hlGoProfile" Text="Go"></asp:HyperLink>
</div>
</td>
</tr>
</table>
I tried colspan and rowspan but this does no work and here's the CSS
#cssProfile{
display:flex;
justify-content: start-flex;}
.lblProfile{
margin-left: auto;}
.hlGoProfile{
margin-left: auto;}
Give your table 100% width and add text-align: right to the cell in question.
BTW, you could remove that colspan, if you don't need it for any other purpose.
table {
width: 100%;
}
#cssProfile {
border: 1px solid red;
text-align: right;
}
<table>
<tr>
<td>
<asp:Label ID="****" runat="server" CssClass="FieldLabelRqrd" Text="Name">A</asp:Label>
</td>
<td>
<asp:Label ID="***" runat="server" Text="ID=****">B</asp:Label>
</td>
<td colspan="4">
<div id="cssProfile">
<asp:Label ID="lblProfile" runat="server" Text="Profile:" CssClass="lblProfile">C</asp:Label>
<asp:HyperLink ID="hlGoProfile" runat="server" ForeColor="blue" Target="_blank" CssClass="hlGoProfile" Text="Go">D</asp:HyperLink>
</div>
</td>
</tr>
</table>
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'm struggling to get the content of my div to align, everything will center apart from the contents of the table. The title will center along with the login button.
CSS:
.center {
margin:auto;
width: 50%;
border:3px solid #8AC007;
padding: 10px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
font-family:'Century Gothic';
text-align:center;
}
HTML:
<div class="center">
<form id="form1" runat="server">
<h3>
Login Page</h3>
<table >
<tr>
<td>
E-mail address:</td>
<td>
<asp:TextBox ID="UserEmail" runat="server" /></td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1"
ControlToValidate="UserEmail"
Display="Dynamic"
ErrorMessage="Required"
runat="server" />
</td>
</tr>
<tr>
<td>
Password:</td>
<td>
<asp:TextBox ID="UserPass" TextMode="Password"
runat="server" />
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2"
ControlToValidate="UserPass"
ErrorMessage="Cannot be empty."
runat="server" />
</td>
</tr>
<tr>
<td>
Remember me?</td>
<td>
<asp:CheckBox ID="Persist" runat="server" /></td>
</tr>
</table>
<asp:Button ID="Submit1" OnClick="Logon_Click" Text="Login"
runat="server" />
<p>
<asp:Label ID="Msg" ForeColor="red" runat="server" />
</p>
</form>
</div>
I've tried text align on the table as well with no luck
Apply margin: 0 auto to the table element. Currently your margin: auto only centers the form but inside it the table is aligned to the left because of the default behavior of contents to start from left.
Don't try to use tables for layout purpose, although you can use them for tabular data.
.center {
margin: auto;
width: 50%;
border: 3px solid #8AC007;
padding: 10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
font-family: 'Century Gothic';
text-align: center;
}
table {
margin: 0 auto; /* Add */
}
<div class="center">
<form id="form1" runat="server">
<h3>
Login Page</h3>
<table>
<tr>
<td>
E-mail address:</td>
<td>
<asp:TextBox ID="UserEmail" runat="server" />
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="UserEmail" Display="Dynamic" ErrorMessage="Required" runat="server" />
</td>
</tr>
<tr>
<td>
Password:</td>
<td>
<asp:TextBox ID="UserPass" TextMode="Password" runat="server" />
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" ControlToValidate="UserPass" ErrorMessage="Cannot be empty." runat="server" />
</td>
</tr>
<tr>
<td>
Remember me?</td>
<td>
<asp:CheckBox ID="Persist" runat="server" />
</td>
</tr>
</table>
<asp:Button ID="Submit1" OnClick="Logon_Click" Text="Login" runat="server" />
<p>
<asp:Label ID="Msg" ForeColor="red" runat="server" />
</p>
</form>
</div>
How do I add a hover to this class in my CSS file? I can add a hover effect when I do not specify this class by using onmouseover, however I want to use both this CSS class and the hover.
tr.TableData td
{
background-color:white;
color:Black;
font-family:'Exo', sans-serif;
font-size: 16px;
height:60px;
border-bottom:1pt solid #E2E2E8;
padding: 0px 15px 0px 15px;
margin:0px;
width:199px;
font-weight:400;
}
This is my table. It is an ItemTemplate in a listview:
<ItemTemplate>
<tr class="TableData">
<td style="width: 30%;">
<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%;">
<asp:Label ID="lblModelNum" runat="server" Text='<%#Eval("model")%>' />
</td>
<td style="width: 16%;">
<asp:Label ID="lblSerialNum" runat="server" Text='<%#Eval("serial_number")%>' />
</td>
<td style="width: 12%; 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%; text-align:right;">
<asp:Label ID="lblShipDate" runat="server" Text='<%#Eval("date")%>' />
</td>
</tr>
</ItemTemplate>
If you mean a hover effect on the table-cell, then this should work:
tr.TableData td:hover {
background-color: red;
}
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;
}