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
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
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>
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.
Related
How can I place "Comment:" on red line as shown in the above picture? I know it's a little bit of a silly question, but as a beginner it would be helpful for me.
Here is a code snippet:
body {
border: 1px solid black;
height: 550px;
width: 550px;
padding: 5px;
}
h2 {
text-align: center;
}
<h2>FeedBack Form</h2>
<strong>Name:</strong>
<input type="text" />
<br>
<br>
<strong>Comment:</strong>
<input type="text" style="height:100px; width:250px;" />
<br>
<br>
<strong>Email Address:</strong>
<input type="text" />
See this fiddle
Please add vertical-align: text-top; or vertical-align: top; as style for the input.
Add the below given to your CSS
input[type="text"]{
vertical-align: text-top;
}
try with this:
<strong>Comment:</strong> <input type="text" style="height:100px; width:250px; vertical-align:top;"/><br><br>
I just added vertical-align: top to you input text.
But as a suggestion, I think you may want to use textarea instead input text. And inline css styles is not a thing I would recommend.
Add vertical-align css property
<strong style="vertical-align: top;">Comment:</strong>
<html>
<head>
<title>FeedBack Form</title>
<style>
body {
border: 1px solid black;
height:550px;
width:550px;
padding:5px;
}
h2 {
text-align: center;
}
</style
</head>
<body>
<h2>FeedBack Form</h2>
<strong>Name:</strong> <input type="text" /><br><br>
<strong style="vertical-align: top;">Comment:</strong> <input type="text" style="height:100px; width:250px;"/><br><br>
<strong>Email Address:</strong> <input type="text" />
</body>
</html>
I have two buttons, the first as <a> tag, and the second as <input type="submit">.
I want to make the both like some.
The following is screenShot on firefox
Also the following is screenShot on IE7
HTML
<div id="loginForm">
<form action="login.php" method="post">
<label for="username">Username:</label>
<input type="text" name="username" id="username" /><br />
<label for="password">Password:</label>
<input type="password" name="password" id="password" /><br /><br />
<input type="submit" name="sbmtLogin" value="Sign in" />
Sign up
</form>
</div>
CSS
body {
margin:0;
padding:0;
}
div#loginForm {
width:270px;
max-width:270px;
margin:100px auto;
padding:10px;
text-align:center;
background-color:#8de3fd;
}
div#loginForm input[type=text], div#loginForm input[type=password] {
border:1px solid #9a9a9a;
width:150px;
margin:3px;
padding:5px;
color:#5b5b5b;
}
div#loginForm label {
display:inline-block;
width:70px;
}
div#loginForm input[type=submit] {
border:1px solid #9a9a9a;
width:50%;
padding:5px;
background-color:#f2f2f2;
color:#5b5b5b;
font: bold 16px arila;
}
div#loginForm a {
border:1px solid #9a9a9a;
background-color:#f2f2f2;
color:#5b5b5b;
padding:5px;
text-decoration:none;
font: bold 16px arila;
}
You can see also JsFiddle online demo
Try giving display:inline-block to your <a> tag. This is just a float issue. Your anchor tag does not have any float.
sometimes ie wont work some codes correctly...so that time we should use conditional stylesheets...Here u can use a new stylesheet that include in <head> with conditional code like this
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css">
<![endif]-->
you can specify your class property whatever you want....it reflect ie7 only...
you can check more here : http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
OR
you can use ie syntax hack..it is so simple and no more stylesheets use for in a site...
.class {
background: gray; /* standard */
background: pink\9; /* IE 8 and below */
*background: green; /* IE 7 and below */
_background: blue; /* IE 6 */
}
ie syntax hack : http://webdesignerwall.com/tutorials/css-specific-for-internet-explorer
Hope this help you....
I have a html page with a form in it. I am trying to add an image to a button. So far, the image for the button is working/displaying in firefox and chrome. But in IE8 its just displaying the normal input button. Even the transparency and other properties are not working. Can anyone please suggest any solution, or correct me if I am wrong cause I am just a noob in all this web thing. Thank you!
base.html:
{% load static %}
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="{% static "assets/css/style.css" %}">
</head>
<body>
<header>
<div id="main">
<div id="content">
<img src="{% static "assets/images/google.png" %}" width="202.5" class="logo"/>
</div>
<div id="form">
<form action="/auth/" method="post">{% csrf_token %}
<label for="email" class="label">Email</label>
<input type="text" name="email" value="" id="email">
<label for="password" class="label">Password</label>
<input type="password" name="password" value="" id="password">
<input type="submit" value=" "/>
</form>
</div>
</div>
</header>
<footer>
<div id="footer">
<div id="image">
<div>
</div
</div>
</div>
</footer>
style.css:
* {
margin:0;
padding:0;
}
body{
background:#3effbd;
}
#main {
background-color:#3B5998;
width:1000%;
height:90px;
}
.logo {
border:none;
top:24px;
left:247px;
position:relative;
padding:0px;
margin:0px;
}
.login li{
position:relative;
top: -10px;
left: 900px;
display:inline;
}
input[type=submit]{
border:none;
background-color: transparent;
overflow: hidden;
cursor: pointer;
width: 57px;
height: 26px;
background-image: url(../images/button.png);
}
.label {
font-size: 15px;
color: white;
position: relative;
margin: 10px;
}
I replicated the entire code on my local drive but was working fine in IE8!
However instead of using input type submit try this:
<button type="submit"></button>
You have no value in the button - it won't show anything. add in the value or use the good 'ol indent:-999999 with a value.
also add this CSS
display:inline-block;
I had a very similar situation and I have now found a resolution, that works perfectly. It's been tested on a Virtual Machine running Win XP & IE8, to be 100% it works.
Here's is what I found:
In developer tools on IE8 input[type=submit] was being associated with the submit button however, none of the associated css rules were actually kicking in. To prove this I changed them in dev tools and even removed them. The button remained the same.
So, it seems that the rule is attached but the properties don't get implemented. The simple fix for this is to give your button a class and then add this class to your button rules in css like so:
<input type="submit" value=" " class="btn"/>
then add the class to your css:
input[type=submit], .btn{
border:none;
background-color: transparent;
overflow: hidden;
cursor: pointer;
width: 57px;
height: 26px;
background-image: url(../images/button.png);
}
You should now see the rule properties taking effect.
If not you should try changing:
background-image: url(../images/button.png);
to
background: url(../images/button.png);
as there are reports of images needing to be referenced as background the first time they are used in a css file.
Using CSS3 I am trying to display search box with glass image. I am doing it basically by placing a image on text box and setting its left-margin. My code is here:
<body>
<form id="header-search">
<input type="text" class="searchbox" /><input type="submit" class="button" value="" />
</form>
</body>
#header-search{overflow:auto;}
#header-search input.searchbox
{
border-bottom-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-bottom-left-radius:5px;
border-top-left-radius:5px;
-webkit-top-left-radius:5px;
-moz-left-radius:5px;
border:1px solid #8e8e8e;
background-color:white;
height:16px;
padding:4px;
padding-left:28px;
padding-right:10px;
color:#4a4a4a;
float:left;
}
#header-search input.button{
border:0px dashed red;
padding:0;
margin:0 0 0 -185px;
width:24px;
height:24px;
background:transparent url(../images/SearchImage.png) center center no-repeat;
float:left;
}
UPDATE
I am not using em rather px
I have tried different css reset.
please see image for details difference.
I have done this code in new css/ html file where there is no other line of code.
Using position:absolute seems to be a more reliable approach for this kind of thing.
HTML
<form id="header-search">
<div class='relative'>
<input type="text" class="searchbox" /><input type="submit" class="button" value="" />
</div>
</form>
CSS
.relative {
position:relative;
}
.relative .button {
position:absolute;
left: 20px;
z-index:1;
}
You may want to make this css more specific to this search input rather than all .button's etc
Its because you are not specifying a width of your search input box.
If you do that, you method will work.
Else, of course, the better way is to use position:absolute to position your button.
This will ensure the layout across all browsers.
If you want to place image for search input box , you can try this http://jsfiddle.net/HmKZQ/1/
If you need the button for click then you can try this
http://jsfiddle.net/HmKZQ/3/
html code
<div id="signup">
<p>
<label>Frist Name</label>
<input type="text"/>
<p>
<p>
<label>Last Name</label>
<input type="text"/>
<p>
<p>
<label>Email</label>
<input type="text"/>
<p>
<p>
<label>Mobile Number</label>
<input type="text"/>
<p>
<p>
<label>Password</label>
<input type="password"/>
<p>
<p>
<label>Re Password</label>
<input type="password"/>
<p>
</div>
and this is css
css
#signup{
width: 860px;
background-color: white;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup p label{
padding: 0.4em;
color: #0986e3;
}
#signup p input{
width: 300px;
padding: 0.4em;
}
if u run this code u will see the input files right and left , and that is not good , i can correct this problems using div or li , but i want the best practice for doing that , i want the input filds to be exaclty below each other
,this is the code in jsfiddle
http://jsfiddle.net/Wiliam_Kinaan/EfBD7/
Make the labels display as block elements. That way, you can set it's width. But you still need them to be inline. You need to apply either float:left, or display:inline-block so they act inline as well as block.
#signup p label{
display:inline-block;
width:100px;
}
/*or*/
#signup p label{
float:left;
width:100px;
}
If you want to support older browsers, then use the float:left. If you target new browsers, then display:inline-block is better. If you use the float approach, add this to the CSS to clear the float:
#signup p{
overflow:hidden;
zoom:1;
}
Here, I did it how I would do it. I stripped out the p and some css to make text right side. but you can of course add display:inline-block;width:300px; to the label and swap the label and input locations in html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#signup{
width: 500px;
background-color: #ececec;
border: 1px black solid;
padding: 0px;
margin: 0px;
}
#signup label{
font:12px arial;
color: #0986e3;
}
#signup input{
margin:10px;
width: 300px;
padding 0.4em;
}
#signup input[type=button]{
margin:10px;
width: 80px;
padding 0.4em;
}
</style>
</head>
<body>
<div id="signup">
<input type="text"/>
<label>Frist Name</label>
<input type="text"/>
<label>Last Name</label>
<input type="text"/>
<label>Email</label>
<input type="text"/>
<label>Mobile Number</label>
<input type="password"/>
<label>Password</label>
<input type="password"/>
<label>Re Password</label>
<input type="button" value="click me!" />
</div>
</body>
</html>
Give the label a definite width, like:
#signup p label{
padding: 0.4em;
color: #0986e3;
width: 100px;
display: inline-block;
}
Can you use table , might help your cause , see the example , sorry for not aligning the markup well.