Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Centering text/input field on a small form

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #167163
    Everton
    Participant

    Hello

    I am trying to centre text (and an input field) using margin-left:auto; margin-right:auto; thinking that would do the trick, but I can see here small form that the objects still lean to the left.

    How can I centre the input field and text, please?

    Thank you!

    Everton

    #167164
    nixnerd
    Participant

    Is there any way you can put this on codepen so we can see some code? There are a few ways to go about this. However… what I answer will depend on what you already have.

    Rest assured, it’s more than doable.

    #167168
    Everton
    Participant

    Hello

    Thank you for your swift reply!

    Just opened an account with Codepen and pasted my code. Not sure how you can see what I have posted but the ref I have is: http://cdpn.io/pdqLy

    Username is Everton.

    Thanks you again

    #167169
    Everton
    Participant

    Sorry, I think it’s this: Codepen

    #167170
    nixnerd
    Participant

    You’ve got a lot going on there but I think I get the gist of it. You’re missing some styles to make it look exactly like the original but we’ll just roll with it.

    1. You don’t really need to give your input an id, unless its drastically different from every other input you’ll have.
    2. Give the form some sort of width. Whether that’s 500px or 30% of it’s container… whatever. does not matter. Well, it does depending on what you’re doing but that’s another topic.

    3. Give your input some sort of width… generally, this is going to be the same size or smaller than your form… unless you want a text box hanging out of the form container.

    4. Let’s say the form is 500px wide. Now, let’s say each input is 400px wide. You can center the input in a few different ways.

    a.input {margin-left: 50px} That’s probably not the best way. What if you want to change the size of the form? Now you have to change the input margin too.

    b. input{position: relative; left: 50%; margin-left: -200px} What this does is centers the input no matter how big the form is. Now, if you change the width of input, you’ll need to adjust this.

    #167172
    Everton
    Participant

    Hello Joe

    Many thanks for your valuable input.

    The white background is 480px wide and the input field 350px wide and looks about right. The input ID is related to styling the text-link submit ‘button’ but I will go back to that another time.

    I have used the following to centre the input field on the white form:

    input{
    position: relative; 
    left:13%; 
    margin-left: -145px;
    
    }

    and the input field is now centred, so thank you for that.

    Cheers!

    #167175
    nixnerd
    Participant

    I don’t even really know how that’s possible but ok. The math just doesn’t make sense. There must be other factors at play here.

    #167183
    Paulie_D
    Member

    I had to chop a lot of of stuff out and you were re-using ID (#logo_text) which is a no-no so I had to switch that to a class but here’s a rough draft.

    http://codepen.io/anon/pen/yzsrE

    #167260
    Everton
    Participant

    Hello Pauli

    I did reply earlier (by email) but it doesn’t seem to have arrived.

    You have done a great deal of work – tidying up and polishing the display – so a big thank you. It is here: Password form.

    It looks just as I wanted it to. There is a little problem: the link does not work and, in any case, a couple of JavaScript people have warned me off using JS to create a text-link.

    Is there a way of using CSS to do that?

    Thanks again for all your graft – you must have spent ages on it!

    I’m grateful.

    Everton

    #167267
    nixnerd
    Participant

    I had to chop a lot of of stuff out and you were re-using ID (#logo_text) which is a no-no

    Oh yeah… don’t do that. IDs can only be used once on a given page. Classes can be used over and over. Classes also have a few distinct advantages but for your purposes RIGHT NOW, that’s the big one.

    #167280
    Paulie_D
    Member

    There is a little problem: the link does not work and, in any case, a couple of JavaScript people have warned me off using JS to create a text-link.

    What was the link supposed to do?

    At the moment you have this

    <a href="mysubmit()">Request password</a>
    

    Do you have this mysubmit function defined somewhere?

    #167292
    Everton
    Participant

    Hello Paulie

    No, I didn’t know how to define the mysubmit function – whenever I tried something similar, it just created another input field.

    When ‘Request password’ is submitted, it should take the user to <form name=”Password” method=”post” action=”confirm.asp“> as this is the script that searches the database for the password and sends it to the user.

    Thanks for your reply.

    #167293
    Paulie_D
    Member

    We’re getting into the JS part of the question now and that’s not an area where I have any great knowledge.

    Might I suggest that you start a new thread in the Javascript Jungle section with this other issue?

    #167294
    Everton
    Participant

    Yes, sure – many thanks for all you have done for me.

    All the best.

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘CSS’ is closed to new topics and replies.