Jump to content

Recommended Posts

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>

Link to comment
https://forums.phpfreaks.com/topic/246669-overflow-hidden-on-list-elements/
Share on other sites

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.

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>

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?

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.

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.

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!

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.