I have a div defined inside a div, the outer div has certain opacity, this leads to the inner-element whose z-index is higher than it's container appear dim.IS there way to not make the inner div appear dim even though the outer div is div.
Here's the code
<body>
<style>
#cont{ background-color:yellow; width:900px; height:900px; margin:auto; padding:40px; position:relative; }
#top{ position:relative; background-color:orange; width:100%; padding:10px; }
#cont1{ background-color:black; width:800px; padding:20px; box-sizing:border-box; position:relative; z-index:3; opacity:0.4; }
#cont1_text{color:white; z-index:4; opacity:10; padding:20px; top:10px; }
#cont2{ background-color:blue; width:800px; padding:20px; box-sizing:border-box; position:relative; z-index:3; }
#butt{ position:relative; clear:both; }
</style>
<div id="cont">
<div id="cont1">
<div id="cont1_text">
The Last line of above code still shows the length of the array is 4, even though a element is deleted.HOW??
Well, the delete method just deletes the value from the defined position but the position still remains.It’s just like drinking coke, the liquid is gone after drinking(deleting) but the bottle remains. This creates a hole or leaves an empty space in the array.
</div>
</div>
<div id="cont2">
</div>
</div>
</body>
The one way I know of achieving the desired result is by not placing the inner div inside the outer div. Then the div containing text is placed above container div by maintaining position, top, left etc.But the problem here is that the container's height will not increase according to the length of text as div containing text is not inside the container'd div.
The output and edit can be made here https://jsfiddle.net/sum1/av6r0aug/
whenever you don't want to apply the opacity to inner child use instead rgba on background-color.
why?
because in opacity according to MDN
The value applies to the element as a whole, including its contents,
even though the value is not inherited by child elements. Thus, an
element and its contained children all have the same opacity relative
to the element's background, even if the element and its children have
different opacities relative to one another.
So, see snippet below:
#cont {
background-color: yellow;
width: 900px;
height: 900px;
margin: auto;
padding: 40px;
position: relative;
}
#top {
position: relative;
background-color: orange;
width: 100%;
padding: 10px;
}
#cont1 {
background-color: rgba(0, 0, 0, 0.4);
width: 800px;
padding: 20px;
box-sizing: border-box;
position: relative;
z-index: 3;
}
#cont1_text {
color: white;
z-index: 4;
opacity: 10;
padding: 20px;
top: 10px;
}
#cont2 {
background-color: blue;
width: 800px;
padding: 20px;
box-sizing: border-box;
position: relative;
z-index: 3;
}
#butt {
position: relative;
clear: both;
}
<div id="cont">
<div id="cont1">
<div id="cont1_text">The Last line of above code still shows the length of the array is 4, even though a element is deleted.HOW?? Well, the delete method just deletes the value from the defined position but the position still remains.It’s just like drinking coke, the
liquid is gone after drinking(deleting) but the bottle remains. This creates a hole or leaves an empty space in the array.</div>
</div>
<div id="butt">
<div id="cont2"></div>
<div id="cont2_text"></div>
</div>
</div>
Related
.btngo:hover{
bottom:3px;
}
btngo goes up for 3px when pointer is over, but if pointer is just on the edge of btngo it starts flickering, i.e. goes up and down very fast.
Is there a way to prevent this?
This effect should not start before pointer is 3px inside of btngo.
This is because once the hover takes effect and the element moves, you are no longer hovering and so the hover no longer applies...and it loops.
A solution is to maintain the hover by giving the pointer something to hover over while the pointer is apparently no longer over the element.
This can be achieved by a pseudo-element positioned at the bottom of the element (since this jitter is only an issue when hovering from below)...and expand the height of the pseudo-element on parent hover.
div {
width:100px;
height:100px;
position: relative;
border:1px solid red;
margin:2em auto;
}
div::before {
content:"";
position: absolute;
width:100%;
height:3px; /* your proposed bottom position value change */
top:100%;
background:transparent;
}
div:hover {
bottom:3px;
}
div:hover::before {
height:6px; /* position value plus height */
}
<div></div>
No additional HTML, pure CSS solution.
A solution is to create a container on where you apply the hover effect and you avoid the flicker as this container will not move.
.container {
position: relative;
display: inline-block;
margin: 10px;
}
.btngo {
width: 200px;
height: 100px;
border: 1px solid;
position: relative;
}
.container:hover .btngo {
bottom: 3px;
}
<div class="container">
<div class="btngo">
text
</div>
</div>
I have the following problem:
I have a father-div, that's position is "relative". Inside this div I have 2 son-div's. The first son-div should be positioned relative to the father-div. But the second son-div should be positioned to the whole browser-window.
My HTML and CSS:
#father
{
position:relative;
}
#son1
{
position:absolute;
left:0;
top:0;
}
#son2
{
position:absolute;
left:670;
top:140;
}
<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>
My problem now is, that the son2-div is also positioned relative to the father-div.
Is there any possibility to tell the son2-div, that it should inerhit the "position:relative" of the father and make left and top absolutely absolute to the whole window?
My problem is: I should change this inside a very big, complex HTML-structure, so it's not possible for me to change the HTML-structure.
First change
#son2
{
position:absolute;
left:670;
top:140;
}
to
#son2
{
position: fixed; /*change to fixed*/
left:670px; /*add px units*/
top:140px; /*add px units*/
}
Result:
#father
{
position:relative;
margin: 40px auto;
width:200px;
height: 200px;
background: red
}
#son1
{
position: absolute;
left:0;
top:0;
width:20px;
height: 20px;
background: black
}
#son2
{
position:fixed;
left:70px;
top:140px;
width:200px;
height: 200px;
background: green
}
<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>
This is unfortunately not possible without changing the HTML structure. An absolute positioned div will always position itself according to its first relative positioned parent.
What you could possibly do however, is change your #father element's width/height so you can still position your #son2 element correctly. This really depends on your layout and how far you can edit the #father element without destroying the layout. Or if possible, change your CSS so you do not need position: absolute; on #son1 (after which you can remove the position: relative; from your #parent).
You should keep your 2nd son div outside of your father div.
#father
{
background-color: blue;
width: 200px;
height: 200px;
}
#son1
{
position:relative;
left:0;
top:0;
background-color: red;
width: 50px;
height: 50px;
}
#son2
{
position:absolute;
left:670px;
top:140px;
background-color: yellow;
width: 50px;
height: 50px;
}
<div id='father'>
<div id='son1'></div>
<div id='son2'></div>
</div>
Don't need to use position: relative; for parent div
son1 should be position: relative; for your aim.
I highly suggest use background-color and width , height to see the position of div on your page.
Also there is a simple mistake in your code:
left:670;
top:140;
You should specify the measurement unit;
left:670px;
top:140px;
Your div#son1 is already positioned to div#father by default (static position). You don't need to set any positions to them.
#father
{
/* don't set position. it's static by default */
}
#son1
{
/* don't set position. It's positioned to #father by default */
left:0;
top:0;
}
#son2
{
position:absolute;
left:670;
top:140;
}
<div id="father">
<div id="son1"></div>
<div id="son2"></div>
</div>
Also, if you want your div#son2 to be positioned to the window (user visible area), but not the root element (body), you should set div#son2 to fixed
See this video for more details about fixed position.
https://www.youtube.com/watch?v=nGN5CohGVTI
Ok so first it's my firstquestion here on Stackoverflow and the first question ever at all...
I started learning web development two month ago and I learned HTML CSS and most of JS and some jQuery...
I never did any actual thing or experimented but now I'm trying to make my first project to start having practice..
So i've got this wrapper div and inside it I have two more divs, one is a kinda main content div and under it should be the other div which have a nice white img to blend with the overall website background.
The problem is that I cant get the second div to be under the main div and inside the wrapper div. I've simlified it here in the code... Please let me know how to do it...
Thanks and sorry if my English made you hit yourself in the face :)
The HTML
<div class="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>
The CSS
.wrapper {
width:350px;
height:350px;
background-color:black;
margin: 0 auto;
}
#first{
width:250px;
height:300px;
background-color: white;
margin: 0 auto;
}
#second{
width:350px;
height:100px;
background-color: gray;
}
Edit:
I've made a Pen on CodePen to show you what I mean better...
http://codepen.io/Avisaac/pen/DgIzi
This should be the resault only the gray div should be under the red div AND on the bottom of the red div, also i want the red div to be centered inside the wrapper. [plz notice that the wrapper should have the abillity to be centered also, as it is the main content area for my site which is centered.
I also attach a prtScr I took of my monitor to explain better:
the white square is the main content (meaning #first) the white gradient on the bottom is the second div (#second) which contains this gradient. the main content should be over the gradient so that the main content blend with the pattern background.. Hope I made it clearer
http://img841.imageshack.us/img841/2882/qg6j.jpg
The heights and widths don't match.
Try to add more to the wrapper's height, it's just 350px but if you add the two other div's height, it's 400px.
As #DevlshOne mentioned if your mean by under is overlapped try this:
.wrapper {
width:350px;
height:350px;
background-color:black;
margin: 0 auto;
position: relative;
}
#first{
width:250px;
height:300px;
background-color: white;
margin: 0 auto;
position: absolute;
top: 0; left: 0;
}
#second{
width:350px;
height:100px;
background-color: gray;
position: absolute;
top: 0; left: 0;
}
fiddle for this : here
But if your mean is one in top and other in bottom try this;
.wrapper {
width:350px;
height:350px;
background-color:black;
margin: 0 auto;
overflow: hidden /* or scroll or auto */
}
#first {
width:250px;
height:300px;
background-color: white;
margin: 0 auto;
}
#second{
width:350px;
height:100px;
background-color: gray;
}
another fiddle for this one: here
Big picture: I'm trying to make a bar graph made up of discrete units. Each unit will be a div. The bar will grow from bottom to top.
Details: I have a container div that holds all of the unit divs, or blocks. The container has a vertical-align of bottom to do this.
This is what it should look like: https://jsfiddle.net/hpf4h/1/
<div id="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
#container {
height: 100px;
width: 10px;
padding: 1px;
background-color: #00f;
display: table-cell;
vertical-align: bottom;
}
.block {
height: 10px;
width: 10px;
margin: 1px 0px 1px 0px;
background-color: #0f0;
}
That works fine, but I need the container to have a height of 100%. Which makes this happen: https://jsfiddle.net/7n7ZH/1/
I'd prefer to find a way to do this with CSS, preferably not too hacky. I'm already using jQuery for the behavior in my project, so I could use that as a last resort.
Edit: Also, all parent tags also have a height of 100%, including HTML and body.
Make #container's container element display:table like this : https://jsfiddle.net/7n7ZH/2/
html, body { height: 100%; margin:0; }
body { display:table; }
#container {
height: 100%;
width: 10px;
padding: 1px;
background-color: #00f;
display: table-cell;
vertical-align: bottom;
}
.block {
height: 10px;
width: 10px;
margin: 1px 0px 1px 0px;
background-color: #0f0;
}
<div id="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
When you use display:table-cell the browser looks for ancestor elements being display:table-row, display:table-row-group and display:table. If it can't find them, it creates pseudo elements to stand in for them. That's what's happening here.
So when you say display:table-cell; height:100%, that's 100% of the created pseudo element that is display:table. But that pseudo element is only as high as its content, and there's no way in CSS to say "make the pseudo-element have height that's 100% the height of its parent instead".
But it is possible to have a real element be display:table and set its height to 100%, in which case the browser will use that and not create the display:table pseudo element.
Applying display:table-cell; and height at the same time rarely gives the results you'd expect. I see that you're trying to use vertical-align which is probably why you added the table-cell. Try css positioning instead:
Remove display:table-cell; and vertical-align from your container.
Add height:100%; to both the body and html elements so your container has room to grow.
Set the container to position:relative; which will make it the origin of all positioned children rather than the document root (body tag). This will allow you to move your container around without screwing up the child positions.
Add a wrapper around your blocks (you could use ul, li for this rather than divs).
Position the block container as position:absolute; bottom:0;
Here's the code...
#container {
height: 100%;
width: 10px;
padding: 1px;
background-color: #00f;
position:relative;
}
.blockContainer
{
position:absolute;
bottom:0px;
}
.block {
height: 10px;
width: 10px;
margin: 1px 0px 1px 0px;
background-color: #0f0;
}
body { height:100% }
html { height: 100%}#container {
height: 100%;
width: 10px;
padding: 1px;
background-color: #00f;
position:relative;
}
.blockContainer
{
position:absolute;
bottom:0px;
}
.block {
height: 10px;
width: 10px;
margin: 1px 0px 1px 0px;
background-color: #0f0;
}
body { height:100% }
html { height: 100%}
...and here's the fiddle...
https://jsfiddle.net/kPEnL/1/
I'm unable to provide assistance with doing it in the way you have started, but taking your original big picture of trying to make a vertical progressbar, here's an alternative which uses the progressbar in Twitter Bootstrap. In its existing form, it doesn't do vertical progress bars, but this modification does.
I originally suggested using stacked bars, but this doesn't work with the vertical implementation. Instead, I've got a solution which uses CSS gradients to draw the blocks in, but still uses the normal bootstrap progress bar.
.progress.discrete {
background-image: linear-gradient(0deg,
black 0%, green 5%, green 95%, black 100%);
background-size: 100% 10%;
background-repeat: repeat-y;
}
/* Bar is used to cover up the blocks, so make it look like a background */
.progress.discrete .bar {
background-image: linear-gradient(to right, #f5f5f5, #f9f9f9);
}
I assumed you wanted your blocks to be a percentage of the bar height rather than an absolute size - this means I can't apply the gradient to the bar. Instead, it can be applied to the background, and the bar used to cover it up (i.e. set width of the bar to 100-progress%). I've also included an example which uses a fixed block size applied to the bar if that's what you wanted.
http://jsfiddle.net/BHTXZ/3/
It needs a little tidying up, but does the trick.
One for the CSS gurus - is it possible for a div to 'escape' the constrained in the boundaries of a div with fixed dimensions and overflow:hidden?
Ive recreated the example here: http://jsfiddle.net/Wt3q4/1/
Ive tried setting z-indexes on all the elements, and assigning the div with class b position:absolute with no joy.
Since .b is nested with an element that's position:relative;, setting .b to absolute won't do anything. That I know of, with the element structure you have defined, there isn't going to be a CSS work around.
Without knowing more about your layout and what you're trying to accomplish, it's difficult to advise. You could try setting up a "double container" if that makes sense, and use a jQuery function to move the element out of the overflow:hidden; element when you want to show it.
http://jsfiddle.net/Wt3q4/3/
HTML
<div class="a">
<div class="b">
<div class="c">
</div>
</div>
</div>
<div id="show" class="button">Show!</div>
<div id="hide" class="button">Hide!</div>
CSS
.a{
position:relative;
height:200px;
width:200px;
border:3px solid #f00;
background:#ccc;
}
.b{
position:relative;
height:200px;
width:200px;
background:#ccc;
overflow: hidden;
}
.c{
width:50px;
height:300px;
border:3px solid #00f;
background:#dad;
margin:30px;
position:absolute;
z-index:333;
}
.hidden{
display: none;
}
.button {
width: 50px;
padding: 5px;
text-align: center;
border: 3px solid #aaa;
background: #ddd;
margin: 20px;
float: right;
}
jQuery
$('#show').on('click', function(){
$('.c').prependTo('.a');
$('.b').addClass('hidden');
});
$('#hide').on('click', function(){
$('.c').prependTo('.b');
$('.b').removeClass('hidden');
});
Based on my understanding of CSS's block formatting context, your div.b is a child of div.a, which means that div.a sets the block formatting context for div.b. Once you set overflow: hidden on the parent element, any child content that flows out of the parent content box will not be visible.
This is more apparent if you set outline: 1px solid black on the parent container so that you can see the extend of the content box, both with overflow hidden and visible.
Your question does touch on the essentials of CSS's visual formatting model.
How about something like:
.menu > li > ul {
position: absolute; /* you still need this here */
background-color: #9F26B4;
width: 10000000000000000px;
margin-left: -100000px;
padding-left: 100000px;
list-style: none;
z-index: 1000;
top: 0;
left: 0;
}
This, for example, overflows the entire page from left to right (assuming that the body overflow-x is set to hidden) and then set element width to enormous width, margin it to negative left to fill any left content, and padding to the left to move object inside the element to desirable X position. What you think?