I'm working on a project with ASP.Net (with VB) using visual studio 2013
and the home page have nested forms
- The home page contains a form containing all the page contents form1 which runat="server"
- form for login (UN & PW labels and text fields and a login button) form2
- form for submitting message to be sent via mail form3
what happens is that: if it's as what I've explained the submit button in form3 don't fire at all (nothing happens) cause I'm using nested forms!
If I removed the form it works perfectly fine but the desigin gets affected and goes from this:
to this
Here's the HTML code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Home.aspx.vb" Inherits="Home" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.Net" %>
<%@ Import Namespace="System.Net.Mail" %>
<%@ Import Namespace="System.Net.Mime" %>
<script runat="server">
Sub login(sender As Object, e As EventArgs)
<!-- login code here -->
End Sub
Sub send_msg(ByVal sender As Object, ByVal e As System.EventArgs)
Try
<!-- some code here -->
Catch error_t As Exception
MsgBox(error_t.ToString)
End Try
End Sub
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Amy's first project with CSS Template</title>
<meta name="keywords" content="Cafe and Bakery, Free CSS Template, Pink, Black" />
<meta name="description" content="Cafe and Bakery is a free CSS template using pink gradient and black colors." />
<link href="templatemo_style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/coda-slider.css" type="text/css" charset="utf-8" />
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.3.3.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.5.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.serialScroll-1.2.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/coda-slider.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="slider">
<div id="templatemo_wrapper">
<div id="templatemo_social">
</div>
<!-- end of social -->
<div id="templatemo_main">
<div id="templatemo_sidebar">
<div id="header">
<h1>Quality</h1>
<h1> Assurance</h1>
<h1> Department<a href="http://www.templatemo.com" aria-multiline="True"> </a></h1>
</div>
<div id="menu">
<ul class="navigation">
<li><a href="#home" class="selected">Home
<li><a href="#login">Login</a>
</li>
<li><a href="#services">Services</a>
</li>
<li></li>
<li><a href="#contactus" class="last">IT HelpDesk</a>
</li>
</ul>
</div>
</div>
<!-- end of sidebar -->
<div id="templatemo_content">
<div class="scroll">
<div class="scrollContainer">
<div class="panel" id="home">
<h2>Welcome to QA System</h2>
<p>Because providing customers the best service is our purpose, each agent gets random calls within the month monitored by his team leader, supervisor or by QA team.</p>
<a href="http://www.templatemo.com/page/1" target="_parent">
<img src="images/templatemo_image_01.jpg" alt="Image 1" class="image_wrapper image_fl" />
</a>
<p align="justify">Monitoring doesn't only help us raise our service quality level, but also helps agents in raising their professionalism according to the latest COPC standards.</p>
<div class="cleaner cleaner_h40"></div>
<h3>Have a Nice Shift!</h3>
<ul class="tmo_list">
<li>Serve with a smile<a href="#" class="service_one">.</a>
</li>
<li>Be Understanding , Patient and Friendly in a Professional Way<a href="#" class="service_two">. </a>
</li>
<li>Customers are our freiends not enemies<a href="#" class="service_three">.</a>
</li>
<li>Avoid the bad attitude and the failed sheets will avoid you<a href="#" class="service_four">. </a>
</li>
</ul>
</div>
<!-- end of home -->
<!--================================== start of login screen ======================================</div>-->
<div class="panel" id="log">
<h2>Login</h2>
<p><em>Please Login to Access our Quality Portal.</em>
</p>
<p>Please enter your username and Password to login
<p>If you faced any problems while Loging to your account, Please Contact <a href="#contactus"> IT HelpDesk</a> to give you the proper help.</p>
<div class="cleaner cleaner_h40"></div>
<form method="post" name="Sign_In" action="#">
<input type="hidden" name="post" value="Send" />
<asp:label for="user" runat="server">Username:</asp:label>
<asp:TextBox id="username" name="user" class="input_field " runat="server" />
<div class="cleaner_h10"></div>
<asp:label for="password" runat="server">Password :</asp:label>
<asp:TextBox id="password" class="input_field " TextMode="Password" runat="server" />
<div class="cleaner_h10"></div>
<asp:Button Text="Login" id="login_btn" value=" Send " class="submit_btn " onclick="login" runat="server" />
</form>
</div>
<!-- end of Login -->
<div class="panel" id="services">
<h2>Our Services</h2>
<img src="images/templatemo_image_01.jpg" alt="Image" class="image_wrapper image_fr" />
<p><em>Nam at arcu libero, ut venenatis elit. Nulla eget risus turpis, non aliquet dui.</em>
</p>
<p>Donec fringilla egestas ante, vel <a href="#">euismod</a> mi venenatis et. Ut molestie porta urna, vitae tempor tellus mollis at. Proin tincidunt luctus ipsum, quis volutpat neque iaculis sit amet. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Proin a neque et <a href="#">felis suscipit</a> scelerisque a eget enim.</p>
<div class="cleaner cleaner_h40"></div>
<h3>Service List</h3>
<ul class="tmo_list">
<li><a href="#" class="service_one">Aliquam auctor odio sit amet felis laoreet a consequat sapien porttitor.</a>
</li>
<li><a href="#" class="service_two">Vestibulum eros nisi, lobortis ac pulvinar at, sagittis non felis. </a>
</li>
<li><a href="#" class="service_three">Suspendisse viverra elementum dui, sit amet tempor ante mollis sit amet.</a>
</li>
<li><a href="#" class="service_four">Proin malesuada rutrum sem et consequat. Maecenas et nunc sed leo faucibus cursus et sed diam. </a>
</li>
</ul>
</div>
<!-- end of services -->
<div class="panel" id="blog">
</div>
<!-- end of gallery -->
<div class="panel" id="contactus">
<h2>IT HelpDesk</h2>
<p>We care for the security and integerity of our systems, That's why your help and cooperation are highly needed.</p>
<p>If you faced any problem with any of your applications, Don't hesitate in contacting us to help you ASAP.</p>
<h5>We're here for you!</h5>
Smart Village, IT Holdings,
<br />Phase 2, 3rd floor, Room #0113
<br />EXT: 666666
<br />or send a message with your problem and we'll be in contact with you.
<br />
<br />
<div class="panel" id="contact_form">
<%--<form id="help" method="post" name="IT">--%>
<input type="hidden" name="post" value="Send" />
<label for="author2">Name:</label>
<asp:textbox runat="server" id="name" name="name" class="required input_field" />
<div class="cleaner_h10"></div>
<label for="email">ID:</label>
<asp:textbox id="id" name="id" class="validate-email required input_field" runat="server" />
<div class="cleaner_h10"></div>
<label for="text">Message:</label>
<asp:textbox id="msg" name="msg" rows="0" cols="0" class="required" runat="server" TextMode="MultiLine"></asp:textbox>
<div class="cleaner_h10"></div>
<asp:Button Text="Submit" id="submit_btn" value=" Send " class="submit_btn " OnClick="send_msg" runat="server" />
<input type="reset" class="submit_btn float_r" name="reset" id="reset" value=" Reset " />
<%--</form>--%>
</div>
</div>
<!-- end of contact us -->
</div>
<!-- end scrollContainer -->
</div>
</div>
<!-- end of content -->
<div class="cleaner"></div>
</div>
<!-- end of main -->
<div id="templatemo_footer">
Copyright © 2048 <a href="#">TemplateMo</a>
<br />
<a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> by <a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a>
<div class="cleaner"></div>
</div>
</div>
<!-- end of wrapper -->
</div>
<!-- end of slider -->
<div align=center></div>
</form>
</body>
</html>And here's the CSS
body {
margin: 0px;
padding: 0px;
color: #a2979e;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
line-height: 1.5em;
background-color: #0f020b;
background-image: url(images/templatemo_body.jpg);
background-repeat: no-repeat;
background-position: top
}
a,
a:link,
a:visited {
color: #ff58ff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p {
margin: 0 0 15px 0;
padding: 0;
}
img {
border: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #fff;
}
h1 {
font-size: 30px;
font-weight: normal;
margin: 0 0 20px 0;
padding: 5px 0;
}
h2 {
font-size: 28px;
font-weight: normal;
padding-bottom: 20px;
margin: 0 0 30px 0;
font-weight: normal;
background: url(images/templatemo_divider.png) bottom repeat-x
}
h3 {
font-size: 24px;
margin: 0 0 30px 0;
padding: 0;
padding: 0;
font-weight: normal;
}
h4 {
font-size: 16px;
margin: 0 0 30px 0;
padding: 0;
}
h5 {
font-size: 12px;
margin: 0 0 10px 0;
padding: 0;
}
.cleaner {
clear: both;
width: 100%;
height: 0px;
font-size: 0px;
}
.cleaner_h10 {
clear: both;
width: 100%;
height: 10px;
}
.cleaner_h20 {
clear: both;
width: 100%;
height: 20px;
}
.cleaner_h30 {
clear: both;
width: 100%;
height: 30px;
}
.cleaner_h40 {
clear: both;
width: 100%;
height: 40px;
}
.cleaner_h50 {
clear: both;
width: 100%;
height: 50px;
}
.cleaner_h60 {
clear: both;
width: 100%;
height: 60px;
}
.float_l {
float: left;
}
.float_r {
float: right;
}
.image_wrapper {
display: inline-block;
border: 1px solid #2f2824;
padding: 9px;
margin-bottom: 10px;
background: #000000
}
.image_fl {
float: left;
margin: 3px 20px 0 0
}
.image_fr {
float: right;
margin: 3px 0 0 20px
}
blockquote {
font-style: italic;
margin: 0 0 0 10px;
}
cite {
font-weight: bold;
color: #fff;
}
cite a,
cite a:link,
cite a:visited {
font-weight: normal;
color: #fff;
}
cite span {
font-weight: 400;
color: #ccc;
}
em {
color: #fff;
}
.tmo_list {
margin: 20px 0 20px 20px;
padding: 0;
list-style: none;
}
.tmo_list li {
background: transparent url(images/templatemo_list.png) no-repeat;
margin: 0 0 20px;
padding: 0 0 0 25px;
line-height: 1em;
width: 365px;
}
.tmo_list li a {
color: #ff58ff;
}
.tmo_list li a:hover {
color: #fff;
}
.post_box {
clear: both;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px dotted #999999
}
.post_header {
border-top: 3px solid #999;
border-bottom: 1px solid #ccc;
padding: 5px;
margin-bottom: 20px
}
.post_box h2 {
font-size: 22px;
margin-bottom: 15px;
background: none;
padding-bottom: 5px
}
.post_box h2 a {
color: #fff
}
.post_box p.post_meta {
margin-bottom: 0
}
.post_box img {
float: left;
margin-right: 20px
}
#contact_form {
padding: 0;
width: 340px;
}
#contact_form form {
margin: 0px;
padding: 0px;
}
#contact_form form .input_field {
width: 240px;
padding: 2px 5px;
color: #fff;
background: #070105;
border: 1px solid #660044;
}
#contact_form form label {
display: block;
width: 100px;
margin-right: 10px;
font-size: 14px;
}
#contact_form form textarea {
width: 328px;
height: 80px;
color: #fff;
padding: 5px;
background: #070105;
border: 1px solid #660044;
}
.submit_btn {
padding: 5px 10px;
color: #fff;
background: #330022;
border: 1px solid #660044;
}I've the JS files too but it's not the main problem here, I believe it's a problem of HTML code or CSS but i can't fix it without losing the design
I need the code to work while still having the design!
