I have almost successfully made the left columns of my table sticky, so that the rest can be scrolled. This, however, has created a new problem: the table background is white, which means scrolled cells transpire underneath the sticky cells (see screenshot 1). To resolve this, I've made the background of the sticky cells non-transparent by using background-color: rgba(255, 255, 255, 1.0);. But this also removes the borders of the sticky cells (see screenshot 2). Both variants are ugly.
I've tried adding border:1px solid #cdcdcd; (even adding !important) to the sticky cells but the borders are still invisible. Any suggestions?
Here's the entire formatting applied to the table:
div#scrollable {
overflow-x: scroll;
}
table#stats {
border-collapse:collapse;
width:100%;
}
table#stats th.sticky, td.sticky {
position: -webkit-sticky; /* for Safari */
position: sticky;
left: 0;
}
table#stats td.sticky {
background-color: rgba(255, 255, 255, 1.0);
border:1px solid #cdcdcd !important;
}
table#stats tr#means {
background-color:#ddffd5;
}
table#stats td.stats {
border:1px solid #cdcdcd;
}
transparent sticky cells
non-transparent sticky cells
I did not find any other solution than this
th.sticky:after, td.sticky:after{
content : "";
position: absolute;
bottom: 0;
display: block;
width: 100%;
height: 1px;
background-color: #cdcdcd;
}
EDIT : Other solution here Stack overflow post
Related
The idea was to make the not valid error tip that comes up when people fail to fill out a required field show up like a speech bubble. So the arrowhead image shows in the center and underneath the text and would point into the field that they missed.
Fiddle here
HTML:
<span class="wpcf7-not-valid-tip">Please fill the required field.</span>
CSS:
.wpcf7-not-valid-tip {
background: red;
color: white;
padding: 10px;
width: 100px;
background-position: 0 0;
background-repeat: no-repeat;
background-image: url('http://s24.postimg.org/qacevkf7l/green_error_arrow.png');
}
As you can see I have a background color and the arrow image that needs to sit in the middle of the element and below it but, of course, if you position it using background-position, the image is hidden as it cannot overflow outside of the element itself. This would be easy if I could easily edit the HTML but I would prefer not to as I am using a plugin and want to be free to update the plugin in the future.
QUESTION:
Is there a pure CSS solution?
If not (and I suspect there isnt) what is the cleanest way to solve this issue? Would I use add_filter to alter the html to put a div around the tooltip that i could then add the bg image to? Something with css "content:", a js solution?
Got the answer elsewhere.Will accept unless someone can think of something better.
http://jsfiddle.net/D2KFX/2/
This works perfectly using CSS (albeit adding content with the content: declaration) by drawing a triangle with borders instead of using an image for it.
CSS
.wpcf7-not-valid-tip {
background: red;
color: white;
padding: 10px;
width: 100px;
}
/* Updated code */
.wpcf7-not-valid-tip {
position: relative;
}
.wpcf7-not-valid-tip:after {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 0, 0, 0);
border-top-color: red;
border-width: 10px;
left: 50%;
margin-left: -10px;
}
I've got a set up similar to this: http://codepen.io/anon/pen/iAJnx where the main content is rather long. What I want to do is to put a border round the visible part of the screen as in this screenshot: http://i.imgur.com/ENtLau4.png
What I want to do is to create 4 divs that are positioned at the edges of the screen, but I'm struggling both with the positioning and giving the divs height and width without content. Does anyone have an idea about this?
Note: I've already tried using an overlay, but it makes the content non-clickable.
Try this:
HTML:
<div class="border-box"></div>
CSS:
body { position: relative; }
.border-box {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
How it works:
I absolutely positioned an overlay with borders, that will stick the edges of the screen by using top, bottom, left, right definitions. To make the content below selectable, you set pointer-events: none; on the overlay.
Example: http://codepen.io/anon/pen/BxJbh
If you want to achieve the same results without adding additional HTML markup, you can use the :before sudo selector to prepend a block to the body. Simply add this CSS and it will produce the same results:
body:before {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
display: block;
content: '';
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
Example: http://codepen.io/anon/pen/BDhql
you have to set in your content id (#content)
border:4px solid blue;
min-width:700px; //change accordingly.
min-height:1600px //change accordingly
The above code will fix the problem of border as well as the height & width you want to set without having any content.
Take a look at this : http://jsfiddle.net/wjhnX/
I achieved it with this CSS :
background-image: radial-gradient(#CCC, #FFF), radial-gradient(#CCC, #FFF);
background-size: 2px 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
Is this possible to do but the simulated borders would be top and bottom, not left and right ?
Thanks ahead !
Do you want something like this?
Demo (Some breathing space for your content, I've used margin there, just make sure that it will apply to both, :before as well as :after, so if you want to separate, declare margin separately for each, p.s - I've made colors lil lighter)
/* Using only background gradients */
.one {
width: 400px;
padding: 20px 25px;
margin: 40px auto;
}
.one:before, .one:after {
content: "";
height: 1px;
/* I've removed the vendor prefixes, if you are looking to support older browsers
then refer to older version of this answer.
*/
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
display: block;
margin-bottom: 10px;
margin-top: 10px;
}
Explanation:
I've used :before and :after pseudo having content: "", so it creates a block, you can say a virtual block inside the element... and which is further set to display: block, just make sure you use block there else margins and height will have no effect.. and last but not the least am using gradients with rgba to control the alpha/opacity of the gradient which will fade on both ends
you can make it with a seperator as well.
LIVE DEMO
.seperator
{
width: 400px;
height: 2px;
margin: 30px;
background-image: radial-gradient(#CCC, #FFF), radial-gradient(#CCC, #FFF);
background-position: 0, 100%, 0, 100%;
}
.one {
width: 400px;
height: 140px;
margin: auto;
}
So I have been slamming my head against the wall trying several different methods online and can't get anything to work.
I have a div that needs to be fluid width, and its height needs to be variable as well.
The div sits on top of a tile-able background image. It has a 1px border around it.
I need the bottom right of the div to fold up, like a piece of paper.
I tried using an image, in a div anchored to the bottom. But that requires a fixed width or height as far as I can tell.
I tried this method but it requires a solid background color. I have a repeating image.
I tried this method, which uses gradients to control the opacity at the corner, this almost works, but my div requires a border. Applying the border ruins the effect.
background:
linear-gradient(45deg, rgba(255,0,0,0.4), rgba(255,0,0,0.4)),
linear-gradient(135deg, rgba(255,0,0,0.4), rgba(255,0,0,0.4)),
linear-gradient(225deg, transparent 10px, rgba(255,0,0,0.4)
background-size: 14px 14px, 50% 100%, 50% 50%, 50% 50%;
background-position: 100% 0, 0 0, 100% 100%, 100% 0;
background-repeat: no-repeat;
//then an :after pseudo class to create the corner fold
Any help would be greatly appreciated. Thanks.
This question got me bussy for some time, this seems to be a really hard thing to do with CSS only. I managed to achieve the effect(the paper flip with a border around the element) you wanted, but it requires alot of CSS and I don't know how far you want to go. I applied border-radius to the top right corner and used a triangle to overlap the border-radius. This did not cover the entire border radius, so I used a span to form 2 shapes to overlay the remaining gap.
Look at this fiddle for the result, any improvements are welcome
http://jsfiddle.net/EnVnW/
CODE:
body {
background: #444 url('http://leaverou.me/ft2010/img/darker_wood.jpg') bottom;
}
.arrow_box {
color:red;
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
height:400px;
border-radius:0 300px 0 0; /* here we give the box a round corner on the top right side */
}
.arrow_box:after, .arrow_box:before { /* we create 2 triangles in the top right corner, one for the border and one for the filling */
-ms-transform:rotate(-135deg); /* rotate to make the triangle have the right angle */
-webkit-transform:rotate(-135deg);
transform:rotate(-135deg);
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
top:42px;
right:-20px;
}
/* here we position the triangles in the top right corner */
.arrow_box:after {
border-color: rgba(200, 265, 0, 0);
border-bottom-color: #00b7d5;
border-width: 100px;
left: 100%;
margin-left: -240px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 105px;
left: 100%;
top:39px;
margin-left: -245px;
}
/* we still have a massive gap next to the triangle, so we fill it up with 2 rectangles. One on the left side of the triangle and one on the bottom side of the triangle, we also will give them a border to finish the line around the element */
.arrow_box span {
border-top: 4px solid #c2e1f5;
position:absolute;
width:150px;
height:140px;
background-color:black;
right:140px;
top:-4px;
background: #88b7d5;
}
.arrow_box span:after {
border-right: 4px solid #c2e1f5;
content: "";
position:absolute;
width:150px;
height:150px;
background: #88b7d5;
left:140px;
top:140px;
}
With CSS4 this will be alot easier to do, here you can read about it;
http://dev.w3.org/csswg/css-backgrounds-4/#border-corner-shape
At first, when I say centered, I mean both, vertically and horizontally centered.
I have a table with several tiles (divs) like in Windows 8 with background.images.
Every tile has a centered label (also a div) with a description and a semi transparent background.
Now I'd like to add another div between the tile itself and the label. These div should have a semi-transparent background-color as an overlay of the underlying tile-image-div.
But when I add this overlay-div, my label is not centered horizontally anymore, it is placed at the top of the tile. How can I keep it centered?
This is my code on fiddle:
fiddle (please take a look)
(The problem in the fiddle code is this line:
<div class="SemiTransOverlay"> When I delete this div everything is centered correctly.
What do I have to change to keep everything centered and keep div?)
first of all why you are using tables for layout purposes? we are in 21st century, so start using div's and for accomplishing the semi transparent div to place behind the label and vertically aligned label you need to use position: absolute; and top: -50%;, I've also modified line-height for div.SemiTransLabelGross and also used position: relative and z-index properties
Demo
CSS
table.Kacheln
{
border-spacing: 5px;
border-collapse:separate;
border:0px;
}
.wrap {
position: relative;
height: 100%;
}
td.KachelFlavourGross01
{
text-align:center;
/*background:url(../img/Div/bg.jpg) no-repeat 0 0;*/
background-color:#FF0000;
width:404px;
height:200px;
}
div.SemiTransOverlay
{
height:100%;
width:100%;
background-color:rgba(255, 255, 255, 0.5);
position: absolute;
z-index: 1;
}
div.SemiTransLabelGross
{
font-size:2em;
font-family:Verdana;
font-style:italic;
line-height:60px;
background-color: rgba(255, 255, 255, 0.75);
width:404px;
height:60px;
z-index: 2;
position: absolute;
top: 50%;
margin-top: -30px; /* Half of height */
}
Aligning vertically, what I do is, set padding instead of height.
eg:
div.SemiTransLabelGross
{
font-size:2em;
font-family:Verdana;
font-style:italic;
line-height:120%;
background-color: rgba(255, 255, 255, 0.75);
width:404px;
padding: 20px 0; /* removed the height property */
}
Sorry for misunderstanding, from the above answer, I think you wanted that light pink div itself to be vertically centered. In that case, add padding to its parent.
div.SemiTransOverlay
{
width:100%;
background-color:rgba(255, 255, 255, 0.5);
padding: 20% 0;
}
OR, you can add margin to
div.SemiTransLabelGross {
margin-top: 20%;
}