Cant stick a div to the bottom of his parent div - html

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.

Related

How to put a border-radius on a specific corner of a button

I have a modal that looks like this
As you can see, the modal has border-radius but the buttons at the footer dont. I want to put a border-radius at the bottom left of the purple button and a border-radius at the bottom right of the gray button. Ive tried border-bottom-left-radius and border-bottom-right-radius but it didnt work. Here`s my codes
Modal:
<!--Notifier Modal-->
<div id="notifier-modal" class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="confirm-purchase-label">
Only {{size}} out of {{totalsize}} transactions have been loaded <br>
<h5>The complete list of transactions will be sent to your email after the process.</h5>
</div>
</div>
</div>
</div>
<div class="modal-footer g-nopadding">
<div class="col-md-6 g-nopadding">
<button type="button" class="btn btn-purple btn-block col-md-6" ng-click="proceedAction();">PROCEED</button>
</div>
<div class="col-md-6 g-nopadding">
<button type="button" class="btn btn-gray btn-block col-md-6" data-dismiss="modal">CANCEL</button>
</div>
</div>
</div>
</div>
CSS:
#notifier-modal .btn,
{
border: none!important;
border-radius: 0px!important;
font-family: 'AvenirMedium';
height: 50px!important;
}
#notifier-modal .modal-md{
width: 500px;
}
.modal-footer {
padding: 15px;
text-align: right;
border-top: 1px solid #e5e5e5;
}
.modal-content{
background:#f0f0f0;
box-shadow:0px 0px 30px 0px rgba(101,101,101,0.50);
border: none;
}
.btn-gray {
color: #797979!important;
background:#e0e0e0!important;
font-size:14px!important;
border: none!important;
}
.btn-purple {
color: #f0f0f0!important;
background-color: #9c82cd!important;
font-size:14px!important;
border: none!important;
}
.modal-footer{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
overflow: hidden;
}
overflow: hidden solves it.
You can just apply a border-radius to all side of the modal that already has the top left/right border-radius, and assuming the buttons are at the bottom corners of that element, if you also add overflow: hidden to the modal with the border-radius, it will clip the corners of the buttons.
body {
background: #aaa;
text-align: center;
}
div {
background: #fff;
border-radius: 1em;
padding: 1em;
display: inline-block;
width: 200px;
height: 100px;
position: relative;
overflow: hidden;
}
button {
position: absolute;
bottom: 0;
padding: 0;
margin: 0;
width: 50%;
left: 0;
padding: .5em 0;
background: #09c;
color: white;
border: 0;
}
button:last-child {
left: auto;
right: 0;
border-left: 1px solid white;
}
<div>
<button>button</button>
<button>button</button>
</div>
To put a border-radius at the bottom left of the purple button You can use below CSS
.btn-purple {
color: #f0f0f0!important;
background-color: #9c82cd!important;
font-size: 14px!important;
border: none!important;
border-radius: 0 0 0 20px; /*20px is example you can use how much radius you want*/
}
To put a border-radius at the bottom right of the gray button. You can use below CSS
.btn-gray {
color: #797979!important;
background: #e0e0e0!important;
font-size: 14px!important;
border: none!important;
border-radius: 0 0 20px 0;
}
Add the following CSS to your buttons and adjust for each accordingly
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
The issue is simply a word-ordering one :)
Instead of border-radius-bottom-left and border-radius-bottom-right, the attributes you're looking for are border-bottom-left-radius and border-bottom-right-radius:
.modal-footer {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
Hope this helps! :)
As discussed you have border radius set to zero important in css
#notifier-modal .btn,
{
border: none!important;
border-radius: 0px!important;
font-family: 'AvenirMedium';
height: 50px!important;
}
Try commenting it out and then adding in the bottom ones.
There are many resources online but the best one i have found is
Border radius
it lets you set border radius seperatly or all at once. It also give you the CSS to use.
Cheers

CSS Pseudo Element Changes Height When Moving its Position

I'm creating tabs, where each link inside the tab list is in a div with a border - something like:
In order to hide the bottom border of the tabset below the selected tab, I'm adding a pseudo element (:after) that is the full width of the link, and whose height is the same as the bottom border (2px), and also has a bottom value of negative the border height (-2px). I'm running into an issue where, depending on the position (bottom value) of the pseudo element, its rendered height changes. If I set its height to 2px, it fluctuates between 1px and 2px, and does this every 2px when moving its position.
For example, at bottom: 3px, it looks like this (I've made the background red for illustration purposes):
But then if I set bottom: 2px, I get this:
I see this behavior on both firefox and chrome. Here's a codepen illustrating.
And here's an inline snippet of the same code:
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
a:after {
content: "";
position: absolute;
z-index: 1;
height: 2px;
left: 0;
right: 0;
bottom: 2px;
background: red;
}
a.tab2:after {
bottom: 3px;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
What's going on?
I don't know if it's still relevant or not, but I run into the same problem and I couldn't find any solution online so I came up with my own - I think this problem related either with float size of the parent element, either with something else.
But adding "transform: scaleY(1.0001);" to your pseudo-element seems to work for me
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
a:after {
content: "";
position: absolute;
z-index: 1;
height: 2px;
left: 0;
right: 0;
bottom: 2px;
background: red;
transform: scaleY(1.0001);
}
a.tab2:after {
bottom: 3px;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
Most likely your browser is zoomed in on the page. Make sure that you're viewing the page at 100% size by clicking ctrl + 0 and see if the height still changes with the position.
Other than that, if I understand correctly what you want to achieve, you're making things much more complicated than needed.
Firstly, unless you have a reason, the link-container divs are not needed. You can just put the links directly as childs of the main-container div and add borders to them directly.
Secondly, you can just use border-bottom and set it to whatever you like.
Why don't you just do it like this: Remove the pseudo element completely and reduce the border to three sides:
.link-container {
display: inline-block;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
Here it is in your snippet:
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>

Can't move elements in css divs

For some reason I have a parent div called banner which contains a number of child divs, however in my css styles sheet I can't seem to move any elements especially the "CRAFT412" logo image to my desired position within the banner. I've tried using left/right/top/bottom to move these elements but nothing seems to budge them. If anyone could help me here I'd appreciative it.
Here is my HTML for a page on my site
<!--TOP BANNER SECTION-->
<div id="banner">
<div id="logo">
<img src="images/CRAFT412 - Logo.png" width="500" height="281" alt="CRAFT412">
</div>
<div id="ip_box"></div>
<div id="ip_text">
<p>SERVER IP<P/>
<p>craft412.serveminecraft.net<P/>
</div>
<div id="teamspeak_box"></div>
<div id="teamspeak_box_2"></div>
<div id="teamspeak_text">
<p>TEAMSPEAK<P/>
</div>
<div id="teamspeak_image">
<a href="ts3server://craft412.serveminecraft.net:9987">
<img src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK">
</a>
</div>
</div>
Also here is my CSS for the same divs
/*CSS FOR ALL PAGES*/
/*BODY/WRAPPER SECTION*/
body {
background:#EEEEEE;
background-repeat: no-repeat;
background-attachment: fixed;
}
#wrapper {
width: 1750px;
margin: 0 auto;
background-color: white;
border-radius: 5px;
box-shadow: 0px 1.5px 2px 0px;
border: 1.5px solid #E0E0E0;
color: #E0E0E0;
}
/*TOP BANNER SECTION*/
#banner { height:100px; }
#logo {}
#ip_box {
width:200px;
height:43px;
background:#212121;
border-radius: 5px;
box-shadow: 1px 1px 5px;}
#ip_text {
color: white;
font-size: 15px;
}
#teamspeak_box {
width:159px;
height:43px;
background:#212121;
border-radius: 5px;
box-shadow: 1px 1px 5px;
}
#teamspeak_box_2 {
width:43px;
height:43px;
background:#313131;
border-radius: 5px 0px 0px 5px;
}
#teamspeak_text { color: white; }
#teamspeak_image {}
Give the parent div a property :
Position:relative;
Also give the property to child div:
Position:absolute;
Now you can change the places of child div inside the "BANNER" div. by using TOP , BOTTOM, RIGHT, LEFT

How to place two div's inside bootsrap columns?

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

CSS dropdown with caret

I am trying to make sth like this:
So far i have done:
Html:
<div class="panel-heading" data-toggle="collapse" href="#data2">
<div class="heading">
APPLICATION
</div>
<span class="caret icon"></span
</div>
And css:
.panel-heading {
padding: 0px;
overflow: hidden;
}
.panel-heading>.heading {
padding: 5px;
float: left;
}
.panel-heading>.icon {
float: right;
background: yellow;
height: 100%;
padding: 5px 10px;
}
.item-detail .mini-title {
font-size: 14pt;
margin-bottom:5px;
color: orange;
font-weight: bold;
margin-top: 10px;
}
.panel-heading {
background: #FF6600;
}
.panel-body {
background: #EAECED;
}
.caret {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #000000;
width:1px;
}
JSFiddle result:
JSFiddle
And i don't know how to handle right side of div.
I want to make a square a yellow color, and rest - orange. Caret should be black and centered in small square.
Thanks
You cannot add the icon class and the caret class to the same element, because you want to use the borders to create the arrow.
Try something like this:
<div class="panel-heading" data-toggle="collapse" href="#data2">
<div class="heading">
APPLICATION
</div>
<div class="icon"><div class="caret"></div></div>
</div>
(It works in your fiddle)
To center an element horizontally, I usually use the margins, set the left and right margins to 'auto', for example:
.caret { margin: 8px auto 0px auto; }
this will center your element and set its top margin to 8px