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.
Related
I'm creating a newsletter in Salesforce Pardot and I want the CTA buttons to change color when you hover over them.
I have 2 different CTA buttons.
For the transparent CTA buttons I'm using this CSS and that's working:
.tr1:hover { background: #F7F36D !important; }
.tr1:hover td { background: transparent; }
.tr2:hover { background: #6BCDDD !important; }
.tr2:hover td { background: transparent; }
Etcetera
But I also have a black CTA button where I want to change the bg color (to #E0A9D5) as well as the font color (to #000000). But somehow I can't seem to get it working :(
This is the HTML code:
<tr class="tr6">
<td align="center" class="em_white" height="36" style="height: 36px; background: rgb(0, 0, 0); padding: 0px 12px; font-family: Helvetica, Arial, sans-serif; font-size: 15px; color: rgb(0, 0, 0); border-style:solid; border-radius: 0px; border-width: 2px; border-color: black;" valign="middle">Lorem ipsum dolor »</td>
</tr>
Can anyone help me with the CSS part? Thanks!
In order to use the hover property, you can simply use :hover on any selector. Here is a quick example.
button:hover {
background:yellow;
transform:scale(200%);
}
<button>A button</button>
Now if you want to make another element change when you hover on one element, you can use a code like this:
div:hover ~ span {
background:red;
}
<div id="element1">a div here</div>
<span>span</span>
It's not great practice to have lots of inline style added to your html elements. Therefore, you should strip out the content s of the style="...".
Then instead, choose an appropriate selector, eg the class="em_white" and add style there instead:
.em_white {... Add stripped out style here...}
After that, you can then target the anchor within the tr tag, with something like:
.em_white a {background-color:#f00; color:#000}
.em_white a:hover {background-color:#000; color:#fff}
The added benefit to this is that there is a lot less duplication and also your code will become easier to read. You also only need to make one change to the CSS to effect all elements with that class.
I fixed it by styling both tr6 as em_white. I know this is not the right way to do it, but at least it's working.
.tr6 td { background: #000000; }
.tr6:hover td { background: #E0A9D5; }
.em_white1 a { text-decoration: none; color: #E0A9D5; }
.em_white1:hover a { text-decoration: none; color: #000000; }
In an MVC application, I need to display links rendered by #Html.ActionLink as buttons. I have the following code in site.css:
.linkbutton {
font-family: Constantia, Georgia, serif;
text-align:justify;
padding-left: 22px;
background-color:#FF7F00;
color:#fff;
border: 1px solid #333;
cursor: pointer;
font-size:1.2em;
width: auto;
height:auto;
}
In the view I used a table layout for the links and referred the linkbutton class as:
<td class="linkbutton">
#Html.ActionLink("Add Cab", "Create")
</td>
The link is using the styles from the .linkbutton class. However, the text color that needs to be in white (#fff) is not inherited, despite being defined as color:#fff; in the CSS. Instead the default blue link color with an underline is getting displayed. I need the link to appear with white font color and without the underline.
In CSS I tried:
a.linkbutton.link {
/*Style code*/
}
Then refer it from the view as:
Html.ActionLink("Add Cab", "Create", new {#class = "linkbutton"}).
But, it is not working. Please help.
You can override the rules for links inside .linkbutton element, so instead of
a.linkbutton.link {
/*Style code*/
}
write
.linkbutton a {
color: #fff;
text-decoration: none;
}
I have hyperlinks that i want to change color on Mouse hover to show that they are responsive and get rich user interface but i am not able to achieve this..
Here is the fiddle..
Fiddle
And Here is the HTML...
<div id="footer" class="footer-shadow">
<div style="margin-left:auto; margin-right:auto; width:960px; ">
<div id="footerAboutUS" style="float:left; width:150px; position:relative; margin-left: 10px; margin-top: 7px;">
<label style="font-size:18px; color: #6c3f00;">About US</label>
<br/> Our Delivery Model
<br/> Solution Area
<br/> List of Industries
<br/> IT Management
<br/> Lines of Business
</div>
</div>
try to remove the a lement style attribute that overriding your css
then then use tag as below
<style>
a {
color: gray;
text-decoration: none;
font-size: 11px;
}
a:hover {
color: red;
}
</style>
You can set a different color on mouse over using 'hover' pseudo class of CSS.
Example:
.footer-shadow a:hover {
color: red;
}
Fiddle: http://jsfiddle.net/z45Xz/1/
Use class in place of style
like :
.class1{
color: gray;
text-decoration:none;
font-size: 11px;
}
and change color on hover like
.class1:hover{
color: blue;
text-decoration:none;
font-size: 11px;
}
First, remove color gray from your a elements (In you html file). Then insert this into your css:
a {
color: gray;
}
a:hover {
color: red;
}
With demo: http://jsfiddle.net/RubberPoint/d9n79/
First, Don't use inline style for <a> tag as color: gray;. because if you use inline style ,you can't override the another style (internal,external).
a{
color: gray; //you can add your more style here
}
and for mouse change over use this.
a:hover{
color: blue; //you can add your more style here
}
Otherwise, use some ID or class for html element to avoid generic changes for all <a> tag
Just add :hover selector and add !important rule to override the current style
Check this link: http://jsfiddle.net/z45Xz/4/
.footer-shadow a:hover{
color: red !important;
}
First thing as mentioned in above answers Don't use inline style.
And just
a{
color:grey;
text-decoration:none;
}
and for changing the color when u hover the mouse use psedo class "hover" like
a:hover
{
color:green;
}
I am learning how to create classes in CSS with MVC4 and Razor. I want to create a class for a table that is displayed on my home page with special markup classes for td elements with strikethrough, and some td elements bolded. I do not know how to create a class that belongs to another class. I feel that by making sub classes in my table class, I can keep more organized and clean CSS code.
I have a few questions.
How do I create a new table class that inherits from the base table?
Should I put new classes in a separate CSS file?
If answer to previous question is yes, then what do I need to do for
Razor and MVC4 to see the new file?
How do I create a td element under that new table and cause it to
inherit from the base td of the base table?
see code below
/* tables
----------------------------------------------------------*/
table {
border-collapse: collapse;
border-spacing: 0;
margin-top: 0.75em;
border: 0 none;
}
th {
font-size: 1.2em;
text-align: left;
border: none 0px;
padding-right: 0.4em;
}
th:first-child{
margin-left:0px;
}
th:last-child{
margin-right:0px;
}
th a {
display: block;
position: relative;
}
th a:link, th a:visited, th a:active, th a:hover {
color: #333;
font-weight: 600;
text-decoration: none;
padding: 0;
}
th a:hover {
color: #000;
}
th.asc a, th.desc a {
margin-right: .75em;
}
th.asc a:after, th.desc a:after {
display: block;
position: absolute;
right: 0em;
top: 0;
font-size: 0.75em;
}
th.asc a:after {
content: '▲';
}
th.desc a:after {
content: '▼';
}
td {
padding: 0.25em 2em 0.25em 0em;
border: 0 none;
}
tr.pager td {
padding: 0 0.25em 0 0;
}
To address your questions:
How do I create a new table class that inherits from the base table?
If you do not have a css file that resets all style rules every element inherits from the browser default file. If you define style-rules for the table element table {....} and create another style rule .foo {} the css-rules for table.foo are composed by the default style, the defined style for the element and the specific style. You can test this out with the chrome developer tools and inspect element.
Should I put new classes in a separate CSS file?
No, unless you have a very good reason. Just to clarify - rule of thumb put all style rules in one file. But not each rule in a new seperate file.
How do I create a td element under that new table and cause it to inherit from the base td of the base table?
See above td {background-color: red} td.bgBlue {background-color: blue} and the html <td class="bgBLue"> But there are other ways. I would recommend you read a tutorial about the basic rules of css and inheritance of style rules.
Update
I want to create a class for a table that ... with special markup for td elements with strikethrough, and some td elements bolded. For strikethrough (css 2.1 or css 3) you can use text-decoration which seems to be not supported very well. Although it may be that the browser compability table is outdated because it worked in both browser i tested (IE11 and chrome31).
.isBold { font-weight: bold;}
.isStrikethrough {text-decoration:line-through; }
and the html
<table>
<tr><td class="isBold">bold</td></tr>
<tr><td class="isStrikethrough">one</td></tr>
</table>
There may be hacks for older browsers by using for example <del>your text</del> and overlaying a transparent image.
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.