471,598 Members | 1,171 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,598 software developers and data experts.

Placing input controls on top of an image

nathj
938 Expert 512MB
Hi,

I'm surrently struggling with something I'm certain should be very simple. I'm working on a new web application that requires every user to login before they do anything else. This means that the first page is a login page.

I have produced simple graphic for the login form and I want the controls to sit within this. Unfortunately this is all just local only at the moment and so I can show you the results.

The code is as follows:

LoginPage_layout.css
Expand|Select|Wrap|Line Numbers
  1. /* General Document Format */ 
  2. html, body, ul, ol, li, p, blockquote, q,
  3. h1, h2, h3, h4, h5, h6, fieldset, legend,
  4. form, label, a, div, img, dd, dt, dl, input, span, img
  5. {
  6.     margin                : 0px;
  7.     padding                : 0px;
  8.     border                : 0px;
  9. }
  10.  
  11. body
  12. {    
  13.     font-family            : verdana, "trebuchet MS", helvetica, sans-serif;
  14.     font-size            : 11px; 
  15.     line-height            : 1.637; 
  16.     margin                : 0px 0px;
  17.     padding                : 0px;
  18.     height                : 100%;    
  19.     text-align            : center ; 
  20. }                            
  21.  
  22. /* Containers */
  23. div.loginContainer
  24. {
  25.     width                : 315px ;
  26.     height                : 212px ;
  27.     margin-left            : auto ; 
  28.     margin-right        : auto ; 
  29.     margin-top            : 194px ;
  30.     margin-bottom        : 194px ; 
  31.     background-image    : url("../image/LoginFormBackground.png") ;
  32.     background-repeat    : no-repeat ;
  33.     border                : solid 2px #602103;
  34. }
  35.  
  36.     div.loginContainer img
  37.     {
  38.         display                : inline ;
  39.     }
  40.  
  41.     form.loginForm
  42.     {
  43.         width                : 315px ; 
  44.         height                : 212px ;     
  45.         margin-left            : auto ;
  46.         margin-right        : auto ;
  47.         margin-top            : 194px ; 
  48.         margin-bottom        : 194px ;        
  49.         border                : solid 2px #FF0000;
  50.     }
  51.  
  52.     div.username
  53.     {
  54.         position            : relative ;
  55.         display                : inline ;
  56.         left                : 2px ;
  57.         width                : 230px ;
  58.         top                    : 1px ;
  59.         height                : 26px ;    
  60.         border                : solid 2px #FFFF00;
  61.     }
  62.  
  63.     div.password
  64.     {
  65.         position            : relative ;
  66.         display                : inline ;
  67.         left                : 2px ;
  68.         width                : 230px ;
  69.         top                    : 28px ;
  70.         height                : 26px ; 
  71.         border                : solid 2px #0000FF;
  72.     }
  73.  
  74.     div.loginButton
  75.     {                                
  76.         position            : relative ;
  77.         left                : 112px ;
  78.         width                : 100px ;
  79.         top                    : 185px ;
  80.         height                : 28px ;  
  81.         border                : solid 2px #00FF00;
  82.     }
  83.  
  84.  
ResponseTracker_colour.css
Expand|Select|Wrap|Line Numbers
  1. body
  2. {    
  3.     background            : #eeeafe ;
  4. }
  5.  
  6. /* Containers */
  7. div.loginContainer
  8. {
  9.     background            : #eeeafe ;
  10. }
  11.  
  12.  
The borders in the first css file are there only for testing and development - they enable me to see where everything is properly.

Login.html
[html]
<head>
<link rel="stylesheet" type="text/css" href="style/responsetracker_colour.css" />
<link rel="stylesheet" type="text/css" href="style/loginpage_layout.css" />
</head>
<body>
<div class="loginContainer">
<form class="loginForm" name="frm_Login" method="post" action="mainpage.php">
<div class="username">
Username: <input type="text" id="username" title="Please enter your ResponseTracker username" />
</div>
<div class="password">
Password: <input type="password" id="access" title="Please enter your ResponseTracker password" />
</div>
<div class="loginButton">
<input name="login" type="image" src="image/loginButton.png" alt="Login" title="Click to login" onmouseover="this.style.cursor='pointer'" onclick="frm_Login.submit()"/>
</div>
</form>
</div>
</body>

[/html]

I'm pretty new to CSS and still learning so I'm certain there is an easy way to achieve this. What I want is for the input controls and the button image to be on top of the picture.

Thanks in advance
nathj
Oct 26 '07 #1
1 2739
nathj
938 Expert 512MB
Hi,

Since making my original post I have solved the problem - I was right, it was a bit of stupidity on my part. Anyway the problem has been solved and here is the new code.
loginPage_layout.css
Expand|Select|Wrap|Line Numbers
  1.  
  2. /* General Document Format */ 
  3. html, body, ul, ol, li, p, blockquote, q,
  4. h1, h2, h3, h4, h5, h6, fieldset, legend,
  5. form, label, a, div, img, dd, dt, dl, input, span, img
  6. {
  7.     margin                : 0px;
  8.     padding                : 0px;
  9.     border                : 0px;
  10. }
  11.  
  12. body
  13. {    
  14.     font-family            : verdana, "trebuchet MS", helvetica, sans-serif;
  15.     font-size            : 11px; 
  16.     line-height            : 1.637; 
  17.     margin                : 0px 0px;
  18.     padding                : 0px;
  19.     height                : 100%;    
  20.     text-align            : center ; 
  21. }                            
  22.  
  23. /* Containers */
  24. div.loginContainer
  25. {
  26.     width                : 315px ;
  27.     height                : 212px ;
  28.     margin-left            : auto ; 
  29.     margin-right        : auto ; 
  30.     margin-top            : 194px ;
  31.     margin-bottom        : 194px ; 
  32.     background-image    : url("../image/LoginFormBackground.png") ;
  33.     background-repeat    : no-repeat ;
  34. }
  35.  
  36.     div.username
  37.     {
  38.         position            : relative ;
  39.         left                : 15px ;
  40.         width                : 230px ;
  41.         top                    : 70px ;
  42.         height                : 26px ;    
  43.     }
  44.  
  45.     div.password
  46.     {
  47.         position            : relative ;
  48.         left                : 15px ;
  49.         width                : 230px ;
  50.         top                    : 80px ;
  51.         height                : 26px ; 
  52.     }
  53.  
  54.     div.loginButton
  55.     {                                
  56.         position            : relative ;
  57.         left                : 200px ; 
  58.         width                : 100px ;
  59.         top                    : 120px ;
  60.         height                : 28px ;  
  61.     } 
  62.  
  63. /* Form Layout and Presentation */
  64.  
  65. input.textBased
  66. {
  67.     border                : solid 1px #808080 ;
  68.     height                : 18px ; 
  69.     width                : 150px ;
  70.     margin-left            : 2px ;
  71. }                                 
  72.  
ie_layout.css
Expand|Select|Wrap|Line Numbers
  1. div.loginButton
  2. {                                
  3.     left                : 100px ; 
  4. }
  5.  
And the HTML is:
loginPage.html
[html]
<head>
<!-- no meta tags as this is not intended to be found by a serch system -->
<link rel="stylesheet" type="text/css" href="style/responsetracker_colour.css" />
<link rel="stylesheet" type="text/css" href="style/loginpage_layout.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style/ie_layout.css"/>
<![endif]-->
</head>
<body>
<div class="loginContainer">
<form name="frm_Login" method="post" action="mainpage.php">
<div class="username">
Username: <input class="textBased" type="text" id="username" title="Please enter your ResponseTracker username" />
</div>
<div class="password">
&nbsp;Password: <input class="textBased" type="password" id="access" title="Please enter your ResponseTracker password" />
</div>
<div class="loginButton">
<input name="login" type="image" src="image/loginButton.png" alt="Login" title="Click to login" onmouseover="this.style.cursor='pointer'" onclick="frm_Login.submit()"/>
</div>
</form>
</div>
</body>
[/html]

This results in the form being positioned on top of the image giving a much nicer look to the initial login page.

Many thanks
nathj

PS If you have a better way of doing this then please let me know
Oct 26 '07 #2

Post your reply

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

Similar topics

2 posts views Thread by Bettina | last post: by
1 post views Thread by objectref | last post: by
1 post views Thread by dwa | last post: by
3 posts views Thread by Nathan Sokalski | last post: by
3 posts views Thread by jackiepatti | last post: by
2 posts views Thread by XIAOLAOHU | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.