look at this jsFIDDLE sample
i want to change the cell background color for hover state with CSS.. it can be attained through JavaScript but i want to do it with CSS... plus i want the whole cell to act as a link how to do it
There are several things you need to take into consideration:
Don't mix CSS and presentational HTML otherwise it will get very confusing. Colors (for text, background, borders), sizes, alignment, anything that has to do with the look of the site belong into the CSS.
Try to avoid tables for layout purposes. They may seem easier as a beginner, but it's an outdated technique.
In the CSS you need to move the :hover rule before :visited rule. Since both rules have the same specificity the first rule (currently :visited) with take preference and visited links will never have the hover rule applied to.
You don't need to repeat styles in CSS for every rule. Due to inheritance and cascading many styles are automatically applied to child elements.
You need to set the background colors on the links instead of the table cells, then you can change the background color on hover just as you already are with the text color.
Giving the links display: block will have the links stretch over the whole width of it's containing block, since that is the default behaviour of block elements.
Here is an example how the same layout with "clean" CSS and HTML should look like:
http://www.jsfiddle.net/QShRF/5/
Give the menu's table tag an id and then:
#menu-table td:hover { background: whatever; }
Really, though, you shouldn't be using tables for anything other than data tables, they are hard to maintain and break semantics.
.menu_links:link { display: block }
Makes the entire cell act as a link (you'll need to add a little margin/padding though). Then you can just add .menu_links:hover { background: #123123 } to colorize the background.
Also, I can advise you to set all the table's styles in a stylesheet. <table bordercolor="red" bgcolor="#ffffff"> is very outdated and makes maintenance on the site a hell.
Related
Let us look at below HTML chunk,
Here, in the above chunk, we are using class for each div.
We can also replace classes with CSS selectors
.first{
/* some styles */
}
.first:nth-child(1){
/* some styles */
}
.first div:nth-child(1){
/* some styles */
}
The above CSS chunk can also satisfies our requirement
What is the best practice? Explain the conditions where we can use selectors and classes
thanks :)
I think it's better to use CSS selectors style when the style is related to the position of elements and otherwise use classes.
For example, if a table's background of each line is related to their position, say, red for the first line, green for the second line, blue for the third line, red for the fourth line, and green for the sixth line and so on. It's better to use CSS selectors like :nth-child(3n+1) in this case so that you don't need to write the extra information like class='red' in HTML which is a bad practice since it's hard to change if you want to use four colors later.
But if the background of the table lines are decided by their values, say, red for values less than 0, green for values greater than 0, and blue for 0. You may find it quite hard to express this in CSS selectors so adding class='lz0' may be a wise thing to do.
In conclusion, bear it in mind that content and style should be decoupled. Use HTML for content and structure and use CSS for style.
Here is a difficulty I am trying to solve. I am working inside a client's page to develop a scroller interface. Basically, I cannot change the doctype, the surrounding elements and the stylesheets or scripts that are already in the client's page and I have to make my little block of code "fit" inside this. This is common for web developers.
The tricky part now is that some img elements inside my block are actually being targeted by a CSS rule inside the inherited client's stylesheet (which, of course, I cannot remove or change). It would be too long to explain why here in this case I actually can't use more specific CSS rules myself to compensate this, but it's a fact. So my question is : is there a way to prevent a HTML element from being targeted by a CSS rule other than creating another rule or deleting the rule? The difficulty is that a rule like
.containter1 .containter3 { ... }
will target an element inside :
<div class="container1">
<div class="containter2">
<div class="containter3">Element
...
Elements inside the page don't make "walls" for CSS rules, which "jump" over containers to target elements. So a rule like
img { ... }
will target any img tag. The only way I know to compensate this is to create a more specific CSS rule targetting the precise img to protect. But I cannot do that here. Is there a way to get the same result without creating a CSS rule, only by adding HTML?
/* EDIT TO CLARIFY */
I know CSS rules, specificity, inheritance, etc. My question was more pragmatic. Consider this example to clarify the problem : imagine you have a client's stylesheet that you can't touch and that defines the following general rule:
img { display:none; }
The problem is that you cannot set a corresponding generic rule to do the opposite, like :
img { display:not-none; }
because there is no such thing as the opposite to none. The opposite of "none" can either be "inline", "block", "inline-block", and so on.
So basically, this means that the first generic rule forces you to explicitly define the display property for each and every img in your page. And that sucks. So I was trying to find a hack to solve situations like this (my actual problem is even worst than this, believe me, but this example is much clearer and quicker to explain).
If you're saying you want to prevent targeting without changing any code, then no, that's obviously not possible.
In-line styles always over-ride style-sheet rules ( unless they're using an !important tag, then you'll need to also use it).
You should be able to reset whatever elements you need, using syntax from your favorite CSS reset. Here are some options:
http://www.cssreset.com/
So, something like -
<div style="border:0 !important;padding:0 !important;margin:0 !important;height:auto;"></div>
is your best bet.
The only way you can change CSS for specific element is modification of existing styleshits or creating new style which is more specific and will overload other styles.
and I have to make my little block of code "fit" inside this.
Once you have make some block of code, you can put style tag inside that block of HTML code like this, for instance:
<div id="block_of_code_available_for_modification">
<style type="text/css">
//css code which will fix styles of your content without influencing other elements on a page.
</style>
</div>
Or, if you have just a few elements you need to fix styles for, you can use style attribute of HTML elements (once you can set modify HTML, you can always add something like below... Well, the same as adding style tag). Priority of css properties inside style attribute is the highest one. Except if there is no !important in some previouse styles:
<img style="any css properties you need" src="..." />
The default display value for an img element is inline-block. If you want to reset the display value for all images, why not use that?
If you've got multiple different types of elements that are being set to weird values, then the problem is maybe a bit more complex as you'd need to consider which elements to set to what display type. But all HTML elements do have well-defined default display types, so it shouldn't be too hard to reset them all.
img {display: inline-block;}
span, a, etc {display:inline;}
div, etc {display:block;}
... etc ...
If it comes down to it, you could just use one of the reset CSS scripts that are available, to set everything back to the correct defaults.
No there is no way you can stop other rules from getting applied on a particular element.
you have to redefine all those rules for that html element so they will overwrite all the other rules.
I'm writing a simple contenteditable-based HTML editor, one which lets the user edit a page that is styled by their own CSS (which they can live-edit) and also do basic things like insert new tags, apply classes, etc.
One feature I'd like to have is an option to toggle the display of dotted borders around divs, much like you typically find in WYSIWYG HTML editors such as Dreamweaver, Expression Web, and many others. (This helps the user see her divs even when they have no visible border.)
Is there any possible way to do this? Some ideas:
I can't simply modify the CSS on the actual/existing divs, since they may already have their own borders defined, which I should not obliterate with dots. Ideally, I can show a border around the existing borders, which is how things appear in the aforementioned commercial editors. Even if I fall back to actually setting borders on elements that have no existing borders, figuring out which ones have no borders may be difficult, esp. in the face of things like :hover which dynamically change the computed style.
I may wrap these divs inside new divs, which in turn have the dotted border. The tricky part is handling their CSS, e.g.:
Wrappers must be similarly styled as their children, e.g. a div that has width:50px must have a wrapper that's also width:50px (roughly), so I'd either need to continually poll (as there's no way to be notified of indirect style changes, e.g. on the class) for changes to the computed style (which is completely non-scalable), or implement my own CSS engine that runs and determines what has changed each time the user live-edits their CSS.
Polluting the DOM with my own divs is invasive and interferes with rules such as:
/* these may or may not be divs */
.a > .b > .c { ... }
or:
/* if this is wrapped, then they'll all be :first-child */
.foo:first-child { ... }
or perhaps:
/* immediate children of my wrappers would inherit the dotted borders */
.foo { border: inherit; }
Perhaps there's a way to automatically rewrite these rules robustly - to take the last example:
:not(.my-dotted-border) > .foo { border: inherit; }
But even if theoretically possible, there are a ton of cases to worry about and it would be quite hairy.
Lastly, perhaps there's a way to collapse margins even with the dotted border, but I don't know of it.
Another idea is to overlay the borders on top (absolutely positioned with JS based on the dimensions/offsets of the underlying elements), but this is ugly with overlapping elements that have particular z-indexes, and again I'd need to monitor all elements for style changes. Except now it's not enough just to monitor the changes in the explicitly specified styles, as I need to react to changes even to offset and dimensions (e.g. if the user types some text, it may push down all the elements below it, so I must react to that by updating the overlays).
A related question is See the page outlines but this is from the perspective of a user who wants to see outlines - I'm asking from the perspective of a web-based editor implementation, how to provide these outlines.
Thanks in advance for any tips.
You can use the outline and outline-offset CSS properties to style the outline of your editable divs as they will not overwrite any existing borders (they will however overwrite any existing outlines if there are any).
Check out this example to get an idea of how you can implement it: http://jsfiddle.net/EFJ6B/
I am currently restyling a website, but part of the site takes a string from the CMS and puts it into a description area. The description often has its on HTML, such as bullet points.
The problem is the designs we received also use bullet points to style certain aspects, which make everything within this description area styled entirely incorrectly (tiny width for ULs, background applied to H2, etc).
Is there any kind of tag that will reset the styling of everything within it?
Thanks in advance.
Edit: I've gone for this solution, which works when I apply the class 'CMSReset'. It resets the main offenders, thanks for the help:
div.CMSReset, div.CMSReset *
{
margin:0pt !important;
padding:0pt !important;
vertical-align:baseline !important;
width:auto !important;
background:none;
color:inherit;
}
short and simple: no, you'll have to reset the stylings taht need to be reseted on your own.
a workaround would be to use an iframe wich would prevent the inner content against inherited styles, but that solution is even worse in my opinion.
this other topics might also be interesting for you:
reset multiple css styles for one single div element
how to not inherit? or how to reset inherited width to the value before? (css)
Generally, people override CSS Styles in 2 ways:
1) They define an inline style on the attribute itself so:
<div style="background-color:#FFFFFF"></div>
Would override any other style.
You can also apply a style via an id (#IdName) which will have precedence
2) They redefine the style at that level of the document. You can use the !important css modifier (but this isn't universally supported).
If you've blanket applied styles, like div or body > div then these can be difficult to override and often require restructuring, or rethinking, your styles and classes.
Hey all, simple question I'm sure, but I would like to have the body of a page be one color and to have the table in the center a separate color. I tried specifying body color and table color, but body always overrides it. I'm attempting this in css, and I have a feeling I need to use a "not" excluder to make this happen? Such as specifying body not:table or something along the lines of that. Absolute beginner here, so be easy on me. Thanks!
If you literally tried to apply body color and table color that'd be invalid. Both for (x)html and css.
color addresses the foreground (text) colour of an element, whereas background-color addresses its, well, background-colour. So:
body {background-color: #ffa; }
/* sets the background of the `body` element to #ffa (yellow) */
table {background-color: #f90; }
/* sets the background of the `table` element to #f90 (orange) */
I wouldn't suggest you ever use these colours together, but they're highly visible and leave no mistake about whether they're being applied, or not.
Most properties in css cascade down, some do not. But table {/* css */} is enough to cause the new values to override those set for a parent/ancestor element. Providing the new values are explicitly stated.
Apparently while there is a CSS3 not() selector (I had thought it was just a jQuery implementation, wow...), it would seem that it's implemented only in 'modern' browsers, so not widely useful at the moment. And it wouldn't really address your situation.
Make sure your styles are actually being applied to your table tag. If your table does not change colors, then your CSS selector is likely wrong.
Here is a simple example of styles being applied to the body tag. The class bg is added to the table tag in the markup, so it will pick up the other colors.
See here: http://jsfiddle.net/uEgrg/