Hi I am having quite a bit of trouble getting this sprite to work. The background image never shows up and just displays the link text. I have tried to use direct paths to the image, http://.., but it still does not display correctly. I appreciate the help.
CSS:
#social a {
text-indent: -9000px;
display: block;
background-repeat: no-repeat;
}
#youtubelink a {
background-image: url(social-btns.png);
background-position: 0px 0px;
width:46px;
height:43px;
}
#youtubelink a:hover {
background-position: 0px -43px;
}
#googlelink a {
background-image: url(social-btns.png);
background-position: 46px 0px;
width:46px;
height:43px;
}
#googlelink a:hover {
background-position: 46px -43px;
}
#facebooklink a {
background-image: url(social-btns.png);
background-position: 92px 0px;
width:46px;
height:43px;
}
#facebooklink a:hover {
background-position: 92px -43px;
}
HTML:
<div id="social" align="right">
<a id="youtubelink" href="#">Youtube</a>
<a id="googlelink" href="#">Google</a>
<a id="facebooklink" href="#">Facebook</a>
</div>
You have ids of anchor elements and you are selecting it as childs of them. You should do it like this:
a#facebooklink
The way you are using:
#facebooklink a
It will consider that anchor is child of #facebooklink and you have to change all of your SELECTORS.
Instead of:
#youtubelink a {
// my css rules
}
It should be:
a#youtubelink {
// my css rules
}
The same applies to all of your three social links.
That would be because your CSS is wrong. #youtubelink a means an anchor tag inside a tag with an id of "youtubelink". What you want is a#youtubelink
Related
I want to change the image from normal to brighter when it's on hover, My code:
<div class="nkhome">
<img src="Images/btnhome.png" />
</div>
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
width:59px;
height:59px;
}
.nkhome a img:hover {
background:url(Images/btnhomeh.png);
position:absolute;
top:0px;
}
Why doesn't work the hover? When my mouse is on it, it shows the first image, not the hover image.
You've got an a tag containing an img tag. That's your normal state.
You then add a background-image as your hover state, and it's appearing in the background of your a tag - behind the img tag.
You should probably create a CSS sprite and use background positions, but this should get you started:
<div>
</div>
div a {
width: 59px;
height: 59px;
display: block;
background-image: url('images/btnhome.png');
}
div a:hover {
background-image: url('images/btnhomeh.png);
}
This A List Apart Article from 2004 is still relevant, and will give you some background about sprites, and why it's a good idea to use them instead of two different images. It's a lot better written than anything I could explain to you.
Simply this, no extra div or JavaScript needed, just pure CSS (jsfiddle demo):
HTML
<a href="javascript:alert('Hello!')" class="changesImgOnHover">
<img src="http://dummyimage.com/50x25/00f/ff0.png&text=Hello!" alt="Hello!">
</a>
CSS
.changesImgOnHover {
display: inline-block; /* or just block */
width: 50px;
background: url('http://dummyimage.com/50x25/0f0/f00.png&text=Hello!') no-repeat;
}
.changesImgOnHover:hover img {
visibility: hidden;
}
You're setting the background of the image to another image. Which is fine, but the foreground (SRC attribute of the IMG) still overlays everything else.
.nkhome{
margin-left:260px;
top:170px;
position:absolute;
}
.nkhome a {
background:url(Images/btnhome.png);
display:block; /* Necessary, since A is not a block element */
width:59px;
height:59px;
}
.nkhome a:hover {
background:url(Images/btnhomeh.png);
}
<div class="nkhome">
</div>
It will not work like this, put both images as background images:
.bg-img {
background:url(images/yourImg.jpg) no-repeat 0 0;
}
.bg-img:hover {
background:url(images/yourImg-1.jpg) no-repeat 0 0;
}
Hi you should give parent position relative and child absolute and give to height or width to absolute class as like this
Css
.nkhome{
margin-left:260px;
width:59px;
height:59px;
margin-top:170px;
position:relative;
z-index:0;
}
.nkhome a:hover img{
opacity:0.0;
}
.nkhome a:hover{
background:url('http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg');
width:100px;
height:100px;
position:absolute;
top:0;
z-index:1;
}
HTML
<div class="nkhome">
<img src="http://dummyimage.com/100/000/fff.jpg" />
</div>
Live demo http://jsfiddle.net/t5FEX/7/
or this
<div class="nkhome">
<a href="Home.html"><img src="http://dummyimage.com/100/000/fff.jpg" onmouseover="this.src='http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg'"
onmouseout="this.src='http://dummyimage.com/100/000/fff.jpg'"
/></a>
</div>
Live demo http://jsfiddle.net/t5FEX/9/
Here are some easy to folow steps and a great on hover tutorial its the examples that you can "play" with and test live.
http://fivera.net/simple-cool-live-examples-image-hover-css-effect/
Exact solution to your problem
You can change the image on hover by using content:url("YOUR-IMAGE-PATH");
For image hover use below line in your css:
img:hover
and to change the image on hover using the below config inside img:hover:
img:hover{
content:url("https://www.planwallpaper.com/static/images/9-credit-1.jpg");
}
Make on class with this. And make 2 different images with the self width and height. Works in ie9.
See this link.
http://kyleschaeffer.com/development/pure-css-image-hover/
Also you can 2 differents images make and place in the self class name with in the hover the another images.
See example.
.myButtonLink {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home1.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -5px;
border-radius: 3px;
-webkit-border-radius: 3px;
}
.myButtonLink:hover {
margin-top: -5px;
display: block;
width: 45px;
height: 39px;
background: url('images/home2.png') bottom;
text-indent: -99999px;
margin-left:-17px;
margin-right:-17px;
margin-bottom: -20x;
border-radius: 3px;
-webkit-border-radius: 3px;
}
I need to create the following in CSS and have it work on IE7+ (and Firefox if possible):
Everything is done except the background!
The quotation is different each time, so the background needs to automatically adjust in height.
It also needs to auto adjust to the width of the container it's placed within. By this, I mean the gradient cannot stretch. The background needs to be the fade-in left gradient, then the background colour, then the fade-out right gradient.
Here's my current code - now on JSFiddle:
HTML
<div id="ehs-quotecontainer">
<div id="ehs-bgleft">
</div>
<div id="ehs-bgright">
</div>
<div class="ehs-marks" id="ehs-marktop">
“
</div>
<span class="ehs-quotetext">Once you believe anything, you stop thinking about it.</span>
<div class="ehs-marks" id="ehs-markbottom">
”
</div>
</div>
CSS
#ehs-quotecontainer {
padding-top:8px;
padding-bottom:8px;
background-color:#F7F8FA;
text-align:center;
}
#ehs-bgleft {
background:transparent url(../images/ehsbgleft.jpg) repeat-y scroll right top;
}
#ehs-bgright {
background:transparent url(../images/ehsbgright.jpg) repeat-y scroll right top;
}
.ehs-marks {
height:20px;
color:#8B8C90;
font-size:5.0em;
}
#ehs-marktop {
float:left;
margin-top:-18px;
}
#ehs-markbottom {
float:right;
margin-top:-5px;
}
.ehs-quotetext {
padding-left:4px;
padding-right:4px;
color:#000;
font-size:1.1em;
font-style:italic;
}
Any ideas on how to make the background work correctly?
The easiest way to do this is to make the entire quote position:relative so that you can position things inside it, relative to the quote container.
After that what you ask is fairly easy to do:
http://jsfiddle.net/7GEah/1/
Something like this: http://www.webdevout.net/test?012&raw
<!doctype html>
<html>
<head>
<title></title>
<link href='http://fonts.googleapis.com/css?family=Allerta' rel='stylesheet'>
<style>
body {
background: url(http://i.stack.imgur.com/VeMeV.png) no-repeat 8px 8px;
margin: 71px 8px 8px;
}
.quote {
border: 1px solid #dfdfdf;
position: relative;
padding: 8px 35px;
}
.quote
p {
margin: 0;
font: italic 12px sans-serif;
text-align: center;
position: relative;
z-index: 1;
}
.quote .w,
.quote .e {
position: absolute;
top: 0;
width: 75px;
height: 100%;
background-image: url(http://img526.imageshack.us/img526/1796/gradientj.png);
background-repeat: repeat-y;
}
.quote .w { left: 0; background-position: -75px 0; }
.quote .e { right: 0; background-position: 0 0; }
.quote
span {
color: #898a8e;
font: 70px/70px allerta, serif;
position: absolute;
}
.quote
.ldquo {
left: -35px;
top: -15px;
}
.quote
.rdquo {
right: -35px;
bottom: -42px;
}
</style>
</head>
<body>
<div style="width: 209px;">
<div class="quote">
<p><span class="ldquo">“</span>No task is so important or urgent that it cannot be done safely.<span class="rdquo">”</span></p>
<div class="w"></div>
<div class="e"></div>
</div>
</div>
</body>
</html>
Could you create a single image, with the gradient meeting in the middle? If so, you can use:
#ehs-quotecontainer {
background: (YOUR_OUTER_EDGE_COLOR) url(../images/ehsbgMerged.jpg) repeat-y center center;
}
Provided you have defined edges of your box (which it seems you have), this will always center the gradiant image on your text.
I should add, that if your image is too narrow, your background color will blend with the edges of the image rather than spread out the middle, which might not be what you're looking for.
i hate to say this but since you will be using a very small image would you not rather use the background and insert your text having your background .
so here you will :
you keep the background with the quotation marks as it is
Insert your text in a with the background that you have . And finally you can just give the text some padding . and you are ready to go .
Don't know how to fix it. I've trying to make different logotypes, depending on class of the tag. The html is:
<div id="header">
<a href="/index.php" id="logo" class="cet">
<h1 id="l">title</h1>
</a>
</div>
And css is:
#header {
height:204px;
background: url(../img/il-01.jpg) no-repeat 400px 2em;
position:relative;
clear:both;
}
#header #logo {
display:block;
position:absolute;
left:2em;
top:3em;
width:355px;
height:107px;
overflow:hidden;
}
#header #logo.cat { background: url( ../img/logo_cat.png) no-repeat -1px top; }
#header #logo.cet {background: url( ../img/logo_cet.png) no-repeat -10px -40px;}
And if the class is set for 'cat' everything is just fine, but if it's set for 'cet' i can not see the image in IE6. In any other browser the background displays correctly.
The background images are little different by size, can it be the problem?
Thank you very much for your answers
You are not allowed mix lengths and keywords for the background(-positon). Old CSS versions didn't allow it, so older browsers may not support it. Instead of
#header #logo.cat { background: url( ../img/logo_cat.png) no-repeat -1px top; }
use
#header #logo.cat { background: url( ../img/logo_cat.png) no-repeat -1px 0; }
BTW, You need to check your HTML. A block element such as <h1> may not be inside a link (<a>).
This is my image:-
http://www.flickr.com/photos/50525207#N02/5064283850/
CSS n html
Now the problem:-
When I hover over links the same image appears when I want different parts of the image to appear. Also the other links shift when I move mouse over one link. What I want is this:-
http://www.flickr.com/photos/50525207#N02/5063686801/
What I want is a grey colored image to appear in the background when the mouse is hovered over "Link1". A green colored image is to appear when the mouse is hovered over "Link2" and so on. What am I doing wrong? I have been trying to make it work since yesterday but in vain.
PS: erm, that's not the actual image BTW. I don't want colors in the background. It's going to be images of products. Oh, and I want that grey image to appear when no link is hovered over. How to do that?
[EDIT]
I added the following in the CSS:-
.sprite Div
{
width: 728px;
height: 243px;
}
.sprite a
{
width: 728px;
height: 243px;
}
In the HTML IK included the links inside of Div so the height gets fixed:-
<div id="SpriteDiv" class="sprite">
My links here...
</div>
First, you should set a size of your anchor element without hover, this is what's causing your other links to shift around (the dimensions shouldn't be defined on a:hover):
.sprite a {
display: block;
width: 728px;
height: 243px;
}
Next, your image background is assigned to the anchor elements, not the span, so you need to define those positions with the selector like this:
.sp_ID1 a {
background-position: 0px 0px;
}
Corrected according to your comment:
Originally I put the gray background on .container, but that causes strange behavior on Chrome, so I added .sp_ID0
<style type="text/css">
.sprite { display: block; margin-bottom: 5px; }
.container, .sp_ID0, .sprite div { width: 600px; height: 203px; }
.sp_ID0, .sprite:hover div {
background-image: url(http://farm5.static.flickr.com/4106/5064283850_fc6b5fac15_b.jpg);
background-repeat: no-repeat;
}
.container { position:relative; }
.sp_ID0 { z-index: -2; }
.sprite div { display: none; z-index: -1; }
.sp_ID0, .sprite:hover div { position: absolute; top: 0px; left: 0px; display: block; }
.sp_ID1 div { background-position: 0px -203px; }
.sp_ID2 div { background-position: 0px -406px; }
.sp_ID3 div { background-position: 0px -609px; }
.sp_ID4 div { background-position: 0px -812px; }
.sp_ID5 div { background-position: 0px -203px; }
.sp_ID6 div { background-position: 0px -406px; }
</style>
<div class="container">
<div class="sp_ID0"> </div>
Link1<div> </div>
Link2<div> </div>
Link3<div> </div>
Link4<div> </div>
Link5<div> </div>
Link6<div> </div>
</div>
Old solution.
I have a CSS file for my anchor links defined below. This works fine for IE7 but when I open
the page in Firefox the button image is longer.
I Googled to see if Firefox has a background position bug but didn't find anything.
How can I fix this issue?
The CSS file is below:
/* button settings */
a.RadForm_CustomSkins, a.RadForm_CustomSkins span
{
background-image: url('FormDecorator/ButtonSprites.gif');
background-repeat:no-repeat;
cursor:hand;
cursor:pointer;
display:inline-block;
}
a.RadForm_CustomSkins.rfdInputDisabled:hover
{
background-position: 0% 0%;
}
a.RadForm_CustomSkins .rfdInner,
a.RadForm_CustomSkins.rfdInputDisabled:hover .rfdInner
{
margin-right: 11px;
margin-left: 11px;
background-position: 0 -21px;
color: #ffffff;
font-size:11px;
}
a.RadForm_CustomSkins.rfdInputDisabled:hover .rfdOuter
{
background-position: right 0%;
}
a.RadForm_CustomSkins:hover
{
background-position: 0 -42px;
}
a.RadForm_CustomSkins:hover .rfdInner
{
background-position: 0 -63px;
color: #ffffff;
}
a.RadForm_CustomSkins:hover .rfdOuter
{
background-position: right -42px;
}
/* end of button settings */
/* clicked button styles */
a.RadForm_CustomSkins.rfdClicked
{
background-image: url('FormDecorator/ButtonSprites.gif');
background-position: 0 -84px;
background-repeat: no-repeat;
}
a.RadForm_CustomSkins.rfdClicked span
{
background-image: url('FormDecorator/ButtonSprites.gif');
}
a.RadForm_CustomSkins.rfdClicked .rfdInner
{
background-position: 0 -105px;
background-repeat: repeat-x;
color: #ffffff;
}
a.RadForm_CustomSkins.rfdClicked .rfdOuter
{
background-position: right -84px;
background-repeat: no-repeat;
}
/* end of clicked button styles */
/* do NOT change these settings, otherwise the skinned buttons will be broken when used within a decoration zone */
a.rfdSkinnedButton.RadForm_CustomSkins
{
-moz-user-select: none !important;
outline: none !important;
text-decoration: none !important;
cursor: default !important;
text-align: center !important;
background-color: transparent !important;
border: 0 !important;
display: inline-block !important;
background-position: 0% 0%;
}
and the rendered HTML as button is:
<a id="_rfdSkinnedctl00_signOut" class="rfdSkinnedButton RadForm_CustomSkins" href="javascript:void(0)" style="width: 80px;">
<span class="rfdOuter">
<span class="rfdInner">Çıkış</span>
</span>
</a>
<input id="ctl00_signOut" class="rfdRealButton" type="submit" value="Çıkış" name="ctl00$signOut" _rfddecoratedid="_rfdSkinnedctl00_signOut"/>
If I understand the problem correctly, it is that the width of the button appears differently in IE and Firefox. Here are some things you can try:
Explicitly set the width of the button.
Use max-width to limit the width of the button in Firefox (IE7 doesn't understand this property unless you declare "XHTML 1.0 Strict" in your DTD).
Have a look to see if any divs/tables/other elements are affecting the size of your button.
Check to see if margin/border/padding properties are having an affect.
Start a clean page and build the problem up from scratch to see if you can recreate the issue. (You have quite a lot going on in your example above, and you perhaps need to distill your thoughts.)