I did a fiddle to add a label inside a table cell.
Here is the fiddle
I'm trying to add a green label to my first row but it's very ugly I'm very bad in design and if you resize the browser my label go out. Do you have any suggestion to make this better ?
I do that because I have to tell to the user that this row was edited in my app.
.customrow{
margin-top:-11px;
margin-left:-43px;
padding-top:13px;
padding-bottom:20px;
margin-right: 5px;
position: absolute;
}
th {
white-space: nowrap;
}
td {
white-space: nowrap;
}
Thanks a lot.
Based on your requirement, i just made a class leftrow for the span and applied custom css
.leftrow{
position:absolute;
top:0;
left:0;
bottom:0;
width:30%;
line-height: 200%;
height:100%;
background-color:#5CB85C;
}
Jsfiddle
Hope it helps :)
You could use boostrap badge class or simply highlight the cell
I have demonstrated my two suggestions in this JsFiddle
Related
I am trying to make a page that can have lines to separate this sort of stuff! See the picture below!
Now the I tried many ways using empty div but still causes problems as it takes the whole page downwards. And I also thought of another way using hr tag and then use transform property to rotate it but still won't work!
Here is the link to the entire thing, few things aren't made,
the project that I am trying to make!
And here is the portion of code that I used before
<hr id="sidebar">
#sidebar {
transform = rotate(90deg);
}
Thanks any help is appreciated!
Yes you can achieve this design using :before.
Please review my code and get back to me if you have any question.
Hope it will help you. :)
Please try this css.
.slider:before {
content: '';
width: 1px;
min-height: 100vh;
background: #fff;
position: absolute;
left: 80px;
}
.slider {
position: relative;
}
One way to make this vertical line.
hr:before{
content: "";
width:2px;
height:100vh;
background-color: #fff;
position:absolute;
top:0;
bottom:0;
left:7%;
}
As we know we could truncate text with CSS and "untruncate it this way:
<style type="text/css">
.one-long-line {
max-width:400px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.one-long-line:hover {
overflow:visible;
}
</style>
I used this to cut a long H1 in mobile view, but I want the user to be able to see the full header. Because hover doesn't work on mobile I wonder if something similar could be coded where the user touches the header and of course what this code should be.
Thanks
Works with :active
.overflow-tip {
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.overflow-tip:active, .overflow-tip:hover {
overflow-x: visible;
}
See demo here
I'm currently building my website and I've run into a problem. Here is the webpage.
I want to add 3px underlines to only the links, like this:
The line height of the text is 56pt, so the border-bottom is far too far away from the links. text-decoration: underline is too thin, and way too close.
They need to be about half this distance. As negative padding doesn't exist, how should I go about fixing it?
Now used to this code (This is demo)
Css
.HomeText p a {
color: red;
text-decoration: none;
position: relative;
display: inline-block;
vertical-align: top;
}
.HomeText p a:hover:after{
content:'';
position:absolute;
left:0;
right:0;
bottom:-3px;
border-bottom:solid 1px red;
}
Demo LInk
Try adding the following:
display: inline-block;
height: 1.2em;
Haven't tested extensively, but seems to close the gap nicely in modern browsers.
Answer 1: Accept that css has limitations and work round them.
Answer 2: The only way I can thing of doing this is a using a span displaying it is a block and adding a border and padding to the bottom - this process will open up a whole other can of worms though floats blocks inline text etc. So I would go back to answer 1.
did you try this?
a {
border bottom: 3px red;
}
I made a css example. The main parts where I am facing problems are:
#sign
{
font-size: xx-large;
color:white;
background-color:blue;
font-weight:bolder;
text-align: right;
position:right;
}
and I am implementing it like:
<div id="sign">Me and Me</div>
Here the background color is displayed like a band. Now I want the background color to be limited to only the text area "Me and Me". What modifications do I have to do to acheive this?
Is there a reason that you can't just set the background for whichever elements you want styled?
Using this link you can see that what you need is a display: inline; call. I wrote up a quick jsFiddle for you to look at, this should be what you want...
http://jsfiddle.net/NjAUR/
Seeing that you want it on the right hand side, get rid of the position: right declaration, and use a float: right. Here is the updated version...
http://jsfiddle.net/NjAUR/1/
Use display:inline; with your css. And if you need that in right side use float:right also.
See the Demo
Okay here I wrapped the "Me and Me" text inside a span. Removed background-color property of #sign and added it to the span.
HTML
<div id="sign"><span>Me and Me</span></div>
CSS
#sign
{
font-size: xx-large;
color:white;
font-weight:bolder;
text-align: right;
position:right;
}
#sign span { background-color:green; } /* or any color of your choice */
Demo link
i have the following selector in my css:
a:active {
position: relative;
top: 1px;
}
So every link has this little button-effect when it's pressed.
How can i prevent that behaviour for specific links?
e.g. i have a "back to top" link on my website that shouldn't have this behaviour.
a#back-to-top {
position:fixed;
right:0px;
bottom:20px;
width:20px;
height:20px;
background:green;
}
In this case the "back-to-top" starts to jump.
However if I try to reset this it doesn't work.
a#back-to-top:active {
position:fixed !important;
bottom:20px !important;
}
any idea what I'm doing wrong or how I could exclude specific links from that active behaviour?
Try resetting the top property as well.
a#back-to-top:active {
position: fixed !important;
top: auto !important;
}
The following
a#back-to-top:active {
position:fixed;
top: auto;
}
would fix it, since it is more specific and will get applied, and it overrides the part that makes your button move..
No need for the !important directive since the rule has higher specificity and will get applied instead..
demo: http://jsfiddle.net/gaby/zUEER/
i think you should "reset" the top decleration
a#back-to-top:active {
position:fixed;
bottom:20px;
top: auto;
}
also, use !important only if for some reason the a#back-to-top:active style declartion comes before a:active one.