Here is my html:
<div id="header">
<p id="logout">register</p>
<h1>header.</h1>
</div>
<div id="main">
<p>login.</p>
<form method="post" action="index.php" name="loginform" id="loginform">
<fieldset>
<label for="username">u:</label><input type="text" name="username" id="username" />
<br>
<label for="password">p:</label><input type="password" name="password" id="password" />
<br>
<input type="submit" name="login" id="login" value="Login" />
</fieldset>
</form>
</div>
And here is my CSS:
* {
margin: 0;
padding: 0;
}
body {
/*font-family: Trebuchet MS;*/
font-family: Helvetica;
}
a {
color: #000;
}
a:hover, a:active, a:visited {
text-decoration: none;
}
#logout { font-size: 12px;}
#header {
width: 700px;
margin: 0 auto;
margin-top: 0px;
font-size: 25px;
padding: 10px;
border-bottom: 1px solid #CCC;
border-right: 1px solid #CCC;
border-left: 1px solid #CCC;
background-color: #EEE;
}
#slogan { font-size:20px;}
#main {
width: 700px;
margin: 0 auto;
margin-top: 20px;
padding: 10px;
border: 1px solid #CCC;
background-color: #EEE;
}
#contact {
width: 700px;
margin: 0 auto;
margin-top: 20px;
padding: 10px;
border: 1px solid #CCC;
background-color: #EEE;
}
p { font-size: 20px; }
form fieldset { border: 0; }
form fieldset p br { clear: left; }
label {
margin-top: 5px;
font-size: 20px;
display: block;
width: 30px;
padding: 0;
float: left;
}
input {
font-family: Trebuchet MS;
border: 1px solid #CCC;
margin-bottom: 5px;
background-color: #FFF;
padding: 2px;
}
input:hover {
border: 1px solid #222;
background-color: #EEE;
}
I can't figure out why my forms are coming out like this: http://cl.ly/2c1b0w3h3S142Q2s3A3I
Instead of lined up nicely on the left.
Your second label is catching on the corner of your first, since the label is taller than the text box.
Two solutions here...you can either make sure the label and box are the same height, or add a clear: left to your labels.
It's those float: lefts; you'll notice each label comes to the right of the previous ones. If you need the floats -- and I'm not sure you do -- then you need to use "clear".
Wrap your each of label and input pairs in a div and eliminate the brs.
Related
I am preety new to HTML and CSS. And I also know is a very basic question. I am trying to create a login frontend the code which I am using is as shown below. Code is written by using HTML and css only
<!DOCTYPE html>
<html>
<head>
<style>
form {
border: 6px solid #f1f1f1;
}
input[type=text]{
width: 100%;
padding: 12px 12px;
margin: 16px 0;
display: inline-block;
border: 2px solid #ccc;
box-sizing: border-box;
}
input[type=password] {
width: 100%;
padding: 12px 12px;
margin: 16px 0;
display: inline-block;
border: 2px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 12px 40px 12px 0;
}
.container {
padding: 20px;
}
span.psw {
float: right;
padding-top: 16px;
}
</style>
</head>
<body>
<center>
<h2>Inventory Update Interface Login</h2>
</center>
<form method="post">
<div class="container">
<label>
<b>Username</b>
</label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label>
<b>Password</b>
</label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
</body>
</html>
but the problem is that I want to make the box in the center of the screen and text field to be slightly smaller in length. Thank in advance!
Add This CSS
.container{
max-width:600px;
border: 6px solid #f1f1f1;
margin:0 auto;
}
form {}
.container {
max-width: 600px;
border: 6px solid #f1f1f1;
margin: 0 auto;
}
input[type=text] {
width: 100%;
padding: 12px 12px;
margin: 16px 0;
display: inline-block;
border: 2px solid #ccc;
box-sizing: border-box;
}
input[type=password] {
width: 100%;
padding: 12px 12px;
margin: 16px 0;
display: inline-block;
border: 2px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 12px 40px 12px 0;
}
.container {
padding: 20px;
}
span.psw {
float: right;
padding-top: 16px;
}
<center>
<h2>Inventory Update Interface Login</h2>
</center>
<form method="post">
<div class="container">
<label><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</div>
</form>
TRY THIS
<style>
form {
border: 6px solid #f1f1f1;
}
input[type=text]{
width: 100%;
padding: 8px 8px;
margin: 16px 0;
display: inline-block;
border: 2px solid #ccc;
box-sizing: border-box;
}
input[type=password] {
width: 100%;
padding: 8px 8px;
margin: 16px 0;
display: inline-block;
border: 2px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 15px 35px 15px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 10%;
text-align: center;
vertical-align: middle;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 12px 40px 12px 0;
}
.container {
padding: 20px;
margin-left: 25%;
margin-right: 25%;
span.psw {
float: right;
padding-top: 16px;
}
</style>
#nishant kumar A part from formatting I just want to ask for learning purpose that why you have given "width: 10%;" to "button"?
Suggestion: Instead of that you may consider to use "min-width: Xpx". where "x" will be any number as per your requirement.
I'm trying to position my button so it sticks next to the input field.
Like here:
In the example i just showed there, the button had a position relative and a float right. I did the exact same thing but it didn't work.
Here is my fiddlesticks:
.subscribe input {
font: 15px/25px Georgia, Times, 'Times New Roman', serif;
border: 2px solid black;
height: 40px;
width: 340px;
font-style: italic;
padding-left: 10px;
}
.subscribe button {
height: 40px;
width: 53px;
background-color: black;
color: white;
padding-left: 10px 10px 10px 10px;
float: right;
position: relative;
border: 2px solid black;
}
.textboxwhite-left {
padding: 40px 20px 0px 20px;
color: black;
text-align: left !important;
}
#container {
display: block;
height: 900px;
width: 100%;
position: relative;
top: 50px;
margin: 0;
color: white;
text-align: center;
}
<div id="container">
<div class="textboxwhite-left">
<form class="subscribe" action="" method="post">
<input type="text" name="subscribefield" required="true" placeholder="Awe" />
<button type="submit">Search</button>
</form>
</div>
</div>
Does this works for you?
.subscribe{ display:inline-block;}
Please check this code.
.subscribe input {
font: 15px/25px Georgia, Times, 'Times New Roman', serif;
border: 2px solid black;
height: 40px;
width: 340px;
font-style: italic;
padding-left: 10px;
float: left;
}
.subscribe button {
height: 46px;
width: 80px;
background-color: black;
color: white;
padding-left: 10px 10px 10px 10px;
float: left;
position: relative;
border: 2px solid black;
}
.textboxwhite-left {
padding: 40px 20px 0px 20px;
color: black;
text-align: left !important;
}
#container {
display: block;
height: 900px;
width: 100%;
position: relative;
top: 50px;
margin: 0;
color: white;
text-align: center;
}
<div id="container">
<div class="textboxwhite-left">
<form class="subscribe" action="" method="post">
<input type="text" name="subscribefield" required="true" placeholder="Awe" />
<button type="submit">Search</button>
</form>
</div>
</div>
added display:inline-block to .textboxwhite-left and adjusted height and width of button according to input.
.subscribe input {
font: 15px/25px Georgia, Times, 'Times New Roman', serif;
border: 2px solid black;
height: 40px;
width: 340px;
font-style: italic;
padding-left: 10px;
}
.subscribe button {
height: 46px;
width: 58px;
background-color: black;
color: white;
padding-left: 10px 10px 10px 10px;
float: right;
position: relative;
border: 2px solid black;
}
.textboxwhite-left {
padding: 40px 20px 0px 20px;
color: black;
text-align: left !important;
display : inline-block;
}
#container {
display: block;
height: 900px;
width: 100%;
position: relative;
top: 50px;
margin: 0;
color: white;
text-align: center;
}
<div id="container">
<div class="textboxwhite-left">
<form class="subscribe" action="" method="post">
<input type="text" name="subscribefield" required="true" placeholder="Awe" />
<button type="submit">Search</button>
</form>
</div>
</div>
Try this:
<div class="search">
<form>
<input type="text" placeholder="serach here">
<input class="submit" value="Seach">
</form>
</div>
Css:
.search{
position:relative;
padding:0px 100px 10px 10px;
}
.search input[type="text"]{
border:2px solid black;
border-radius:3px;
width:100%;
height:30px;
line-height:30px;
display:block;
}
.search input[type="text"]:focus{
-webkit-appearance: none;
appearance: none;
outline:none;
}
.search .submit{
position:absolute;
width:100px;
height:30px;
text-align:center;
right:0;
border:2px solid black;
top:0;
cursor: pointer;
}
.search .submit:hover{
background:black;color:#fff;
}
Here is jsfiddle link : https://jsfiddle.net/jmc548vc/1/
Please do have a look at this Fiddle.
.subscribe button {
height: 46px;
width: 53px;
background-color: black;
color: white;
padding-left: 10px 10px 10px 10px;
float: right;
position: absolute; \\this is changed to absolute
border: 2px solid black;
}
HTML
<fieldset class="Fieldset">
<legend class="Legend" id="Legend">Add</legend>
...
CSS
.Fieldset
{
border: 1px solid #CCC;
border-radius: 5px;
padding: 10px;
}
.Legend
{
border: medium none;
left: 40%;
margin: 0 auto;
padding: 0 10px;
position: relative;
text-align: center;
width: auto;
color: #3C6EAC;
font-size: 18px;
font-weight: bold;
}
In Firefox legend gets aligned at center. But in Chrome it does not.
Add this CSS, remove margin :auto & left:40% then add margin-left:40%.
.Fieldset {
border: 1px solid #CCC;
border-radius: 5px;
padding: 10px;
}
.Legend {
border: medium none;
margin-left: 40%;
padding: 0 10px;
position: relative;
text-align: center;
width: auto;
color: #3C6EAC;
font-size: 18px;
font-weight: bold;
}
<fieldset class="Fieldset">
<legend class="Legend" id="Legend">Add</legend>
</fieldset>
View on JSFiddle
Simply delete left:40% from .Legend and text-align will do the rest.
.Fieldset {
border: 1px solid #CCC;
border-radius: 5px;
padding: 10px;
}
.Legend {
border: medium none;
margin: 0 auto;
padding: 0 10px;
position: relative;
text-align: center;
width: auto;
color: #3C6EAC;
font-size: 18px;
font-weight: bold;
}
<fieldset class="Fieldset">
<legend class="Legend" id="Legend">Add</legend>
</fieldset>
View on JSFiddle
margin:auto; is doing all the work
text-align:center; does not do anything
left:40%; interferes with margin:auto;
Run this example:
fieldset {
border: 1px solid #CCC;
border-radius: 5px;
padding: 10px;
}
legend {
margin: auto;
padding: 0 10px;
color: #3C6EAC;
font-size: 18px;
font-weight: bold;
}
<fieldset>
<legend>Long title long title long title long title </legend>
</fieldset>
This post is useful. However, I managed to align the legend to the center just with text-align:center as shown below.
legend {
text-align:center;
}
StackBlitz example for the same is here: https://stackblitz.com/edit/angular-nzmpzi
would you have any idea why my red alert message is split into 2 blocks? I'd like it to be one block under the main message field. See http://jsfiddle.net/z4Lg4/
Many thanks
HTML
<div id="contactwrapper">
<div class="block clear">
<div class="block-left">
<h1>Nous contacter</h1>
<div id="addressbox">
<h3>CENTRE DE dfd</h3>
<p>3, rdsfr</p>
<p> L5341 dfsf (Luxembourg)</p>
<ul id="contact">
<li><i class="icon-phone-sign blue"></i> +352 691 123.456</li>
<li><i class="icon-envelope blue"> </i>contact#dfdsf.lu</li>
<li><i class="icon-map-marker blue"></i> Plan d'accès</li>
</ul>
</div> <!-- End DIV addressbox -->
</div> <!-- End DIV block-left -->
<div class="block-right"> <h1>Formulaire de contact</h1>
<!-- CONTACT FORM-->
<div class="contact-form">
<form id="contactfrm" method="post" class="clearfix">
<div class="clearfix">
<input id="name" name="name" placeholder="Nom" type="text" value="">
<input id="email" name="email" placeholder="Email" type="email" value="">
</div>
<textarea id="message" name="message" placeholder="Message et coordonnées"></textarea>
<input type="submit" value="Envoyer" name="submit">
<p class="success" style="display:none">Votre message a bien été envoyé! Merci</p>
<p class="error" style="display:none;">E-mail not valid et/ou message vide</p>
</form>
</div><!-- /.contact-form -->
</div> <!-- End DIV block-right -->
</div> <!-- End DIV Block -->
</div> <!-- End DIV Contactwrapper -->
CSS
#contactwrapper {
margin-top: 30px;
padding-bottom: 30px;
position: relative;
display: block;
margin-right: auto;
margin-left: auto;
width: 980px;
background: #fff;
-webkit-box-shadow: 0px 0px 10px 2px #e0e0e0;
-moz-box-shadow: 0px 0px 10px 2px #e0e0e0;
box-shadow: 0px 0px 10px 2px #e0e0e0;
}
.block-left {
float: left;
box-sizing: border-box;
width: 50%;
padding-right: 20px;
}
.block-right {
float: right;
box-sizing: border-box;
width: 50%;
overflow: hidden;
}
.block {
display: block;
margin-right: auto;
margin-left: auto;
clear: both;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
width: 100%;
overflow: hidden;
}
.contact-form input[type=text] {
float: left;
width: 200px;
}
.contact-form input[type=email] {
float: right;
width: 200px;
}
.contact-form input[type=submit] {
float: right;
}
.contact-form textarea {
float: left;
height: 70px;
margin-bottom: 10px;
margin-top: 20px;
width: 100%;
}
/*************************************************************
/*************************************************************
* FORMS
*************************************************************/
form label { cursor: pointer }
form textarea,
form input[type=text],
form input[type=password],
form input[type=email] {
background: #d5d5d5 url('../images/form-bg.png') left top repeat-x;
border-top: 1px solid transparent;
border-right: 1px solid #d2d2d2;
border-bottom: 1px solid transparent;
border-left: 1px solid #d2d2d2;
color: #7c7c7c;
font-family: 'Arial', sans-serif;
padding: 6px 8px;
resize: none;
}
form input:focus,
form textarea:focus {
background: #d5d5d5 none;
border: 1px solid red;
outline: none;
}
form input[type=submit] {
background: #0064C4 url('../images/form-caret.png') right center no-repeat;
border: 0;
color: #fff;
cursor: pointer;
font-family: 'Arial', sans-serif;
font-size: 14px;
font-weight: normal;
padding: 8px 50px;
text-transform: uppercase;
}
.success
{
display:none;
display: block;
margin: auto;
width: 100%;
overflow: hidden;
text-align:center;
font-size: 14px;
font-weight: 600;
color: #fff;
letter-spacing: 1px;
padding-top: 3px;
padding-bottom: 3px;
background: #99CB97;
}
.error
{
display:none;
display: block;
background:#EF6666;
display:inline;
padding: 3px 10px 3px 10px;
top: 10px;
}
check the js fiddle
http://jsfiddle.net/z4Lg4/
.error
{
display:none;
display: block;
background:#EF6666;
display:inline;
top: 72px;
position:absolute;
}
made the changes:
css:
.error
{
display:none;
display: block;
background:#EF6666;
display:inline;
top: 100px;
margin-left:35px;
position:absolute;
}
Fiddle
A lot of my page's features (text) include css hover and active.
BUT
They will only work if I first hover over a certain word that seems to trigger the others.
Why is this?
In my case #input1 has an active part that when clicked on the border changes colour.
But this will not work until i hover my cursor over the footer text.
Thanks!
James
Here is the html:
<html>
<head>
<link href="cloud.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="center1"style="margin-top: 300px;">
<form>
<input type="text" class="input1" autofocus="autofocus">
<input type="text" class="input2">
</div>
<div class="footer" style="position:absolute;bottom:0;">
<div class="footer1">
<div id="footer1text">
About Us</div>
<div id="footer1text">Accessibility</div>
<div id="footer1text">Recruiters</div>
<div id="footer1text">Contact Us</div>
</div>
<div class="footer2">
<div id="footer2textcopyright">© 2011 -</div>
<div id="footer2text">Privacy</div>
</div>
</div>
</body>
</html>
css:
body {
margin: 0;
padding: 0;
}
input:focus {
outline: none;
}
.center div {
display:inline-block;
}
.center {
text-align:center;
width:100%px;
margin:0 auto;
}
.center1 div {
display:inline-block;
}
.center1 {
text-align:left;
width:1200px;
text-align:center;
width:100%px;
margin:0 auto;
}
.footer {
background: #FFFFFF;
border-top: 1px solid;
color: #e6e6e6;
height: 30px;
width: 100%;
position:absolute;
float: left;
margin: 0px 0px 0px 0px;
padding:0;
display: table;
}
.footer1 {
background: #FFFFFF;
height: 30px;
width: 350px;
float: left;
margin: 0px 0px 0px 0px;
padding:0;
display:table;
}
#footer1text2 {
font: 13px helvetica;
color: #0040FF;
display: table-cell;
}
.clickhere {
font: 13px helvetica;
color: #0040FF;
text-decoration: underline;
}
#footer1text2:hover {
font: 13px helvetica;
color: #0040FF;
text-decoration: underline;
}
#footer1text {
font: 13px helvetica;
color: #0040FF;
padding: 8px 3px 3px 3px;
display: table-cell;
}
#footer1text:hover {
font: 13px helvetica;
color: #0040FF;
padding: 8px 3px 3px 3px;
text-decoration: underline;
}
.footer2 {
background: #FFFFFF;
height: 30px;
width: 130px;
float: right;
margin: 0px 0px 0px 0px;
padding:0;
display:table;
}
#footer2text {
font: 13px helvetica;
color: #0040FF;
padding: 8px 3px 3px 3px;
display: table-cell;
text-align: right;
}
#footer2text:hover {
font: 13px helvetica;
color: #0040FF;
padding: 8px 3px 3px 3px;
text-decoration: underline;
}
#footer2textcopyright {
font: 13px helvetica;
color: #151515;
padding: 8px 3px 3px 3px;
display: table-cell;
text-align: right;
}
.input1 {
height: 40px;
width: 280px;
background: #FFFFFF;
border: 1px solid #bdbdbd;
border-top: 1px solid #A4A4A4;
font: 21px HelveticaNeue-Light;
color: #151515;
text-align: left;
}
.input1:active {
height: 40px;
width: 280px;
background: #FFFFFF;
border: 1px solid #e6e6e6;
border-top: 1px solid #A4A4A4;
font: 21px HelveticaNeue-Light;
color: #151515;
text-align: left;
}
.input2 {
height: 40px;
width: 280px;
background: #FFFFFF;
border: 1px solid #bdbdbd;
border-top: 1px solid #A4A4A4;
font: 21px HelveticaNeue-Light;
color: #151515;
text-align: left;
}
you are expecting input1:active to work like .input1:focus
Change:
.input1:active {
height: 40px;
width: 280px;
background: #FFFFFF;
border: 1px solid #e6e6e6;
border-top: 1px solid #A4A4A4;
font: 21px HelveticaNeue-Light;
color: #151515;
text-align: left;
}
to:
.input1:focus {
outline: none;
height: 40px;
width: 280px;
background: #FFFFFF;
border: 1px solid #e6e6e6;
border-top: 1px solid #A4A4A4;
font: 21px HelveticaNeue-Light;
color: #151515;
text-align: left;
}
PS
Fix your code, you need to close that form tag, and should probably do the same with your inputs. Also there should be a space between the style declarations in your code
<div class="center1" style="margin-top: 300px;"> <!-- added space between class and style declarations -->
<form>
<input type="text" class="input1" autofocus="autofocus" /> <!-- close with slash -->
<input type="text" class="input2" /> <!-- close with slash -->
</form> <!-- close the form -->
</div>