In a table I'm making, whenever a cell has just a bit of content, a gap appears between the td and the div - it looks normal, though, when there a lot of things inside. This looks weird. Can someone help me remove it?
html:
<td cod='[#cod]'>
<div class="headler">
[#inicio] - [#fim]
</div>
<div class="valores_resultados">
<div class="disciplina" cod="[#cod_disciplina]">
[#disciplina]
</div>
<br>
<div class="professor" cod="[#cod_prof]">
[#professor]
</div>
</div>
css:
table {
border-spacing: 10px;;
border-collapse: separate;
width: 100%;
}
tr, td, th {
border: #000 solid 1px;
-webkit-box-shadow: 3px 2px 0px 0px rgba(0, 0, 0, 0.45);
-moz-box-shadow: 3px 2px 0px 0px rgba(0, 0, 0, 0.45);
box-shadow: 3px 2px 0px 0px rgba(0, 0, 0, 0.45);
}
td:hover {
border: rgb(80, 0, 0) solid 1px;
cursor:pointer;
-webkit-box-shadow: 3px 2px 0px 0px rgba(80, 0, 0, 0.45);
-moz-box-shadow: 3px 2px 0px 0px rgba(80, 0, 0, 0.45);
box-shadow: 3px 2px 0px 0px rgba(80, 0, 0, 0.45);
}
.headler {
background-color: rgb(145, 0, 0);
text-align: center;
padding: 4% 0%;
margin: 0;
}
.valores_resultados{
min-height: 60px;
text-align: center;
}
.disciplina {
margin-top: 3%;
}
.professor {
margin-bottom: 4%;
}
Change your CSS to:
table {
border-collapse: collapse;
}
Add this:
tr, td, th {vertical-align:top;}
Related
I have a simple scrollbar stylesheet that changes the scrollbar's appearance in Webkit based browsers. Here's the code:
::-webkit-scrollbar {
width: 14px;
height: 14px;
background-color: white;
-webkit-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-button {
background-color: rgba(0, 0, 0, 0.25);
}
::-webkit-scrollbar-thumb {
height: 50px;
background-color: rgba(0, 0, 0, 0.25);
border: 4px solid white;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.4);
}
::-webkit-resizer {
background-color: rgba(0, 0, 0, 0.25);
}
<div style="height: 5000px;">
<br /><br />
<div style="margin: auto; width: 100px; height: 500px; overflow-y: scroll; border: 1px solid black;">
<div style="height: 1000px; padding: 24px;">
<div>Some content</div>
</div>
</div>
</div>
As you can see, the scrollbar within the black box has the box shadow on the left side. However, the one on the body does not, even though it is the same styles being applied to both. Why does this happen?
Just use the inset option in box-shadow for scroll bar shadows
::-webkit-scrollbar {
width: 14px;
height: 14px;
background-color: white;
-webkit-box-shadow: inset 0 0 6px black
}
::-webkit-scrollbar-button {
background-color: rgba(0, 0, 0, 0.25);
}
::-webkit-scrollbar-thumb {
height: 50px;
background-color: rgba(0, 0, 0, 0.25);
border: 4px solid white;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.4);
}
::-webkit-resizer {
background-color: rgba(0, 0, 0, 0.25);
}
html{
background-color:white;
height:100%;
}
<div style="height: 5000px;">
<br /><br />
<div style="margin: auto; width: 100px; height: 500px; overflow-y: scroll; border: 1px solid black;">
<div style="height: 1000px; padding: 24px;">
<div>Some content</div>
</div>
</div>
</div>
.demo-div{
margin:auto;
width:50%;
border: 1px solid #d6f5f5;
background: #f6f6f6;
padding: 20px 5px 20px 5px;
min-height: 500px;
}
.demo-div .demo-div-content{
padding: 0px !important;
}
.demo-div-inner{
background: white;
min-height: 70px;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
padding: 30px;
transform:translateX(30%);
}
<div class="demo-div ">
<div class="demo-div-content">
<div class="demo-div-inner">swipe me out</div> </div>
</div>
When i apply translate to inner div , it comes on top of parent div.
But i want is that it should stay within parent on applying tranform.
Also i have event listener on demo-div-inner , so setting it z-index of parent div i.e. demo-div as -1 , stopped event listener from firing.
Add Another attributes margin-right at your demo-div-inner class.
.demo-div{
margin:auto;
width:50%;
border: 1px solid #d6f5f5;
background: #f6f6f6;
padding: 20px 5px 20px 5px;
min-height: 500px;
}
.demo-div .demo-div-content{
padding: 0px !important;
}
.demo-div-inner{
background: white;
min-height: 70px;
box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
padding: 30px;
margin-right: 66px;
transform:translateX(30%);
}
<div class="demo-div">
<div class="demo-div-content">
<div class="demo-div-inner">swipe me out</div>
</div>
</div>
I'm having a strange issue with chrome where the initial rendering of the page is incorrect, but as soon anything is done that forces a redraw (eg. resizing the window) then the layout is rendered correctly. Maximizing also seems to cause problems.
codepen example here
Initial (bad) layout:
Redrawn (good) layout
html,
body {
margin: 0;
padding: 0;
}
.photo-frame {
display: inline-block;
padding: 1.75%;
background-color: #111;
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 1);
}
.photo-matte {
display: inline-block;
padding: 5% 6%;
background-color: #fff;
box-shadow: inset 2px 2px 12px 3px rgba(0, 0, 0, 0.6), inset 0px 0px 1px 1px rgba(0, 0, 0, 1);
}
.photo-inset {
display: inline-block;
border: solid 5px #000;
border-top-color: rgba(170, 170, 170, 1.0);
border-right-color: rgba(216, 216, 216, 1.0);
border-bottom-color: rgba(240, 240, 240, 1.0);
border-left-color: rgba(204, 204, 204, 1.0);
}
img {
height: 70vh;
display: block;
}
<html>
<body>
<div class="photo-frame">
<div class="photo-matte">
<div class="photo-inset">
<img src="http://jlee.me/glow_cube.jpg" />
</div>
</div>
</div>
</body>
</html>
UPDATE: after some more tinkering, this only seems to fail when the CSS height for the is specified.
I think it's a weird bug of Chrome. I can offer you to use vh instead of % in the padding property. I hope it'll give you a similar result.
Also I removed ".photo-inset" block and set borders directly for image.
html,
body {
margin: 0;
padding: 0;
}
.photo-frame {
display: inline-block;
border: 5vh solid #000;
background-color: #111;
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 1);
}
.photo-matte {
display: block;
padding: 5vh 6vh;
background-color: #fff;
box-shadow: inset 2px 2px 12px 3px rgba(0, 0, 0, 0.6), inset 0px 0px 1px 1px rgba(0, 0, 0, 1);
}
img {
height: 70vh;
display: block;
border: solid 5px #000;
border-top-color: rgba(170, 170, 170, 1.0);
border-right-color: rgba(216, 216, 216, 1.0);
border-bottom-color: rgba(240, 240, 240, 1.0);
border-left-color: rgba(204, 204, 204, 1.0);
}
<html>
<body>
<div class="photo-frame">
<div class="photo-matte">
<img src="http://jlee.me/glow_cube.jpg" />
</div>
</div>
</body>
</html>
Seems like this fixed your issue, change:
.photo-matte {
display: inline-block;
}
to:
.photo-matte {
display: block;
}
Remove the display: inline-block; in display: inline-block;
Or you can try adding box-sizing: border-box; for both photo-matte and photo-frame
html, body {
margin: 0;
padding: 0;
/*background-color: #000;*/
}
.photo-frame {
display: inline-block;
/*padding: 30px;*/
padding: 1.75%;
background-color: #111;
/*background-color: rgb(47, 21, 17);*/
box-shadow: 0px 0px 1px 1px rgba(0,0,0,1);
}
.photo-matte, .photo-frame{
box-sizing: border-box;
}
.photo-matte {
display: inline-block;
padding: 5% 6%;
/*padding: 50px 60px;*/
background-color: #fff;
box-shadow: inset 2px 2px 12px 3px rgba(0,0,0,0.6), inset 0px 0px 1px 1px rgba(0,0,0,1);
}
.photo-inset {
display: inline-block;
border: solid 5px #000;
border-top-color: rgba(170,170,170,1.0);
border-right-color: rgba(216,216,216,1.0);
border-bottom-color: rgba(240,240,240,1.0);
border-left-color: rgba(204,204,204,1.0);
/*box-shadow: 0px 0px 225px -30px rgba(0,0,0,0.3);*/
}
img {
height: 70vh;
display: block;
}
<div class="photo-frame">
<div class="photo-matte">
<div class="photo-inset">
<img src="http://jlee.me/glow_cube.jpg"/>
</div>
</div>
</div>
Remove display property from class .photo-matte.
please try this:
.photo-matte {
display:inline-block //remove this one
}
Edit your .photo-matte class to match the following code:
.photo-matte {
box-sizing:border-box;
padding:35px;
background-color:#fff;
box-shadow:inset 2px 2px 12px 3px rgba(0,0,0,0.6), inset 0px 0px 1px 1px rgba(0,0,0,1);
display:inline-block;
}
I have a feeling I have my stacking contexts messed up, but I cannot get this working.
I have several divs, for which z-index is working correctly, however, one child is not cooperating.
My HTML looks something like this:
....
<div id="filters">
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="set">
<img src="Cat.png">
<div class="drop">
<img src="Hammer.png">
<img src="Cat.png">
<img src="Bat.png">
</div>
</div>
</div>
....
My CSS looks something like this:
#filters {
width: 256px;
height: 32px;
text-align: center;
background: linear-gradient(#147380, #0c454d);
padding: 0px 0px;
margin-bottom: 16px;
border: 1px solid #c8c998;
border-radius: 6px;
box-shadow: 0px 0px 0px 1px #504e20, inset 0px 0px 0px 1px #504e20;
position: relative;
z-index: 1;
}
.filter {
height: 22px;
width: 22px;
border-radius: 28px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 3px;
display: inline-block;
position: relative;
z-index: 4;
}
.set {
height: 22px;
width: 20px;
border-radius: 0px 28px 28px 0px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 0px;
margin-left: -19px;
padding: 0px 8px 0px 15px;
background: #e16006;
display: inline-block;
position: relative;
z-index: 3;
}
.drop {
position: relative;
z-index: 2;
width: 20px;
padding: 8px 4px 2px 4px;
top: 2px;
left: -6px;
border-radius: 0px 0px 7px 7px;
border: 2px solid #7b7651;
border-top: 0px;
background: #d55801;
}
What I am trying to do is to get the .drop behind the .set, which is behind the filter but all of them are ontop of .filters. With my code, everything is displayed properly except that .drop is ontop of .set.
Sorry to say that this is not possible. A child element cannot have a lower z-index than the parent element.
More on that topic
//text code
body{
padding:0;
margin:0;
}
#filters {
width: 256px;
height: 32px;
text-align: center;
background: linear-gradient(#147380, #0c454d);
margin-bottom: 16px;
border: 1px solid #c8c998;
border-radius: 6px;
box-shadow: 0px 0px 0px 1px #504e20, inset 0px 0px 0px 1px #504e20;
position: relative;
}
.filter {
height: 22px;
width: 22px;
border-radius: 28px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 3px;
display: inline-block;
position: relative;
border:1px solid gold;
}
.set {
height: 22px;
width: 20px;
border-radius: 0px 28px 28px 0px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 0px;
margin-left: -19px;
padding: 0px 8px 0px 15px;
background: #e16006;
display: inline-block;
border:1px solid black;
}
.drop {
position: relative;
width: 20px;
padding: 8px 4px 2px 4px;
border-radius: 0px 0px 7px 7px;
border: 2px solid #7b7651;
border-top: 0px;
background: #d55801;
border:1px solid cyan;
margin-top:-138px;
position: absolute;
right:21px;
transition:all 0.5s linear;
z-index:-1;
}
#filters .set:hover .drop{
margin-top:0px;
transition:all 0.5s linear;
}
I want to position multiple link buttons around an background image. Here is the HTML:
<body>
<div id="background">
<div id="abt">About Us</div>
<div id="ofc">Office</div>
<div id="staf">Staff</div>
<div id="msg">Message</div>
</div>
</body>
I want to position them around the background so that they stay fixed.
Example: http://jsfiddle.net/kimonante/2cvz4/1/
body {
background:url(http://www.factoryoutletstores.info/img/usa-map.gif) no-repeat;
background-attachment:fixed;
/*fix the shit*/
background-position:center;
}
.button-link {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
padding: 10px 25px;
background: #0d0f12;
color: #FFF;
font-family:arial;
font-weight:600;
display:block;
}
.button-link:hover, .button-link:focus {
background: #356094;
border: solid 1px #2A4E77;
text-decoration: none;
}
.button-link:active {
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6);
background: #2E5481;
border: solid 1px #203E5F;
}
a {
text-decoration:none;
color:white;
width:100px;
text-transform:uppercase;
padding-left:18px;
}
#abt {
margin-left:540px;
margin-top:200px;
}
#ofc {
margin-left:160px;
margin-top:105px;
}
#msg {
margin-left:930px;
margin-top:-240px;
}
#staf {
margin-left:360px;
margin-top:260px;
}
As your buttons are positioned by pixels, you need to set your div#background to a fixed size and set the background to the div#background instead of the body.
Also remove the background attachement. This version works: http://jsfiddle.net/BTVZz/