Greetings,
I am making a site with :hover images as backgrounds of links. But oddly enough, only the first link is working at all. The others don't act like links, and don't react to the :hover event.
Here is the germane HTML:
Home
What I Can Do
My Portfolio
Connect With Me
The first one actually goes to the correct spot. The other three don't give the browser any feedback that they are links, and do nothing when clicked. Here is my germane CSS:
#home-link {
background: url(icons-sprite.png) no-repeat 0 0;
top: 30px;
left: 30px;
}
#home-link:hover { background: url(icons-sprite.png) no-repeat 0 -128px; }
#skills-link {
background: url(icons-sprite.png) no-repeat -128px 0;
top: 178px;
left: 286px;
}
#skills-link:hover { background: url(icons-sprite.png) no-repeat -128px -128px; }
The styles for the other two links are identical.
The first shows the :hover state perfectly. The rest remain inert.
I am deducing that there is something wrong with my HTML, but I see nothing wrong with them. This occurs in FF and Chrome.
Any ideas?
You are targeting only one link using the id:
#home-link:hover
Use this CSS instead:
#container a:hover { background: url(icons-sprite.png) no-repeat 0 -128px; }
Where #container is the id of element containing your links.
Fixed it!
By taking out and adding in blocks of CSS I was able to discover that another particular HTML block that was after the links in the page and was positioned absolutely was messing them up.
Because it was on top of the links, they weren't firing. So I moved it below the links and everything works just dandy.
#home-link {...}
#home-link:hover {...}
using this, you are adressing thw only element that have the id 'home-link', which was your first link.
Since other links have diffrent id's they do not use your css block...
try to use class definition instead of id:
.icon {
background: url(icons-sprite.png) no-repeat 0 0;
top: 30px;
left: 30px;
}
.icon:hover { background: url(icons-sprite.png) no-repeat 0 -128px; }
Since all of your links have class="icon", you will not have problem...
Related
I have a problem with hover. I have a normal pic with opacity and another one with white background. I did this:
html:
<div id="glob" style="margin-right:5px;margin-top:2px;float:right;height:45px;width:40px;">
<img src="images/icon_globus.png" width="32" height="33" alt="" style="margin-right:5px;margin-top:7px;"/>
</div>
css:
#glob:hover{
background:url('../images/icon_globushover.png') no-repeat;
}
As you can see from the pic, the white one (upper globus) is behind the other one. It should not be behind.
What is not good?
EDIT: Thanks all, it's working. I did like the first answer. Don't know why I used img tag. I always use divs as image, but here I was stupid. Thanks a lot all for your help!
Because background always has the lowest z-index of all elements and content will be on top of it. I would suggest you to put "images/icon_globus.png" this as a background for div glob and remove that image tag. Then it should work the way you want it.
try without the image part.
glob {
background: url('icon_globus.png');
}
glob:hover {
background: url('icon_globus_hover.png');
}
Depending on the browsers you want to support, you could do something like this in CSS:
#glob { position: relative; }
#glob:hover:after {
content: '';
display: block;
position: absolute;
z-index: 1000;
left: 0;
top: 0;
right: 0;
bottom: 0;
background:url('../images/icon_globushover.png') no-repeat;
}
Because your image icon_globus.png is above your div background so when you hover, you actually apply a background to the container containing your image, you globushover appears behind your ..
try this instead:
html:
<div id="glob></div>
css:
#glob {margin-right:5px;margin-top:2px;float:right;height:45px;width:40px;background:url('../images/icon_globus.png') no-repeat;}
#glob:hover{
background:url('../images/icon_globushover.png') no-repeat;
}
this way you change/overwrite the default background-image. css means cascade style, cascade is wat permits you to overwrite styles depending on a certain condition, thats theory applied here. just overwrite a background-image with another one on hover.
remove all style and change as below
// CSS
glob:hover{background: url("/images/icon_globushover.png") no-repeat;}
.glob{
background: url("/images/icon_globus.png") no-repeat;
float: right;
margin: 0px 0px 15px 20px;
overflow: hidden;
padding: 0px;
width: 32px;
height: 33px;
}
<div class="glob"></div>
if your path source is like this
myhardrive/MysiteFolder/Images/ and your index.html is in MysiteFolder so in css must be (/images/)
if your path source is like this
myhardrive/MysiteFolder/files/mystyle.css here you do ("..\images\")
Please bear with me as I'm fairly new to hand coding my web pages. I applied my CSS and HTML from the website I created to skin a Blogger page to match look and feel. Everything appears fine when testing in FireFox release 17.0.1, but the background for my div #body_wrap fails to repeat more than a few times in IE 8.
I'm probably missing something simple, but I would appreciate any help in determining the cause. I would like to know if it's IE related or just poor code that FireFox is picking up the slack on.
Here is the link to the blog:
http://www.zenmotostore.blogspot.com/
Here is the CSS for the div containers involved:
#body_wrap {
width: 1074px;
margin: 0px auto;
padding: 0px;
position: relative;
background: url(http://www.zenmotostore.com/images/repeat_bgd_shadow_blog.png) top repeat-y;
clear: both;
}
#body_content_wrap {
width: 984px;
margin: 0px 45px 0px 45px;
padding: 0px;
padding-bottom: 7px;
background: #000000;
position: relative;
clear: both;
}
#scrollofzen_header {
width: 983px;
height: 191px;
margin: 0px 0px 0px 0px;
padding: 0px;
background: #000000 url(http://www.zenmotostore.com/images/scroll_of_zen_header.jpg) top center no-repeat;
position: relative;
clear: both;
}
The div #scrollofzen_header sits above the Blogger content code in the HTML. Both are contained in the #body_content_wrap div.
Let me know if I need to include more code here on the post. Thanks in advace for any help you might have!
Your problem seems to be with this CSS declaration:
.body-fauxcolumn-outer
{
background: url(http://www.zenmotostore.com/images/page_bgd_zen.jpg) #b8924f fixed no-repeat 50% top;
}
If I use the IE dev tools to disable this rule then the page seems to work fine (as I expect it to anyway).
Looks like it might be a clear issue. Depends on version of IE. You could look into css height: 100%;, or another way would be to add <div class="clear></div> as the last child element in #body_wrap.
.clear {
clear: both;
}
//then the markup
<div id="body_wrap">
//Your content and stuff
<div class="clear"></div>
<div> //close body_wrap
Internet explorer has a big problem with using images in css. Whenever I try to use them it doesn't work. Not since the very latest edition of IE have they allowed background-images.
You need to define a height for the div that you want to have a background-image
Background Images aren't supported IE8 or below
http://www.w3schools.com/cssref/pr_background-image.asp
I have implemented the following website: link
There are two textfields in the header part of the website. If you click on a textfield, a calender pops up. My problem is that the calender is not shown on the foreground although I set the css properties position: absolute; and z-index: 999;. What is the problem and how can I solve it?
You can add the following to your css
.row-3 {
overflow: visible;
}
Just remove overflow:hidden; from here #header .row-3
#header .row-3 {
background: url("images/header-tail.gif") repeat-x scroll left top transparent;
height: 276px;
}
see the attached image how i did
I have an HTML / CSS project on JS Fiddle with several issues jsfiddle ZyBZT.
The <DIV class"footer"> is not showing up at the bottom.
The background image does not display: url('http://i.imgur.com/z5vCh.png')
The Sprite Images are not showing up in the <UL> list.
Originally, the Sprites were working, and nothing I had added has changed any of the Sprite CSS code, which is as follows:
#nav {
list-style-type:none; /* removes the bullet from the list */
margin:20 auto;
text-shadow:4px 4px 8px #696969; /* creates a drop shadow on text in non-IE browsers */
white-space:nowrap; /* ensures text stays on one line */
width:600px; /* Allows links to take up proper height */
}
#nav li {
display: inline-block;
text-align: center;
width: 192px;
}
#nav a {
background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
display: block;
height: 50px; /* This allowed the buttons to be full height */
color: Blue;
}
#nav a:hover {
background-position: 0 -50px;
color:Red;
}
#nav .active, a:hover {
background-position: 0 0;
color: Black;
}
#nav .active:hover {
background-position: 0 0;
color: Black;
}
#nav span {
position:relative;
text-align: center;
vertical-align: middle; /* This doesn't seem to work (???) */
}
Sometimes, the background image works, but other times it does not.
Lately, I have been trying to get this FOOTER div to work, and now it appears that much more of it is messed up.
How am I supposed to be able to tell when one piece of CSS breaks another piece of CSS? How do I tell when something tries to execute the CSS and there is an error?
The best you can to is to
Use Firebug or the browser developer tools of your choice to see what classes/styles the browser is applying, and the effects, and
Study the HTML standards to make sure you're coding them correctly; keep in mind that they are often counter-intuitive. MDN has some excellent articles on HTML layout, vertical alignment and many other HTML/CSS/Javascript topics.
Fixed the footer problem easy enough:
div.footer {
bottom:0px;
position:fixed;
text-align:center;
}
However, this does NOT answer the main question: How to Troubleshoot!
Best tool I've found for this is Firebug, it's still better than Chrome's tools. When you inspect an element it will show you the hierarchy of applied styles and those styles that have been overridden. (with strikethrough)
This is your best tool to see what is happening.
I think you're having z-index issues and the text-shadow is causing issues.
Removed the z-index:-1 and the text-shadow and the background behaves.
I am trying to look at this page in Firebug:
http://128.48.204.195:3000/
What I am trying to do is make the top-right area with login/signup be all the way to the right, but I am not sure how to do it. I tried to I surround that stuff with its own div called site_login but it didn't seem to do the trick.
Any idea how to put that stuff on top right further to the right so it looks a little more proportional and symmetrical?
Here is what my css looks like:
.banner .site_login {
height: 20px;
position: absolute;
float:right;
right: 0.5em;
top: 0.5em;
color: #fff;
}
.banner .site_login a
{
color: #fff;
text-decoration: underline;
}
.banner .site_login a:hover
{
color: #ff0;
}
Thank you!
Looks like you accidentally commented out the closing div tag </div>
Get that back in there (un-comment it), then position it absolutely (you'll always want it in the same place):
.site_login{position:absolute;width:300px;text-align:right;padding:10px;}
.banner{position:relative}
As Faust pointed out, you forgot your closing div tag </div>. Also, I added a float:right and it seems to work the way you are asking for. Check it out.