SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Putting login control inside an image

    Hi all.

    I want to design my own custom looking login control, that will apear on the right of my html page. I am new to this and having difficult time understanding how can i embedd the login control code (form code) inside that image ?

    My guess is to use position:relative and then adjust the width etc of the login form code so that it appears inside the image. But what is the practice of web designers if they are given this task ?

    Kindly guide me

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,105
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You are probably better off creating your form first, then applying the image to it as a background image. E.g.

    Code:
    form {background: url(myimage.gif);}
    That's a very basic example, with a lot of options available. Trying to place a form over an image with positioning etc. is asking for trouble, and pointless if the image is just for decoration. A decorative image shouldn't be in the HTML, but supplied via CSS.

    Feel free to provide a link or some code for us to help with.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Sir,

    thanks alot for the prompt reply. I have taken this sample from google images just to give an idea

    http://postimage.org/image/80cqgmoe9/

    Sir, now in this case, will i use style position etc parameters to adjust the username/password prompt on this image ?

    basically i wanted to know how professionals do it ? do they just draw a image in photoshop etc and position it using css ?

    Kindly guide me, it will help me to better code

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,105
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by amer99 View Post
    i wanted to know how professionals do it ? do they just draw a image in photoshop etc and position it using css ?
    Yes. Make your form first, and then make the image and set it as a background image on the form.

    We can help you more with this if you want, but perhaps show us your form, and maybe a link to the image you want to use.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sir kindly use the sample i have given before.

    See in that image, we have a place for username/password. Now shall i take the below steps ?

    1) lets say i draw the same image as it is in photoshop
    2) now in order to take username from the location shown in image, i need to adjust the css position parameters ?

    Sir kindly use the diagram that i have posted before
    http://postimage.org/image/80cqgmoe9/

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,105
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    That image is no use, because it includes a picture of the form. The form needs to be done with HTML, not with Photoshop, so remove the form bits from the image. Create a normal form in HTML, style it as you wish, then place just the paper image behind it.

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot sir for guidance.

    I am really sorry for the late reply

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,105
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    No problem! How is it all going?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •