CODEWITHSUNDEEP
htmlcss
Everett
Everett

Reputation: 377

Change position of html element?

I am new to html and css. I am trying to move items around on a webpage. This is what the webpage looks like right now:

enter image description here

I have the following code for this webpage:

index.php:

<body>
    <div class="wrapper">
        <h2 id="loginText" style="top:383px" >Login</h2>
        <p id="credentialsText">Please fill in your credentials to login </p>
        <form id="formOverall" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
            <div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
                <label>Username</label>
                <input type="text" name="username"class="form-control" value="<?php echo $username; ?>">
                <span class="help-block"><?php echo $username_err; ?></span>
            </div>    
            <div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
                <label>Password</label>
                <input type="password" name="password" class="form-control">
                <span class="help-block"><?php echo $password_err; ?></span>
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-primary" value="Login">
            </div>
            <p>Don't have an account? <a href="register.php">Sign up now</a>.</p>
       </form>
    </div> 
</body>

However, all of the text still appears at the top left of the page. I want the text that says Login to appear further down in the page. That is why I have set style:"top: 383px". However, this text does not move from where it was before. How come this text does not move regardless of what I set in its style attribute?

Upvotes: 3

Views: 23690

Answers (5)

Dev vivek
Dev vivek

Reputation: 55

dude use <div class="container m-5"> it will give your some margin from top and will create a container for you

Upvotes: -1

Voju
Voju

Reputation: 116

best positioning of your login form is to populate form in <div> . Than you can set to this div center (horizontaly) of screen by use style margin: 0 auto; and to vertical align, you can use some js or margin-top:, but use a % ... (dont forget to smaller screens than you have)

Upvotes: 0

Adam Johnston
Adam Johnston

Reputation: 1411

Without the CSS it's hard to tell what the problem is, but my guess would be that you haven't declared a position attribute to the element, which means it defaults to position: static, meaning it won't move. So if you want to move the item you would need to declare position: relative and then apply the top: 383px. That being said, it is more common to just set margin-top: 383px. Again, if you add a copy of the CSS you're using it will be easier to address the issue.

Upvotes: 0

wilson wilson
wilson wilson

Reputation: 153

make sure you define the position type.

<h2 id="loginText" style="top:383px; position:fixed" >Login</h2>

fixed means that the position (top:383px) is relative to the window. there are also other position types such as absolute, relative, or sticky.

Upvotes: -1

vcapra1
vcapra1

Reputation: 2025

top only works with certain position values. Use a margin instead, like so:

<h2 id="loginText" style="margin-top:383px" >Login</h2>

This should work for what you need. You can also move it to the right using margin-left, etc.

If you want to use top, you can do something like this:

<h2 id="loginText" style="position: absolute; top:383px" >Login</h2>

Absolute positioning lets you use top, left, right, and bottom to absolutely position elements on the page

You can read up more on the position property here and the top property here

Upvotes: 4

Related Questions