CODEWITHSUNDEEP
htmlcss
Kebab Programmer
Kebab Programmer

Reputation: 1219

Displaying text on a border css

Image

I would like to have the tag "Member Login" on the border line in my code but I have no idea how to pull it off, I basically want something like this

Image

Where you'd have "Select Pizza Size", I want to be able to display my text wrapped with a border, but I don't know how to.

My Code:

login.php

<html>
<head>
    <title>Hospital Login</title>
    <link href="login.css" rel="stylesheet" type="text/css">
</head>

<body>
    <fieldset class="formDisplay">
        <form name="form1" method="post" action="process_login.php">            
            <legend><strong>Member Login </strong></legend></br>
            <strong>Username</strong></br></br> <input name="myusername" type="text" id="myusername">
            </br></br>
            <strong>Password</strong></br></br><input name="mypassword" type="password" id="mypassword">
            </br></br>
            <input type="submit" name="Submit" value="Login">
        </form>

        <?php
            echo $message;
        ?>
    </fieldset>
</body>
</html>

login.css

.formDisplay{
  position:relative;
  top: 15%;
  left: 30%;
  border: 5px groove threedface;
  padding: 50px;
  border-radius:20px;
  width:400px;
  height:250px;
  text-align: center;
}
.formDisplay legend {
   display: block;
word-wrap: initial;
}

Thanks in advance for your help

Upvotes: 1

Views: 329

Answers (2)

Franco
Franco

Reputation: 2329

Try this:

#selection{
    height:300px;
    width:400px;
    border:1px solid #666;
}

h3{
    width:180px;
    margin-top:-10px;
    margin-left:10px;
    background:#EEE;
    padding-left:10px;
    font-size:14px;
    color:#000;
}
#spacer{
  height:100px;
}

See the example here: https://jsfiddle.net/aqx3kLqm/1/

Just to let you know, this is not a water proof solution, because you need to adjust the with of your text in the CSS, if the text is of a different lenth.

Upvotes: -1

Michael Benjamin
Michael Benjamin

Reputation: 371231

You need to wrap your form elements in a fieldset and make "Member Login" the legend.

See a basic example here:
http://www.w3schools.com/tags/tag_fieldset.asp

For more in-depth reading, visit:
fieldset element @ MDN

Update (based on revision to question)

The problem in your code is you have the fieldset outside the form element. Try this instead:

    <form name="form1" method="post" action="process_login.php">
       <fieldset class="formDisplay">
           <legend><strong>Member Login </strong></legend></br>
                 ...
                 ... 
                 ...
       </fieldset>
    </form>

Upvotes: 2

Related Questions