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
Related
I am trying to add a dropdown arrow on menu items that have submenus and would like to adjust the position of the image so that it is directly below the menu link and centered. How can I adjust the positioning of the image?
Here is my current CSS:
nav li.hasChild:after {
content: url(../images/layout/dropdownOver.png);
}
This adds the image directly to the right of the menu item but I'm not sure how to reposition it.
Thanks!
I came up with 2 different approaches.
The first is much like yours, using content: url(path_to_image) directly: JS Bin
This is done by adding display: block; in both .menu-item and it's :after, causing a "line-break". text-align: center; take cares of centring the image, since it's display property is set by default to inline.
The other is a little bit different: JS Bin
The concept is the same, but now we're using the arrow image as the background of :after instead of content.
I does generates a little bit more of code, but gives you a ton more flexibility when positioning the pseudo-element.
Use this css instead:
nav li.hasChild:after {
content: url(../images/layout/dropdownOver.png);
display: block;
margin-left: -10px;
}
Or you can use this:
nav li.hasChild {
background-image: url(../images/layout/dropdownOver.png);
background-repeat: no-repeat;
background-position: right;
}
Then in the image you need to put a transparent border around the edge
I am using Twitter Bootstrap (ver 2.3.1) to build a website and I am trying to achieve the following:
http://jsfiddle.net/MgcDU/2916/
On that website, I am using a large image as a background to a <section> which streches from the left edge of the screen to the right edge (all the way across).
I would like to place a pagination element on top of that image. With the navigation elements themselves being transparent (so the image below can shine throught) and the space left and right to the pagination element to be set in white color or page background color (it should cover the image, thats all).
I've given the pagination elements transparency:
.pagination li a, .pagination li span {
background: transparent;
}
I simply do not know how to get the white spaces around the pagination.
Can anyone help me out on this, please?!
.pull-right { position: relative; top: 2em; background: #ccc }
http://jsfiddle.net/MgcDU/2917/
Something like this?
I have a ul-menu that exists out of images with different widths for every li. I use a sprite for the mouseovers and bg. The sprite contains all the possible images for the menu. When I hover I want the background image to slide 160px up on every li, and somehow inherit the horizontal background position (I understand that inherit inherits from a parent, not from the element you call :hover on).
How can I slide the background position up, and keep the horizontal position the same. Sample code below. I tried a lot of things, including the inherit option in the example below and I know there is a CSS3 option called background-position-y but thats not crossbrowser...
#menubar ul li.item-101{
width:183px;
background-position: 0 0;
}
#menubar ul li.item-102{
width:163px;
background-position: -183px 0;
}
#menubar ul li.item-103{
width:204px;
background-position: -346px 0;
}
#menubar ul li.item-104{
width:117px;
background-position: -550px 0;
}
#menubar ul li.item-105{
width:173px;
background-position: -667px 0;
}
#menubar ul li:hover{
background-position: inherit -160px;
}
This is currently not possible by just using CSS (In most used browsers). You have to use background-position: YOURVALUE -160px; on every hover.
Maybe we will one day live in a world where this ís possible.
Possible solutions: jQuery can do this for you, but thats probably more work then just brainless copy pasting your individual :hovers , or you can use background-position-y but thats just for a few browsers so not really an option either
I wouldn't hold your breath for background-position-y as it isn't even a part of the CSS3 spec. (The issue is here http://www.w3.org/Style/CSS/Tracker/issues/9). Certain browsers like Chrome have gone ahead and implemented it anyways, but at least Firefox and Opera have yet to follow, if they even will.
Unless you want to resort to javascript, there isn't really any way of doing this in CSS as things currently stand.
CSS Sprite is useful, helps speed up loading time and performance. But I find they have certain limitations. I like to know whether there are ways around this or whether it is inherent and that they are limited.
For example: If I wanted an arrow icon on my anchor link to be on the right hand side:
a
display:block;
padding:0 15px 0 0;
background:transparent ("/images/arrow.gif") no-repeat scroll right top;
}
a:hover {
background-position:-10px top;
}
This wouldn't actually work because I positioned the arrow icon to be on the right hand side of my anchor tag. But then how would I shift the image -10px when I still want it positioned on the right?
You can use the :after pseudo element to create an additional element after the link text but still inside the anchor tag by CSS, set it to equal size of each picture in your sprite, and then be able to use background position no problem.
Here is an example of doing this with a 4 images sprite, each of the images are sized 18px * 18px (I just found the pic online on google images, so, not even sure how long it'll be available):
To see the example live version: http://jsfiddle.net/Meligy/CLLau/
The important bits of the code:
a:after {
content: " ";
display:inline-block;
width:18px;
height:18px;
overflow:hidden;
vertical-align:middle;
margin-left:0.5em;
background: url(http://www.waterbobble.com/skin/frontend/bobble/default/images/round_arrow_sprite.gif);
background-position: 0 0;
}
a:hover:after {
background-position: 18px 18px;
}
Update:
This is supported in all current browsers, in IE, it's supported starting from IE8.
For a hack to support for IE 6, 7, check this other Stackoverflow reply:
:after and :before css pseudo elements hack for IE 7
Image Rollover, no JavaScript, no Link, pure CSS, code validate and Browser compatible.
Hello all, I have been working 24hours strait to come up with this fairly easy solution. I want to know if everything is all right and if there are ways to improve. It's quite elegant, here we go:
I have only one image "Logo" but it will show as 2 different logo each with a rollover effect.
I use a sprite (only 1 image containing my 4 logos) and I just change it's position.
Here I insert my image in a div with
<div id="logo-rollover-1" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Then I insert in another div the same image but with a different id
<div id="logo-rollover-2" class="logo-rollover">
<img title="whatever" alt="whatever" src="path-to-your-image">
</div>
Now my CSS:
.logo-rollover {
background: #ffd42a url('path-to-your-image');
width: 230px;
float: left;
height: 130px;
overflow: hidden;
position: relative;
}
.logo-rollover img { width: 460px; height: 260px; }
.logo-rollover :hover { opacity: 0; filter:alpha(opacity=0); }
#logo-rollover-1 { background-position: 0px -130px; }
#logo-rollover-2 { background-position: -230px -130px; }
#logo-rollover-2 img { right: 230px; position: relative; display: block; }
Explanations: when someone hover an image it becomes transparent and show the background witch is the same image but with a different position. opacity: 0 for Firefox, Google and filter:alpha(opacity=0) for Explorer. position: relative on the .logo-rollover class is for compatibility of hidden overflow with IE6 & IE7. display:block; is added to the id img for the Opera browser.
No Hack: When there is no link, there is no need for href="#" or "javascript:void(0)"
Advantages: instead of requesting 4 (or more) images, there is only 1 image (the total size of 1 image sprite is smaller then the total size of 4). the rollover is instant as the image is already downloaded. No hack, no false link, code validate. Add a title to the image. The only browser not rolling over is IE6 but the site is not broken, the logo show correctly. There is a hack for activating hover for IE6 but I didn't bother as IE6 is dead.
Tip: use the same path for your image everywhere.
I mean the "path-to-your-image" needs to be the same for all call. Because of browser caching.
Is this the best elegant way? Can this code be improve? I hope it will help someone because it was a real pain to develop thank to others user here I found some tricks here and there and came up with this.
Comment appreciated.
Why not completely removing inner <img> and create logo using CSS background?
<a id="logo">Logo</a>
#logo { width:100px; height:60px; background:url(path/to/logo.png) 0 0;
overflow:hidden; text-indent:-1000px; display:block; }
#logo:hover { background-position:0 -60px; }
Explanation:
<a> is the only element that supports :hover pseudo selector on IE6. If you want native solution for hover logo you must use this tag. Some people sometimes wrap other elements ex: <a><div></div></a> to give div hover property by accessing it from CSS using a:hover div { }
overflow:hidden; and text-indent:-1000px; hide text from inside the div. It is a good practise to leave text inside for accessibility reasons.
background sets the background color of your div, initialy alligned to 0, 0
background-position does the actual trick and shifts the image - it is moving it within the 'viewport' div making different part of the image visible.
nice description! I see one small improvement: put the background und no-repeat definition in your .logo-rollover class to have less css code (you have to write it only once instead of twice)