By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,567 Members | 1,592 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,567 IT Pros & Developers. It's quick & easy.

form under div is not accessible to style in css

P: 1
i have an .aspx content page for which i used a stylesheet in css. but i can not apply my stylesheet to "form#formleft".
any help would be tremendously appreciated.

my stylesheet =>
Expand|Select|Wrap|Line Numbers
  1. *{
  2.     margin:0;
  3.     padding:0;
  4. }
  5.  
  6. body {
  7.     background: url(../images/bg-body.gif) repeat-x 0px 0px;
  8.     font-family: Georgia,sans-serif;
  9. }
  10.  
  11. #container {
  12.     width:1100px;
  13.     margin:0 auto;
  14.     padding:0 0;
  15. }
  16.  
  17. #header{
  18.     position:relative;
  19.     width: 100%;
  20. }
  21.  
  22. #header h1{
  23.     display:block;
  24.     float:left;
  25.     width:302px;
  26.     height:293px;
  27.     background:url(../images/logo.gif) no-repeat 0 0;
  28.     text-indent:-9999px;
  29. }
  30.  
  31. #header h1 a{
  32.     display:block;
  33.     height:100%;
  34.     width:100%;
  35. }
  36.  
  37. #header #pic{
  38.     display:block;
  39.     background:url(../images/steve.jpg) no-repeat right 0px;
  40.     height:280px;
  41.     width:790px;
  42.     position:absolute;
  43.     top:10px;
  44.     right:0px;
  45.     text-indent:-9999px;
  46. }
  47.  
  48. #nav{
  49.     clear: both;
  50.     height: 35px;
  51.     width: 100%;
  52. }
  53. #nav ul{
  54.     float: left;
  55. }
  56. #nav ul li{
  57.     list-style-type: none;
  58.     display: block;
  59.     height: 35px;
  60.     float: left;
  61.     padding: 0px 1px 0px 0px;
  62. }
  63. #nav ul li a{
  64.     color: #3f3f3f;
  65.     display: block;
  66.     text-decoration: none;
  67.     font-size: 12px;
  68.     font-weight: normal;
  69.     text-transform: uppercase;
  70.     height: 100%;
  71.     line-height: 35px;
  72.     padding: 0 0 0 18px;
  73. }
  74. #nav li a span{
  75.     display: block;
  76.     float: left;
  77.     height: 100%;
  78.     padding: 0 18px 0 0;
  79. }
  80. #nav li a:hover, #nav li.active a{
  81.     background: url(../images/hover.gif) no-repeat left;
  82.     color: #fff;
  83.     cursor: pointer;
  84.     text-decoration: none
  85. }
  86. #nav li.active a span, #nav li a:hover span{
  87.     background: url(../images/hover.gif) no-repeat right;
  88. }
  89.  
  90. #search-container{
  91.     float:left;
  92.     width:1060px;
  93.     height:340px;
  94.     background:#fff;
  95.     margin:32px 0 60px 0;
  96.     padding:20px;
  97.     -moz-box-shadow: 3px 3px 4px #000;
  98.     -webkit-box-shadow: 3px 3px 4px #000;
  99.     box-shadow:3px 3px 4px #000;
  100. }
  101.  
  102. #searchContainer{
  103.     float:left;
  104.     width:700px;
  105.     height:400px;
  106.     background:url(../images/search-bg.jpg) repeat-x 0 0;
  107.     margin-right:20px;
  108.     /* text-indent:-9999px; */
  109. }
  110.  
  111. #search{
  112.     float:left;
  113.     width:100%;
  114.     height:100%;
  115.     padding:0px 20px;
  116. }
  117.  
  118. form#formleft{
  119.     margin:50px 20px;    
  120. }
  121.  
  122. #formleft h2,#loginform h2{
  123.     font:normal normal 24px "Trebuchet MS",Tahoma;
  124.     margin-top:15px;
  125.     margin-bottom:15px;
  126. }
  127.  
  128. #formleft label,#loginform label{
  129.     font:normal bold 15px "Trebuchet MS",Tahoma;
  130.     margin-top:10px;
  131.     margin-bottom:10px;
  132.     display:block;
  133.     float:left;
  134.     width:100%;
  135. }
  136.  
  137. form#formleft input,#loginform input{
  138.     background-color: #fff;
  139.     border:1px solid #ddd;
  140.     color: #666;
  141.     float: left;
  142.     font: 12px Arial, Helvetica, sans-serif;
  143.     margin: 5px 0 8px;
  144.     padding: 8px;
  145.     width: 240px;
  146.     -webkit-border-radius: 3px;
  147.     -moz-border-radius: 3px;
  148.     -moz-box-shadow: 3px 3px 4px #000;
  149.     -webkit-box-shadow: 3px 3px 4px #000;
  150.     box-shadow:3px 3px 4px #000;
  151. }
  152.  
  153. form#formleft input.btn{
  154.     width: auto;
  155.     display:block;
  156.     border: none;
  157.     padding: 0;
  158.     margin-left: 50px;
  159.     -moz-box-shadow: 3px 3px 4px #000;
  160.     -webkit-box-shadow: 3px 3px 4px #000;
  161.     box-shadow:4px 4px 4px #000;
  162. }
  163.  
  164. #login-container{
  165.     float:left;
  166.     width:340px;
  167.     height:400px;
  168.     background:url(../images/search-bg.jpg) repeat-x 0 0;
  169.     /* text-indent:-9999px; */
  170. }
  171.  
  172. #login{
  173.     float:left;
  174.     width:100%;
  175.     height:100%;
  176.     padding:0px 20px;
  177. }
  178.  
  179. #loginform a{
  180.     text-decoration:none;
  181.     clear:both;
  182.     float:left;
  183.     font:normal bold 15px "Trebuchet MS",Tahoma;
  184.     color:black;
  185.     margin-top:10px;
  186. }
  187.  
  188. #loginform .btn2{
  189.     width: auto;
  190.     display:block;
  191.     clear:both;
  192.     border: none;
  193.     padding: 0;
  194.     margin-left: 0;
  195.     -moz-box-shadow: 3px 3px 4px #000;
  196.     -webkit-box-shadow: 3px 3px 4px #000;
  197.     box-shadow:4px 4px 4px #000;    
  198. }
  199.  
  200. #content{
  201.     clear:both;
  202.     margin:60px 0;
  203.     width:100%;
  204.     height:300px;
  205.     background:url(../images/search-bg.jpg) repeat-x 0 0;
  206.     -moz-box-shadow: 3px 3px 4px #000;
  207.     -webkit-box-shadow: 3px 3px 4px #000;
  208.     box-shadow:3px 3px 4px #000;
  209. }
  210.  
  211.  
  212. #footer{
  213.     clear: both;
  214.     background: url(../images/footer_bg.jpg);
  215.     height: 100px;
  216.     width: 100%;
  217.     margin-top: 40px;
  218. }
  219. #footerContainer{
  220.     margin: 0px auto 0;
  221.     width: 1100px;
  222.     font-size: 12px;
  223.     color: #ddd;
  224.     padding-top: 20px;
  225.     position: relative;
  226. }
  227. #footerContainer p{
  228.     margin: 8px 0 8px;
  229. }
  230. #footerContainer a{
  231.     color: #ddd;
  232.     text-decoration: none;
  233. }
  234. #footerContainer a:hover{
  235.     text-decoration: underline;
  236. }
  237. form#newsletter{
  238.     position: absolute;
  239.     right: 0;
  240.     top: 20px;
  241.     width: 350px;
  242. }
  243. form#newsletter label{
  244.     font-weight: bold;
  245.     color: #fff;
  246. }
  247. form#newsletter input{
  248.     background-color: #fff;
  249.     border:1px solid #ddd;
  250.     color: #666;
  251.     float: left;
  252.     font: 12px Arial, Helvetica, sans-serif;
  253.     margin: 5px 0 0;
  254.     padding: 8px;
  255.     width: 190px;
  256.     -webkit-border-radius: 5px;
  257.     -moz-border-radius: 5px;
  258. }
  259. form#newsletter input.btn{
  260.     width: auto;
  261.     border: none;
  262.     padding: 0;
  263.     margin-left: 3px;
  264. }
  265.  
  266.  
default.apsx =>
Expand|Select|Wrap|Line Numbers
  1. <%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="false"
  2.     CodeFile="Default.aspx.cs" Inherits="_Default" %>
  3.  
  4. <asp:Content id="Content1" ContentPlaceHolderID="searchcontainer" runat="server">
  5.     <div id="searchContainer">
  6.             <div id="search">
  7.                <form id="formleft" action="">
  8.                    <h2>Search Courses and Institutes</h2>
  9.                    <label>Course</label>
  10.                    <input type="text" name="course"/>
  11.                    <label>Institute</label>
  12.                    <input type="text" name="institute"/>
  13.                    <label>Location</label>
  14.                    <input type="text" name="location"/>
  15.                    <input type="image" class="btn" src="images/submit_btn.jpg"/>
  16.                </form>
  17.             </div>
  18.     </div>
  19.     <!-- login-container -->
  20.     <div id="login-container">
  21.         <div id="login">
  22.                <form id="loginform" action="">
  23.                    <h2>Sign In</h2>
  24.                    <label>Email Id or Contact Number</label>
  25.                    <input type="text" name="emailph"/>
  26.                    <label>Password</label>
  27.                    <input type="password" name="password"/>
  28.                 <input type="image" class="btn2" src="images/submit_btn.jpg"/>
  29.                    <a href="Register.aspx">New User Register Here</a>
  30.             </form>
  31.         </div>
  32.     </div>
  33. </asp:Content>
  34.  
  35. <asp:Content id="Content2" ContentPlaceHolderID="maincontent" runat="server">
  36. </asp:Content>
  37.  
  38.  
MASTER PAGE =>
Expand|Select|Wrap|Line Numbers
  1. <%@ Master Language="C#"%>
  2. <html lang="en">
  3. <head>
  4.     <title></title>
  5.     <asp:ContentPlaceHolder id="head"></asp:ContentPlaceHolder>
  6.     <link rel="stylesheet" href="css/styles.css" type="text/css"/>
  7. </head>
  8. <body>
  9.     <form id="masterform" runat="server">
  10.     <!-- container -->
  11.     <div id="container">
  12.         <!-- header -->
  13.         <div id="header">
  14.             <h1><a href="index.html">institutes india</a></h1>
  15.             <div id="pic"><span>background pic of students</span></div>
  16.         </div>
  17.         <!-- nav -->
  18.           <div id="nav">
  19.             <ul>
  20.               <li class="active"><a href="#"><span>Home</span></a></li>
  21.               <li><a href="#"><span>Courses</span></a></li>
  22.               <li><a href="#"><span>Institutes</span></a></li>
  23.               <li><a href="#"><span>Coaching Institutes</span></a></li>
  24.               <li><a href="#"><span>Ask Your Query</span></a></li>
  25.               <li><a href="#"><span>Add Your Institutes</span></a></li>
  26.               <li><a href="#"><span>Articles</span></a></li>
  27.               <li><a href="#"><span>About Us</span></a></li>
  28.             </ul>
  29.         </div>
  30.         <!-- end nav -->
  31.  
  32.     <!-- search-container -->
  33.         <div id="search-container">
  34.         <asp:ContentPlaceHolder id="searchcontainer" runat="server"></asp:ContentPlaceHolder>    
  35.         </div>
  36.         <!-- end search-container -->
  37.         <div id="content">
  38.             <asp:ContentPlaceHolder id="maincontent" runat="server"></asp:ContentPlaceHolder>
  39.         </div>
  40.     </div>    
  41.     <!-- end container -->
  42.     <div id="footer">
  43.       <div id="footerContainer">
  44.         <p>Copyright  2012 instituteindia  |  <a href="#">Privacy Policy</a></p>
  45.         <p><a href="#">Home</a> /<a href="#">Institutes</a> /  <a href="#">Courses</a> /  <a href="#">Coaching Institutes</a> /  <a href="#">Ask Your Query</a> /  <a href="#">Articles</a> /  <a href="#">Contact Us</a></p>
  46.         <form id="newsletter" action="#" method="post">
  47.         <label>Enter your email to subscribe for  RSS Updates</label>
  48.         <input type="text" class="textBox" />
  49.           <input class="btn" type="image" src="images/subscribe_btn.jpg"/>
  50.         </form>
  51.       </div>
  52.     </div>
  53.     </form>
  54. </body>
  55. </html>
  56.  
  57.  
Attached Files
File Type: zip testsites.zip (420.2 KB, 55 views)
Jul 12 '12 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.