Consider the following HTML:
<table>
<thead>
<tr>
<th class="title">Test title</th>
</tr>
</thead>
</table>
And the following CSS:
table {
width: 400px;
border: 1px solid #ccc;
}
th.title {
position: relative;
text-align: center;
}
th.title::after {
position: absolute;
right: 5px;
content: '>';
}
See the JSFiddle http://jsfiddle.net/63EZB/1.
What I want is the greater than sign to appear on the right side of the th. The code above works both in Chrome and IE8+, but not in Firefox (28). Firefox positions the sign absolutely on the window's right, like the relative position of the th element isn't considered.
What's going wrong?
Looking for something like this Link
CSS:
th.title::after {
margin-right: 5px;
float:right;
content:'>';
}
Try with theses rules :
th.title:after {
position:relative;
float:right;
right: 5px;
content: '>';
}
As I understand it (I rarely work with tables) table elements don't mix well with absolute or relative positioning.
I would simply put a holding div inside the th and give that the position relative and the pseudo element.
This could also give you some ideas: http://css-tricks.com/absolutely-position-element-within-a-table-cell/
Related
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
}
I have a problem where I need to remove/hide a line behind my transparent logo:
The white line needs to be beside the logo, but it should not be shown behind. - And no, I will not add a black background..
Code:
<div style="position: absolute;margin-top: 74px;margin-left: 4%;width: 90%;height: 2px;background-color: #FFF;"></div>
<span style="font-size:81px;margin-top: 14px;padding: 0px 0px 0px 43%;position: fixed;">LOGO</span>
Span will become a transparent image, this is just for testing..
You can check out the Line-On-Sides Headers CSS Trick.
Something like this:
body {
background-color: black;
color: white;
}
.fancy {
line-height: 0.10;
text-align: center;
font-size: 81px;
margin-top: 20px;
}
.fancy span {
display: inline-block;
position: relative;
}
.fancy span:before,
.fancy span:after {
content: "";
position: absolute;
height: 5px;
border-top: 1px solid white;
top: 0;
width: 200px;
}
.fancy span:before {
right: 100%;
margin-right: 15px;
}
.fancy span:after {
left: 100%;
margin-left: 15px;
}
<div class="fancy"><span class="fancy">LOGO</span>
</div>
Source
Since you have a transparent background, I think the only way is to duplicate the line div and divide it in two, one left and one right, I don't know the dimensions you need, but you should have something like this:
<div style="position: absolute;margin-top: 74px;margin-left: 4%;width: 30%;height: 2px;background-color: #FFF;"></div>
<span style="font-size:81px;margin-top: 14px;padding: 0px 0px 0px 43%;position: fixed;">LOGO</span>
<div style="position: absolute;margin-top: 74px;margin-left: 60%;width: 30%;height: 2px;background-color: #FFF;"></div>
Hard to say the correct margins without knowing where they are contained, you should post the entire HTML if you want more help.
I would absolutely position the elements in a container and then arrange them with z-index to ensure they stack in the correct order. I have created a JSfiddle with a quick example of how to acheive this:
https://jsfiddle.net/bL0dfkvq/
The key here is the z-index on the text is:
z-index:10;
The z-index on the hr line is:
z-index:5;
Few things...
1. Your methods of positioning in the code snippet you included are, quite frankly, awful. I'd clean this up and not using things like padding: 43% to position your elements - make sure you have a sturdy foundation before you go building a house on it! I'd suggest checking out some resources in regards to positioning elements using CSS - given that you've provided just a 2-line snippet, I can't exactly go into what proper methods would be in your case.
2.
And no, I will not add a black background..
You're acknowledging the simplest working answer, yet you don't want to use it...? Why not? Do you mean you don't want to apply a background to the image? You can just add it to the span using background-color: black;
3. Again, I don't approve of position the elements in this manner, however using your snippet (and applying the 43% on the margin instead of padding), you can achieve this: https://jsfiddle.net/dgat2q34/
For additional space between the line and the text, you'd then use padding on the span.
EDIT: Kaiwen Huang brings up a good point - if you didn't want to use specifically black as I've included in my example, you can change the span's background to background-color: inherit; instead.
You might test this code:
<div id="#bg" style="border:1px solid ; position:relative; background-color:black; display: inline-block"><hr id="line" style="border: 1px solid #ffffff; position:absolute; width:98%; top:50%; z-index: 0;margin:0"><div id="#container" style="border:1px solid ;position:relative; background-color:none; display: inline-block"><div style="margin:0px 35px; font-family:Arial, Helvetica, sans-serif; color:#333333; font-size: 80px">LOGO</div></div></div>
Just set your logo to have a higher z-index: than the line.
Z-index is basically:
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
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" />
I have a table which looks something like the following.
<table>
<tr>
<td class="selected plus"><a>+</a></td>
<td><a class="minus">-</a></td>
</tr>
</table>
I want that only the selected td is visible. My restrictions are to achieve this only through CSS. I am not able to alter the HTML or inject some kind of JavaScript.
This is what I come up with yet:
position the selected td over the other
expand the selected td to "displace" the other
hide the not selected td
Unfortunately I was not successful with neither of those ideas, so do you guys have any idea how to achieve this?
Here is a jsfiddle to play around with: http://jsfiddle.net/u6n7r/6/
I would be happy with a cross browser solution, but IE9 support is mandatory.
Just hide the <td/> with display: none:
td:not(.selected) { display: none; }
Here is an Update to your Fiddle
Position the table relative. Position the td's absolute, with top:0 and left: 0. Give the td's a z-index of 10. Give .selected a z-index of 11.
.selected {
background-color: green;
z-index: 11;
}
.plus {
}
.minus {
}
td {
width: 30px;
height: 30px;
border: 3px solid red;
background-color: silver;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
table {
border: 3px solid blue;
width: 72px;
height: 36px;
position: relative;
}
I have this:
<style type="text/css">
.TopBorderPanel {
position: relative;
overflow: hidden;
border-top: 2px solid #bbbb9f;
margin: 1px;
width: 500px;
}
</style>
The top border has one color , #bbbb9f, what i want to do is make it 2 colors
50% #bbbb9f and 50% #cccccc
Is it possible ?
http://jsfiddle.net/CdWCA/
.TopBorderPanel {
border-top: 2px solid #bbbb9f;
position: relative;
}
.TopBorderPanel:after {
position: absolute;
left: 50%;
right: 0;
top: -2px;
border-top: 2px solid #cccccc;
content: '';
}
Better use a background *.gif split equally into two colours, and use a single pixel of padding on the top:
.TopBorderPanel {
border: 0;
background-image: url(...);
padding-top: 1px;
}
I can think of 2 ways of doing this.
My first method would be to use a pseudo selector, what this does is add content, or styles :before or :after an element. So in effect you can have 2 styles for one element, just one as normal, and then some extras added either before or after this element.
I have added a border-top, as normal, and then added another border-top with the pseudo selector.
My second solution is to add a box-shadow, that instead of normally looking like a diffused shadow, it styled to look like a solid shadow above the element.
I've created a jsFiddle which will hopefully give you an idea, but if you don't understand just say.
jsFiddle