basically i've 6 pictures with 6 text links down to them
i've done css hovering on pictures (color version -> on hover -> black & white version)
and on text links (black font -> on hover -> red font)
when i'm hovering on links - picture is getting hovered version (B&W) and that's ok, but that's only working in this direction, in opposite direction when i'm hovering on picture - text link stays the same (black font)
and that's my question, how to connect this two elements (text links and pictures)?
here's my code:
HTML
<ul class="menu">
li class="element_1">
Text of the<br>First<br>Link</li>
[rest of the elements list]
</ul>
CSS
ul.menu element_1{
width:130px;
margin-left:20px;
height:130px;
display: block; background: url(img/menu_1.jpg) top center no-repeat;;
}
ul.menu li.element_1:hover{
width:130px;
margin-left:20px;
display: block; background: url(img/menu_1_bw.jpg) top center no-repeat;;
I don't see any CSS for changing the link color. I guess you're counting on the browser to do it?
You can fix this by adding the rule to your existing CSS:
ul.menu li.element_1:hover{
color: red;
width:130px;
margin-left:20px;
display: block; background: url(img/menu_1_bw.jpg) top center no-repeat;
}
The alternative is to put your image and text inside a single element, in which case the browser will apply its automatic link highlight to the whole element.
Particularly as you're making use of background images, I would recommend restructuring your HTML to use only a single anchor. Then, when hovering that, you can apply both your image and font colour change.
Take a look at the jsFiddle for a simple example*. Here's the new CSS:
.element_1 a {
width:130px;
margin-left:20px;
height:130px;
display: block;
background: url('http://placekitten.com/200/300') top center no-repeat;
color: red;
}
.element_1 a:hover{
background-image: url('http://placekitten.com/300/300');
color: green;
}
When defining your :hover state, you only need to specify those things that are changing, rather than re-stating everything.
* Note that your HTML/CSS needed tidying up. You missed the . for your class selector and had multiple semi-colons. Make sure that your code validates and doesn't have these simple mistakes, as they will mask the true problem.
Related
By taking into consideration the following image, representing the 3 states of this menu interaction:
And knowing that:
1) We cannot have one image for all the horizontal menu, each item, (so, each ul li a) should have their own image;
2)
background image positioning will be favored since it will be better regarding cross-browser issues;
3)
The text on those buttons (should be) text and not an image;
What would be the best way for achieving this ?
I just need a kick off here.
Thanks.
Update:
Here's a test with no swapping images:
http://jsfiddle.net/Cq5JY/
Quite simply you've kind of spelt out your solution yourself I think.
Each item in the navigation needs 1 image with three states for the rollover and active states. Then you would move the background image using CSS as you mentioned depending on the way you layout the images.
The thing that makes the css a bit tricky (well you'll be writing a fair amount) is the text positioning on buttons, if the text starts at lots of different y coordinates then obviously you will be writing each one of these in to the CSS.
I would setup the nav using the code similar to the below (untested) based on a separate image for each button, which has in it the regular state of the button, underneath the rollover and underneath that, the active state of the button.
/* set up the button based on a width of 150px and 100px height */
ul li, ul li a{
display:block;
width:150px;
height:100px;
text-align:center;
background-position:0 0;
}
ul li{
float:left;
}
/* roll over - move the background image by the height of the button (100px) */
ul li a:hover{ background-position:0 -100px; }
/* active state - move the background image by twice height of the button (200px) */
ul li a.active, ul li a.active:hover{ background-position:0 -200px; }
/* define each button (background image and text position) */
ul li a.dashboard
{
background-image:url(images/dashboard.png); /* define image url */
padding-top:40px; /* position the text using a combination of padding / height) */
height: 60px;
}
ul li a.products
{
background-image:url(images/products.png); /* define image url */
padding-top:30px; /* position the text using a combination of padding / height) */
height: 70px;
}
...
And then I would have the html quite simply:
<ul>
<li>Dashboard</li>
<li>Products & Services</li>
...
</ul>
Let me know if you have any questions, I haven't actually tested the code but that is my general approach to most html/css based navigation whether it is vertical or horizontal (although I would use 1 large image for all rollover states for all buttons).
I'm struggling with an anchor (specifically a:hover) tag in CSS. Here's my JSFiddle:
http://jsfiddle.net/yXwng/
Basically I have a nav bar with a custom image (in the fiddle I got rid of it because I'm just trying to understand the syntax and line things up). The nav bar is a div and I have five links on the nav bar which are all nested divs.
In order to make the each of the nested divs links (I made the entire div a link), I added a transparent png as the background image and set the link to the background image, thus the nav bar custom image still shows and you can click the link on the nav bar.
Now, I'm trying to make a hover/rollover image for each nav bar element. When I rollover, it shows the new image but it's aligned completely wrong (down and to the right of where the original image was). On my fiddle, I used the code, but instead of the images I'm using, I just used borders for alignment purposes. You can see on the example that the red box (which is the anchor) is not lined up for some reason with the div. That is exactly where the hover image shows up when I try to implement it.
Any ideas? Thanks!
if you add the same dimensions to your a link, it should work perfectly:
#homelink a{
border:1px solid red;
width: 200px;
height: 40px;
display:inline-block;
}
You need to give a display block and some line height to <a> like this:
#homelink a {
border: 1px solid red;
display: block;
line-height: 10px;
}
It will be aligned with div. BTW you need to use UL LI structure for it.
The site is appearing fine in Mozilla, Chrome, and IE6. But IE7 onwards, the menu background image was not appearing at all.
In the file moo.menu.css, I made the following changes in li:
.ry-cssmnu ul li {
margin: 0; /* all list items */
padding: 0;
float: left;
display: block;
background: url(../images/mainnav-bg.gif) repeat-x center top blue;/*added this line*/
cursor: pointer;}
After this, the background repeat is appearing only where the menu text is present.
http://bit.ly/ie8issue
The site is at: www.agmrcet.com/cons
Thanks in advance.
You have to declare a height to that container. Your floating list items are not giving their parent container height because float removes them from the document flow. Your <ul> has a current height of nothing, and the background image won't remedy that.
#mainnav { height:44px; ... }
First of all, I would change the CSS background property according to the CSS syntax:
background: blue url(../images/mainnav-bg.gif) repeat-x center top;
Looks like the problem is with your
<div class="clearfix" id="mainnav">
tag. Have you tried adding a pink border or something (to debug it) to the mainnav element and then setting a fixed width on it to make sure it goes the full width?
Hi I have a dynamic menu where the ul li items change in width depending on the text set in the CMS (Joomla). They want the menu item, on mouse over, to both have 1. a repeated background image and 2. an image placed at the top (http://screencast.com/t/Zjk4YTJmNGQ).
Now, I'm great with doing the repeated background image on a mouse over and that would be great, but I am not sure how to get both of these images in one css declaration.
Any help would be greatly appreciated, as I haven't learned this technique yet :(
If it's a menu, the relevant markup should probably resemble <li>…</li> — that's two elements, which is plenty for two background images.
Firefox 3 and Webkit browsers support multiple backgrounds.
background: url(image1.png), url(image2.png);
background-repeat: repeat-x, no-repeat;
background-position: top right, 90% 5px;
You could also try to get this working by using the :after pseudoclass.
.menu li {
position: absolute;
background: url(image1.png);
}
.menu li:after {
content: '<img src="image2.png">';
}
You can find a nice example here:
http://s3.amazonaws.com/nettuts/690_textGradients/index.html
I need a div with picture bg to overlay an image (with some amount transparency) when hovered on. I need to be able to have one transparent overlay that can be used and reused throughout the site on any image. My first attempt was round-about to say the least. Because I found out you cannot roll-over an invisible div I devised a sandwhich system in which the original image is the first layer, the overlay is the second layer, and the original image is third layer again. This way, when you roll-over, the original image disappears revealing the overlay image over the original image:
http://www.nightlylabs.com/uploads/test.html
So it works. Kinda. Because of you cannot interact with an visibility:invisible element (why?!) the roll-over flickers unless you rest the cursor on it.
Any help? This method is bad so if anyone has a better one please comment.
I used the following css and its fine.
#container { position:relative; width:184px; height:219px;}
.image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:2;}
.overlay { background-image:url(aligo.png); position:absolute; top:0; left:0; width:184px; height:219px; z-index:3;}
.top-image { background-image:url(alig.jpg); position:absolute; top:0; left:0; width:184px; height:219px; z-index:4;}
.top-image:hover { background-image:none;}
The image flickers because you can't hover over something that isn't there.
It will work if you have it layered normally (no z-index necessary) and make it transparent, so that it is still being displayed and can be hovered over.
The second image won't flicker, and you can control the styling with the span tag. Here's some of the CSS I used:
img.side
{position:absolute;
border:1px solid black;
padding:5px 5px 5px 5px;
float:center;}
/*normal base images*/
img:hover+span
{display:block;}
/*new images. automatically display beneath base/hover image*/
.side:hover
{opacity:0;}
/*base images again, only when hovered over*/
span
{display:none;
cursor:pointer;}
The hover tag determines the styling of the base img (and base div), and hover+span defines the styling of the img that only appears when hovering.
Here is the html showing the div entirely:
<div class="only" id="one">
<img class="side" id="ach" src="ach.svg">Academic</a>
<span>
<img class="hovering" id="hach" src="Hach.svg">Academic</a>
</span>
</div>
Hope this helps.