Here's my full code. I haven't modify my default css code. Does anyone know how to align nav bar to the right next to the logo? Please note I am currently learning visual basic web application building and my knowledge is very limited on this area.
thanks
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="default.aspx.vb" Inherits="Wiltshire_mobile._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">
.style1
{
font-size: large;
}
.style2
{
text-align: right;
}
.style3
{
width: 162px;
height: 83px;
border-width: 0px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="style2">
<asp:Button ID="mysiteloginbutton1" runat="server" Text="My Site Login" BackColor="#FF9900"
ForeColor="White" Style="text-align: right" /> <span class="style1"><strong
style="text-align: left">Sign up | Help |<asp:DropDownList
ID="DropDownList1" runat="server" AutoPostBack="True">
<asp:ListItem>English</asp:ListItem>
<asp:ListItem>Bangla</asp:ListItem>
</asp:DropDownList>
</div>
<div>
<a href="http://www.wiltshire-mobile.com">
<img alt="Wiltshire mobile website logo" class="style3" src="Images/logo.PNG" /></a> <span class="style1"><strong
style="text-align: left">
<asp:Menu ID="Menu1" runat="server" StaticSubMenuIndent="16px">
<Items>
<asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
<asp:MenuItem Text="Features" Value="Features"></asp:MenuItem>
<asp:MenuItem Text="Tour" Value="Tour"></asp:MenuItem>
<asp:MenuItem Text="Plans" Value="Plans"></asp:MenuItem>
<asp:MenuItem Text="Blog" Value="Blog"></asp:MenuItem>
</Items>
</asp:Menu>
</strong></span>
<br />
<br />
Mobile image
<br />
</div>
</form>
</body>
</html>
I believe this is what you are trying to accomplish:
<body>
<table style="width: 100%">
<tr valign="middle">
<td colspan="2">
<span style="font-size: 16pt; font-family: Verdana">
<a href="http://www.wiltshire-mobile.com">
<img alt="Wiltshire mobile website logo" class="style3" src="Images/logo.PNG" /></a> <span class="style1"><strong style="text-align: left">
</span>
</td>
<td style="width: 80%">
</td>
</tr>
<tr valign="top">
<td style="width: 20%">
<asp:Button ID="mysiteloginbutton1" runat="server" Text="My Site Login" BackColor="#FF9900" ForeColor="White" Style="text-align: right" /> <span class="style1"><strong style="text-align: left">Sign up | Help |<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True">
<asp:ListItem>English</asp:ListItem>
<asp:ListItem>Bangla</asp:ListItem>
</asp:DropDownList>
</td>
<td style="width: 80%">
<asp:Menu ID="Menu1" runat="server" StaticSubMenuIndent="16px">
<Items>
<asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
<asp:MenuItem Text="Features" Value="Features"></asp:MenuItem>
<asp:MenuItem Text="Tour" Value="Tour"></asp:MenuItem>
<asp:MenuItem Text="Plans" Value="Plans"></asp:MenuItem>
<asp:MenuItem Text="Blog" Value="Blog"></asp:MenuItem>
</Items>
</asp:Menu>
<br />
<br />
#RenderBody
<br />
</td>
</tr>
</table>
</body>
Now, I added '#RenderBody', as this should be used as your "_LayoutPage" and then each page calls to this to show how it should be designed.
The basic concept is to design the site as a table and then separate each element into columns and rows of that table, as I did here. <td> and <tr> are used to separate these items.
If you wanted to go more into how things looked, you should have this page point to your site.css file. The css file should contain everything as it is regarded to positioning of text, color, layout for specific items (such as tables), etc. Hope this helps.
Related
I am creating a website. It requires users to login.
When I click on the Username text box, as soon as I enter the first letter of the name it turns into a drop down list displaying every name ever entered, that starts with that letter!
I have found a lot of articles on how to accomplish this, but none how to PREVENT this from happening.
I want the text box to act like a text box.
I am using .NET version 4.62
I have searched here and there are many questions about making this happen, I could find none on how to stop it.
If you know how to stop this from happening, and can reply with the answer, I will be forever grateful.
The ASPX of the form is as follows
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb"
Inherits="Crescent._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 id="Head1" runat="server" link= "stylesheet" href="styles.css">
<title></title>
</head>
<body>
<form id="Default" runat="server">
<div>
<p> <asp:Image ID="Image1" runat="server" Height="54px"
ImageUrl="Images/CrescentLogo2007.bmp" Width="175px" />
<asp:Label ID="Label1" runat="server" top="1px" Font-Names="Arial" ForeColor="Black"
Text="Call us at 1-800-560-7867" CssClass="style2"></asp:Label>
</p>
</div>
<p>
<asp:Label ID="Label2" runat="server" Font-Names="Arial" Text="Log In"></asp:Label>
</p>
<p>
</p>
<p>
<asp:Label ID="Label3" runat="server" Font-Names="Arial" Font-Size="Small"
Height="25px" Text="User Name:"></asp:Label>
<asp:TextBox ID="txtUserName" runat="server" cache=" "></asp:TextBox>
</p>
<p>
<asp:Label ID="Label4" runat="server" style="margin-left:5px" Font-Names="Arial" Font-
Size="Small"
Height="25px" Text="Password:"></asp:Label>
<asp:TextBox ID="txtPassword" runat="server" style="margin-left: 5px"
Width="164px" TextMode="Password"></asp:TextBox>
</p>
<p>
<asp:button runat="server" text="Login" style="margin-left: 58px"
Width="153px" ID="btnLogin" onclick="btnLogin_Click" />
</p>
</form>
</body>
</html>
i'm building a site for course project in Web forms asp.net
and i did a master page for all the website
i want to have a text box that acts as a search in the website
but it needs to be in
<form runat="server">
this is master code
<html>
<div id="topContent">
<head runat="server">
<form runat="server">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>
<title>Dor Lugasi Guitar Shop</title>
<link href="Styles.css" rel="stylesheet" type="text/css" />
<right>
<img src="../Images/logobk2.png" alt="Powered by DLG!" class="auto-style7"/><br />
<center id="headdiv">
<asp:LinkButton ID="lnkHome" runat="server" PostBackUrl="~/Pages/Home.aspx" >Home</asp:LinkButton>
<asp:LinkButton ID="lnkLogin" runat="server" PostBackUrl="~/Pages/Login.aspx">Login</asp:LinkButton>
<asp:LinkButton ID="lnkContact" runat="server" PostBackUrl="~/Pages/Contact.aspx" >Contact</asp:LinkButton>
<asp:LinkButton ID="lnkGuitarLab" runat="server" PostBackUrl="~/Pages/GuitarLab.aspx">Guitar Lab</asp:LinkButton>
<asp:ImageButton style="float:left;margin-left:10px;" ID="btnCart" runat="server" Height="55px" ImageUrl="~/Images/cart.png" Width="55px" PostBackUrl="~/Pages/Cart.aspx" />
<asp:TextBox ID="txtSearch" runat="server" BackColor="Silver" BorderColor="Black" TextMode="Search" placeholder=" Search" onkeypress="txtSearch"></asp:TextBox>
<asp:ImageButton ID="btnSearch" runat="server" ImageUrl="~/Images/src.png" OnClick="btnSearch_Click" Width="25px" />
</center>
<center id="headdiv" class="auto-style6">
<asp:Label style="float:left;margin-left:10px;" ID="lblLoggedUser" runat="server" Font-Bold="True" Font-Size="Large" ForeColor="Red"></asp:Label>
<asp:LinkButton ID="btnLogOut" runat="server" OnClick="btnLogOut_Click" Visible="False" CssClass="auto-style5" Height="24px" Width="99px">Log Out</asp:LinkButton>
<asp:LinkButton style="float:right;margin-right:10px;" ID="lnkManageProducts" runat="server" PostBackUrl="~/Pages/ManageProducts.aspx">Manage Products</asp:LinkButton>
<asp:LinkButton style="float:right;margin-right:10px;" ID="lnkManageUsers" runat="server" PostBackUrl="~/Pages/ManageUsers.aspx">Manage Users</asp:LinkButton>
</center>
</form>
</head>
</div>
<body id="body">
<form runat="server">
<center>
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
</center>
<footer id="footer" class="auto-style3">
</left>
<img src="../Images/logowhite.png" alt="Powered by ASP.NET!" />
</footer>
</form>
</body>
</html>
but im getting a:
A page can have only one server-side Form tag.
before i added this search textbox and button i had
<form runat="server">
<html>
...
<head>.....</head>
<body>....</body>
<footer>.....</footer>
</html>
</form>
and it worked
but at the login page when i pressed Enter it applied to the search form instead of the login form
eventually i ended up making a single form for the page and just put the specific form that had buttons in
<asp:Panel ID="search_panel" runat="server" DefaultButton="btnSearch">
<asp:TextBox ID="txtSearch" runat="server" BackColor="Silver" BorderColor="Black" TextMode="Search" placeholder=" Search" onkeypress="txtSearch"></asp:TextBox>
<asp:ImageButton ID="btnSearch" runat="server" ImageUrl="~/Images/src.png" OnClick="btnSearch_Click" Width="25px" />
</asp:Panel>
i hope thats the right way
I try to create this type of sign in page in bootstrap
http://v4-alpha.getbootstrap.com/examples/signin/
but before this i already create page but this is not bootstrap
code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Mainpage.aspx.cs" Inherits="project.Mainpage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>System</title>
<link href="Styles/login.css" rel="stylesheet" />
<link href="Styles/main.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<!-- Google Web fonts -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,800,700,600' rel='stylesheet' type='text/css'/>
</head>
<body style="background-image:url(images/slide07.jpg);background-repeat:no-repeat">
<img class="logo" alt="LOGO" src="images/logomain.png" />
<br /><br />
<form id="form1" runat="server" class="fordiv">
<div id="box">
<span>
<img src="images/none.png" id="avtar" />
</span>
<div style="margin-left: 190px;margin-top: -170px";>
<span>
<asp:TextBox CssClass="textbx" ID="txt_us" runat="server" placeholder="Enter UserName"></asp:TextBox><br /><br />
</span>
<span>
<asp:TextBox CssClass="textbx" ID="txt_pwd" runat="server" placeholder="Enter Password" TextMode="Password"></asp:TextBox><br /><br />
</span>
<span>
<asp:Button ID="Button1" CssClass="button" runat="server" Text="LOGIN" OnClick="Button1_Click" />
</span>
</div>
</div><br /><br />
<asp:Label ID="Label1" CssClass="info" visible="false" runat ="server" Text="" BorderColor="Black"></asp:Label>
</form>
<table class="table" style="border: medium groove #FFFFFF; width: 100%; margin-top: 200px; ">
<tr>
<td>
<img style="margin-left: 10px;" src="images/passd.jpg" />
</td>
<td>
<img src="images/1.jpg" />
</td>
<td>
<img src="images/2.jpg" />
</td>
<td>
<img src="images/3.jpg" />
</td>
<td>
<img src="images/4.jpg" />
</td>
</tr>
</table>
<br /><br /><br />
</body>
</html>
now i try to create bootstrap responsive and i tried this
<div class="container">
<img class="logo" alt="LOGO" src="images/logomain.png" /><br /><br />
<form class="form-signin" runat="server" >
<h2 class="form-signin-heading">Please sign in</h2><br /><br />
<label for="inputEmail" class="sr-only">Email address</label>
<asp:TextBox CssClass="textbx" ID="txt_us" runat="server" placeholder="Enter UserName"></asp:TextBox><br /><br />
<label for="inputPassword" class="sr-only">Password</label>
<asp:TextBox CssClass="textbx" ID="txt_pwd" runat="server" placeholder="Enter Password" TextMode="Password"></asp:TextBox>
<br /><br />
<asp:Button ID="Button1" CssClass="button" runat="server" Text="LOGIN" OnClick="Button1_Click" />
<asp:Label ID="Label1" CssClass="info" visible="false" runat ="server" Text="" BorderColor="Black"></asp:Label>
</form>
</div>
but this shows awkward display
any solution?
Well, for responsive design you should be using using bootstraps's grid system.
I think you should read a bit about about responsive design here and the bootstrap grid system here.
So previously my login worked fine. And then I made some edits and it stopped working. Here are the edits I made to my website in between it going from working to not working.
I was trying to make a submit content page but I kept getting errors about not being able to contain a form inside a form. So I went over to my master page and removed the form tag and then added all the form tags I needed into each individual page. In the end I ended up removing all form tags and putting a single form tag around the content place holder in the master page.
I added a new table to my SQL database to store content submitted by users. I use Microsoft Server Express for my database.
The error I am getting is not an error in my console, it is just that my PostBackURL is loaded with out anything happen. Even if I enter a correct login (I have checked and the login info I tested is stored in my database), it will just automatically load the PostBackURL with no login occuring, nor any Login failed messages.
Web Config:
<configuration>
<system.web>
<compilation debug="true" targetFramework="4.5.2" />
<httpRuntime targetFramework="4.5.2" />
<authentication mode="Forms">
<forms loginUrl="login.aspx" name=".ASPXFORMSAUTH">
</forms>
</authentication>
</system.web>
<appSettings>
<add key="ValidationSettings:UnobtrusiveValidationMode" value="None" />
</appSettings>
</configuration>
Master Page (Relevant Parts):
<body>
<form id="form1" runat="server">
<div class="header headerLogin">
<img style="margin-left: 5vw; margin-top: 5px; height: 32px; width: 130px;" src="images/inshortlogo.png" />
<p class="taskbarLinks">
HOME
NEWS
JOB LISTINGS
STUDY
LOGIN
</p>
<script>
...
</script>
</div>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
Login Page:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="Absolute-Center">
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<asp:Login ID="Login1" runat="server">
<LayoutTemplate>
<table cellpadding="1" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td>
<table cellpadding="0">
<tr>
<td align="center" colspan="2">Log In</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User Name:</asp:Label>
</td>
<td>
<asp:TextBox ID="UserName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="ctl08$Login1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="right">
<asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label>
</td>
<td>
<asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="ctl08$Login1">*</asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td colspan="2">
<asp:CheckBox ID="RememberMe" runat="server" Text="Remember me next time." />
</td>
</tr>
<tr>
<td align="center" colspan="2" style="color:Red;">
<asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
</td>
</tr>
<tr>
<td align="right" colspan="2">
<asp:Button ID="LoginButton" runat="server" CommandName="Login" CssClass="button" PostBackUrl="~/home.aspx" Text="Log In" ValidationGroup="ctl08$Login1" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</LayoutTemplate>
</asp:Login>
<br />
<div style="text-align: center;">
<a class="button" style="margin-right: 2em;" href="signup.aspx">Register</a>
<a class="button" href="forgotpassword.aspx">Forgot Password</a>
</div>
</AnonymousTemplate>
<LoggedInTemplate>
<asp:Label ID="logOutLabel" runat="server" Text=""></asp:Label>
<br />
<br />
<div style="text-align: center;">
<asp:LinkButton ID="logOutButton" runat="server" class="button" OnClick="logOutButton_Click">Log Out</asp:LinkButton>
</div>
</LoggedInTemplate>
</asp:LoginView>
</div>
<style>
.Absolute-Center {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
</style>
</asp:Content>
Thanks in advance!
Remove the postbackurl. That posts the form to another page, so of course you don't get logged in. Instead, upon successful login, perform a redirect to whatever page you want.
I have a styling problem
I am trying to align a button with the first column of a gridview which is right underneath.
Something like this:
I've done the following but obviously it will fail with different resolutions:
<div class="formsFormBlock">
<asp:Label ID="LblRecurError" runat="server" />
<div style="text-align: left; position: relative; left: -15%;">
<table style="border: 0">
<tr>
<td style="border: 0">
<asp:Button ID="btnRecur" runat="server" Text="Repeat" />
</td>
</tr>
</table>
</div>
<asp:GridView>
</asp:GridView>
How can i do this?
Addition:
the gridview doesn't have a cssclass but the div above has the following css attributes:
.formsFormBlock{clear:both;position:relative;border-bottom:1px solid #e8f1f7;padding:0.53em 0.83em}
.formsFormBlock .formsItemLabel{display:block;width:25%;float:left;position:relative}
.formsFormBlock .formsItemLabel em{position:absolute;/*right:1.66em*/color:#ff0000}
.formsFormBlock .formsFormBlockHint{color:#999;font-size:92%;}
#formsFormHd:after, .formsFormBlock:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
#formsFormHd, .formsFormBlock{display:block;clear:both;}
*:first-child+html #formsFormHd, *:first-child+html .formsFormBlock{display:inline-block;}
Try this
<div class="formsFormBlock">
<div style="text-align: left; position: relative; left: -15%;">
<table style="border: 0">
<tr>
<td style="border: 0">
<asp:Button ID="btnRecur" runat="server" Text="Repeat" />
<asp:Label ID="LblRecurError" runat="server" />
</td>
</tr>
</table>
</div>
<asp:GridView>
</asp:GridView>
<div id="container">
<div style="float: left; margin-bottom: 10px;">
<asp:Label ID="LblRecurError" runat="server" />
<br />
<asp:Button ID="btnRecur" runat="server" Text="Repeat" />
</div>
<div style="clear: left;">
<asp:GridView runat="server">
</asp:GridView>
</div>
</div>
cheers