I'm fighting with some CSS here that doesn't want to be crowbarred into submission. I just want the sprites there, without a border around it, and to lower the opacity when hovered over.
Here's how it looks across browsers so far:
The Chrome version is closest to what I want, but I can't get the border to disappear, and the hover opacity doesn't do anything.
Code-wise, here's where I'm at so far:
.social-icons {
background: url('/wp-content/themes/MySite/images/social-profiles/social-profiles-s.png') top left no-repeat;
width: 32px;
height: 32px;
}
.social-icons img {
border-style: none;
}
.social-icons img:hover {
opacity: 0.8;
}
img#facebook-ico.social-icons {
background-position: 0px 0px;
}
img#twitter-ico.social-icons {
background-position: -34px 0px;
}
img#google-plus-ico.social-icons {
background-position: -68px 0px;
}
img#rss-ico.social-icons {
background-position: -136px 0px;
}
I do not know why, but the fact that you have empty image elements (no 'src') somehow causes the borders. I would remove the image elements and place the backgrounds directly on the anchor tags. Then float and adjust margins as needed:
.widget-container a:hover {
background: url('/wp-content/themes/MeanwhileInAmerica/images/social-profiles/social-profiles-s.png') top left no-repeat;
width: 32px;
height: 32px;
display: block;
float: left;
}
.widget-container a {
opacity(0.8);
}
I tested it with Dev Tools... the border was gone and the opacity change worked too.
You may have to target your elements differently to avoid changing other parts of the page. The sprites look fine otherwise.
EDIT
According to: http://www.w3.org/TR/html5/embedded-content-0.html#attr-img-src
"The src attribute must be present".
Related
I have a sprites like this:
and display using the following css:
.sprite { background: url('sprite.png') no-repeat top left; width: 40px; height: 40px; }
.sprite.Live { background-position: 0px 0px; }
.sprite.Private { background-position: -50px 0px; }
.sprite.Public { background-position: -100px 0px; }
But there is always a border around the image. I make sure the img {border:0} is set. I am using Bootstrap 3. Is this caused by bootstrap?
It turns out its Chrome's issue. Here is the closest answer I can find.
It's because you are using an img tag with no src attribute. Chrome is essentially indicating the size of the container with nothing in it.
https://stackoverflow.com/a/9173082/772481
I have text links that I am trying to use a background image with on rollover (link.gif is transparent, linkhover.gif is the rollover image).
The code I have below is working except the positioning is not.
.navlink {
background:transparent url('graphics/link.gif') center top no-repeat;
height:70px;}
.navlink:hover {
background-image: url('graphics/linkhover.gif');}
Try making the background take up the full size, like this
.navlink {
background: url('graphics/link.gif');
height:70px;
}
.navlink:hover {
background: url('graphics/linkhover.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
Demo
If you have a parent element around .navlink, then you can just put height:100% and remove height:70px; and it will stay proportional. If you want to disregard proportion and just have it fill the parent you can put both height:100% and width:100%
EDIT
Since I found out the navlinks are all <a>: you can't have background-attachment: fixed because it makes the parent's background change instead of the navlink's (for what reason I don't know)
Updated code
.navlink {
text-align:center;
background: url('graphics/link.gif');
background-repeat: no-repeat; /* This applies to :hover as well */
background-position: center; /* This applies to :hover as well */
text-decoration: none; /* To remove the underline */
}
.navlink:hover {
background: url('graphics/linkhover.gif');
}
Updated demo based on the structure of your site which you provided in the comments
Next time when writing your question you should include the relevant HTML, that would have made it much easier to help you with the problem
EDIT 2
After some playing I believe I got your site the way you want it using this:
.navlink {
padding-top:30px;
text-align:center;
background: url('graphics/link.gif');
text-decoration: none;
}
.navlink:hover {
background: url('graphics/linkhover.gif');
background-position: center -55px;
background-repeat:repeat-y;/*This is optional, taking it out makes it repeat*/
text-decoration: none;
}
You should make a sprite, put the images next to each other in one file and adjust the background-position on :hover. The CSS should be like this:
.navlink {
background-image: url('image');
background-position: top left;
}
.navlink:hover {
background-position: top right;
}
You can achieve a cool effect when adding an CSS3 transition.
The image will then slide to the rollover state!
I got a sprite picture which is a breadcrumbs menu. I want to change the y position of this sprite when the mouse is hover the menu's elements.
There is no problem to do it with a fixed width website, but i can't resolve this with a responsive one...
Here is the live version : http://jsfiddle.net/RtqkD/
and my CSS code :
.services {
height: 64px;
width: auto;
background: transparent url('https://dl.dropboxusercontent.com/u/3894287/sprite.png') no-repeat 0 0;
background-size: 100%;
}
.services #Et1 {
margin-left: 60px;
}
.services #Et1, .services #Et2, .services #Et3, .services #Et4 {
height: 65px;
}
.services li {
float: left;
width: 210px;
position: relative;
background: none;
}
.services li a {
display: block;
padding: 8px 7px 8px 7px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
.services li:first-child a {
padding-left: 10px;
}
Any tips ?
EDIT
After the #Sven comment i made a more complete live version of my issue here with CSS, HTMLand Javascript: http://jsfiddle.net/RtqkD/2/
Right, lets start with the fact that the way you're spriting that is totally unnecessary. I see why, but with some careful coding it can be gotten around.
Using the :before pseudo element, I created the triangles after each item. Now each item reacts to the hover on the anchor using CSS rather than jQuery (much neater). Browser support won't go down to IE7, but neither do most things.
Here's the fiddle: http://jsfiddle.net/robsterlini/RtqkD/5/ (EDIT sorted the padding issues http://jsfiddle.net/robsterlini/RtqkD/6/)
And here are the elements used: arrow sprite, background sprite (and if you wanted to be really tight with the sprites, you could even sprite them together, just be careful with how you do it.
Took me a little while to figure it out, so if you need any explaining then give me a shout :) Hope that helps!
I'm trying to achieve a hover effect with a background with the menu items, but with the css I have things appear to be out of place. I've tried many different things and still can't figure out how to have the menu items stay in place when on hover, and also not to have the text stick to the bottom on top of background.
http://youvisit.com/creative/FindYourFutureCampaign/html/
The problem is that by adding your left/right images (the ones with the rounded corners), you're changing the width and height of the <li>. Since those images are 19px tall, you need to get the height of the <li> to be 19px. You can do this using line-height and height. After doing that, you'll have to figure out how to vertically align the text in the <a>. Then, you need to adjust for the changes in width. You could do this by using left/right padding on the <a>, and then remove that padding on hover (the padding removed should equal the width of the left/right image).
This should get your pretty close. I didn't test this in IE7/8.
ul.menuItems li {
float: left;
height: 19px;
line-height: 19px;
margin-right: 20px;
}
ul.menuItems li a {
color: #000000;
display: block;
float: left;
height: 19px;
line-height: 19px;
padding: 0 2px;
text-decoration: none;
}
ul.menuItems li:hover a {
background: url("../img/menuHoverCenter.png") repeat-x 0 0;
padding: 0;
}
ul.menuItems li:hover:before {
content: url("../img/menuHoverLeft.png");
float: left;
}
ul.menuItems li:hover:after {
content: url("../img/menuHoverRight.png");
float: right;
}
Really, this is a bad design. You probably don't need to add content on hover. How about using CSS3 border-radius to get your rounded corners. Then use either linear-gradient or a background image for your background. border-radius is not supported by all browsers, but it's fairly well supported if you're not worried about IE8 and lower: http://caniuse.com/#search=border-radius
Fix your css and it will not "jump":
ul.menuItems li:hover:before {
background: url("../img/menuHoverLeft.png") no-repeat 50% 0%;
}
ul.menuItems li:hover:after {
background: url("../img/menuHoverRight.png") no-repeat 50% 100%;
}
And give height with width to work properly.
I have a table that gets sorted. The headers have background images (arrows) to show the sorting direction.
The current CSS uses 3 different images like this:
th {
padding-right: 21px;
}
th.sorting {
background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting_asc {
background: #ECE0EB url("table-sort-asc.png") no-repeat center right;
}
th.sorting_desc {
background: #ECE0EB url("table-sort-desc.png") no-repeat center right;
}
Working example in the JSfiddle here.
Is there a way to reduce these to one image and use CSS sprites? The problem is that a merged image cannot simply be used as a background to the header cell, because multiple images may become visible at once, like here.
I'd like to avoid using extra elements if possible. IE7 support would be great but I could probably live without it.
Pseudo elements like :after could work, but I can't find a way to position the icons in the same way. JSfiddle example.
I figured out a way for pseudo elements to work. Set the table headers as position: relative, then something like this:
.sorting:before {
display: block;
content: "";
position: absolute;
top: 50%;
right: 8px;
width: 7px;
height: 9px;
margin-top:-4px;
background: transparent url("http://i.imgur.com/iONZm.png") 0 0;
}
The icon is positioned 50% from the top, then moved upward a few pixels to be vertically centered.
You can use SpriteMe to generate sprite images on your site.
.sorting_asc {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px 0px;
}
.sorting {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px -27px;
}
.sorting_desc {
background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/5b6b9013a6/spriteme1.png);
background-position: 32px -53px;
}
A quick Google search for a CSS sprite generator comes up with a few options. Though I've never used any of these services myself, I have usually made a single PNG image with transparency. Then you would reference your CSS like this:
th {
padding-right: 21px;
background: #EEEEEC url("table-sort.png") no-repeat center right;
}
th.sorting {
background-position: -100px -100px;
}
th.sorting_asc {
background-position: -200px -200px;
}
th.sorting_desc {
background-position: -300px -300px;
}
Replace the background-position property values with the appropriate coordinates. I think the CSS sprite services can create these values for you based on their compression once it is done, but the CSS coordinates may need some tweaks to get it exactly how you want.