HTML & CSS - Moving objects to specific position

Question

I recently started to make a web-server, I'm usually working with back-end code, but now I got a project to do. I'm still very green on CSS and HTML. So basically I need to somehow move the bank logo down and the Label - "Maze bank of Los-Santos" a bit closer to the logo, I have researched a lot of, but I still don't understand the working principle of the position, width, display, margin, top sometimes work, sometimes doesn't, at some times I use right, left positioning, but at this point I don't know how to do it.

This is how my website looks:

My index code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/style2.css">
    <title>Maze bank - Log In</title>
    <link rel="icon" href="https://i.ibb.co/hm8Fz83/bank.png">
    <link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
</head>
<body>
    <br>
    <img src="https://i.ibb.co/hm8Fz83/bank.png"></img>
    <p><span style="color:white">Maze Bank Of </span>Los-Santos</p>
        <form action="http://127.0.0.1:8080/api/test?category=computers" method="POST" target="_blank">
            <div class="login-box">
                <div class="textbox">
                    <i class="fa fa-credit-card" aria-hidden="true"></i>
                    <input type="password" placeholder="Bill Number" name="bill" value="" maxlength="15" minlength="15" >
                </div>
            <div class="textbox">
                <i class="fa fa-key" aria-hidden="true"></i>
                <input type="password" placeholder="Pincode" name="pin" value="" maxlength="4" minlength="4">
            </div>
            <button class="link">Forgot password ?</button>
            <input class="btn" type="submit" name="" value="Log in">
        </form>
    </div>
    <div class="copyright">
            <h4>©™ 2019 Copyright All Rights Reserved</h4>
         </div>
</body>
</html>**strong text**

Here's my CSS Code:

@import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";

p{
    display:block;
    color: #2ECC71;
    font-family: 'Teko', sans-serif;
    font-size: 50px;
    text-align: center;
    font-weight: bold;
    border-block: 2px solid black;
    text-shadow: 2px 2px #1a1111;
}

p:first-letter{ 
    display:block; 
    /*adjust the letter position for best appearance*/
    margin:4px 4px 0 5px!important;  
    /*set font family color and size*/
    color:#2ECC71; 
    font-size:1.5em; 
    font-family: 'Teko', sans-serif;
}

img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 150px;
}


html, body{

    margin: auto;
    background: white;
    background: url(https://external-preview.redd.it/ar2z7yTm97BFzRtPJXWA_twAbm-DlDKUt3mS0R8aJtY.png?auto=webp&s=c965a508182b77fbdec96dd82d6ed224a3b17543) no-repeat fixed center;
}

.logo{
    font-family: fantasy;
}

.login-box{
    width: 280px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.textbox{
    width: 100%;
    overflow: hidden;
    font-size: 20px;
    padding: 8px 0;
    margin: 8px 0;
    border-bottom: 1px solid #e16a74;

}

.textbox i {
    width: 26px;
    float: left;
    text-align: center;

}

.textbox input{
    border: none;
    outline: none;
    background: none;
    color: white;
    font-size: 18px;
    float: left;
    width: 80%;
    margin: 0 10px;
}

.btn{
    width: 100%;
    background: #e16a74;
    border: 2px solid #e16a74;
    margin: 12px 0 ;
    cursor: pointer;
    font-size: 18px;
    padding: 5px;
    color: white;

}
.btn {border-radius: 12px;}

.copyright {
    position: absolute;
    width: 100%;
    color: #fff;
    line-height: 40px;
    bottom:0;
}

.copyright h4{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 10;
    text-align: center;
}


.login-box button.link
{
    background:none;
    border:none;
    color: wheat;
    font-family: 'Teko', sans-serif;
    font-weight: normal;
    font-size: 20px;
    position:relative;
    bottom:1000%;
    left:55%;
}

User366 · Accepted Answer · 2019-11-25 14:28:15Z

1

Firsts, check your code to be valid :) For example, <img> element should not have a closing tag. You should always try to have valid html because html with errors can affect rendering in browsers.

Secondly, I see that you added a   after <body> and before <img>. Possibly this is to make a small margin above the logo. Don't do that because this way you will never get a reliable distance from the top across browsers. Remove   and use margin-top: 16px or so style in your css for img.

Next, give a css class to your p element, like  and style it in css:

.bank-name {
  color: white;
  margin-top: 10px;
}

This p is very specific, so you should give it a dedicated class because you can have other s on the page that do not need the same appearance.

Two more things:

Avoid inline styles in html.
Do not use !important unless you have a huge reason to do it.

Also  is block by default, so you do not need that display: block in html. You can often find default styles at W3school.

Hope, this helps!

answered Nov 25, 2019 at 14:28

User366

7944 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dziu Gas Over a year ago

Thanks for your time and help:)

pensum · Accepted Answer · 2019-11-25 14:23:58Z

0

You just need to have a div tag to regroup your image and text. That div must have display: block so that the text won't be on the same line, but under. Now depending of the width of the image, you will probably need to align the text with text-align: center

You can read more about css rules on w3Schools

img {
display: block;
text-align: center;
}

<div>
  <img src="https://i.ibb.co/hm8Fz83/bank.png"></img>
  <p><span>Maze Bank Of </span>Los-Santos</p>
</div>

answered Nov 25, 2019 at 14:23

pensum

1,0191 gold badge13 silver badges28 bronze badges

Collectives™ on Stack Overflow

HTML & CSS - Moving objects to specific position

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related