How do I make the button stay under the text? If I do a <br> the button goes outside the div. Why?
.dropzone {
border: 2px dashed #ccc;
width: 100%;
height: 200px;
color: #ccc;
text-align: center;
line-height: 200px;
}
<div class="dropzone" id="dropzone">
<span>Drag and drop a file or</span>
<input type="file" name="fileUpload" accept="text/plain" id="fileUpload" class="hide" />
<label for="fileUpload" class="btn btn-primary-outline">Select file</label>
</div>
The input went outside of the div when you inserted a <br> tag, because you set the line height to 200px. A <br> represents a new line, apparently with a spacing of 200px to other lines. The following code displays the button under the <span>:
.dropzone {
border: 2px dashed #ccc;
max-width: 100%;
color: #ccc;
padding: 50px;
text-align: center;
}
<div class="dropzone" id="dropzone">
<span>Drag and drop a file or</span><br>
<input type="file" name="fileUpload" accept="text/plain" id="fileUpload" class="hide" />
<label for="fileUpload" class="btn btn-primary-outline">Select file</label>
</div>
If you remove the line-height:200px; it will not push the button down 200px.
You can use a <p> tag instead of span and it will move the text under without needing the <br>.
.dropzone {
border: 2px dashed #ccc;
max-width: 100%;
color: #ccc;
padding: 50px;
text-align: center;
}
<div class="dropzone" id="dropzone">
<p>Drag and drop a file or</p>
<input type="file" name="fileUpload" accept="text/plain" id="fileUpload" class="hide" />
<label for="fileUpload" class="btn btn-primary-outline">Select file</label>
</div>
Try This:
.button {
display: block;
}
This should position the button under the element behind it.
Added some css and br tag
.dropzone {
border: 2px dashed #ccc;
max-width: 100%;
color: #ccc;
padding: 50px;
text-align: left;
}
.dropzone span{
margin-bottom:5px;
display:inline-block;
}
<div class="dropzone" id="dropzone">
<span>Drag and drop a file or</span><br>
<input type="file" name="fileUpload" accept="text/plain" id="fileUpload" class="hide" />
<label for="fileUpload" class="btn btn-primary-outline">Select file</label>
</div>
Your use of line-height is what's pushing the button outside of the div when you insert a <br> after your text. I suggest removing it if you want to use the line break, as well as looking into flexbox or padding properties if you want to vertically align your div contents.
For example:
.dropzone {
border: 2px dashed #ccc;
width: 100%;
height: 200px;
padding: 10px;
color: #ccc;
text-align: center;
/* line-height: 200px; */
display: flex;
flex-direction: column;
justify-content: center;
}
<div class="dropzone" id="dropzone">
<span>Drag and drop a file or</span>
<span>
<input type="file" name="fileUpload" accept="text/plain" id="fileUpload" class="hide" />
<label for="fileUpload" class="btn btn-primary-outline">Select file</label>
</span>
</div>
Related
I have the following CSS and HTML code for a simple form, however, I don't can't get vertical lines that will separate my text from my radio buttons, currently, I am just using the '|' in the body to separate it, but it doesn't look nice. How can I get the vertical lines to connect all the way from the top of the text box to the bottom?
<!DOCTYPE html>
<html>
<head>
<style>
.box1 {
width: 300px;
height: 20px;
padding: 5px;
border: 1px solid black;
margin: 0;
float: left
}
input[type=radio] {
display: inline;
}
</style>
</head>
<body>
<div class="box1">
<form method="GET" action="." target="new">
Up Down |
<input type="radio" name="option" id="r1" value="1" />
<label for="r1">Up</label>
<input type="radio" name="option" id="r2" value="2" />
<label for="r2">Down</label>
|
<input type="submit" />
</form>
</div>
</body>
</html>
I personally wouldn't use table elements for layout in this case (unless I am rendering a bunch of data in a table, then it applies) because its not semantic. Instead, flexbox can handle this easily.
display: flex;
.box1 form {
width: 300px;
border: 1px solid black;
margin: 0;
display: flex;
}
.col {
display: inline-block;
border-right: 1px solid black;
padding: 5px;
}
.col:last-child {
border-right: none;
}
.col.input-control {
padding-right: 20px;
}
<div class="box1">
<form method="GET" action="." target="new">
<label class="col">Up Down</label>
<span class="col input-control">
<input type="radio" name="option" id="r1" value="1" />
<label for="r1">Up</label>
<input type="radio" name="option" id="r2" value="2" />
<label for="r2">Down</label>
</span>
<span class="col">
<input type="submit" />
</span>
</form>
</div>
You need to create a table and inside put the html inputs, labels.
Also you need to add CSS style to the table for a better visualization.
You can wrap your radiobuttons into a div element and add borders to left and right.
https://jsfiddle.net/krbp8tx7/
.box1 {
height: 20px;
padding: 5px;
border: 1px solid black;
margin: 0;
float: left
}
input[type=radio] {
display: inline;
}
.separateradios {
display: inline-block;
border-left:1px solid #000;
border-right:1px solid #000;
padding: 0 0.2em;
}
<body>
<div class="box1">
<form method="GET" action="." target="new">
Up Down
<div class="separateradios">
<input type="radio" name="option" id="r1" value="1" />
<label for="r1">Up</label>
<input type="radio" name="option" id="r2" value="2" />
<label for="r2">Down</label>
</div>
<input type="submit" />
</form>
</div>
</body>
I have two divs sitting side-by-side inside a form element. Normally, they both line up against the top of the form.
However, when I add p tags(class forget) to the bottom of the second sibling div, the first div is pushed down from the top of the form. The second div stays up against the top of the form element.
I don't understand why the p tags at the bottom of the second sibling div are adding margin/padding to the top of the first div.
One clue is that setting vertical-align: top fixes the problem, but I want to know what is causing it.
form {
color: white;
width: 430px;
height: 80px;
float: right;
border: 1px solid black;
}
.formEmail,
.formPassword {
border: 1px solid white;
width: 165px;
height: 100%;
font-size: 13px;
margin-right: 10px;
display: inline-block;
}
<form id="logIn">
<div class="formEmail">
<p>Email or Phone</p>
<input type="text" name="emailphone">
</div>
<div class="formPassword">
<p>Password</p>
<input type="text" name="password">
<p class="forget">Forget Account?</p>
</div>
</form>
You need to add vertical-align: top to the two divs: https://jsfiddle.net/pobbLs21/ They're set to either baseline or middle I guess in your reset (if you're using one).
Just add overflow:hidden; to the divs
form {
color: white;
width: 430px;
height: 80px;
float: right;
border: 1px solid black;
}
.formEmail,
.formPassword {
border: 1px solid white;
width: 165px;
height: 100%;
font-size: 13px;
margin-right: 10px;
display: inline-block;
overflow: hidden;
}
<form id="logIn">
<div class="formEmail">
<p>Email or Phone</p>
<input type="text" name="emailphone">
</div>
<div class="formPassword">
<p>Password</p>
<input type="text" name="password">
<p class="forget">Forget Account?</p>
</div>
</form>
Here is my HTML:
<form action="#" class="six columns push_two contact-form">
<label>
<span>Name</span>
<input type="text" name="name" />
</label>
<label>
<span>Email</span>
<input type="email" name="email" />
</label>
<label>
<span>Phone number</span>
<input type="text" name="phone" />
</label>
<label>
<span>Message</span>
<textarea name="message"></textarea>
</label>
<input type="submit" name="submit" value="Send" />
</form>
And CSS:
label{
display: table;
width: 100%;
border-bottom: solid $grey_dark 1px;
}
span{
display: table-cell;
font-weight: 700;
font-size: 20px;
}
input, textarea{
display: table-cell;
width: 100%;
}
In result I get something like the screenshot bellow. I have marked the spans with red border. They wider than I want. I did not set any width, margin or padding to them. But still they are wider. Can you give me a solution to this so that the spans become the size of the text width.
I want something like bellow:
You need to specify a table row, for table cells to behave. Try this:
form {display: table;}
label{
display: table-row;
width: 100%;
border-bottom: solid $grey_dark 1px;
}
Updated answer:
label{
display: block;
width: 100%;
border-bottom: solid #333 1px;
padding: 10px;
}
span{
display: inline-block;
padding-right: 15px;
font-weight: 700;
font-size: 20px;
}
input, textarea{
}
Instead of the display as table for span you need to use table-row.
label{
display: table-row;
width: 100%;
border-bottom: solid $grey_dark 1px;
}
I'm in the process of styling a profile page for my website.
I want to style the buttons for New Post, Contact Me and Log Out on the Profile Page the same as the Log In button on the Login Box which looks like this:
The code and CSS for this one is like this
Code:
input[type=submit] {
width: 100%;
background: #28343b;
color: #ffffff;
border: 1px solid #000;
padding: 10px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
margin-bottom: 1px;
}
<form action="" method="post">
<div id="loginbox">
<label>Username:</label>
<input type="text" name="username" id="name" placeholder="Username" />
<br />
<br />
<label>Password:</label>
<input type="password" name="password" id="password" placeholder="**********" />
<br/>
<br />
<input type="submit" value=" Login " name="submit" />
<br />
<span></span>
</form>
</div>
I have indicated below which are the items I would like to style in this same button format.
What would I need to put in the CSS (and any changes to HTML) to style those items the same?
<div id="login">
<h2>Welcome:</h2>
<hr/>
<form action="" method="post">
<div id="loginbox">
<div id="submit"> Contact Me </div> <----- THIS ONE
<div id="newpost"> Make a New Post </div> <----- THIS ONE
<div id="logout">Log Out</div> <----- THIS ONE
<span></span>
</form>
</div>
It currently looks like this.
Use this css code to style your Log out link like Login button.
#logout{
width: 100%;
background: #28343b;
border: 1px solid #000;
padding: 10px;
font-size:20px;
cursor:pointer;
border-radius: 5px;
margin-bottom: 1px;
text-align:center;
font-weight:bold;
}
#logout a { /*all font customizations goes here*/
color: #fff;
text-decoration: none;
}
Check results here
I've changed a few little things around:
I've placed your id's onto your a elements, instead of the parent divs
I've added a little bit of extra css to ensure it overrides the default a tag stylings (i.e. underlining)
I've used the same css for your elements (using a comma to separate them)
I've also have styled your form similarly to your image, although you may want to alter this to be more precise.
Added a very simple hover effect
This leave your with this:
input[type=submit],
#submit,
#newpost,
#logout {
width: 96%;
background: #28343b;
color: #ffffff;
border: 1px solid #000;
padding: 10px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
margin-bottom: 1px;
text-decoration: none;
display: block;
font-family: arial;
transition: all 0.5s;
}
#login {
background-color: #109cca;
padding: 5px;
border: 2px solid gray;
border-radius: 10px;
text-align: center;
}
input[type=submit]:hover,
#submit:hover,
#newpost:hover,
#logout:hover {
color: #109cca;
}
<div id="login">
<h2>Welcome:</h2>
<hr/>
<form action="" method="post">
<div id="loginbox">
<div> <a id="submit" href="cms/contact.php"> Contact Me </a>
</div>
<div> <a id="newpost" href="cms/index.php"> Make a New Post </a>
</div>
<div><a id="logout" href="logout.php">Log Out</a>
</div>
</div>
</form>
Try this:
#submit,#newpost,#logout {
width: calc(100% - 40px);
background: #28343b;
color: #ffffff;
border: 1px solid #000;
padding: 10px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
margin-bottom: 1px;
text-align:center;
}
a{
color:white;
text-decoration:none;
}
<div id="login">
<h2>Welcome:</h2>
<hr/>
<form action="" method="post">
<div id="loginbox">
<div id="submit"> Contact Me
</div>
<div id="newpost"> Make a New Post
</div>
<div id="logout">Log Out
</div>
<span></span>
</div>
Like ṧнʊß mentioned, the #submit, #newpost, and #logout inputs are not inputs - they're divs, so they're not going to use the "input type=submit" CSS rule.
If you want to change these into inputs that would inherit the CSS rules, then you could convert them like so:
<input id="submit" src="cms/contact.php" value="Contact Me" type="submit"/>
It would probably make more sense, however, to change the CSS rule itself to some kind of class:
.fancyButton {
width: 100%;
background: #28343b;
border: 1px solid #000;
padding: 10px;
font-size:20px;
cursor:pointer;
border-radius: 5px;
margin-bottom: 1px;
text-align:center;
font-weight:bold;
}
And to give each of these <input> divs this class:
<input id="logout" class="fancyButton">
input {
width: calc(100% - 40px);
background: #28343b;
color: #ffffff;
border: 1px solid #000;
padding: 10px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
margin-bottom: 1px;
padding: 10px;
}
input[type=submit] {
width: calc(100% - 20px);
}
<form action="" method="post">
<div id="loginbox">
<label>Username:</label>
<input type="text" name="username" id="name" placeholder="Username" />
<br />
<br />
<label>Password:</label>
<input type="password" name="password" id="password" placeholder="**********" />
<br/>
<br />
<label></label>
<input type="submit" value=" Login " name="submit" />
<br />
<span></span>
</div>
</form>
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:
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;
}
try to add
.form{
max-width:320px;
margin:0 auto;
}
You could do that by reducing the width and centering your container ( div.form )
Something like
display:inline-block;
margin: 0 auto;
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
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:
I hope that helps you out.