wright67uk Posted September 7, 2011 Share Posted September 7, 2011 Can anybody help a little with my css used on the list below; Ive put it on the web; www.1pw.co.uk/viewer2 When an image is seen in #gallery li a img it is shrunken down to 30px the width of its container. I was hoping that I would be able to display just the first 30px of my image rather than for it to be squashed to 30px As you can see I have tried overflow:hidden but without any change. If you hover over the 1st image you will see my aim. any ideas? #gallery { padding:0; margin:0; list-style-type:none; overflow:hidden; height:320px; width:630px; border:1px solid #888; background:#fff url(windows/win_back.gif); } #gallery li { float:left; } #gallery li a { display:block; width:30px; height:320px; float:left; text-decoration:none; border-bottom:1px solid #fff; cursor:default; overflow:hidden; } #gallery li a img { height:320px; width:30px; border:0; overflow:hidden; } #gallery li a:hover { background:#eee; width:450px; } #gallery li a:hover img { width:450px; } <ul id="gallery"> <li><a href="#nogo"> <img src="1.jpg" alt="#1" title="#1" /></a></li> <li><a href="#nogo"> <img src="2.jpg" alt="#2" title="#2" /></a></li> <li><a href="#nogo"> <img src="3.jpg" alt="#3" title="#3" /></a></li> <li><a href="#nogo"> <img src="4.jpg" alt="#4" title="#4" /></a></li> <li><a href="#nogo"> <img src="5.jpg" alt="#5" title="#5" /></a></li> <li><a href="#nogo"> <img src="6.jpg" alt="#6" title="#6" /></a></li> <li><a href="#nogo"> <img src="7.jpg" alt="#7" title="#7" /></a></li> </ul> Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 8, 2011 Share Posted September 8, 2011 right now your shrinking the images What you could do instead is to set the image as a background image on the anchor element. That way you can increase or decrease the width of the anchor without distorting the background image. Does that make sense? If not let me know and i'll give an example. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 8, 2011 Share Posted September 8, 2011 here try this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> #image{background:yellowgreen;height:150px; overflow:hidden;list-style:none;} #image li{display:inline;} #image li a{width:30px; height:150px;display:block;float:left;} #image li a:hover{width:150px;} #A1{background:url(http://www.1pw.co.uk/4.jpg) no-repeat;} #A2{background:url(http://www.1pw.co.uk/3.jpg) no-repeat;} #A3{background:url(http://www.1pw.co.uk/4.jpg) no-repeat;} #A4{background:url(http://www.1pw.co.uk/3.jpg) no-repeat;} #A5{background:url(http://www.1pw.co.uk/4.jpg) no-repeat;} </style> </head> <body> <ul id="image"> <li><a id="A1"href=""></a></li> <li><a id="A2"href=""></a></li> <li><a id="A3"href=""></a></li> <li><a id="A4"href=""></a></li> <li><a id="A5"href=""></a></li> </ul> </body> </html> Quote Link to comment Share on other sites More sharing options...
wright67uk Posted September 8, 2011 Author Share Posted September 8, 2011 That works well, is there a way to fill the empty space when I'm not hovering, either by making a background image for ul or by getting each hovered image to stick? Quote Link to comment Share on other sites More sharing options...
wright67uk Posted September 8, 2011 Author Share Posted September 8, 2011 Hi I got the desired result in the end. I doctored an image and placed it in #image the right side of the image being the same as that in #A5 and made the left side of this new image transparent. Here's the result; www.1pw.co.uk/viewer3 It seems to work well in IE and FF but would love to know if it works in your browser. Let me know what you think? Quote Link to comment Share on other sites More sharing options...
wright67uk Posted September 8, 2011 Author Share Posted September 8, 2011 oops I was wrong I have an unwanted gap in IE but not in FF Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 8, 2011 Share Posted September 8, 2011 Like quite some elements <ul>'s have a default style. If you would give this a margin and padding of 0 they gap will probably be gone. Also maybe try instead to place a reset.css above your styles. (read the sticky, it's probably the second in the list) This will do the same but for more elements. In the end you might make your own reset, but for now it's good enough. Quote Link to comment Share on other sites More sharing options...
wright67uk Posted September 8, 2011 Author Share Posted September 8, 2011 I sorted this by changing the image size to that of its container, and forcing it to behave. Also added good old erics reset.css Thanks ever so much for your help. finished article www.1pw.co.uk/viewer3 would love to know about any cross browser issues. http://cssfreakie.webege.com/ Hover text from your coding service button bleeds at the bottom of the page in my IE, let me know if you want my res and ie version. 100% certain you can sort this lol. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 8, 2011 Share Posted September 8, 2011 good to hear and see it works. Not surethough what you mean with bleeding. at the bottom, but just check in ie789 and looked as i want it Although i ones made that in hurry. It's not something I'm proud of, you can pm me your version if you want. Keeps this thread on topic Cheers! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.