daring_du Posted October 9, 2009 Share Posted October 9, 2009 Hi there,I found this code on the W3schools image gallery section in the CSS tutorial try it yourself when I was looking for some help. I've modified the borders a bit so that the whole image shifts down when moused over and changed the color a bit.My question is about how to apply a different bottom border color to each picture. Any suggestions? Thanks. <html><head><style type="text/css">div.img { margin:2px; border:1px solid #0000ff; height:auto; width:auto; float:left; text-align:center; }div.img img { display:inline; margin:3px; border:1px solid #ffffff; }div.img a:hover img {border-top: 15px solid white; border-bottom:4px solid red;border-left:1px solid white;border-right:1px solid white;}div.desc { text-align:center; font-weight:normal; width:120px; margin:2px; }</style></head><body><div class="img"> <a target="_blank" href="klematis_big.htm"> <img src="klematis_small.jpg" alt="Klematis" width="110" height="90" /> </a> <div class="desc">Add a description of the image here</div></div><div class="img"> <a target="_blank" href="klematis2_big.htm"> <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" /> </a> <div class="desc">Add a description of the image here</div></div><div class="img"> <a target="_blank" href="klematis3_big.htm"> <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" /> </a> <div class="desc">Add a description of the image here</div></div><div class="img"> <a target="_blank" href="klematis4_big.htm"> <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" /> </a> <div class="desc">Add a description of the image here</div></div></body></html> Link to comment Share on other sites More sharing options...
thescientist Posted October 9, 2009 Share Posted October 9, 2009 you could make classes that change the border color. Make one for each color you need? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 9, 2009 Share Posted October 9, 2009 try changing 2, 3 and 4 <div> tags to below<div class="img col2"><div class="img col3"><div class="img col4">then add last three lines to css below div.img a:hover img {...}div.img a:hover img {border-top: 15px solid white; border-bottom:4px solid red;border-left:1px solid white;border-right:1px solid white;}div.col2 a:hover img {border-bottom:4px solid lime;}div.col3 a:hover img {border-bottom:4px solid blue}div.col4 a:hover img {border-bottom:4px solid pink;} Link to comment Share on other sites More sharing options...
daring_du Posted October 10, 2009 Author Share Posted October 10, 2009 Hi dson,Thanks for that suggestion; it worked fine. Any idea why the a:hover border changes don't work in IE? (I'm willing to hear the answer "because IE is a big stupid dummy head browser") but if you know the actual reason and a way around the problem, that would be hepful, too. Thanks Link to comment Share on other sites More sharing options...
jlhaslip Posted October 10, 2009 Share Posted October 10, 2009 *In the olden days* (ie: IE6 and earlier), IE only affected a hover on <a> tags. Which model of IE are you checking with? Link to comment Share on other sites More sharing options...
daring_du Posted October 10, 2009 Author Share Posted October 10, 2009 *In the olden days* (ie: IE6 and earlier), IE only affected a hover on <a> tags. Which model of IE are you checking with?Hi jl,Thanks for that post as I found it to be very helpful. I had the code written like this <div class="ul"><li><a href="#1"><b>HOME</b></a></li> </div> so based on your advice it seemed that I needed to put the list tags inside the <a> tag for explorer to recognize it properly. I just tried it in explorer and it works now. I'm using IE 6, btw to test in Explorer. Thanks again for that advice.If people don't mind, I'd like to ask for a bit of advice on the css that I've been working on. The image buttons on my webpage don't seem to load properly on a regular basis so I wanted to make some buttons using css (and it's been kind of fun playing around with the code). Can you have a look and tell me what you think? (if you think the color scheme is ugly you can tell me that too, but I'm going for a pleasent green look).Opera seems to be handling the code a bit differently on the far right side of the button, in that there is an obvious gap, although IE does not show the same gap between the original box and the hovered box. Anyway, here's the code if anyone has time to look at it. If not that's cool too, as you still helped me a lot. <html><head><style type="text/css">div.ul{float:left;width:6em;padding:0;margin:4px;list-style-type:none;text-align:center;border-right:3px solid green;border-left:3px solid #00FF7F;border-top:3px solid #3CB371;border-bottom:3px solid #3CB371;}a{float:left;width:100%;height:auto;color:white;text-align:center;background-color:green;}li{display:inline;}a:hover{background-color:#32CD32;color:#0000FF;border-top:5px solid #3CB371;border-bottom:5px solid green;border-right:3px solid green;border-left:3px solid #00FF7F;}a:active{background-color:#00FA9A;color: #0000FF;}</style></head><body><div class="ul"><a href="#1"><li><b>HOME</b></li></a> </div><div class="ul"><a href="#1"><li><b>volunteer</b></li></a> </div><div class="ul"><a href="#1"><li><b>news</b></li></a> </div><div class="ul"><a href="#1"><li><b>CONTACT</b></li></a> </div><div class="ul"><a href="#1"><li><b>FAQ</b></li></a> </div></body></html> Link to comment Share on other sites More sharing options...
Synook Posted October 10, 2009 Share Posted October 10, 2009 It's invalid to put a list index element inside an anchor element. The "correct" solution to the IE6 no CSS :hover on non-anchor elements problem is to use JS, or to style your anchors in such a way that you don't need a list. Try fixing that up first, Opera is a quite picky about standards.Also, for best practices you should assign font-weight:bold; to the anchors instead of using a <b> tag. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 10, 2009 Share Posted October 10, 2009 to get the image border colour to change in IE6 use:hover { border-color: transparent; }i usually place it below the other hover pseudo border colour coding, but it does not seem to matter.div.col2 a:hover img {border-bottom:4px solid lime;}div.col3 a:hover img {border-bottom:4px solid blue}div.col4 a:hover img {border-bottom:4px solid pink;}:hover { border-color: transparent; } Link to comment Share on other sites More sharing options...
daring_du Posted October 10, 2009 Author Share Posted October 10, 2009 to get the image border colour to change in IE6 use:hover { border-color: transparent; }i usually place it below the other hover pseudo border colour coding, but it does not seem to matter.div.col2 a:hover img {border-bottom:4px solid lime;}div.col3 a:hover img {border-bottom:4px solid blue}div.col4 a:hover img {border-bottom:4px solid pink;}:hover { border-color: transparent; }Hi synook and dsone,Thanks for those posts. Synook, I think you are right in that it's probably not necessary to use a list format in this particular style so I'll try fooling around with it tomorrow to see what I can come up with. I don't know why it's invalid, but it sure does sound like you know what you are talking about. I clicked on your link about 3 reasons why it's bad to use tables for layout, but it was a bit complicated for me to understand without a lot more explanation about the practicalities of how to use css. I'll have a look at the zengarden link tomorrow as that looked interesting, too. Also, thanks for that tip about the bold vs font issue. It also reminded me about using <strong> as well. I read that somewhere before and I can see the sense in what you are saying. I hope I remember it for next time!dsone, I'll try your suggestion too. It's amazing how much variety there is with such codes. Would your suggestion about placing the ":hover" pseudo class be considered a "hack"? Or is it just a "proper" way of working around a problem? I don't mind either way, but it sure does sound very interesting.I've also discovered that when I place the code onto my web page the entire bar of 5 buttons moves up and down when any one button is moused over, whereas, it does NOT work that way when using notepad for experimentation; each button moves "up and down" (based on the border thickness controls) of it's own accord without affecting the movement of the other buttons. It probably has something to do with the way the code is interacting with the other layout elements on the page so I'll screw around with that a bit tomorrow too. I may even just decide to go berserk and radically redesign the whole site if synooks tutorial suggestions re: css inspire me that much!!!Anyway, thanks again for the feed back. It is much appreciated. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.