I am trying to "hide" any overflow from a diagonal line inside of a table <td> element.
example: https://jsfiddle.net/edwardsmarkf/8zuk6naL/47/
span#diagLine {
transform: rotate(345deg);
transform-origin: left bottom;
position: absolute;
...........
z-index: -100; /* does not do anything! */
overflow: hidden; /* does not do anything! */
}
In my example copied from here and here,the z-index does not seem to work for me even though the position is absolute as suggested here and here. And the overflow property does not appear to work for me either.
It behaves as if a diagonal line is special and the CSS properties no longer apply to it.
I was unable to find any SO suggestions that apply to a diagonal line inside of a table <td> element.
I could probably do something with jScript, but was hoping for a pure CSS solution, hopefully with just minimal changes. Or maybe I have missed something very obvious?
Thank you very much.
ok I figure out you can use a class (.bottom) for the "seeable" td
check this out
span#diagLine {
margin-left: 0px;
margin-top: 10px;
transform: rotate(345deg);
transform-origin: left bottom;
position: absolute;
display:relative;
text-decoration: none;
color: blue;
font-size: 13px;
z-index:-10;
}
td.styleTableTdItem {
width: 60px;
height: 60px;
z-index: 1;
}
td:not(.bottom){
background-color:white
}
https://jsfiddle.net/s23fhdbe/1/
You can add something like this if you are dealing only with the elements shown in the example
td:last-child{
background-color:white
}
Related
I get some HTML and CSS code.
https://codepen.io/lbebber/pen/pvwZJp
.menu-item,
.menu-open-button {
background: #00bcd4;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
color: white;
text-align: center;
line-height: 80px;
transform: translate3d(0, 0, 0);
transition: transform ease-out 200ms;
}
I tried to use this code, but I did not succeed pushing the hamburger menu to be at the bottom-left corner.
I think something outside the part I copied here is blocking the menu to get it to the bottom.
The second thing, I wanted to use little pictures instead of icons.
Do you have an idea how?
When I add a picture, I am getting weird behavior.
Thank you for your help in advance.
Code is Fixed!
So in your .menu attribute, I added the following. These attributes move your menu (.menu) in a fixed position in the bottom left of the screen.
position: fixed;
bottom: 0;
left: 0;
z-index: 998;
I removed the margin-left:-80px; as this caused your menu to warp halfway off the left of the screen when I added the other attributes above. So your .menu attribute should look like this when the proper attributes are edited:
.menu{
#extend %goo;
$width:650px;
$height:150px;
position: fixed;
bottom: 0;
left: 0;
z-index: 998;
padding-top:20px;
padding-left:80px;
width:$width;
height:$height;
box-sizing:border-box;
font-size:20px;
text-align:left;
}
This resulted (on codepen) with your site looking like this. Of course, the gooey menu opens as shown below. I cannot insert the code into stack overflow as there were issues with layout and content. But if you make the changes to your CSS code above, you can see your menu working
[
I am working on this page: link to page.
Inside h2 I have before and after elements. In IE they are too big, original width and height these images are not working. When I am trying to resolve this problem, in FF and Chrome everything is getting even worse.
In Edge things are a little bit different - I have figured out a way to make images smaller, but before element is inside h2 text.
Here are the examples:
Normal (from FF and Chrome)
A little strange (from Edge)
So crazy (from IE)
CSS code:
h2{/*How I am displaying h2 elem */
text-align: center;
width: 80%;
margin: 45px auto 115px !important;
text-transform: uppercase;
color: #fff;
}
h2::before {
content: url(img/pepper.svg);
margin-right: 10px;
position: relative;
height: 50px;
}
h2::after{
content: url(img/apple.svg);
margin-left: 10px;
position: relative;
height: 50px;
}
#supports (-ms-accelerator:true) { /*Trying to resolve problem in Edge */
h2::before {
position: absolute;
}
h2::after{
position: absolute;
}
}
Try making the positon of before and after leftmost and rightmost.
If it doesnt work,try making pixels to %.
As #ankit says, removing width: 80% is doing right on IE. Also removing part with supports resolved problem with Edge.
Another approach (assuming you have control of the HTML): add an empty right after the input, and target that in CSS using input+ span:after
.field_with_errors {
display: inline;
color: red;
}
.field_with_errors input+span:after {
content: "*"
}
<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
<input type="text" /><span></span>
</div>
I'm using this approach in AngularJS because it will add .ng-invalid classes automatically to form elements, and to the form, but not to the .
This question already has answers here:
How to change the strike-out / line-through thickness in CSS?
(11 answers)
Closed 8 years ago.
Yesterday with one friend discuss for change height of line about strike-through.
Today searching on documentation of CSS says :
The HTML Strikethrough Element (<s>) renders text with a strikethrough, or a line through it.
Use the <s> element to represent things that are no longer relevant or no longer accurate.
However, <s> is not appropriate when indicating document edits;
for that, use the <del> and <ins> elements, as appropriate.
And seems that <s> accept all reference of CSS but not function on height.
CSS:
s {
color: red;
height: 120px
}
HTML:
<br /><br />
<s >Strikethrough</s>
There is a simpler demo on JSFIDDLE and you see that not change the height of line....
There is a alternative solution or I wrong on CSS?
EXPLAIN WITH IMAGE
I think the best way to handle this is to use a pseudo element to simulate the desired behavior.
s {
color: red;
display: inline-block;
text-decoration: none;
position: relative;
}
s:after {
content: '';
display: block;
width: 100%;
height: 50%;
position: absolute;
top: 0;
left: 0;
border-bottom: 3px solid;
}
The border inherits text-color and you gain full control over your styling, including hover effects.
JS Fiddle here
I've wanted to do this before and came up with this:
<span class="strike">
<span class="through"></span>
Strikethrough
</span>
and:
.strike {
position:relative;
color:red;
}
.strike .through {
position:absolute;
left:0;
width:100%;
height:1px;
background: red;
/* position of strike through */
top:50%;
}
JS Fiddle here
and if you want multiple strike throughs you can use something like this:
JS Fiddle - multi strikes
This is my alternative version.
s {
color: red;
position: relative;
text-decoration: none;
}
s:after {
position: absolute;
left: 0;
right: 0;
top: -10px;
content: " ";
background: red;
height: 1px;
}
JSFiddle demo
Try this
s {
color: red;
text-decoration: none;
background-image: linear-gradient(transparent 7px,#cc1f1f 7px,#cc1f1f 12px,transparent 9px);
height: 100px
}
I can't seem to figure how to accomplish the following.
I have this shape:
This is the desired outcome:
However, when I apply the overflow to the child div this happens:
Or this when the overflow is in the parent div
I have tried splitting the CSS into more divs and then trying to overlap them and all these attempts have been failures.
The HTML and CSS are the following
CSS:
#tvshape {
position: relative;
width: 200px;
height: 150px;
margin: 20px 10px;
background: #0809fe;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#tvshape:before {
content: "";
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
#tvshape img {
height:100%;
width:100%;
}
HTML (Nothing special):
<div id="tvshape">
<img src="http://wallpaperpanda.com/wallpapers/pbc/RER/pbcRERyTy.jpg">
</div>
And Here is the JSFiddle and the CSS and HTML.
How could I accomplish so ?
Guidance will be highly appreciated.
EDIT: I required the image to be an element of it's own, background:url() it's not what I'm looking for.
EDIT #2: This was one of the solutions given, the figures are not the same ones, the rounded left and right sides dissapear.
Thank you.
I could come up with two options, though one involves leaving out the image-element, and the second uses jQuery... (I honestly don't think it's possible to do with the image-element...sorry.)
Option 1)
Since the image URL has to be in the HTML code, adjust the code like this:
<div id="tvshape" style="background-image: url(http://wallpaperpanda.com/wallpapers/pbc/RER/pbcRERyTy.jpg);"></div>
Then add the following CSS:
#tvshape {
background-position: center center;
}
Here's a fiddle: http://jsfiddle.net/Niffler/cqPR8/
Option 2)
Basically the same as Option 1, except I "cheated" by leaving the HTML code as it was, i.e.
<div id="tvshape">
<img src="http://wallpaperpanda.com/wallpapers/pbc/RER/pbcRERyTy.jpg" alt="" />
</div>
Add some jQuery so that the HTML ends up looking like Option 1:
var tvbackground = $('#tvshape img').attr('src');
$('#tvshape').css('background-image', 'url(' + tvbackground + ')');
Then finally hide the image-tag with CSS:
#tvshape img {
display: none;
}
Here's another fiddle: http://jsfiddle.net/Niffler/4WFL5/
I just included this code in your css
#tvshape{ background:url('http://1.bp.blogspot.com/_Y1fFfKjiX2g/S_gMwLeGtjI/AAAAAAAALlE/vdX0ttHeEjg/s1600/CLOUDS2.jpg')center no-repeat; }
The image used is taken randomly just for example purposes. Is this desired version you want?
JSFiddle : Link
How can I add a short line below link ? The line should be visible only on hover.
I tried with border-bottom, but that way the line is 100% of the link width and I want the line to be shorter than the link .
Here is a example image of the effect that I try to make.
You can try using ::after pseudo element:
a {
position: relative;
text-decoration: none;
}
a:hover::after {
content: "";
position: absolute;
left: 25%;
right: 25%;
bottom: 0;
border: 1px solid black;
}
<a href='#'>Demo Link</a>
This is something I just thought of, check it out see what you think. So we use :after and create a line under the text. This only works if the parent has a width (for centering).
HTML:
<div>Test</div>
CSS:
div {
width: 30px;
}
div:hover:after {
content: "";
display: block;
width: 5px;
border-bottom: 1px solid;
margin: 0 auto;
}
DEMO
Updated CSS:
div {
display: inline-block;
}
Not sure why I didnt think of this but you can just use inline-block to get it to center without the parent having a width.
DEMO HERE
Here is a link using the same method, just incase you got confused.
DEMO HERE
So I have now be told I should even point out the most obvious thing so here is an update just for the people that don't know width can be a percentage.
width: 70%;
Changed the width from 5px to 70% so it will expand with the width of the text.
DEMO HERE
Edit:
Ruddy's solution has the same result and is more elegant so based on that, I used it recently with addition of transition, making it a bit more eye catching and I thought it would be useful to share here:
a {
display: inline-block;
text-decoration:none
}
a:after {
content: "";
display: block;
width: 0;
border-bottom: 1px solid;
margin: 0 auto;
transition:all 0.3s linear 0s;
}
a:hover:after {
width: 90%;
}
jsfiddle link
(Original answer below)
Check this i just came up with, playing in the fiddle:
<a class="bordered" href="#">I am a link, hover to see</a>
a.bordered {
text-decoration:none;
position: relative;
z-index : 1;
display:inline-block;
}
a.bordered:hover:before {
content : "";
position: absolute;
left : 50%;
bottom : 0;
height : 1px;
width : 80%;
border-bottom:1px solid grey;
margin-left:-40%;
}
Depending on the percentages, you may play with a.bordered:hover:before margin and left position.
Simply use this class:
.link:hover {
background-image:url("YOUR-SMALL-LINE-BOTTOM.png")
}
like this, the line will appear when you hover over the element. And you can specify in the image, how small or big the line has to be.
Try creating another Div for border. And adjust the width of that div according to your choice. I hope this will help.
what about this?
a {text-decoration:none;position:relative;}
a:hover:before {content:"_";position:absolute;bottom:-5px;left:50%;width:10px;margin:0 0 0 -5px;}
check this fiddle for more: http://jsfiddle.net/h7Xb5/
use underline or if u want the line to be much shorter try scalar vector graphics(svg) with this you can have custom lines.
<svg id="line "height="40" width="40">
<line x1="0" y1="0" x2="700" y2="20" style="stroke:rgb(125,0,0);stroke-width:2" />