I'm interested in building a menu bar that's backwardly compatible. I'd like to use just HTML and CSS. So I'm thinking a table with a number of cells each set with a different bkgnd color dependent on it's state. Something along the lines of ....
a:link {
.cell01{background-color:#white};
.cell02{background-color:#white};
}
a:hover {
.cell01{background-color:#red};
.cell02{background-color:#blue};
}
(I'm thinking something like this as I want to whole of the cell, not just the text in the cell to be effected). Obviously this example does not work ... but is there a way??
Thanks in advance
Giles
You probably shouldn't think of a table anyway. You can easily style a UL to have the appearance of navigation and this is much more semantically correct.
Anyway - from the CSS above I guess you have a table inside you link? If so then the correct syntax would be:
a:link .cell01 { background-color: #fff; }
a:hover .cell01 { background-color: #f00; }
etc etc
(if you want to use color names then you don't use the # symbol. If you are using hex values then use the # as I did above).
Or do you have links within the cells? In that case you would switch the items around e.g.
.cell01 a:link {background-color: white; }
Hope it helps!
Update:
Ahh - Steve's answer above gives me a slightly better idea of what you are trying to do... You have the links within the table cell and you want the whole cell to change when it is hovered over? Then simply:
.cell01 { background-color: #fff; }
.cell02:hover { background-color: #f00; }
Note that this won't work correctly on IE6 as in IE6 only A elements have hover state. You can work around this by adding an additional class in Javascript if necessary...
First: don't use tables for layout, or navigation. There is no need for that. UL usually is the best choice for the task.
Second: make your a elements block level and some padding and style as you wish: http://kod.as/lab/nav/
See http://css.maxdesign.com.au/listamatic/ to learn more.
If you want to affect the whole of the cell, you need to apply the css to the parent. Then, the child <a> tags can act separately. Something like this:
parentCell { background:white; }
parent1:hover { background:red }
parent2:hover { background:blue }
parent1:hover a { font-weight:bold }
parent2:hover a { font-style:italic }
I am assuming your HTML looks like this:
<table>
<td class="cell1">
Link
</td>
<td class="cell2">
Link
</td>
</table>
If this is the case, what you are asking is not possible using HTML and CSS alone. CSS doesn't allow you to target the parents of a selector in any way. JQuery can do what you are asking using .parent()
Related
I use the same 3-4 colors on 99% of the elements on my website. I know of absolutely no way this is possible, but I'd thought I would ask.
Is there any way to specify a color and quickly reference it within other elements further down the page? For example:
.red_color {
color: #FF0000;
}
Now, further down the page we have other elements:
div.example {
padding: 10px;
color: [REFERENCE ABOVE]
}
This way, if the color ever changes, I can update it in one place and all the other elements will follow suit.
I know it is possible if I list all the elements in one place, like:
div.example, div.other_example, p {
color: #FF0000;
}
But this way, every time I add another element to the stylesheet, I have to remember to add it to this list.
Any other ways of doing this?
Thanks.
Yes, but not in CSS. Look at using LESS or SASS. Then you can define variables and use them as you're suggesting.
In order to further my CSS knowledge I've been attempting this, but I'm not even sure it's possible.
I have a list of 50 links, 1 per line going down the page. There is very little vertical padding/margin between each link. Each link has been assigned an individual HTML id, e.g.
<a id="test" href="temp.html">blaghblagh</a>
so that visiting http://example.com/temp.html#test will change the page focus to the specific link id.
What I'm wanting is when a temp.html#test url is visited, the #test id link anchor will cause the link to "stand out" by placing padding/margin around the link.
I've been trying to combine it with a:hover and all kinds of stuff but to no avail. Any advice would be greatly appreciated.
You need to use :target pseudo selector:
a:target {
padding-left: 20px;
color: red;
}
Demo: http://jsfiddle.net/dfsq/QuFHp/
The :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same. (http://css-tricks.com/on-target/)
IE supports it starting from version 8. If you need to support older browsers you have to use javascript:
var hash = location.hash;
if (hash) {
document.getElementById(hash.replace('#', '')).className = 'active';
}
There's a :visited selector specific to anchor tags:
a:visited {
padding:10px; /* Whichever values you wish to use. */
margin:10px;
}
The selector you're looking for is :visited:
a:visited {
padding: 5px;
margin: 5px;
/* or whatever you want, really */
}
Try. a:visited{ color: red; }
Find out more about Pseudo-Classes small documentation
This cannot be done with pure CSS, but it is achievable with Javascript/jQuery.
Shameless plug, but I wrote an article on how to achieve this which you might find useful.
http://curtistimson.co.uk/js/reading-url-hashtag-values/
if (window.location.hash){
var hash = window.location.hash.substring(1); //gets id in URL
$("#" + hash).css("padding", "10px"); //applies padding to that element
}
I don't think you can do this normally with CSS. You would have to add a jQuery function which checks to see if there is an ID appended to the URL and if so add a class to that link.
Where are you going wrong with a:hover? Post some code and I'll update my answer to get that working.
I have a DIV square containing the word "Next". I would like to have the DIV background color change when I hover over it and have it take me to a link when I click on it. Can I do this without using Javascript? I don't just want to use a link as I guess for that then it would only work if I go above "next".
Thank you very much for advance helping.
Inevitably we have to ask: why not make it a hyperlink? If it quacks like a duck and looks like a duck, it should really be a duck.
You can handle the hovering effect with a simple :hover rule in your stylesheet (e.g., div.whatever:hover { color: red; }), but you can't instill an element with functionality like going to a new page without the use of JavaScript.
In HTML4(and to the best of my knowledge) HTML5 you can't do this. I heard they are planning on doing it in XHTML2 but that's not out yet.
You could simply use the <a> element like a <div> just give it a class, for example NextLink and then you can do things in CSS to make it look and act like a div:
.NextLink {
display:block;
}
.NextLink:hover {
background-color:red;
}
You can achieve this by having a hyperlink within the DIV with display:block:
<style>
#next:hover { background-color:red; }
#next a { display:block; }
</style>
<div id="next">
Next
</div>
Yeah, you can't really do that without javascript--or at least it wouldn't be worth trying, in my opinion. The best approach would be to style the a tag. Something like this:
a {padding:10px;border:solid 1px #000;}
a:HOVER {background-color:yellow;}
I'm trying to catch all the elements of my website in one css declaration. It's a Drupal websites with a billion p's, a's, li's, ul's, strong's, all kinds of div's,...
So, pretty easy I thought and I added this in my css:
body.i18n-zh-hans {
color: red;
}
But for some freakishly reason, the site doesn't move a muscle.
What's the proper declaration to catch ALL the text in just 1 CSS declaration?
Worst case scenario, I would have to declare everything on its own no? Like:
body.i18n-zh-hans, #main p strong a li ul {
color: red;
}
UPDATE
So, Basically, I just want to override all, in this example, the colors of the font in the whole website!
Thanks in advance
You'd want to make that declaration !important, so it'd override any more "specific" styles specified elsewhere in your CSS. Remember that CSS has precedence rules, and "more specific" matches will have higher priority than "less specific" ones.
body.i18n-zh-hans {
color: red !important;
}
* {
your style..
}
and you got to be the last rule in the list..
and there might be some inline styles, those will override..
tested it a bit out and figured out that everything you define in it needs !important..
Here you go:
If body is the biggest box in the box model. Get it? You want to target the big container. Try firebug. It's a great tool. You can even edit the css on the browser to instantly change the website (not permanent though).
body {
color: red !important;
}
This was the one and only solution!
.i18n-zh-hans * {
font-size: 99% !important;
}
Thanks to everyone who participated this discussion.
I have the following html snippet:
page title goes here<br />
<span class="username">username goes here: </span><span class="dateandtime">date the time go here</span>
Here is the css for these classes
.title
{
color:#707070;
}
.username
{
color:#8DAAB8;
}
.dateandtime
{
color:#A5A7AC;
}
Is it possible to change the colors of these 3 items when hovering over the title?
The colors I want the items to change to are as follows
title = 000000
username = DF821B
dateandtime = 3185B6
Not sure if this is possible with css, if the html snippet structure needs to change, that will not be a problem.
I know this can be done with javascript, but wanted to know if it is possible without javascript.
Use the :hover pseudoclass:
.title:hover
{
color: #000000;
}
etc. This works in all browsers, except in IE6 and earlier, which doesn't support :hover on anything other than hyperlinks (A elements).
Edit 1: I see you want to change them all while hovering over the title. In that case, it becomes a little more complicated. You should put a <div> around it and apply the :hover pseudoclass on that. It won't just be the title (which is also possible, but has even less chance of working in IE). For that:
<div class="someclass">Title<span class="username">username</span><span class="dateandtime">date and time</span></div>
is your HTML, but your CSS would be:
.someclass .title:hover { color: #000000; }
.someclass .title:hover ~ .username { color: #DF821B; }
.someclass .title:hover ~ .dateandtime { color: #3185B6; }
Where ~ is the sibling selector (meaning it should have the same parent (.someclass) as the .title:hover).
#Harry Joy: No, it's not. My answer is different, not to mention I don't have enough rep to post comments.
Edit 2:
As requested, to make them all change while hovering over the entire container, use the above HTML with the following CSS:
.someclass:hover .title { color: #000000; }
.someclass:hover .username { color: #DF821B; }
.someclass:hover .dateandtime { color: #3185B6; }
(though basically credit for that goes to Spudley for suggesting it first).
Not totally clear on the question -- do you want each of them to have their own hover colour, or do you want all three to change colour at once, when you hover on any of them?
In the first case, it's easy: just add a :hover style for each of the three elements (you already have answers to this effect, so I won't repeat them here).
In the second case, you'll need a container element that would take the hover, so your code would look like this:
<span class='container'>
page title goes here<br />
<span class="username">username goes here: </span><span class="dateandtime">date the time go here</span>
</span>
(you may want to use <div> rather than <span>, but I'll leave that up to you)
Your CSS would then look like this:
.title {color:#707070;}
.username {color:#8DAAB8;}
.dateandtime {color:#A5A7AC;}
.container:hover .title {color:#000000;}
.container:hover .username {color:#DF821B;}
.container:hover .dateandtime {color:#3185B6;}
Obviously, change the colours in the new styles to whatever you want them to be. If all three should be the same, then you could simplify the three new styles down to something like this:
.container:hover span, .container:hover a, {color:#000000;}
Hope that helps.
One final thing to note: IE6 and below do not support the :hover style on anything except <a> elements. My recommendation to you is simply not to support IE6 for your site (there are plenty of other things broken in IE6 too), but if you do need to support it, there are hacks available to get :hover to work with it. See Whatever:Hover.
It's definitely possible, just append this to your CSS:
.title:hover
{
color:#000000;
}
.username:hover
{
color:#DF821B;
}
.dateandtime:hover
{
color:#3185B6;
}
This called a pseudo-class and will make your anchors change color when hovered )
Edit:
At first I misunderstood your question, this isn't the solution!
You can't do this in CSS alone, but you can do it jQuery easily!
Here's an example.
What you need to do is set up a class for each of the hovered states, then use jQuery to replace add a class that will change the colors as you want :)
You just have to include the jQuery framework if you haven't already:
In the <head>:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
Well you could do this one of two ways but not with CSS, you can either add and remove the appropriate classes (unobtrusive JavaScript) or change the styles directly. For instance:
document.getElementById('someElement').style.color = '#FF0000';
Or you can use a JavaScript library such as jQuery.
jQuery('p.someClass').mouseOver(function(e) {
e.target.style.color = '#FF0000';
})
.mouseOut(function(e) {
e.target.style.color = '#000000';
});