I am trying to make a basic calendar / resource manager where you can drag a P element into the calendar on a given day.
The calendar generates html dates through PHP. Just a fairly basic TABLE, TR, TD structure.
There are draggable P elements, these are job orders you can drag on any given day (TD) in the calendar.
A javascript prompt shows up and you can select the duration of this job order.
The javascript function simply changes the width of the P element to overlap the table structure horizontally according to the job duration. Simply setting style.borderRight ="none" on these TDs to make it look tidy. Also a max-width is defined so that the TD wont resize when the P is resized.
The problem is that it actually shows up behind the columns it's supposed to overlap. The only way I could fix that was having no background-color on the TD. As you can see below there is a background color on the saturdays and sundays.
The P shows up behind those. (not the text however). Why is this? I guess the problem is that it's actually just appended on one TD and tries to overlap the others, probably makes for some rendering problems.
Any quick CSS fix for this?
Overlapping but showing up below
td.slot {
width: 70px;
max-width: 70px;
margin: 0px;
padding: .5em;
vertical-align: top;
border-style: solid;
border-color: #c9cacc;
border-width: 0px 1px 1px 0px;
-webkit-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.09);
-moz-box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.09);
box-shadow: 0px 3px 0px rgba(0, 0, 0, 0.09);
}
p.order {
text-align: center;
font-size: 11px;
background-color: #a9c5f2;
padding: .5em;
vertical-align: top;
white-space: nowrap;
border-style: solid;
border-color: gray;
border-width: 1px;
width: 70px;
}
Related
I have my column's borders change size when they are hovered on. But it moves the position of my image below them. I tried increasing the margin bottom of the columns so that it doesn't effect the image. But that did not work. I also tried using the z-index property, but that had no effect as well. What is the best way to fix this issue?
Code Pen: https://codepen.io/isaiahwebdev/pen/zWjyEJ
.plans-col {
width: 33.33%;
float: left;
padding: 10px;
margin-bottom: 40px;
text-align: center;
}
.plans-price:hover {
cursor: pointer;
border: 10px solid #eee;
}
.plans-price .title {
margin: 50px 0;
}
It's because of a border that is different width when you hover. Whenever you are applying any transformation, the borders need to stay the same width. The trick is to apply the transparent border for the object before hover.
.plans-price {
list-style: none;
border: 10px solid transparent;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.082), 0 6px 20px 0 rgba(0, 0, 0, 0.082);
}
.plans-price:hover {
cursor: pointer;
border: 10px solid #eee;
}
Now, I have seen that your original plans-price had border of 1px. You have a few options here:
use my solution where object doesn't have initial border,
keep my solution for the transparent border but add 'faux border' using solid inset box-shadow of 1 px and the desired color or
change the initial border width to 10px
Enjoy :)
I want to create a table with the following look:
At first it might look easy, but it's actually not:
The background image is tricky since it spans over several elements with no common parent
Table cells must have abnormal sizes, which tables don't usually like
The hover overlay must exclude the part of the column that sticks out
Here is a base fiddle you can use to test. It contains the basic markup + styles for the table. Everything without the abnormal table cells and hover effect.
I'm using the :before pseudo element in td to create the blue background and the :after to create the 0.5 opacity image with multiply blending mode.
I offset the background image in each table cell via background-position. The first cell has 0 offset, the second one has 100%, third one 200% etc. They seamlessly align alright.
What I've tried
I forked the above fiddle, trying to make it visually correct. I almost made it. Here's the result. There are problems, though:
I created the hover effect via an :after pseudo element in the tr element. However, that required me to make the element have a block display (because elements with display table-row can't have pseudo elements apparently). This means that if the cells don't have min-width or they simply have more content, all columns would be misaligned and the table wouldn't look like a table. Can be seen in the fiddle.
Because I use percentage based offset in background-position for each table cell's background, having a single cell slightly larger or smaller ruins the alignment of the background image since that percentage is based on the size of the element itself and not on those before it. In the fiddle, you can clearly see that background image is just thrashed.
Question
You can obviously do that very easy with 4 elements next to each other and some JavaScript for the hover effect perhaps. However, is it possible to create this layout while preserving a semantically correct table markup? I.E. using a <table> element.
Feel free to use this fiddle for testing.
I have kept your layout as is, I only added a wrapper
On the other side, the special popping out column is made only with an pseduo element. This way, I can adjust to the top, but not to the bottom. That's why the container is needed, to cut the bottom of the pseudo.
The shadows in the bottom need a little adjustment, but otherwise I think that the result is ok.
.container {
margin: 20px;
overflow: hidden;
}
table {
margin: 10px 10px 20px 10px;
background: #F0F6F7;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.16);
border-radius: 5px;
border-collapse: collapse;
}
tr:hover td {
background: rgba(255, 0, 0, 0.2);
}
tr + tr td, tr + tr td.pop:before {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
tr:first-child .pop:after, tr:first-child .pop:before {
top: -10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
tr:last-child .pop:after, tr:last-child .pop:before {
}
td {
min-width: 150px;
box-sizing: border-box;
padding: 16px 10px 15px 10px;
color: #787878;
font-family: Roboto, sans-serif;
font-size: 16px;
text-align: center;
}
td + td {
border-left: 1px solid rgba(0, 0, 0, 0.05);
}
td.pop {
position: relative;
z-index: 0;
color: #FFF;
}
td.pop, td.pop + td {
border-left: none;
}
tr:first-child td.pop:after {
content: '';
position: absolute;
top: -10px;
right: 0;
left: 0;
z-index: -2;
background: url('https://i.imgur.com/lcKmrnE.jpg') #539BFC;
background-blend-mode: screen;
opacity: 0.75;
height: 1000%;
}
tr:last-child td.pop:after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
z-index: -1;
height: 10px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 2px 2px 2px 0px lightgray, 0px 10px 0px 10px white;
}
<div class="container">
<table>
<tbody>
<tr><td>Josh</td><td class="pop">3 BTC</td><td>$46,343</td><td>27/12/17</td></tr>
<tr><td>Anne</td><td class="pop">2 BTC (veeery big cell)</td><td>$38,452</td><td>26/12/17</td></tr>
<tr><td>Jack</td><td class="pop">6 BTC<br><small>bigger</small></td><td>$126,989</td><td>26/12/17</td></tr>
<tr><td>Gyumur</td><td class="pop">0.7 BTC</td><td>$14,104</td><td>24/12/17</td></tr>
<tr><td>Boggy</td><td class="pop">12 BTC</td><td>$267,766</td><td>21/12/17</td></tr>
</tbody>
</table>
</div>
I want to create a fine border around my text hyperlinks. However the box I have created seems to be pushing the text underneath it to the right. See the following image:
This is the CSS I have used:
div.box {
border: solid 1px #333333;
padding: 0px 5px 0px 5px;
margin: 0px 5px 0px 5px;
transition: 0.2s ease;
box-sizing: border-box;
white-space: nowrap;
float:left;
}
I thought it might relate to the line spacing, but the box seems to follow the height of the line space.
Any help would be appreciated!
The border sits on the outside of the element, making that element slightly larger than the surrounding text, and the float:left causes the floating of the text, but under the end of the box due to the height issue. If you remove the float - it will layout correctly. Note that I just created a long chunk of text and swapped the box class onto a span. You don't even need the box class to be added - you could do it all with CSS selector specificity - in this case ... p span{...} ...would target the correct elements.
.box {
border: solid 1px #333333;
padding: 0px 5px 0px 5px;
margin: 0px 5px 0px 5px;
transition: 0.2s ease;
box-sizing: border-box;
white-space: nowrap;
}
<p>This is a long line of <span class="box">text</span> that will break to two lines and will allow the demonstration of the box around the text within each of the spans. Each <span class="box">span</span> will have a border around the text to show the desired effect.</p>
You can try wrapping your text inside a span tag, and adding the following CSS:
span.box {
display: inline-block;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);
}
http://thc-cup.ucoz.com/forum/2-1-1
After you can see, the left has a radius at content background and border, but the left one does not! I managed to get it like the one in the left after adding to the div style: display:inline-block; but that messes the box and moves it under the left block.
Since this is a forum (my link) I can't edit html, but I can edit the CSS of the forum.
Here is the style of those blocks:
.postTdInfo { //Left block
display: inline-block;
margin: 0px 0px 0px 35px;
padding: 1px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 5px;
}
.posttdMessage { //Right block
margin: 0px 0px 0px 0px;
padding: 25px;
border: 1px solid #cfcfcf;
background: #e0e0e0;
border-radius: 25px;
I searched all the day for a solution but can't seem to find one.
Is there any way of changing CSS so that the block accepts border radius?
Edit: my first answer didn't solve the problem.
The problem is that you're working on a td element, which has the display property by default set to table. Either add display: block; to .posttdMessage, or, if this causes problems, add another <div> element directly inside the table cell and style that with rounded borders instead.
Hy there,
I need to create a div which looks like this:
What i've came up with so far is this:
http://jsfiddle.net/suamikim/ft33k/
.bubble {
position: relative;
width: 80px;
height: 160px;
border: 1px solid #33A7F4;
border-radius: 9px;
margin: 100px;
-webkit-box-shadow: 0px 0px 20px 2px #33A7F4;
-moz-box-shadow: 0px 0px 20px 2px #33A7F4;
-ms-box-shadow: 0px 0px 20px 2px #33A7F4;
-o-box-shadow: 0px 0px 20px 2px #33A7F4;
box-shadow: 0px 0px 20px 2px #33A7F4;
}
.bubble:after, .bubble:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
border: 17px solid transparent;
right: 100%;
}
.bubble-left:before {
border-top-color: #33A7F4;
border-right-color: #33A7F4;
top: 60px;
}
.bubble-left:after {
border-width: 16px;
border-top-color: black;
border-right-color: black;
top: 61px;
}
As you can see the "only" problem is the box-shadow around the tail of the bubble (the triangular arrow).
I've also tried to not use the before- & after-pseudo-classes but use a second div which only holds the triangle (with transformation, rotation, ...) but obviously that didn't lead me to no success neither.
A static picture is no option because the size of the rectangle itself and the position of the tail are both dynamic and can change during "runtime".
I've also came up with a solution where i create the border & the shadow with a dynamically gernerated svg. If no other option can be found i'm going to stick with this solution but it feels pretty strong like a "hack". I'm not posting this solution here because it involves 2 javascript-framworks (extjs & raphael) and this question should be about html & css.
Nonetheless i could still provide it if someone is interested in it...
One last thing: Browser-compatibility is not that big a deal. If it's working in the latest versions of the big ones (firefox, chrome, opera, ie 10, ...) everything is fine ;)
Thanks,
mik
Use drop-shadow:
maybe this article (box-shadow-vs-filter-drop-shadow) will help you
You should use from filter in your CSS then set the drop-shadow($yourshadow) function for value. There is no difference to write shadow for filter: drop-shadow($yourshadow) function or shadow: $yourshadow as a property. You can write like below:
.shape1, .shape2{
transform: rotate(35deg);
background: yellow;
height: 100px;
width: 100px;
display: inline-block;
}
.myshape{
margin: 30px;
filter: drop-shadow(4px 4px 10px rgba(0,0,0,0.5));
}
<div class="myshape">
<div class="shape1"></div>
<div class="shape2"></div>
</div>
Enjoy...
It's probably not in your best interest to do this, I would leave it as is.
http://css-tricks.com/triangle-with-shadow/
You can skip down to "The Double-Box Method" and it shows a very manual way of doing this using :before and :after (which you already used up making the bubble) with the help of transform. If you really wanted to do this, you could float the arrow to the left and apply shadows through the pseudo elements.