All I want is to have the button in the second box displayed as a block element so that it expands to fill the container -- but when I set the button element to display:block -- it overflows the container (parent), see the following:
http://jsfiddle.net/MgcDU/7747/
Any ideas? What am I missing?
My CSS:
a:link { color:#0040FF;text-decoration:none; }
a:visited { color:#0040FF; }
a:hover { background-color:#82B6EA;color:#FFFFFF;text-decoration:none; }
a:active { color:#0040FF; }
body { color:black;font-style:normal;font-size:10pt;font-family:Arial, Helvetica, sans-serif;padding:0;margin:0; }
.body_1 { margin-top:10px;margin-left:20px;margin-right:20px;margin-bottom:10px; }
.grid_1 { margin:8px 0 0 0;padding:0;overflow:hidden; }
.grid_1_left { float:left;width:240px;margin:0;padding:0; }
.grid_1_right { margin:0 0 0 245px;padding:0 0 0 8px; }
.grid_1_right_bld { margin:0 0 0 245px;padding:0 0 0 8px;border-left:2px #AAAAAA dotted; }
.btn, a.btn
{
background-color:#D3D7D7;color:#333333;display:inline-block;padding:6px 12px;margin-bottom:0;text-align:center;white-space:nowrap;vertical-align:middle;
cursor:pointer;border:1px solid transparent;border-color:#D3D7D7;
-webkit-transition:border-color 0.3s ease-out, background-color 0.3s ease-out;
-moz-transition:border-color 0.3s ease-out, background-color 0.3s ease-out;
transition:border-color 0.3s ease-out, background-color 0.3s ease-out;
}
.btn:hover,
.btn:focus,
.btn:active { background-color:#AEB1B1;color:#333333;border-color:#AEB1B1;text-decoration:none;outline:0; }
.btn_success, a.btn_success { color:#FFFFFF;border-color:#64b92a;background-color:#64b92a; }
.btn_success:hover,
.btn_success:focus,
.btn_success:active { color:#FFFFFF;border-color: #50a118;background-color:#50a118; }
.btn_lg { padding:8px 14px;font-size:12pt; }
.btn_block { display:block;margin:0;padding:0;width:100%; }
.box_1 { border:1px solid #5C6666;margin:0; }
.box_1_body { background-color:#FFFFFF;border-top:1px solid #5C6666;margin:0;padding:6px; }
.box_1_title { background-color:#5C6666;color:#FFFFFF;margin:0;padding:6px;text-align:center; }
My HTML
<div class="body_1">
<div class="grid_1">
<div class="grid_1_left">
<div class="box_1">
<div class="box_1_title">Box 1</div>
<div class="box_1_body">
Stays in the Box
</div>
</div>
<br>
<div class="box_1">
<div class="box_1_title">Box 2</div>
<div class="box_1_body">
Does NOT stay in the Box
</div>
</div>
</div>
<div class="grid_1_right">
main body content
<br>
Btn 1
Btn 2
<br><br>
Note how the buttons can align without being stacked (ie: inline-block) must remain in .btn selector class
</div>
</div>
</div>
This is because you are setting the width on .btn to 100% and you also have padding, which will add the padding on top of the 100% width. This is making the block spill out of the parent element.
What you want is this (display:inline-block; has changed to display:block;):
.btn,
a.btn {
background-color: #D3D7D7;
color: #333333;
display: block;
padding: 6px 12px;
margin-bottom: 0;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-color: #D3D7D7;
-webkit-transition: border-color 0.3s ease-out, background-color 0.3s ease-out;
-moz-transition: border-color 0.3s ease-out, background-color 0.3s ease-out;
transition: border-color 0.3s ease-out, background-color 0.3s ease-out;
}
and then remove the width:100% from .btn_block
EDIT
Here is an updated jsfiddle
http://jsfiddle.net/932Fa/
It is all about the BOX-SIZING CSS property. The new standards seem counter-intuitive to me. Bootstrap and other frameworks will set everything to {box-sizing: border-box;}, but when you drop to your own CSS, the default these days is {box-sizing: content-box;}.
Either deal with your Paddings & Borders explicity, or just put
{box-sizing:border-box;}
at the top of your CSS and then boxes will 'behave'.
Problem solved !!
Added the following to get higher CSS specificity and everything works as it should now.
.btn_block, a.btn_block { display:block;width:100%;padding-right:0;padding-left:0; }
See updated JSFiddle: http://jsfiddle.net/U8YhJ/1/
Related
Using CSS transitions, I'd like to add a delay on hover, of 0.5s, in the class "activator".
After these 0.5s, it should change "content-l1" class from display:none to display:block
I've tried with this code, but doesn't work at all.
.content-l1 {
transition: 0s display;
}
.activator:hover>.content-l1 {
display: block;
transition-delay: 0.5s;
}
<div class="activator">
<div class="content-l1"> // initially: display:none whatever content here
</div>
</div>
display do not animation for transition. u can use opacity
.content-l1 {
transition: 0s;
opacity: 0;
}
.activator:hover>.content-l1 {
opacity: 1;
transition-delay: 0.5s;
}
<div class="activator">
fjhfjh
<div class="content-l1">
afsfas
</div>
</div>
but the block 'content-l1' takes place. we need use position
.activator {
position: relative;
}
.content-l1 {
position: absolute;
background-color: white;
padding: .4em;
border: 1px solid black;
transition: 0s;
opacity: 0;
}
.activator:hover>.content-l1 {
opacity: 1;
transition-delay: 0.5s;
}
<div class="activator">
fjhfjh
<div class="content-l1">
afsfas
</div>
</div>
qwewertrtw
I am doing a transition where it fades into transparent white, when a user is hovering an image.
My problem is that I need to change the color, that it fades to, to black. I have tried just simply adding background:black; to the class that contains the transition, but it does not work unfurtunately, it's still fading into white transparent.
The css code I am using is:
.hover:hover {
opacity: 0.2;
}
.item-fade {
background: black;
opacity: 0.8;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
<p>Hover image, the white opacity needs to be black :/</p>
<img src="//placehold.it/100x100" class="hover item-fade" />
Wrap your image with a span element with a black background.
.img-wrapper {
display: inline-block;
background: #000;
}
.item-fade {
vertical-align: top;
transition: opacity 0.3s;
opacity: 1;
}
.item-fade:hover {
opacity: 0.2;
}
<span class="img-wrapper">
<img class="item-fade" src="https://via.placeholder.com/100x100/cf5" />
</span>
It's not fading to "black transparent" or "white transparent". It's just showing whatever color is "behind" the image, which is not the image's background color - that color is completely hidden by the image.
If you want to fade to black(ish), you'll need a black container around the image. Something like:
.ctr {
margin: 0;
padding: 0;
background-color: black;
display: inline-block;
}
and
<div class="ctr"><img ... /></div>
http://jsfiddle.net/6xJQq/13/
.container {
display: inline-block;
padding: 5px; /*included padding to see background when img apacity is 100%*/
background-color: black;
opacity: 1;
}
.container:hover {
background-color: red;
}
img {
opacity: 1;
}
img:hover {
opacity: 0.7;
}
.transition {
transition: all .25s ease-in-out;
-moz-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
Please note that the problem is not white color. It is because it is being transparent.
When an element is made transparent, all of its child element's opacity; alpha filter in IE 6 7 etc, is changed to the new value.
So you cannot say that it is white!
You can place an element above it, and change that element's transparency to 1 while changing the image's transparency to .2 or what so ever you want to.
I have the following CSS:
.foo
{
height:100px;
overflow:hidden;
-webkit-transition: height 200ms;
-moz-transition: height 200ms;
-o-transition: height 200ms;
transition: height 200ms;
}
.foo.open
{
height:auto;
}
When .foo has an auto height, it will be a height of ~550px depending on the content.
I add the class open using jQuery, and I would expect to see the height change from 100px to ~550px in 200ms using CSS3 transitions.
However what exactly happens is that the height changes from 100px to 0px, then jumps to ~550px.
-- See Live Demo --
If I instead change .open to height:550px then this works fine, however the content length will vary and therefore I need to set the height to auto, and not a fixed pixel height.
Why is the div closing instead of sliding to ~550px, and how can I resolve this animation issue?
I don't think you can transition to height: auto; with css transitions. A workaround, which isn't perfect is to transition max-height instead and set it to something greater then it will ever get. Depending on what value you set it to will have a effect on the transition speed, but I've set it to max-height: 1000px; for the sake of simplicity.
Here's a demo to show you what I mean.
Code from demo:
.foo
{
max-height:100px;
overflow:hidden;
-webkit-transition: max-height 200ms;
-moz-transition: max-height 200ms;
-o-transition: max-height 200ms;
transition: max-height 200ms;
}
.foo.open
{
max-height:1000px;
}
It's not an elegant solution, but I hope it helps.
This isn't the most elegant solution, but it gets around the auto height issue.
On click of the button, calculate the height the div will be with auto height by doing:
var openHeight = $foo.addClass("heightauto").height();
Then remove this class straight afterwards, and apply a height to the div of openHeight:
$foo.removeClass("heightauto");
$foo.height(openHeight);
The heightauto class also needs to override the CSS3 transitions so that the height is changed instantly:
.foo.heightauto
{
height:auto;
-webkit-transition:0;
-moz-transition:0;
-o-transition:0;
transition:0;
}
See Live Demo: http://jsfiddle.net/AbPEx/4/
This is still hacky though, so if there is a more elegant solution then I'm open to suggestions
It is not possible to use transitions with height:auto.
The trick with max-height is a pretty good solution but has some inconvenience, especially a weird delay if max-height is much higher than the real height.
Here is the trick I use : http://jsfiddle.net/g56jwux4/2/
Basically it is two imbricated DIVs translating in opposite directions. Take a look a the code at jsfiddle because my english is not good enough to explain it clearly.
HTML part:
<body>
<p>Technicaly this dropdown menu looks like a simple height transition.</p>
<p>But this pure css code also works this a variable number of choices in menu, working around the "height:auto" not taken into account by css transitions.</p>
<input type="checkbox" id="menuOpen"></input>
<label id="bouton" for="menuOpen"><span>Click on me !</span>
<div id="menu">
<div id="masque">
<div class="choix" id="choix1">Choix 1</div>
<div class="choix" id="choix2">Choix 2</div>
<div class="choix" id="choix3">Choix 3 très très long pour voir la taille finale du menu</div>
<div class="choix" id="choix4">Choix 4</div>
<div class="choix" id="choix5">Choix 5</div>
<div class="choix" id="choix6">Choix 6</div>
</div>
</div>
</label>
</body>
CSS Part :
body {
font-family: sans-serif;
}
#menuOpen {
display: none;
}
#bouton {
position: absolute;
left: 100px;
top: 100px;
width: 200px;
height: 30px;
background-color: lightgray;
cursor: pointer;
}
#bouton > span {
color: black;
padding: 6px;
line-height: 30px;
}
#menu {
position: absolute;
top: 100%;
overflow: hidden;
min-width: 100%;
transition: transform 0.3s linear 0s, visibility 0.3s linear 0s;
transform: translateY(-100%);
visibility: hidden;
color: white;
}
#menuOpen:checked + #bouton > #menu {
transform: translateY(0%);
visibility: visible;
transition: transform 0.3s linear 0s, visibility 0s linear 0s;
}
#menuOpen:checked + #bouton > #menu > #masque {
transform: translateY(0%);
}
#masque {
position: relative;
background-color: gray;
transform: translateY(100%);
transition: transform 0.3s linear 0s;
}
.choix {
white-space: nowrap;
padding: 3px 6px;
}
.choix:hover {
background-color: darkgray;
}
There is a small bug in there, I already fix it. by adding min-height: 100px;
.foo {
min-height: 100px;
height: 100px;
...
}
There you won't see it go back to 0px.
I want a div to float next to my input but instead it's floating over top of it, and I'm not sure why. It's as if the div is set to use absolute positioning. I think I'm probably just overlooking something silly, but what is it?
html:
<input type="file" id="files" name="file" />
<div id="progress_bar"><div class="percent">0%</div></div>
css:
input { float: left;}
#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
//clear: both;
opacity: 0;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
opacity: 1.0;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}
I have an example here:
http://jsfiddle.net/sWrvU/
which is based on the read files demo on html5rocks http://www.html5rocks.com/en/tutorials/file/dndfiles/
Uncomment clear:both to see the demo actually work (i.e. you can press the button because there's not a div on top of it), but then obviously the div still isn't floated next to the input.
Using display: block instead of opacity removes the transition, which I'm guessing you're trying to keep.
The Progress bar isn't "floating over top" so much as the input is floating underneath. If you float the progress bar as well, things should go a little better: http://jsfiddle.net/cjc343/sWrvU/24/
I changed it to use display instead of opacity since opacity means the element is still there even though it is transparent.
CSS
input {
float: left;
}
#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
display:none;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
display:block;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}
I am working on a page which comprises of the divs floated on same direction with each having specified width so as to create a grid. I was trying the -webkit scale effect in order to have a zooming effect on the any hovered div along with other divs having their opacity reduced.
The problem arises when among the divs stacked together, when the div that comes first in order is hovered, it is partially overlapped the its successor div(having reduced opacity) due to zooming
here's an example code
html
<div id="div1" class="tile">Content 1</div>
<div id="div2" class="tile">Content 2</div>
<div id="div3" class="tile">Content 3</div>
css
.tile{
width:100px;
margin:6px;
float:left;
height:100px;
margin-right:0px;
margin-bottom:0px;
-webkit-transition: all .1s ease-in-out .1s;
-moz-transition: all .1s ease-in-out .1s;
}
.tile:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-moz-box-shadow: 0 0 3px 1px #fff;
-webkit-box-shadow: 0 0 3px 1px #fff;
box-shadow: 0 0 3px 1px #333;
}
and jquery
function tile_mouseover()
{
$(this).siblings('.tile').stop(true,true).animate({'opacity':'0.5'},300);
$(this).stop(true,true).animate({opacity:1},200)
}
On implementing the above the code,
when div1 is hovered, its scaled, and is overlapped by div2.
Any possible solutions?
I think this should work.
.tile {
position: relative;
}
.tile:hover{
z-index:2;
}
you're declaring a margin twice on your .tile class, fix it like this:
.tile{
width:100px;
margin:6px;
float:left;
height:100px;
-webkit-transition: all .1s ease-in-out .1s;
-moz-transition: all .1s ease-in-out .1s;
}