I have the following:
<div id = "top">
<div id="search_top">
<span> Search: </span>
<span> <form id= "search"> <input class = "search_textbox" type="text" name="ticker" value="" ></form> </span>
<div class="arrow-right block"> </div>
</div>
</div>
My CSS is:
#top{
display:inline-block;
}
#search{
float:left;
}
.arrow-right {
width: 0;
height: 0;
border-top: 0.6em solid transparent;
border-bottom: 0.6em solid transparent;
vertical-align:text-top;
border-left: 0.6em solid green;
cursor: pointer;
}
What I want is to have "Search" then the form then the "arrow-right". However, this all comes out on top of each other and I'm not sure why...
Thanks!
You've got a few problems in your html code, an unclosed input, a form inside a span tag, etc. If you fix those problems you'll get to something like this:
<div id="top">
<div id="search_top">
<span> Search: </span>
<form id="search">
<input class="search_textbox" type="text" name="ticker" value="" />
</form>
<div class="arrow-right block"></div>
</div>
</div>
The following CSS will achieve the alignments you want:
#top {
display:inline-block;
}
#search_top > * {
display: inline-block;
vertical-align: middle;
}
.arrow-right {
width: 0;
height: 0;
border-top: 0.6em solid transparent;
border-bottom: 0.6em solid transparent;
vertical-align:text-top;
border-left: 0.6em solid green;
cursor: pointer;
}
See this jsfiddle for a demo.
Related
Can someone explain why the element below the floated element gets displaced as if it had a padding of a width of the floated element?
HTML and CSS:
div.filter { border: 1px solid #aaaaaa; padding: 0 10px 10px 10px; width: 300px;}
div.filterTitle { float:left; padding: 5px; margin:-12px 0 0 10px; background:#fff; }
div.filter label { display:inline-block; width: 120px; font-weight: bold; margin-top: 15px;}
div.filter input[type="text"] { width: 146px; }
<div class="filter">
<div class="filterTitle">Filters</div>
<form id="filterForm" method="post" action="">
<div>
<label for="dateFrom" class="optional">Date</label>
<input type="text" name="dateFrom" id="dateFrom" value="">
</div>
</form>
</div>
FIDDLE: jsFiddle
It's not clear exactly what you are asking but based on comments I think this is just a case of clearing the float.
/* filters menu */
div.filter {
border: 1px solid #aaaaaa;
padding: 0 10px 10px 10px;
width: 300px;
}
div.filterTitle {
float:left;
padding: 5px;
margin:-12px 0 0 10px;
background:#fff;
}
form {
clear: both;
}
div.filter label {
display:inline-block;
width: 120px;
font-weight: bold;
margin-top: 15px;
}
div.filter input[type="text"] {
width: 146px;
}
<div class="filter">
<div class="filterTitle">Filters</div>
<form id="filterForm" method="post" action="">
<div>
<label for="dateFrom" class="optional">Date</label>
<input type="text" name="dateFrom" id="dateFrom" value=""/>
</div>
</form>
</div>
You might also want to look into the fieldset and legend elements which would seem to be more inline with the look you seem to be aiming for.
Fieldset # MDN
Quick JSfiddle Demo
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>
I am tying to place two divs inside a column. However, when I add margins or float property it doesn't help.
<div class="col-xs-1">
<div class="main-checkbox">
<input type="checkbox" /></div>
<div class="arrow-down"></div>
</div>
.arrow-down {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid black;
float: right;
margin-top:5px;}
.main-checkbox {
width:13px;
margin-left:10px;}
I need to get a checkbox and a little triangle next to it.
Let's see if it's work. Just add pull-left which is already existed in bootstrap css. It acts like float:left. So you don't need to write any stylesheet anymore.
<div class="col-xs-1">
<div class="main-checkbox pull-left">
<input type="checkbox" /></div>
<div class="arrow-down pull-left"></div>
</div>
Add display:inline-block; to it like:
.arrow-down {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 7px solid black;
margin-top:5px;
display: inline-block;
}
.main-checkbox {
width:13px;
margin-left:10px;
display: inline-block;
}
SEE FIDDLE
I have a form which code looks like this:
<div id="right_sidebar">
<form id="your_name" name="your_name" action="#" method="post" style="display: block; ">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<label for="msg">Comment <span class="sp"></span></label>
<textarea name="msg" id="msg" rows="7"></textarea>
<input type="checkbox" name="agree">
<label for="agree">Accept the terms</label>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
And which is styled with the following CSS:
body {
color: #333;
font: 12px Arial,Helvetica Neue,Helvetica,sans-serif;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button{
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
As you can see the checkbox is on top of the label. I would like both to be "on the same line". So, it would look like "[ ] Accept the terms". And how would I make that the text is vertically aligned to the checkbox.
How could I do both?
You can see it live here: form, checkbox failing
One option is to amend the style of the label element that follows the checkbox:
input[type=checkbox] + label {
display: inline-block;
margin-left: 0.5em;
margin-right: 2em;
line-height: 1em;
}
JS Fiddle demo.
This is, however, somewhat fragile as the margins are a little arbitrary (and the margin-right is purely to force the following button to the next line). Also the attribute-equals selector may cause problems in older browsers.
As implied, in comments, by Mr. Alien it is actually easier to target the checkbox itself with this selector-notation:
input[type=checkbox] {
float: left;
margin-right: 0.4em;
}
JS Fiddle demo.
It is because the label has display: block on it. It means that (without a float or hack) it will claim it's own line.
Change it to display: inline-block or leave the display rule away and you're done.
Seeing you did this intentionally for the first two labels, you should give the accept the terms label an id and use form #accepttermslabel {display: inline-block}. This will override the other rules et because it is more specific.
Wrap your checkbox and text within the <label> tag. Works with your current CSS as seen here in this jsFiddle Demo.
<label for="checkbox">
<input id="checkbox" type="checkbox"> My Label
</label>
Forked your fiddle here with one small change. I nested the checkbox inside the label.
<label for="agree"><input type="checkbox" name="agree">Accept the terms</label>
Hope it helps.
All you need to do is add display: inline to the label. Like this:
label[for="agree"] {
display: inline;
}
You may also have to add the following to get the Send button to stay on its own line:
button[type="submit"] {
display: block;
}
That is enough to make it work, but you could also nest the input inside the label, like this:
<label for="agree">
<input type="checkbox" name="agree" />
Accept the terms
</label>
However, most people avoid doing this because it is semantically constricting. I would go with the first method.
Set a class on the checkbox list as follows:
<asp:CheckBoxList ID="chkProject" runat="server" RepeatLayout="Table" RepeatColumns="3" CssClass="FilterCheck"></asp:CheckBoxList>
Then add the following CSS:
.FilterCheck td {
white-space:nowrap !important;
}
This ensures the label stays on the same line as the checkbox.
I had the same problem with bootstrap 3 horizontal-form, and finally found a try-error solution and works with plain html-css too.
Check my Js Fiddle Demo
.remember {
display: inline-block;
}
.remember input {
position: relative;
top: 2px;
}
<div>
<label class="remember" for="remember_check">
<input type="checkbox" id="remember_check" /> Remember me
</label>
</div>
Tried the flex attribute?
Here's your example with flex added:
HTML
<div id="right_sidebar">
<form id="send_friend" name="send_friend" action="#" method="post" style="display: block; ">
<fieldset>
<label for="from">From</label>
<input type="text" name="from" id="from" value="">
<label for="to">To</label>
<input type="text" name="to" id="to">
<label for="msg">Comment <span class="sp"></span>
</label>
<textarea name="msg" id="msg" rows="7"></textarea>
<div class="row">
<div class="cell" float="left">
<input type="checkbox" name="agree">
</div>
<div class="cell" float="right" text-align="left">
<label for="agree">Accept the terms</label>
</div>
</div>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
CSS
body {
color: #333;
font: 12px Arial, Helvetica Neue, Helvetica, sans-serif;
}
[class="row"] {
display: flex;
flex-flow: row wrap;
margin: 2 auto;
}
[class="cell"] {
padding: 0 2px;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button {
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
Flex allows for table style control with the use of divs for example.
The simplest way I found to have the checkbox and the label aligned is :
.aligned {
vertical-align: middle;
}
<div>
<label for="check">
<input class="aligned" type="checkbox" id="check" /> align me
</label>
</div>
<div>
<input class="aligned" type="checkbox" />
<label>align me too</label>
</div>
<div>
<input type="checkbox" />
<label>dont align me</label>
</div>
I know this post is old, but I'd like to help those who will see this in the future. The answer is pretty simple.
<input type="checkbox" name="accept_terms_and_conditions" value="true" />
<label id="margin-bottom:8px;vertical-align:middle;">I Agree</label>
Hi Please find the attached image this is my html & css code
<h2 style="margin:0px 0px 2px 0px" class="widgettitle3">Contact Response for your request</h2>
<div class="tablediv">
<div class="rowdiv">
<div class="celldiv">
<ul class="gallery">
<li>
</li>
</ul>
</div>
<div class="celldiv boldText">Contact Details :</div><div class="celldiv"><input type="text" style="height:28px;" maxlength="150" size="40" id="9" name="9" class="required" ></div> <div class="celldiv"> <input type="button" class="btn" value="Submit" onclick="javascript:processProvideContact('9');"> <input type="button" class="btn" value="Decline" onclick="javascript:processDecline('9');"></div>
</div>
</div>
.tablediv {
display: table;
height:100%;
width:100%;
border:1px solid red;
border-spacing: 0px; /*cellspacing:poor IE support for this*/
border-collapse: separate;
}
.celldiv {
float: left; /*fix for buggy browsers*/
display: table-cell;
position:relative;
margin:1px 1px 1px 0px;
padding:1px 1px 1px 0px;
border:1px solid black;
vertical-align: middle;
}
.rowdiv {
display: table-row;
width: auto;
}
middle and third column is not vertically center position
change your celldiv css class to
.celldiv
{
border: 1px solid black;
display: inline-block;
padding: 1px 1px 1px 0;
position: relative;
vertical-align: middle;
}