CODEWITHSUNDEEP
htmlcss
Zeno Dhaene
Zeno Dhaene

Reputation: 3

CSS centered border

Hy everyone,

i want to have a border around a login form in html code, but with my current code, it isn't quite what i want. I want the border to really encapsulate the centered elements. any idea how to do that?

The result looks like this:

enter image description here

My code:

index.php:

<?php include "base.php"; ?>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<!DOCTYPE>

<html>
<title>Shopping List</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</html>
<head>

</head>
<body bgcolor=#878787>

<div class="form">
    <center><h1>Please enter your login details</h1></center>
    <form>
        <label for="username">Username:</label><input type="text" name="username" id="username" >     </br>
        <label for="password">Password:</label><input type="text" name="password" id="password" >     </br>
        <input type="submit" name="login" id="login" value="Login">
    </form>
</div>

</body>

style.css:

div.form{
text-align: center;

border: 5px solid;
border-radius: 25px;
box-shadow: 5px 5px 5px #888888;
}

.form label, .form input{
display: inline-block;
}

.form input {
width: 150px;
}

.form label {
width: 100px;
}

input {
border: 5px solid;
border-radius: 25px;
box-shadow: 5px 5px 5px #888888;

font-family: Trebuchet MS;
border: 1px solid #CCC;
margin-bottom: 5px;
background-color: #FFF;
padding: 2px;
}

input[type="submit"] {
display: inline-block;
position: relative;
margin-top: 5px;
width: 150px;
height: 30px;
left: 50px; 
}
input:hover {
border: 1px solid #222;
background-color: #EEE;
}

Upvotes: 0

Views: 6439

Answers (4)

AVenger
AVenger

Reputation: 116

You can resolve your issue by updating your CSS a little. Change these rules to the below CSS rules:

div.form {
   text-align: center;
}
form {
   padding: 20px;
   display: inline-block;
   border: 5px solid;
   border-radius: 25px;
   box-shadow: 5px 5px 5px #888888;
}

And then updated your HTML to the below HTML:

<div class="form">
   <form>
      <center><h1>Please enter your login details</h1></center>
      <label for="username">Username:</label>
      <input type="text" name="username" id="username" />
      <br />
      <label for="password">Password:</label>
      <input type="text" name="password" id="password" />
      <br />
      <input type="submit" name="login" id="login" value="Login">
   </form>
</div>

You would then have the following result:

enter image description here

I hope that helps you out.

Upvotes: 0

JPS
JPS

Reputation: 115

you can use CSS to put a border round whatever you want. for my example i will just surround the username and password fields with a solid black border:

HTML:

   <div class="form">
        <center><h1>Please enter your login details</h1></center>
        <form>
            <div class="border"> 
          <label for="username">Username:</label><input type="text" name="username" id="username" >     </br>
            <label for="password">Password:</label><input type="text" name="password" id="password" >     </br>
            </div>
            <input type="submit" name="login" id="login" value="Login">
        </form>
    </div>

The only change in the above HTML is i have put div's around the username and password section so the css knows which html to border around.

i then write this simple css:

.border {1px solid black;}

here a website with will show you what border styles there is out their.

http://www.w3schools.com/css/css_border.asp

Upvotes: 0

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

try to add 

.form{
   max-width:320px;
   margin:0 auto;
}

Upvotes: 1

MSTannu
MSTannu

Reputation: 1033

You could do that by reducing the width and centering your container ( div.form ) Something like

display:inline-block;
margin: 0 auto;

Upvotes: 1

Related Questions