CODEWITHSUNDEEP
htmlcss
Elitezen
Elitezen

Reputation: 91

Button can't be moved without affecting heading text

I have this login page made from HTML5 and CSS3 and I'm having trouble adjusting the Login Button. Every time I try to align it with the margin: attribute, it affects the "Welcome" text as well. How can I move the button only without affecting the text?

<!DOCTYPE html>
<head>
 <style>
   html {
       background-image: url('http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg');
       background-repeat: no-repeat;
       min-height: 100%;
       background-size: cover;
   }

   h1{
       color: #ffffff;
       font-size: 40px;
       margin-top: 20px;
   }

   #Login{
       padding-left: 20px;
       padding-right: 20px;
       padding-top: 10px;
       padding-bottom: 10px;
       text-align: center;
       background-color: #0095f0;
       display: inline-block;
       border: none;
       color: #ffffff;
       font-weight: bold;
       border-radius: 4px;
       size: 15px;   
   }
 </style>
</head>
<body>
 <form action="oof">
  <button id="Login" >
    Login
  </button>
 </form>
 <h1 align="center">Hello<br /> Welcome!</h1>
 <img src="http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg"
      width="100%" height="100%" size=">
</body>

Upvotes: 0

Views: 30

Answers (2)

Anil Suwal Qode
Anil Suwal Qode

Reputation: 120

Use of absolute defines how an element is positioned in a document. you can use left and right for their respective position 

html {
       background-image: url('http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg');
       background-repeat: no-repeat;
       min-height: 100%;
       background-size: cover;
       position: relative;
   }

   h1{
       color: #ffffff;
       font-size: 40px;
       margin-top: 20px;
   }

   #Login{
       position: absolute;
       padding: 10px 20px;
       text-align: center;
       background-color: #0095f0;
       display: inline-block;
       border: none;
       color: #ffffff;
       font-weight: bold;
       border-radius: 4px;
       size: 15px;   
       left: 50px
   }
 

<form action="#">
  <button id="Login" >
    Login
  </button>
 </form>
 <h1 align="center">Hello<br /> Welcome!</h1>
 <img src="http://image.downloadwap.co.uk/wallpapers/wp/18/nature/maligne-st_pJi7nPeU.jpg"
      width="100%" height="100%" size=">

Upvotes: 0

fstep
fstep

Reputation: 683

Where would you like to put the button? You could try in the button css:

position: absolute; 
top: 20px; 
right: 20px;

Also have a look at this css-tricks article on position

Upvotes: 2

Related Questions