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
Related
I'm making a website for my world history class and I am attempting to make a heading for the website. Unfortunately, the heading overlaps the first paragraph. Is there any way I can fix this without changing the position? I need the position to be fixed. This is the html for the header:
<div id="menu">
About
Donatello
Michelangelo
Martin Luther
Henry VIII
Mary Wollstonecraft
Francis Bacon
Isaac Newton
Galileo Galilei
Marquis de Lafayette
</div>
This is the css:
#menu{
padding:30px;
background:#000;
border:5px solid #000000;
border-radius:0px;
position:fixed;
z-index:1;
right:0px;
left:0px;
top:0px;
text-align:center;
}
Thank you for the help.
If you have to keep the position fixed for some reason you can give the menu a fixed height and add that value as a top margin to the paragraph.
#menu{
...
max-height: 100px;
}
p{
margin-top: 100px;
}
If you don't need position: fixed (because technically you don't if you just want to keep your header up top) you can use position: sticky as s.kuznetsov mentioned in comments or you can just take out position, right, left, and top properties. The header will stay at the top and the paragraph will show.
#menu{
padding:30px;
background:#000;
border:5px solid #000000;
border-radius:0px;
z-index:1;
text-align:center;
}
I have this simple table where if I click on a column - I need to make the whole chosen column ( from top to buttom ) as selected.
I don't have a problem with colors or html , but I do have a problem with the box-shadow css property.
This is how it should look :
Please notice "right-shadow" and "left-shadow" (bottom- I don't care)
But When I tried to make it ( JSBIN SAMPLE) via JQ :
$("#tblPlan td:nth-child(2)").addClass('shadow')
Where :
.shadow
{
box-shadow:0px 0px 10px black;
}
It applies it to all borders ( As it should obviously ) (including inside ):
Question
How can I achieve to a solution where only left and right ( bottom I don't care) - will be shadowed ?
jsbin
I updated the jsFiddle to use a inset-box-shadow with :before and :after elements, as shown in this great solution.
I think it's the best looking css-only solution for your problem, most other hacks have very round shadows, which looks odd.
Try something like this:
Your css class:
.shadow
{
box-shadow: 10px 0px 10px -5px black, -10px 0px 10px -5px black;
}
Giving a negative value in the fourth paramenter (-5px) you indicate the shadow spread.
You can see something similar in this answer: How can I add a box-shadow on one side of an element?
You may use pseudo element and relative/absolute position to draw shadow and bg colors: http://jsbin.com/manacigi/17/edit
Updated css:
#tblPlan
{
table-layout: fixed;
width:100%;
border-collapse: collapse;
border:solid 1px lightgrey;
position:relative;
overflow:hidden;
}
#tblPlan tr:first-child td+td
{
white-space: nowrap;
}
#tblPlan td:first-child
{
padding-left:20px;
}
#tblPlan td
{border:solid 1px lightgrey;
padding:15px 5px 15px 5px;
}
#tblPlan td+ td
{
text-align: center;
}
.shadow
{
box-shadow:inset 0 0 0 100px #5FCBE5;
position:relative;
}
.shadow:before,
.shadow:after {
content:'';
position:absolute;
height:100%;
top:0;
bottom:0;
width:1px;
box-shadow:-2px 0 2px;
}
.shadow:before {
left:0;
}
.shadow:after {
right:0;
box-shadow:2px 0 2px;
}
I have a table with 2 rows and 3 columns; in each cell there is a div.
What I want:
when mouse is over one div (say div1), I want to encrease its height and width (this is done)
the divs neighbours should remain still: no modification of left, top, right, bottom position.
the div1 overlaps over its neighbours
Can this be done ?
Thank you.
This can be done with css only.
http://jsfiddle.net/Erp2B/
td {
position:relative;
height:100px;
width:100px;
padding:5px;
background:#eee;
border:1px solid
#888;
}
td div {
position:absolute;
height:100px;
width:100px;
padding:5px;
top:0;
left:0;
transition: all 0.5s ease;
}
td:hover div {
height:200px;
background:#f33;
z-index:1000;
}
If you want it to simply overlap then you can set the div to position: absolute. If you want it to overlap to the left/right/top/bottom then you'll want to give it a negative margin when hovering over it and increasing its width / height.
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;
}
I have a bunch of divs in sort of a grid pattern, and when a tile div is clicked on, i want it to expand out to the right to show a previously hidden div. however, during the animation, the surrounding tile divs are put out of position for a moment before going back to their correct position after the animation completes. I would like it to just smoothly slide out to the right. click on the top left tile to see most closely what I mean.
Here's the JS code, but I assume there has to be some CSS tweak. see the fiddle for CSS.
$('.tile').on('click', function(){
$(this).find('.sparkline').show();
$(this).animate({
width : '326px'
},
600,
function(){
});
});
JSFiddle
All the Less:
.tiles{
.tile{
display:inline-block;
width:auto;
height:72px;
margin:8px;
background-color:#F1F1F1;
border:1px solid gray;
border-radius:5px;
cursor:pointer;
.origMetrics{
width:154px;
display:inline-block;
}
.sparkline{
display:inline-block;
width:154px;
height:53px;
float:right;
}
.seperator {
margin: 0 15px 5px 15px;
border-color:black;
}
.metrictitle{
display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.metricvalue {
display:inline-block;
text-align:left;
width:auto;
margin-left:10px;
font-size:25px;
}
.metrictrend {
float:right;
margin-right:10px;
margin-top:5px;
}
.positive{
color:green;
img{
position:relative;
bottom:15px;
left:15px;
}
}
.negative{
color:red;
img{
display:none;
}
}
.even{
img{
display:none;
}
}
}
}
Try placing the showing of the sparkline div inside of the .animate() complete callback function.
The sparkline container was being shown and taking up space in the DOM prior to the animation being completed. This led to the appearance of a jump in the animation.
For an even cleaner look, you can use .fadeIn() instead of .show() on the sparkline container.
$('.tile').on('click', function () {
$(this).animate({
width: '326px'
}, 600, function () {
$(this).find('.sparkline').fadeIn();
});
});
In addition, in IE and Firefox it appears that the display: inline-block style on the tiles was interfering with the overflow: hidden that gets applied as part of the animation. When you utilize inline-block, I would highly suggest also setting the vertical-align property accordingly. In your case, I believe vertical-align: top would be the best setting for the tiles.
.tile{
display:inline-block;
vertical-align: top;
width:auto;
height:72px;
margin:8px;
background-color:#F1F1F1;
border:1px solid gray;
border-radius:5px;
cursor:pointer;
}
jsfiddle