I have three elements inside a div. I want to position one on the left, one in the middle and the last one on the right. I have tried the following:
.search-form {
float: right;
}
.menu_icon:before {
content:url(/sites/all/themes/mytheme/images/hamburger.png);
}
.main_logo {
margin: 0% auto;
}
.main_logo:before {
content:url(/sites/all/themes/mytheme/images/logop.png);
}
.menu_icon {
float: left;
}
<div class="fixed">
<div class="fixed-container">
<form action="/search/node" method="post" id="search-form" class="search-form">
<div class="form-item">
<input type="text" class="input-text" value="Search the website" onFocus="this.value=''" onBlur="if(this.value=='') this.value='Search the website';" size="25" name="keys" />
<input type="submit" value="" name="op" alt="Search" />
<input type="hidden" value="<?php print drupal_get_token('search_form'); ?>" name="form_token" />
<input type="hidden" value="search_form" id="edit-search-form" name="form_id" />
<input type="hidden" name="type[your_content_type]" id="edit-type-your_content_type" value="your_content_type" />
</div>
</form>
</div>
</div>
Also I have tried to individually wrap those elements in divs and applying styles to those divs instead of elements. But the logo always sticks to the menu icon as it can be seen from the snippet below. Why it's not working?
Currently your a is displayed as inline, which makes it unable to be centered as a block.
Also, display:block does not work on its own with margin:0 auto, as blocks have an understood width of 100%. You also need a given width for it to work.
.first {
float:right;background:red;
}
.second{
float:left;background:blue;
}
.third{
margin:0% auto;background:gold;
display:block;width:10em;
/*Unnecessary but may be added*/text-align:center;
}
<div class="fixed">
<div class="fixed-container">
<span class="first">First</span>
<div class="second">Second</div>
<span class="third">Third</span>
</div>
</div>
Related
I need to right align a hyperlink in a <div>, however the only way I can get it to move right is to use the <p> tag. This puts the hyperlink on a new line rather than the same line.
How can I get it on the same line, and also give some spacing? Right now it looks like a run on sentence
<div>
<label class="control-label" for="ddlProfile">Profile:</label>
<input type="text" data-ng-model="viewModel.Name" class="form-control" />
<button >New</button>
<button >Edit</button>
<p style="text-align:right; display:block; margin:auto"><a href="https://www.w3schools.com" >Open New Form</a>
Display Detail</p>
</div>
You can use flexbox for this. Wrap the content in two parts - one for the left side, and another for the right. Then use margin to position the right side as you want.
.flex {
display: flex;
}
.right {
margin-left: auto;
}
/* your second question */
.right a {
margin-left: 1em;
}
<div class="flex">
<div class="left">
<label class="control-label" for="ddlProfile">Profile:</label>
<input type="text" data-ng-model="viewModel.Name" class="form-control" />
<button>New</button>
<button>Edit</button>
</div>
<div class="right">
Open New Form
Display Detail
</div>
</div>
Why not just float the elements to the right? but you need to change the order of the elements.
.float-right{
float:right;
}
.right-space{
padding-right:10px;
}
<div>
<label class="control-label" for="ddlProfile">Profile:</label>
<input type="text" data-ng-model="viewModel.Name" class="form-control" />
<button>New</button>
<button>Edit</button>
<a class="float-right" href="https://www.w3schools.com">Display Detail</a>
<a class="float-right right-space" href="https://www.w3schools.com">Open New Form</a>
</div>
In my project, I have a dialog div with four labels, four text input, one submit button and one shutdow button.
I want it appears like this:
AAAAAAAA:input text
BBBBBBBB:input text
CCCCCCCC:input text
DDDDDDDD:input text
submit shutdown
But acturally, it does not appear format, it likes this:
AAAAAAAA:input text
BBBBBBBB:
input text
CCCCCCCC:input text
DDDDDDDD:
submit input text
shutdown
It is ugly, I don't want it like that.
Here is my css and html code:
<style>
.addDiv{width:25%;height:20%;position:absolute;top:35%;left:35%;border:2px solid #ffffff;color:white;display:none;border-radius:15px;background:rgba(0,0,0,0.7);}
.firDiv{height:80%;width:100%}
.firDiv label{float:left;margin-left:10%;margin-top:2%;width:20%}
.firDiv input{float:right;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%}
.secDiv{height:20%;text-align:center;width:100%;margin-top:5%}
</style>
<div id="addCnt" class="addDiv">
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<label>AAAAAAA:</label><input type="text" name="prdSty"><br />
<label>BBBBBBB:</label><input type="text" name="diffLvl"><br />
<label>CCCCCCC:</label><input type="text" name="repTm"><br />
<label>DDDDDDD:</label><input type="text" name="fixTm"><br />
</div>
<div class="secDiv">
<input type="submit" value="add" /><input id="sdnBt" type="button" value="shutdown" >
</div>
</form>
</div>
Who can help me?
may be something like this?
* {
box-sizing: border-box;
}
.firDiv label {
padding: 5px;
text-align: right;
float: left;
width: 17%;
}
.firDiv .control {
float: left;
width: 83%;
}
.form-group {
clear: both
}
.secDiv {
margin-left: 16%;
padding-top:10px;
}
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<div class='form-group'>
<label>AAAAAAA:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>BBBBBBB:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>CCCCCCCC:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>DDDDDDDDD:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
</div>
<div class="secDiv">
<input type="submit" value="add" />
<input id="sdnBt" type="button" value="shutdown">
</div>
</form>
Two things you need to do here. First you have to clear the floats after the first Div completed. Second is apply float left to your input fields.
.firDiv input{float:left;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%;}
.secDiv{height:20%;text-align:center;width:100%;margin-top:10%; clear:both;}
I have applied clear:both in secDiv and float:left in firDiv.
DEMO
add this to your css fiddle
.secDiv input {
width: 50%;
}
Rather try adding each input and label to their own div, something like this:
https://jsfiddle.net/ba0cL61b/5/
What this does is adds a div .row inside your firDiv div and inside the .row adds a div for your label and one for your input. So it would look like this:
<div class="row">
<div class="label">
<label>AAAAAAA:</label>
</div>
<div class="input">
<input type="text" name="prdSty">
</div>
</div>
This is a bit easier to understand and style.
I am trying to format a form using CSS. Here is my sample HTML:
<div id='login'>
<h3>Log In</h3>
<form action='/' method='post' accept-charset='UTF-8'>
<div class='centerform'>
<label for='userId'>User Id:</label>
<input id='userId' maxlength='30' />
<label for='password'>Password:</label>
<input id='password' type='password' maxlength='30' />
<label for='longer'>Longer Field:</label>
<input id='longer' maxlength='50' width='50' />
<label for='checkbox'>I have a bike:</label>
<input id='checkbox' type='checkbox' name='vehicle' value='Bike'>
<input type='submit' class='button' value='Submit' />
</div>
</form>
</div>
I want the form to look like this:
Notice that the input fields are left aligned to each other, the labels are right aligned to each other, the submit button is right aligned to the entire form, and the whole thing needs to be centered horizontally in the page. This same CSS needs to work for many different forms with variable width fields.
My current CSS looks like this:
.centerform label{
float: left;
width: 50%;
text-align: right;
/*background-color: green;*/
}
.centerform input{
font-size: 100%;
float: right;
width: 50%;
}
The only thing that gets right is the alignment of the labels. I also am not sure on how to indicate the lengths of the fields. Any width I set in the html gets overridden by the CSS.
I DO NOT want to use any hard coded pixel or percent sizes except for the variable length fields if necessary.
EDIT: I figured out how to have variable length fields by using the size attribute.
This layout might be of help to you. I have given the dimensions in percentage as asked.
.centerform label {
text-align: right;
display: inline-block;
width: 16%;
}
.centerform input {
display: inline-block;
width: 82%;
}
.button {
width: 20% !important;
float: right;
}
<div id='login'>
<h3>Log In</h3>
<form action='/' method='post' accept-charset='UTF-8'>
<div class='centerform'>
<label for='userId'>User Id:</label>
<input id='userId' maxlength='30' />
<label for='password'>Password:</label>
<input id='password' type='password' maxlength='30' />
<label for='longer'>Longer Field:</label>
<input id='longer' maxlength='50' width='50' />
<label for='checkbox'>I have a bike:</label>
<input id='checkbox' type='checkbox' name='vehicle' value='Bike'>
<input type='submit' class='button' value='Submit' />
</div>
</form>
</div>
.centerform ul{margin:0;padding:0}
.centerform ul li{list-style:none;padding:5px 0;}
.centerform label{width:18%;display:inline-block;text-align:right;}
.centerform input{display:inline-block;width:80%;text-align:left;}
.centerform input[type='checkbox']{display:inline;width:auto;}
.centerform input[type='submit'] {display:inline;width:auto;float:right;}
<div id='login'>
<h3>Log In</h3>
<form action='/' method='post' accept-charset='UTF-8'>
<div class='centerform'>
<ul>
<li>
<label for='userId'>User Id:</label>
<input maxlength='30' />
</li>
<li>
<label for='password'>Password:</label>
<input type='password' maxlength='30' />
</li>
<li>
<label for='longer'>Longer Field:</label>
<input maxlength='50' width='50' />
</li>
<li>
<label for='checkbox'>I have a bike:</label>
<input type='checkbox' name='vehicle' value='Bike'>
</li>
<li>
<label></label>
<input type='submit' class='button' value='Submit' />
</li>
</ul>
</div>
</form>
</div>
Hope this is what you are expecting, you can simply adjust .centerform label and .centerform input WIDTH to adjust and fit the form's overall width.
I have the following code and I'm trying to get both of these inputs aligned centered. Where is the problem in the code?
<div class='form'>
<form class="form-inline" role="form">
<div class="text-center input-group input-group-lg">
<span class="input-group-addon">#</span>
<input class="text-center form-control" align="middle" placeholder="username" name="username" type="text">
</div>
<div class="text-center input-group input-group-lg">
<span class="input-group-addon">P</span>
<input class="text-center form-control" align="middle" placeholder="password" name="password" type="password">
</div>
</form>
</div>
<style>
.text-center {
width: 50%;
}
div {
text-align:center;
}
</style>
Both inputs are still aligned to the left.
Inputs are not text, and cannot be centered using text-align. Target the element directly in your css, like so:
input {
display: block;
margin: 0 auto;
}
This will center the inputs within the parent element.
I'm learning some css and want to make a two column form, without any table tags and such.
This is what i have got (code from CSS Cookbook 3ed edition).
JSfiddle HERE...
HTML code:
<div class="container">
<form id="regform" name="regform" method="post" action="/regform.php">
<div id="register">
<h4>Register</h4>
<label for="fmlogin">Login</label>
<input type="text" name="fmlogin" id="fmlogin" />
<label for="fmemail">Email Address</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmemail2">Confirm Address</label>
<input type="text" name="fmemail2" id="fmemail2" />
<label for="fmpswd">Password</label>
<input type="password" name="fmpswd" id="fmpswd" />
<label for="fmpswd2">Confirm Password</label>
<input type="password" name="fmpswd2" id="fmpswd2" />
</div>
<div id="contactinfo">
<h4>Contact Information</h4>
<label for="fmfname">First Name</label>
<input type="text" name="fmfname" id="fmfname" />
<label for="fmlname">Last Name</label>
<input type="text" name="fmlname" id="fmlname" />
<label for="fmaddy1">Address 1</label>
<input type="text" name="fmaddy1" id="fmaddy1" />
<label for="fmaddy2">Address 2</label>
<input type="text" name="fmaddy2" id="fmaddy2" />
<label for="fmcity">City</label>
<input type="text" name="fmcity" id="fmcity" />
<label for="fmstate">State or Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmzip">Zip</label>
<input type="text" name="fmzip" id="fmzip" size="5" />
<label for="fmcountry">Country</label>
<input type="text" name="fmcountry" id="fmcountry" />
<input type="submit" name="submit" value="send" class="submit" />
</div>
</form>
</div>
CSS code:
label {
margin-top: .33em;
display: block;
}
input {
display: block;
width: 250px;
}
#register {
float: left;
}
#contactinfo {
padding-left: 275px;
}
Because you float one div and not the other.
With a few simple CSS changes it'll work (as long as the h4 does not span multiple lines):
#register {
float: left;
width: 275px;
}
#contactinfo {
float: left;
}
See the updated fiddle.
Here's how I'd debug (except I'd use Firebug or another Inspect/devtools): http://jsfiddle.net/PhilippeVay/yuxTA/2/
As stated by #Arjan in his answer, this is due to floating and its effects.
Uncomment the last CSS declaration for a solution that won't modify layout. Also add margin-top to both columns or padding-top if you want a vertical margin back...
Another option is to remove the margins from the h4 (although, as said in other answers, floating [or similar] both columns makes more sense).
h4 {margin: 0;}
You have to float all the div in your containter
#register {
float: left;
}
#contactinfo {
float:left;
margin-left:30px; /*increase or decrease if you like*/
}