I have an image slider that is positioned over a background image but I can't seem to get the image slider to position dead center inside and have the background image not be cut off. Also its got some strange behaviour where the first slide is always further over then the rest!?!?
#slider {
background:url("../images/bg-slider.gif") no-repeat scroll 0 0 transparent;
height:389px;
width:590px;
}
#slider ul { padding:25px;}
#slider ul, #slider li { width:590px; height:389px; overflow:hidden; list-style:none; }
http://fluroltd.com/clients/harveys/
ah okay, think I see what you mean. Try getting rid of this line:
#slider ul { padding:25px;}
this is increasing the width of your ul and li's by 50px. The other option is to reduce the width declaration to 540px...
EDIT
a third option would be to modify the js you are using. Currently it is using .width() to get the element size. This does not include the padding values.
Use .outerWidth() to include the padding in the calculation.
I found the issue earlier in my CSS I had a more generic declaration on the CSS for ul. Made it more specific and viola.
Related
I created a CSS menu w/ submenus, using pixel values for dimensions. Now, that I see how stupid of an idea that was, I tried to convert all pixel values into percentages using the formular (size / context) * 100 to make the menu responsive.
The original version looked like this:
After converting everything into percentage values I end up with this:
http://jsfiddle.net/5CK9n/
The main reason is that I am still using px to specefy the height of nav ul li. Whenever I try to specify that height in percent, top menu points (nav ul li) don't change their size at all, and when hovering over one of them to bring out the submenu (nav ul li ul), the top menu point grows in height all over the place.
Could anyone tell me what might be causing this behavior?
First of all, the css that makes that happen is:
nav > ul > li.hasSubMenu:hover + li {
/* this-> */ margin-left: 25%;
}
And this:
nav ul li:hover > ul {
display: block;
position: relative;
/* and this below */
top: -100%;
left: 100%;
}
Remove the top, left and margin-left values. See: jsFiddle.
Second of all, use media-queries to make your navigation responsive. Using just percentages is not effective.
I'm struggling with positioning on a pure css driven drop down menu: My left hand side options are working fine - and this code is based on code i found online - It does the job ok.
I'm trying to make my far right hand menu drop down and NOT be clipped off/screen - I believe i will need to use a combination of relative positioning and float right but have tried lots of combinations without the desired effect.
I've put my code into a JSfiddle to show a live example (in-fact it's pretty much identical to what i'm working on) - I have added a batch of css resets to the top to make jsfiddle behave properly (on my live site i'm using an external css reset).
JS Fiddle: http://jsfiddle.net/g7Lk7/1/
.pit_toolbar_ul ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
list-style-type:none;
margin: 0;
}
Any recommendations on how to get the far right drop down to align up against the right edge of the screen would be appreciated.
Thanks for your time!
You should use right: 0 instead of left: 0 for the right menu item. You can fix it adding this styles:
.pit_toolbar_ul li:hover ul.rightside {
left: auto;
right: 0;
}
.pit_toolbar_ul li:hover ul.rightside li {
margin-right: 0;
}
and add rightside class to corresponding ul.
http://jsfiddle.net/g7Lk7/2/
.pit_toolbar_ul li:hover ul.alignRight li
{
position:relative;
left:-30px;
}
Add this class to your style sheet this may help you. I have positioned your dropdown li.
I am using a sprite to change the color of an image on its hover status, though when I hover over the image it moves down slightly and changes color. I have created a JSFiddle to replicate the problem.
I am probably using the sprite incorrectly? I'm unsure as it is my first time playing with them.
.ratings ul li {
width:18px;
height:18px;
background:url(star.png) 145px 102px;
}
.ratings ul li:hover{
width:18px;
height:18px;
background:url(star.png) 145px 86px;
}
I am using this image:
Can anyone can point out my mistakes?
Cause
The sprite is not configured correctly. At least one of the background-position values should be either zero or negative in your example.
The technique of CSS sprites depends on negative background-position values to change the area within the image used as the element's background. In contrast, positive (i.e. greater than zero) background-position values actually change the position of the background image in the element.
Solution
background:url(star.png) 0 0;
background:url(star.png) 0 -18px;
See jsFiddle demo
Note about the image
Also note that your current sprite is 34px high, while it seems each star is only 16px high. This means there's a 2px gap between the two stars, so the second background-position is -18px and not -16px.
.ratings ul li {
width:16px; /* redefine your image offset */
height:16px;
background:url(http://i.stack.imgur.com/S5T0M.png) no-repeat;
}
.ratings ul li:hover {
background-position: 0 -18px;
}
You do not need to define width and height which you had already on :hover state. You should find informative guidance about css sprires on this site
First: you should use a 16px "box" (width/height) for your star not 18 because your star has a width of 16px.
Then change your offset correctly, you will have less problem.
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 have a weird li issue I just can't figure out. I have an image set for the li on this page's content, but it's not against the text but behind the image! Confused on how to solve this. Any help would be greatly appreciated.
http://staging.liquor.com/wind-at-your-back/
Add
overflow: hidden;
to the #single_content ul. (overflow: auto will also work). If it needs to work in IE6 too, make sure the list has layout (e.g. by adding zoom: 1).
The lines inside a block box following a float are pushed aside by the floated element. But the block box itself doesn't move, keeping the background images at its left edge, covered by the floating element.
You can stop the block box from overlapping a float by having it establish a new block formatting context. One way to do that is to set the overflow property. That forces the entire list next to the float, instead of just pushing its text aside.
See the CSS2 specification section about floats for more details.
The background images of your list are behind the cocktail image. You could either make the list floating right like this
#single_content ul {
float:right;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
width:280px;
}
or give the lis a margin-left of your image's width+margin like so
#single_content ul li {
background:transparent url(images/ulliarrow.png) no-repeat scroll 0 0;
margin:0 0 0 310px;
padding:0 0 3px 15px;
}
to make the reappear behind the floating image.
To get the background images to show up from outside of the image you can add a margin to the style
add
margin:0 0 0 ~300px;
to
#single_content ul li
Immediate solution is to add the following rule to #single_content ul
margin: 0 0 0 295px;
I don't like that because it's fairly absolute, though your site looks glued together well and it shouldn't hurt. I'll look for something more elegant, and if I find it, post it here.
EDIT 1: Not much better, but you could add the following rule to the li elements instead:
background-position: 295px 0;