I have a parent div #modal_share that contains a floating div modal_big_hline and a unfloated div modal_big_button_container (with clear: both).
modal_big_button_container's CSS is created to allow it to be the width of the parent div minus 25px on its left and right sides.
Problem: Changing the margin-top of modal_big_button_container does not cause it to shift up/down, instead it remains in the same position, although its margin can be seen to be changing using Chrome's developer tools.
Why is this happening, and how can I solve this? Thanks!
CSS
#modal_share {
width: 565px;
height: 400px;
position: relative;
background: whiteSmoke;
padding-top: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 3px 16px #222;
-moz-box-shadow: 0px 3px 16px #222;
box-shadow: 0px 3px 16px #222;
display: none;
}
.modal_big_hline {
width: 100%;
height: 1px;
margin-top: 25px;
border-top: 1px solid #CCC;
float: left;
}
#modal_big_button_container {
height: 14px;
width: auto;
margin: 10px 25px 0px 25px;
clear: both;
}
HTML Structure
<div id="#modal_share">
<div class="modal_big_hline"></div>
<div id="modal_big_button_container"></div>
</div>
JSFiddle: http://jsfiddle.net/5LG2w/
try
modal_big_button_container{
position: relative;
top: 20px;
}
here is the fiddle - http://jsfiddle.net/5LG2w/2/.
or you can take the float out of .modal_big_hline. then your margin-top will work - http://jsfiddle.net/5LG2w/3/.
#modal_big_button_container {
height: 14px;
width: auto;
margin: 10px 25px 0px 25px;
clear: both;
background: red;
}
Looks like margin collapsing. Check these pages:
http://reference.sitepoint.com/css/collapsingmargins
http://www.howtocreate.co.uk/tutorials/css/margincollapsing
Related
I have a small "floating_Note_DIV" which I want to display on top of a textarea, as shown in the pictures. As well, I want to show a yellow_DIV below the textarea, flushed with the bottom edge of the textarea. If I do not display the floating_Note_DIV, the textarea is flushed with yellow_DIV (seen below in Image_1).
However, if I display the floating_Note_DIV, a gap appears between the textarea and the yellow_DIV ; i.e., I was thinking that if I put position: relative, and top and left/right I would get the f_N_DIV to fly over the textarea. It does seem to work however it looks like a gap is left where the "footprint" of the f_N_Div is left behind, at it's "supposed-to-be" position between tomato_DIV and yellow_DIV (see below Image_2).
If I use position "Absolute" it gets positioned w.r.t to the whole page, I am expecting the tomato_DIV to move around and so the f_N_DIV will have to be positioned w.r.t the textarea or tomato_DIV.
Any workaround? Thanks, all help appreciated ! !
the HTML is:
<div id='tomato_DIV' >
<textarea id="textarea_main" cols="40" rows="3" maxlength="300"></textarea>
<div id="floating_Note_DIV">Your Thoughts!!</div>
<div id="yellow_DIV"></div>
</div>
the relavant CSS is:
#tomato_DIV
{ background-color: tomato;
padding: 0px 0px 5px 0px;
width: 310px;
border-radius: 5px; }
#textarea_main
{ box-sizing: border-box;
margin: 5px 5px 0px 5px; padding: 2px; /* note: bottom margin is 0 to make flush with yellow div */
width: calc(100% - 10px);
height: 75px;
resize: none; outline: none;
border: 1px solid #737d96; border-radius: 3px; }
#floating_Note_DIV
{ margin: 0px 0px 0px 0px;
padding: 0px 2px 0px 0px;
position: relative; /* how to do this bit? */
right: -232px;
top: -14px;
width: 70px;
height: 11px;
font-size: 8px; font-style: normal; font-weight: bold; color: black;
text-align: right; border: 1px solid #737d96; }
#yellow_DIV
{ margin: 0px 5px 5px 5px; /* note: top margin is 0 to make flush with textarea */
border: 1px solid grey;
border-radius: 3px;
width: calc(100% -10px);
height: 30px; background-color: #fdffb6; }
Is this what you are trying to achieve?
HTML : Put the #floating_Note_DIV element inside #yellow_DIV. You could leave it where it is, but setting top CSS property would have been difficult.
CSS :
Change position property of #floating_Note_DIV from relative to absolute.
Set position property of #yellow_DIV to relative.
Set right to 0.
Set bottom to 100%.
I modified the margin-bottom to 5px to align it perfectly.
#tomato_DIV {
background-color: tomato;
padding: 0px 0px 5px 0px;
width: 310px;
border-radius: 5px;
}
#textarea_main {
box-sizing: border-box;
margin: 5px 5px 0px 5px;
padding: 2px;
/* note: bottom margin is 0 to make flush with yellow div */
width: calc(100% - 10px);
height: 75px;
resize: none;
outline: none;
border: 1px solid #737d96;
border-radius: 3px;
}
#floating_Note_DIV {
margin: 0px 0px 5px 0px;
padding: 0px 2px 0px 0px;
position: relative;
position: absolute;
right: 0;
bottom: 100%;
width: 70px;
height: 11px;
font-size: 8px;
font-style: normal;
font-weight: bold;
color: black;
text-align: right;
border: 1px solid #737d96;
}
#yellow_DIV {
margin: 0px 5px 5px 5px;
/* note: top margin is 0 to make flush with textarea */
border: 1px solid grey;
position: relative;
border-radius: 3px;
width: calc(100% -10px);
height: 30px;
background-color: #fdffb6;
}
<div id='tomato_DIV'>
<textarea id="textarea_main" cols="40" rows="3" maxlength="300">
</textarea>
<div id="yellow_DIV">
<div id="floating_Note_DIV">Your Thoughts!!</div>
</div>
</div>
I am trying to change the height and position of an anchor <a> on hover.
The CSS I am using is:
.options {
background: linear-gradient(#FFFFFF, #dbe2e8);
display: table-cell;
vertical-align: middle;
text-align: center;
width: 115px;
height: 35px;
border: 1px solid black;
border-bottom: none;
border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
}
.options:hover {
height: 39px;
top: -4px;
}
I must be doing something wrong. I have tried the :hover part with just the top: -4px; and this works, however the height: 39px; does nothing.
Thanks
Add position: relative also because top, right, bottom and left properties work only when applied with position relative, absolute or fixed.
.options {
background: linear-gradient(#FFFFFF, #dbe2e8);
display: table-cell;
vertical-align: middle;
text-align: center;
width: 115px;
height: 35px;
border: 1px solid black;
border-bottom: none;
border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
position: relative;
}
.options:hover {
height: 39px;
top: -4px;
}
Link
While Muhammad Usman's answer works just fine, I'd like to offer an alternative.
If you replace the top:-4px with translateY(-4px) that will work regardless of the "position" property of the element and/or the "top" property.
(Useful if for example the "top" property is a percentage or set dynamically by JS and you want to move it by 4 pixels no matter what the top is)
.options {
background: linear-gradient(#FFFFFF, #dbe2e8);
display: table-cell;
vertical-align: middle;
text-align: center;
width: 115px;
height: 35px;
border: 1px solid black;
border-bottom: none;
border-radius: 8px 8px 0px 0px;
-moz-border-radius: 8px 8px 0px 0px;
}
.options:hover {
height: 39px;
transform:translateY( -4px);
}
I'm basically trying to do a "CSS-triangle" (you know, an element where the entire shape is generated using borders) but instead of a triangle shape, I want a square with rounded corners on the left side and straight corners on the right side.
This works fine in Chrome but IE11 creates a weird artefact at the top-left corner. (a background-colored oval right where the rounded corner should be. really strange!)
Is there a way to create a workaround for IE11?
.RoundedElement {
width: 0;
height: 0;
border-top: none;
border-bottom: 50px solid transparent;
border-right: 20px solid #00a2d4;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
}
http://codepen.io/anon/pen/QbjaOG
I think you are over complicating the problem here.
Try the following:
body { margin: 50px; }
.RoundedElement {
width: 30px;
height: 50px;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
background-color: #F7A824;
}
<div class="RoundedElement">
</div>
Why not use the regular background-color with border radius that works by default ?
If you still want to use border try the following:
body { margin: 50px; }
.RoundedElement {
width: 20px; //Added 20px to fix in FF.
height: 0px;
border-top:30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 40px solid #00a2d4;
position: relative;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
}
<div class="RoundedElement">
</div>
tweaking the code to:
body { margin: 50px; }
.RoundedElement {
width: 10px;
height: 0;
border-top:30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 10px solid #00a2d4;
position: relative;
right: 20px;
border-radius: 15px 0px 0px 15px;
border-color: #F7A824;
z-index:2
}
pen
works in FF (should also in ie but not tested)
There is no need to do it like this. Use border-radius (support here). Also what you have is not a square, this is.
div {
width: 100px;
height: 100px;
border-radius: 50% 0px 0px 50%;
background: #000;
}
<div></div>
It not work because your div size is 0: width: 0; height: 0;
I have a progression bar that when I increase the width of it, it goes from left to right . Like 0% it's on the left of my bar and 100% it's the far right of my bar.
I wonder if it's any way that I could make my progress bar "grow" from right to left.Something like "-100%".
This is my html code:
<div class="completion-bar1-wraper">
<div class="completion-bar1"></div>
</div>
And the css:
div.completion-bar1-wraper{
height: 12px;
border: 1px solid #aaa;
border-radius: 7px;
background: #eee;
box-shadow: 0px 0px 5px 0px #C2C2C2 inset;
margin-right: 4%;
margin-left: 3%;
margin-top: 19%;
}
div.completion-bar1{
height: 8px;
margin: 1px;
border-radius: 7px;
background: #cf7400;
width: 70%;
}
I set up a fiddle with my bar too : Progress Bar
You can do it easily with positioning. Set the container to be position: relative;, absolutely position the progress bar and then specify right: 0; to place it against right edge of the container.
div.completion-bar1-wraper {
/*...*/
position: relative;
}
div.completion-bar1 {
/*...*/
width: 70%;
position: absolute;
right: 0;
}
Here is a fiddle.
There's many ways to do this, so to answer your question, yes.
I've forked your code and adjusted css slightly as follows: http://jsfiddle.net/adamfullen/69mJ8/
div.completion-bar1-wraper{
height: 12px;
border: 1px solid #aaa;
border-radius: 7px;
background: #eee;
box-shadow: 0px 0px 5px 0px #C2C2C2 inset;
margin-right: 4%;
margin-left: 3%;
margin-top: 19%;
position: relative;
}
div.completion-bar1{
position: absolute;
right:0;
height: 8px;
margin: 1px;
border-radius: 7px;
background: #cf7400;
width: 70%;
}
Just edit the completion-bar1 to following
div.completion-bar1{
float: right;
height: 8px;
margin: 1px;
border-radius: 7px;
background: #cf7400;
width: 70%;
}
I have two DIVs inside each other. The inner DIV contains an image. I'm trying to add a floating text over that image in the top right corner. I can't figure out how to make that text to use inner DIV's positions instead of the outer one.
Here is what I got so far
CSS:
html {
background: #EEF0F3;
}
.outer {
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin: 0 auto;
padding:20px 0px;
position: relative;
width: 680px;
text-align: center;
margin-bottom: 20px;
}
.inner {
position: relative;
}
h2 {
position: absolute;
top: 0px;
right: 0px;
}
h2 span {
color: white;
font: bold 24px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgba(255, 0, 0, 0.5);
padding: 0px 10px;
}
HTML:
<div class="outer">
<div class="inner">
<h2><span>Title 1</span></h2>
<img src="1.jpg">
</div>
</div>
And here is the code in JSFiddle
http://jsfiddle.net/UM8ea/
If I set positioning to:
h2 {
position: absolute;
top: 20px;
right: -20px;
}
I get the desired result, but that feels like workaround rather than a solution.
Its very simple.
Check this fiddle
.outer {
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin: 0 auto;
padding:20px 0px;
position: relative;
width: 680px;
text-align: center;
margin-bottom: 20px;
}
for h2
h2
{
position: absolute;
top: 5px;
right: 20px;
margin:0;
}
You have this behaviour because .outer is wider than the image, and then, .inner too. The h2 is positioned related to .inner, and go to right.
If you set .outer to have 640px width (as the image) you get the desired result.
Other solution is to set margin: 0 20px; on .inner
If you want the text positioned all top the image you can set h2 {margin:0;} in both cases.