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.
Related
I have a simple table like as in the first pic. Now I have to add a datetime picker for a textbox (start). For that I added a css (DateTimePicker/bootstrap.min.css) for the calendar, time format and all. But now seems like the same css is applied to all the other controls on the page. How can I restrict the css applied to particular textbox only? My code is here.
<link href="DateTimePicker/bootstrap.min.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="DateTimePicker/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="DateTimePicker/bootstrap.min.js"></script>
<script type="text/javascript" src="DateTimePicker/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="DateTimePicker/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#datetimepicker1').datetimepicker({
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
});
</script>
<style>
table.noun {
font-family: verdana,arial,sans-serif;
font-size:20px;
color: blue;
background: white;
}
</style>
</head>
<body class="dialog" style="background-color:white;vertical-align: middle;">
<form id="form1" runat="server" style="background-color: white; vertical-align: middle;">
<div>
<table Class="noun">
<tr>
<td colspan="4">
<div class="header">New Class</div>
<br />
</td>
</tr>
<tr> <td>
<asp:Label ID="lbl_staffname" runat="server" Text="Teacher"></asp:Label>
<br />
<asp:TextBox ID="tb_staff" runat="server" Text="XXXX" ></asp:TextBox>
</td>
<td>
<asp:Label ID="lbl_student" runat="server" Text="Student"></asp:Label>
<br />
<asp:DropDownList ID="ddl_student" runat="server" AppendDataBoundItems="true" class="dropdownList" AutoPostBack="true">
<asp:ListItem Value="1">AAAAA</asp:ListItem>
<asp:ListItem Value="2">BBBB </asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:Label ID="lbl_ROLL" runat="server" Text="Roll No"></asp:Label>
<br />
<asp:TextBox ID="tb_roll" runat="server" Text="40" ></asp:TextBox>
</td>
<td>
<asp:Label ID="lbl_starttime" runat="server" Text="Start"></asp:Label><br />
<div id="datetimepicker1" class="controls input-append date form_datetime" data-date="" data-date-format="dd/mm/yyyy HH:mm P" data-link-field="dtp_input1">
<asp:TextBox ID="tb_startdate" runat="server" ></asp:TextBox>
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<input type="hidden" id="dtp_input1" value="" />
</td>
</tr>
</table>
</div>
</form>
Default design:
After applying the css for time picker:
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'm working on a project and whenever I try to load this page it gives me the same error everytime. Project is being worked on in Visual Studio 2015. What the goal is that users can fill in their name, email and a message they want to send to the owner of the site. Whenever the user is done with the message they click on the button, the button with the text verzenden, and a message is shown below if it is sent correctly or not. The problem is not the code however, I can manage that on myself.
Html code , this is all wrapped in a contentplaceholder because I have made a masterpage for the project :
<form id="Form1" runat="server">
<table>
<tr>
<td>
<br />
<br />
<h1> Stuur ons een berichtje</h1>
<br />
<br />
<p>Alle berichtjes worden ook verstuurd naar info#waasseschrijnwerken.be. Als het correct is verstuurd ontvangt u een bevestigingsmail.</p>
<br />
<br />
<asp:Label ID="lblnaam" runat="server" Text="Naam: "></asp:Label>
<asp:TextBox ID="txtnaam" runat="server"></asp:TextBox>
<asp:Label ID="lblmail" runat="server" Text="Emailadres: "></asp:Label>
<asp:TextBox ID="txtmail" runat="server"></asp:TextBox>
<br />
<br />
<asp:Label ID="lblbericht" runat="server" Text="Bericht: "></asp:Label>
<br />
<br />
<asp:TextBox ID="txtbericht" runat="server" Height="200px" Width="750px"></asp:TextBox>
<br />
<br />
<br />
<asp:Button ID="btnVerzend" runat="server" Text="Verzenden" />
<br />
<br />
<br />
<asp:Label ID="lblres" runat="server" Text="Label" Visible="False"></asp:Label>
<br />
<br />
<br />
</td>
</tr>
</table>
</form>
Translation: One page can only have one form-label with runat server
Check the masterpage for a <form> tag with runat="server". ASP.NET only allows one of these per page.
You can just remove it from your code above;
<table>
<tr>
<td>
<br />
<br />
<h1> Stuur ons een berichtje</h1>
<br />
<br />
<p>Alle berichtjes worden ook verstuurd naar info#waasseschrijnwerken.be. Als het correct is verstuurd ontvangt u een bevestigingsmail.</p>
<br />
<br />
<asp:Label ID="lblnaam" runat="server" Text="Naam: "></asp:Label>
<asp:TextBox ID="txtnaam" runat="server"></asp:TextBox>
<asp:Label ID="lblmail" runat="server" Text="Emailadres: "></asp:Label>
<asp:TextBox ID="txtmail" runat="server"></asp:TextBox>
<br />
<br />
<asp:Label ID="lblbericht" runat="server" Text="Bericht: "></asp:Label>
<br />
<br />
<asp:TextBox ID="txtbericht" runat="server" Height="200px" Width="750px"></asp:TextBox>
<br />
<br />
<br />
<asp:Button ID="btnVerzend" runat="server" Text="Verzenden" />
<br />
<br />
<br />
<asp:Label ID="lblres" runat="server" Text="Label" Visible="False"></asp:Label>
<br />
<br />
<br />
</td>
</tr>
</table>
I can`t get this rounded cornes work for image buttons in IE.
It's working in other browsers, like Mozilla, Chrome and Opera, but not IE11.
I have tried to get the rounded corners, with both CSS and ajaxcontroltoolkit:
<style>
body {
background-color: green;
}
.RoundedElement {
border-radius: 15px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
CSS<br />
<asp:ImageButton ID="imgbtnCSS" CssClass="RoundedElement" runat="server" ImageUrl="~/Bilder/1034.jpg" />
<br />
AjaxControlToolKit:<br />
<asp:ImageButton ID="imgbtnAjax" runat="server" ImageUrl="~/Bilder/1034.jpg" />
<ajaxToolkit:RoundedCornersExtender ID="imgbtnAjax_RoundedCornersExtender" runat="server" BehaviorID="imgbtnAjax_RoundedCornersExtender" Radius="15" TargetControlID="imgbtnAjax" />
<br />
CSS<br />
<asp:Button ID="btnCSS" CssClass="RoundedElement" runat="server" Text="Button" />
<br />
AjaxControlToolKit:<br />
<asp:Button ID="btnAjax" CssClass="RoundedElement" runat="server" Text="Button" />
<ajaxToolkit:RoundedCornersExtender ID="btnAjax_RoundedCornersExtender" runat="server" BehaviorID="btnAjax_RoundedCornersExtender" Radius="15" TargetControlID="btnAjax" />
</div>
</form>
The regular buttons work in IE11. Both CSS and Ajax.
I'd hazard a guess that you are running IE11 in one of the compatibility modes for it to break something as simple as a border-radius.
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.