I need to pad just one cell in my table. I gave the td element a class and defined the class in my CSS file like this
.itemQuantity
{
padding-right:30px;
text-align:right;
background-color: #EEE;
}
Padding-right does not seem to be doing anything.
I changed the css to
td.itemQuantity
{
padding-right:30px;
text-align:right;
background-color: #EEE;
}
Now it works.
Related
I’m practising some codepen projects , in one project they used a .class{} inside another .class{} for example-
Code
.cube{
width:2em;
height:2em;
.side{
width:100%;
height:100%;
background:#;
}
}
Seemed to work fine for them. It doesn’t work for me , exact same text editor , exact same code . What is happening ?
And also , what is the above mentioned thing called ? And how does it work ?
That CSS structure implies that they're using a CSS preprocessor, such as LESS or SASS.
Currently such syntax isn't valid CSS, though the CSS Nesting Module is currently in working draft status; so it will – likely – be implemented in the future.
It's worth noting that, while nesting syntax is being developed for CSS, that syntax is different; from the previously-linked documentation:
table.colortable {
& td {
text-align:center;
&.c { text-transform:uppercase }
&:first-child, &:first-child + td { border:1px solid black }
}
& th {
text-align:center;
background:black;
color:white;
}
}
Would be equivalent to:
table.colortable td {
text-align:center;
}
table.colortable td.c {
text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
border:1px solid black;
}
table.colortable th {
text-align:center;
background:black;
color:white;
}
Screenshot 1
Screenshot 2
I am currently stuck on a css issue. Basically I have defined a style rule like this:
#divMyList tbody tr td{
cursor:pointer;
border-right:5px solid white;
padding:10px;
width:200px;
}
I'm applying another class named tmenu on my td in the <div> like this:
<td class="tmenu"> foo </td>
so that it inherits all the color and other combinations from along with my overridden styles in #divMyList tbody tr td I mentioned above. This is working fine for me.
Now, I want to implement the selected style of tmenu to my current <td> element so that when someone clicks on it, it inherits the selected style of tmenu class. The tmenu and its selected styles are defined like this:
.tmenu {
width: 100%;
height: 40px;
font-size: 14px;
font-weight: normal;
}
.tmenu ul li {
/* ..... */
}
.tmenu ul li.selected {
cursor: default;
}
When I do like this:
<td class="tmenu selected">foo</td>
it doesn't apply the rules of the selected class to my td element. Any help on what I'm doing wrong. Do I need another rule mixing all of these in a new class?
the way you have defined your table, your css should look like this
#divMyList tbody tr td{
cursor:pointer;
border-right:5px solid white;
padding:10px;
width:200px;
}
.topmenu {
width: 100%;
height: 40px;
font-size: 14px;
font-weight: normal;
}
.topmenu td.selected{
cursor: default!important;
}
I have put together a fiddle and added a color to show that it is getting styled
.tmenu ul li.selected { [...] }
Is going to look for an element structured like this:
<elem class="tmenu">
<ul>
<li class="selected"> </li> <!-- This is going to get styled! -->
</ul>
</elem>
It sounds like what you are looking for is this:
.tmenu.selected { [...] }
Keep in mind something needs to apply the selected class to tmenu, and that it won't automatically happen by simply clicking on it.
If you are using ASP.Net Forms application try document.getElementById('MainContent_test').innerHTML = carName;
If you do an 'Inspect' when you run the application you will see that ASP.Net renders the control with 'MainContent_[your control ID]' as the ID.
Once you get the name right it works.
Yeah, my titles suck :p
So I have a container, which contains <div>s. Dotted in this container are <span>s that mark off labels. These <span>s have position:absolute to make them not interfere with the layout of the <div>s.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
position:absolute;
background:#ccf;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>
In Internet Explorer, this works fine.
In Chrome, it does not. The label falls out of the box.
I understand why this happens - it's because the <span> has zero width and height within the flow of the document, allowing it to squeeze into the zero remaining space.
But I'm wondering if there's any other way to achieve the effect I want here?
EDIT: Desired effect, Chrome's bad effect
don't really quite get where you want them, something like this ? added display block to the span.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
display:block;
position:absolute;
background:#ccf;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><div></div><span>Marker</span><div></div><div></div></div>
strong text
Borrowing ideas from #Billy and with help from #JacobGray in the comments, the following solution applies display:block to <span>s, but only if the immediately follow an Nth <div>, N being the number of columns.
It works, but I'm not too happy with it being dependent on a constant number of columns - not great for responsive design ;) Better solutions are of course welcome.
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
}
#container>span {
position:absolute;
background:#ccf;
}
#container>div:nth-of-type(3n)+span {
display:block;
}
<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>
Adding display:block to the span is what I'd suggest, or putting a marker span inside every div you want to label.
If I understand well, try this. Put tags <span> into each <div> that you want have a "label". Add position:relative to all <div> and set the properties top and left for the span.
Ps. I've modified your code below, but you should use classes
#container {
border:1px solid red;
width:270px;
}
#container>div {
display:inline-block;
width:80px;
height:80px;
border:1px solid blue;
margin:4px;
position: relative;/* added */
}
#container>div>span {/* modified */
position:absolute;
background:#ccf;
top:-5px;/* added */
left:-5px;/* added */
}
<div id="container"><div><span>Marker</span></div><div></div><div><span>Marker</span></div><div><span>Marker</span></div><div></div></div>
I don't understand why does this work :
.button:active {
position:relative;
top: 2px;
left:2px;
}
But this wont work :
.button:hover {
font-size:17px;
}
It works when I use id but I want it to activate for all buttons :
#btnhome:hover{
font-size:17px;
}
This works fine but with class it wont? What am I doing wrong?
Using id and it works so sure something has to do with the specificity, over riding, try this
Demo
Demo + !important
.button:hover {
font-size:17px !important; /* Actually you don't even need !important */
}
Try:
.button *:hover { font-size:17px; }
Definitely there is an external .css file included by you via using link tag, in which .button:hover {font-size:somethingelse !important;} is defined. That's why you can't change it unless using !important again.
It is specificity. The ID is taking precedent over the pseudo style. You need to either re-write the CSS to be more general, and only put the unique values on the IDs or use the IDs plus the pseudo selector.
I took the common stuff from the ID's and moved them to a base .button class:
.button{
width: 84px;
height: 46px;
background-color:#000;
border: none;
color: white;
font-size:14px;
font-weight:700;
}
.button:hover {
font-size:17px;
}
Check out this fiddle to see it in action: http://jsfiddle.net/kJfmR/
If anyone is still facing the same problem:
I had one similar to the above, my code was like this:
<style>
.btto:hover{
background-color: grey ;
cursor: pointer;}
</style>
<body>
<button class="btto" style="color:white;
background-color:black;
padding:4%;
width:50%;
border:none"> Buy Tickets </button>
</body>
I think background-color of button inside body was overriding the one inside style
so what i did was:
<style>
.btto{
color:white;
background-color:black;
padding:4%;
width:50%;
border:none;
}
.btto:hover{
background-color: grey ;
cursor: pointer;
}
</style>
<body>
<button class="btto">Buy Tickets</button>
</body>
In a page I use a tabstrip with its own stylesheets. This tabstrip writen with divs and anchors.
I add some other divs into tabs but they inherit stylesheet from the outer tabstrip. This new divs has their own css classes.
Here is my question, are there a way to break this inheritance without changing the structure of css ?
Tabs' CSS Styles :
div.tabs {
padding: .5em;
}
div.tabs div.tabs {
padding: 0;
}
div.tabs div.tabs div {
clear: left;
height: 4em;
padding: .5em;
border: 1px solid #003366;
}
New added divs use this classes :
.graphTextItem{ font-family:sans-serif; font-size:12px; border: solid 1px #78ACFF; text-align:center; width:150px; }
.graphImageItem{ border-left: solid 1px #78ACFF; border-right: solid 1px #78ACFF; text-align:center; height:70px; }
You could always try using different elements for each nested level instead of all divs:
<div>
<ul>
<li></li>
</ul>
</div>
In the above example you can style the div, ul and li anyway you want and you can target them individually to apply style rules. Inheritance won't be a problem.
Override each element you need to not inherit in your most specific classes.
e.g. in .graphTextItem, override height and padding.
Not really. Inheritance is part of CSS. If you want a specific value then specify it.
By removing div from this stylesheet solved my problem :
div.tabs div.tabs {
clear: left;
height: 4em;
padding: .5em;
border: 1px solid #003366;
}
But I still wonder whether there is a way ?