Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > html css > answers

Placing input controls on top of an image

nathj's Avatar
Expert
  
Join Date: May 2007
Location: North Tyneside
Posts: 854
#1: Oct 26 '07
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

nathj's Avatar
Expert
  
Join Date: May 2007
Location: North Tyneside
Posts: 854
#2: Oct 26 '07

re: Placing input controls on top of an image

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
Reply

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,439 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved