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
Related
I'm looking at a text boxes here. They have a very nice effect. How can I achieve same effect with CSS. This is what I'm able to get but it's not close to that.
What I'm trying to achieve:
By default the textbox has greyish outline and when on focus it changes to blue color. I want a similar effect. I tried using outline property and shadows (in code below) but couldn't get that.
My attempt to get that effect (https://jsfiddle.net/7jphmdzf/):
#tags {
width:500px;
height:30px;
border: 1px solid grey;
border-radius: 10px;
}
input:focus {
outline: 0;
box-shadow: 0 0 0 0.7pt blue;
}
<div class="ui-widget">
<input id="tags">
</div>
You can use the following solution (https://jsfiddle.net/7jphmdzf/1/):
#tags {
outline:0;
width:500px;
height:30px;
border: 2px solid #ccc;
border-radius: 8px;
font-size:24px;
padding:8px 12px;
}
#tags:focus {
outline:0;
border: 2px solid #0097cf;
border-radius: 8px;
}
<div class="ui-widget">
<input id="tags" placeholder="Tags">
</div>
To change the color of the outline on :focus you have to set the border. There is no need for styling the outline or box-shadow of the <input>.
Try This,
#tags {
width:200px;
height:30px;
border: 2px solid grey;
border-radius: 10px;
}
#tags:focus {
outline: 0;
border: 2px solid #109cdf;
}
<div class="ui-widget">
<input id="tags">
</div>
HTML:
<!-- start setup section -->
<div class='photo-setup'>
<div class='setup-head'>
<div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
<div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
</div>
<div class='photo-section'>
<img src='' width='600' height='600' alt='photo'>
</div>
<div class='tag-section'>
Tags : <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
</div>
<div class='commit-section'>
<a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
</div>
</div>
<!-- end setup section-->
CSS:
img { border: none; }
.photo-setup {
width: 600px;
height: auto;
margin: 0 auto;
}
.setup-head {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
border-top: 1px solid #cacece;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 1em;
}
.photo-name { float: left; }
.photo-date { float: right; }
.photo-section {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
}
Result: https://jsfiddle.net/rw5beqtk/
Question 1: Why is the top and bottom padding in setup-head not the same?
Question 2: Why is the border of photo-section not the same as setup-head?
Question 1: Why is the top and bottom padding in setup-head not the
same?
Because your child element is floated and as such taken out of the normal flow. Setting overflow:hidden on setup-head will fix that.
.setup-head {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
border-top: 1px solid #cacece;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 1em;
overflow: hidden;
}
Question 2: Why is the border of photo-section not the same as
setup-head?
It is the photo-section's img child's border, so you get double. When an img element doesn't have a valid src, it gets a border representing the image size, which won't go away with border: none.
Sample snippet with an image and overflow: hidden
img {
border: none;
vertical-align: top;
}
.photo-setup {
width: 600px;
height: auto;
margin: 0 auto;
}
.setup-head {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
border-top: 1px solid #cacece;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 1em;
overflow: hidden;
}
.photo-name { float: left; }
.photo-date { float: right; }
.photo-section {
border: 1px solid #cacece;
overflow: hidden;
}
<div class='photo-setup'>
<div class='setup-head'>
<div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
<div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
</div>
<div class='photo-section'>
<img src='http://placehold.it/600/eee' width='600' height='600' alt='photo'>
</div>
<div class='tag-section'>
Tags : <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
</div>
<div class='commit-section'>
<a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
</div>
</div>
Questions 1:
You have a float left and float right on photo-name and photo-date as such taken out of the normal flow, you have to add overflow:auto to the parent class so it does not lose its padding state.
img { border: none; }
.photo-setup {
width: 600px;
height: auto;
margin: 0 auto;
}
.setup-head {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
border-top: 1px solid #cacece;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 1em;
overflow: auto;
}
.photo-name { float: left; }
.photo-date { float: right; }
.photo-section {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
}
<!-- start setup section -->
<div class='photo-setup'>
<div class='setup-head'>
<div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
<div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
</div>
<div class='photo-section'>
<img src='' width='600' height='600' alt='photo'>
</div>
<div class='tag-section'>
Tags : <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
</div>
<div class='commit-section'>
<a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
</div>
</div>
<!-- end setup section-->
Question 2: It is the img childs border which the browser adds to it if there is not a src for it and can not be overridden. Easy fix for you though is to remove (as you already have a border round the image)
.photo-section {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
}
from your code
img { border: none; }
.photo-setup {
width: 600px;
height: auto;
margin: 0 auto;
}
.setup-head {
border-left: 1px solid #cacece;
border-right: 1px solid #cacece;
border-top: 1px solid #cacece;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
padding: 1em;
overflow: auto;
}
.photo-name { float: left; }
.photo-date { float: right; }
<!-- start setup section -->
<div class='photo-setup'>
<div class='setup-head'>
<div class='photo-name'>Photo Name : <input type='text' placeholder='Photo Name' name='photo-name' title='Photo Name'></div>
<div class='photo-date'>Photo Date : <?php echo date('F j, o', time()) ?></div>
</div>
<div class='photo-section'>
<img src='' width='600' height='600' alt='photo'>
</div>
<div class='tag-section'>
Tags : <input type='text' placeholder='Tags e.g. (#beach #park #dog)'>
</div>
<div class='commit-section'>
<a class='save' href='#'>Save</a><a class='cancel' href='#'>Cancel</a>
</div>
</div>
<!-- end setup section-->
Add overflow: hidden; to .setup-head or clear your floats.
They are the same. You see a 2px border because the image is missing.
I am working on a tabbing system for my website like in the image below.
Here is my mark-up and LESS code:
<div class="tabsWrapper">
<div class="tabbar">
<div class="tabbarButton current" id="tArticles">
<img class="icon" src="/res/img/articles_archive.png" alt=""/>
<span class="caption">Arhivă de articole</span>
</div>
<div class="tabbarButton" id="tFiles">
<img class="icon" src="/res/img/files_archive.png" alt=""/>
<span class="caption">Arhivă de fișiere</span>
</div>
</div>
<div class="tabsContent">
<div class="tab current" id="articles"></div>
<div class="tab" id="files"></div>
</div>
</div>
LESS (see full code here)
.tabbar {
display: block;
position: relative;
overflow: hidden;
> .tabbarButton {
height: 45px;
border-top: 1px solid #bfc2c2;
border-right: 1px solid #bfc2c2;
&:first-child { border-left: 1px solid #bfc2c2; }
&:hover {
box-shadow: inset 0 3px 0 #bfc2c2;
}
&.current {
box-shadow: 0 1px 0 #f5f8f8, inset 0 3px 0 #a7aaaa;
border-top: 1px solid #a7aaaa;
background-color: #f5f8f8;
}
}
}
> .tabsContent {
border-bottom: 1px solid #bfc2c2;
border-left: 1px solid #bfc2c2;
border-right: 1px solid #bfc2c2;
border-top: 1px solid #bfc2c2;
background-color: #f5f8f8;
}
How can I make the currently active tab button to stay in front of the others?
The first thing I would try is to add a :after or :before to the tab, with the same width and same background-color but on the forground.
To be sure, if tabbar is positonned relatively, you can positione your :after absolutely so that it's always ok !
I don't understand why your box-shadow-solution doesn't work..
.tabbarButton.current:after
Did you tried to pass your current tab on the forground ? (z-index, translateZ...)
I figured out myself how to achieve the effect I want: by faking the bottom border of the tabs-strip:
Modify the .tabsContent to not have border-top, then provide .tabbar class with a :after pseudo-element:
.tabbar {
// truncated code
&:after {
position: absolute;
display: block;
content: '';
width: 100%;
bottom: 0;
left: 0;
z-index: 1;
border-bottom: 1px solid #bfc2c2;
}
}
It is important to change the z-index of .tabbarButton to 2 (for example) so that it stays in front of the .tabbar:after.
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.
hello everyone i am trying to create
a div that will Functioned as the bottom border of
this form, like this:
The problem is that it only works if I use
margin-top and i dont want to use that.
this is what i am getting now:
my css:
#form_div
{
position: absolute;
top:67px;
left:450px;
height:550px;
-moz-box-shadow: 2px 3px 45px #000000;
-webkit-box-shadow: 2px 3px 45px #000000;
box-shadow: 2px 3px 45px #000000;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
#bottum_border
{
border-bottom:1px solid red;
cursor: e-resize;
margin-top: 43px;
}
my html:
<div id="form_div" class="black_background_solid" >
<div id="form_headline" class="light_black">Contact Us</div>
<div id='n_1_conteiner' class='field_conteiner'>
<div id='n_1_lbl' class="field_name">Name:</div>
<input id='n_1_textbox' class='textbox gray white_text' type='text'/>
<a id='n_1_edit_btn' class='edit_button'>Edit</a>
<a id='n_1_drop_btn' class='drop_button'>Drop</a>
<div id='n_1_border' class='fakeHr line_border_color_black'></div>
</div>
<div id='n_5_conteiner' class='field_conteiner'>
<div id='n_5_lbl' class='field_name'>Message:</div>
<textarea id='n_5_tbx' class='text_area gray white_text' rows="2" cols="30">
</textarea>
<a id='n_5_edit_btn' class='edit_button'>Edit</a>
<a id='n_5_drop_btn' class='drop_button'>Drop</a>
</div>
<div id='results_div'>
<div id='submit_btn' class="button red_gradient" onclick="Validate()">
Submit</div>
</div>
<div id='bottum_border'></div>
</div>
exact codes pasted in fiddle http://jsfiddle.net/z982S/
Try removing height (Use padding/margin instead) from: #form_div & add following to #bottum_border
#bottum_border
{
position:relative;
bottom: 0;
}
#bottum_border
{
border-bottom:1px solid red;
cursor: e-resize;
position: absolute;
bottom: 0px;
width: 100%;
}
Check fiddle http://jsfiddle.net/Zd4fr/
If you want something like 1st image then Why don't you use border-bottom directly to the form_div?
#form_div
{
border-bottom:1px solid red;
}
You need something like this:
#form_div
{
position: relative;
}
#submit_btn
{
position: absolute;
bottom:0;
}
This positions the button to the bottom of the form.