FIDDLE
I want to show a div which background is transparent, and the transparency is not affect on the top of the particular div. so i use the following html and css.
<div id="content">
<div id="transparncy"></div>
<div id="contentdata">
<div id="left">
<p></p>
</div>
<div id="right">
<p></p>
</div>
</div>
</div>
Css
#content {
width:100%;
position:relative;
color:#37475e;
}
#content #transparncy {
opacity:.4;
filter:alpha(opacity=40);
-moz-opacity:0.4;
background-color:Red;
width:100%;
min-height:250px;
height:auto;
overflow:auto;
position:absolute;
top:0px;
left:0px;
z-index:-1;
}
#contentdata {
position:relative;
width:100%;
}
#left {
width:50%;
float:left;
}
#right {
float:right;
width:35%;
}
My problem is that when i add more data in #contentdata , i can adjust the height of #transparncy proportional to that (cant increase the background transparent div). How can i solve this problem. Please help me
Instead of giving new blank div to transparency, add the same class name to id="contentdata" div and make background: rgba( 255, 0, 0, 0.4); this will not apply transparency to text but only for bg
HTML
<div id="contentdata" class="transparncy">...</div>
CSS
#contentdata .transparncy {
background: rgba( 255, 0, 0, 0.4);
width:100%;
min-height:250px;
height:auto;
overflow:auto;
position:absolute;
top:0px;
left:0px;
z-index:-1;
border-radius:5px;
}
DEMO
Correct answer updated Fiddle (http://jsfiddle.net/JyZ67/8/)
The main problem is you use the <div id="transparncy"></div> not properly
<div id="transparncy">
contentdatas....
</div>
This issue can be solved by adding bottom:0 to the #transparncy part of the CSS.
The problem is quite simple and relevant to ask
You have used min-height : 250px;
no matter what the height of inner/child conteht or div is parent div with min-height in your case #content #transparncy will take minimum height of 250px
just remove min-height and i will work as height auto :)
updated code :
#content #transparncy {
opacity:.4;
filter:alpha(opacity=40);
-moz-opacity:0.4;
background-color:Red;
width:100%;
height:auto;
overflow:auto;
position:absolute;
top:0px;
left:0px;
z-index:-1;
}
Related
I have block with gradient from top(black) to bottom(blue) with 400px width and 100% height fixed at right side of the browser. There is a button as well with 50px width and 100px height at the left and vertically middle of this block. I want same block gradient merging this button as well so it will look attached with this block. Any solution using css or js? example given in screenshot.
thanks in advance
Use background-attachement:fixed and apply the same gradient to the button:
.box {
width:400px;
position:fixed;
top:0;
right:0;
bottom:0;
background:linear-gradient(to bottom,red, blue) fixed;
}
.button {
writing-mode:vertical-lr;
font-size:23px;
position:absolute;
top:30%;
left:-30px;
padding:5px;
color:#fff;
background:linear-gradient(to bottom,red, blue) fixed;
}
<div class="box">
<div class="button">a button</div>
</div>
I have Two Div, class name .div1 & .div2 with width:20%; each. Inside .div1 I have a another div name .bar
This .bar div is positioned left 100% absolute. I am trying to make the End point of .bar div and End point of .div2 should remain in same point in different screen like this Image below:
You can see that End point of Green Bar(.bar) and Gay Div(.div2) are in Line. But if I increase or decrease the size of the screen they don't remain in line. I have tied many ways but not worked. Is this possible with only CSS ? or Need any jQuery help ? If need any jQuery can anyone help me how to do that ? because I am not good with jQuery.
Here is the HTML:
<div class="div1">
<div class="bar"></div>
</div>
<div class="div2">
</div>
This is CSS that I have used:
.div1{
background:red;
}
.div2{
background:#ccc;
margin-top:25px !important;
}
.div1,.div2{
position:relative;
width:20%;
float:left;
margin:0px 10px;
height:180px;
}
.bar{
background:green;
position:absolute;
height:20px;
left:100%;
top:0px;
width:114%;
z-index:10;
}
Thanks in advance. FIDDLE
I have a simple jsfiddle example in here http://jsfiddle.net/RQ4F2/1/
The blu box-shadow is actually overflowing, covering a little part of the elements , is it possible to make it not ?
So that elements shows a full white background inside of themselfs?
Instead of setting box-shadow for the spans, you should set box-shadow for some pseudo-element of the span (such as the :before). That way you can put the box-shadow to the back by using z-index, the spans will be on top and cover the box-shadow:
span {
width:100px;
padding:20px;
float:left;
border-radius:100%;
height:100px;
background:white;
position:relative;
}
span:before {
content:'';
position:absolute;
width:100%;
height:100%;
border-radius:50%;
left:0; top:0;
background:white;
box-shadow:0px 0px 20px 4px blue;
z-index:-1;
}
Demo.
I'm guessing that adding a margin isn't what you're after and you'd like to have the circles touching but without the fade overlapping.
To do this you could have another inner span, positioned absolute with the box shadow overridden:
<span><span class="in"> </span></span>
span.in{
position:absolute;
box-shadow:inset 0px 0px 0px 0px;
/*compensate for outer span's padding*/
margin-left:-20px; margin-top:-20px;
}
I updated you CSS by adding margin: 10px to the span tag. To get more space between the elements, please raise the margin.
You may find the updated jsfiddle here
i do have 1 parent div and 2 child div, i want to these 2 child div will be equal to its parent height or whenever the content of 1 child div expand the other child div will expand as well. I like to use % instead of px so that when you zoom it in or out the height size stay the same or if any of you guys know some tricks to work for it i will appreciate it here's my js fiddle http://jsfiddle.net/deftmagic/29Puw/4/
<div class="content-wrapper">
<div class="task-pane">
<p>sample</p>
<p>sample</p>
<p>sample</p>
</div>
<div class="tbl-div">
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
<p>sample</p>
</div>
</div>
.content-wrapper{
background:#000;
min-height:0;
width:100%;
overflow:hidden;
}
.task-pane{
background:red;
height:100%;
width:20%;
float:left;
}
.tbl-div {
background:green;
height:100%;
width:80%;
float:right;
}
note: guys i already search some of this same problem and it occur some do use table but my conflict to it is when i use table tag it can't provide to add div tag inside that i needed the most so please if there's any solution instead of table maybe some script i'll appreciate it-- thanks ^^
I've had to do this multiple times and have several tricks to pull this off, and vary depending on case. For this instance, I'd make the parent relative in size, the smaller child absolute, and the other one default so it'll cause the container to size it self.
.content-wrapper{
background:#000;
min-height:0;
width:100%;
overflow:hidden;
position: relative;
}
.task-pane{
background:red;
width:20%;
position: absolute;
top: 0; bottom: 0;
}
.tbl-div {
background:green;
width:80%;
float:right;
}
Updated fiddle: http://jsfiddle.net/29Puw/9/
.content-wrapper {
background:#000;
overflow:hidden;
position: relative;
}
.task-pane {
background:red;
min-height: 100%;
width: 20%;
left: 0px;
position: absolute;
}
And the updated fiddle.
In my template I have fixed div at the left of the main wrapper div , In the remaining portion I want to place my another div box perfectly in the middle even on window re-size.
I got the current window-size with jquery:
<script type=text/javascript>
$(window).resize(function() {
var my_window = $(window).width();
});
</script>
Html:
<div id="wrapper">
<div id="rightbox"></div>
<div id="leftbox"> </div>
</div>
Css:
#wrapper{
position:absolute;
width:100%;
height:100%;
background:green;}
#leftbox{
position:fixed;
width:100px;
height:100%;
top:0;left:0;
background:red;}
#rightbox{
position:fixed;
width:400px;
height:100px;
bottom:100px;
left:50px;
background:blue;}
Demo :http://jsfiddle.net/NpeRZ/
Now I want to place rightbox div in the middle of the green screen for any screen-resolution, so I want flexible width for this rightbox div. How to get this using jquery to set rightbox always in the middle. As well according to jquery my_window value I want to set different margin-left and margin-right for rightbox div.
for my-window 1024px :margin-left = 100px,
for my-window 768px :margin-left = 80px.
for my-window 640px :margin-left = 60px.
for my-window 480px :margin-left = 40px.
for my-window 240px :margin-left = 20px.
try this:
#rightbox{
position:fixed;
width:400px;
height:100px;
left: 100px;
right: 0px;
top: 0px;
margin: auto;
bottom:0px;
background:blue;
}
The left would be the size of of the left frame or div.
You don't have to use Jquery, just change the css of the right box to:
#rightbox{
position:fixed;
width:400px;
height:100px;
left:50%;
margin-left:-150px;
top:50%;
margin-top:-50px;
background:blue;}
Just tried it, works perfectly.