5 replies [Last post]
kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 1 year 48 weeks ago
Timezone: GMT+13
Joined: 2009-03-07
Posts: 65
Points: 102

I have a container which is to house images. I want the images to wrap around like tiles to a max width or 1200PX.

My images are 200PX wide. So if my screen can 6 it will but if not i want my container to snap to the nearest 200PX.

How can I do this?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 59 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Looking in the wrong direction

I don't think there are any backward compatible or mobile solutions for the direction you're trying to go. You can, though, cause the number of columns to 'snap'.

Try this solution:

  <head>
    <meta charset="utf-8">
    <meta content=
    "width=device-width; height=device-height; initial-scale=1"
          name="viewport">
    <title>
      Test document
    </title>
    <style type="text/css">
    /*<![CDATA[*/
 
    html, body {
	background-color: white;
	color: black;
	font: 100%/1.5 sans-serif;
	margin: 0  1.5em;
	padding: 0;}
 
    p {
	font-size: 1em;}
 
    #page {
	border: 1px dotted gray;
	margin: 0 auto;
	width: 90%;}
 
    #gallery {
	margin: 0 auto;
	max-width: 1280px}
 
    #gallery ul {
	margin: 0;
	padding: 0;
	text-align: center;}
 
    #gallery li {
	border: 1px solid black;
	display: inline-block;
	list-style: none;
	margin-bottom: .3em;}
 
    #gallery img {
	vertical-align: bottom;
	width: 200px;}
 
    /*]]>*/ 
    </style>
  </head>
  <body>
    <div id="page">
      <h1>
        Variable width gallery
      </h1>
 
      <div id="gallery">
        <h2>
          The images
        </h2>
 
        <ul>
          <li>
            <img alt=""
                src="test-image.gif">
          </li>
 
          <li>
            <img alt=""
                src="test-image.gif">
          </li>
 
          <li>
            <img alt=""
                src="test-image.gif">
          </li>
 
          <li>
            <img alt=""
                src="test-image.gif">
          </li>
 
          <li>
            <img alt=""
                src="test-image.gif">
          </li>
 
          <li>
            <img alt=""
                src="test-image.gif">
          </li>
 
          <li>
            <img alt=""
                src="test-image.gif">
          </li>
 
          <li>
            <img alt=""
                src="test-image.gif">
          </li>
 
          <li>
            <img alt=""
                src="test-image.gif">
          </li>
        </ul>
      </div>
      <!-- gallery -->
    </div>
    <!-- page -->
  </body>
</html>

This small demo doesn't require any specific css to be device responsive, but do test anyway.

Note: The attached test image is 300×300px.

Edit: Changed first sentence to read 'backward compatible'. ~gt

cheers,

gary

AttachmentSize
test-image.gif 462 bytes

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 1 year 48 weeks ago
Timezone: GMT+13
Joined: 2009-03-07
Posts: 65
Points: 102

That works well. Thank

That works well. Thank you.

Can I place a DIV over my image with a opacity of 0.7? I know how to create this div just not overlay it on the image like this?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 59 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

kiwis wrote: Can I place a

kiwis wrote:

Can I place a DIV over my image with a opacity of 0.7? I know how to create this div just not overlay it on the image like this?

For what purpose?

My first inclination would be to control the image's opacity. For example:

    #gallery li {
	background-color: black;
	border: 1px solid black;
	display: inline-block;
	list-style: none;
	margin-bottom: .3em;}
 
    #gallery img {
	opacity: 0.3;
	vertical-align: bottom;
	width: 200px;}
 
    #gallery img:hover {
	opacity: 1.0;}

The LI's background color is declared because the default is transparent, which might allow another, uncontrolled, color to shine through.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kiwis
kiwis's picture
Offline
Enthusiast
Last seen: 1 year 48 weeks ago
Timezone: GMT+13
Joined: 2009-03-07
Posts: 65
Points: 102

Sorry I should have said, I

Sorry I should have said, I want the DIV to be half the height and to contain text.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 hour 59 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Another try

    #gallery li {
	background-color: black;
	border: 1px solid black;
	display: inline-block;
	list-style: none;
	margin-bottom: .3em;
	position: relative;}
 
    #gallery img {
	vertical-align: bottom;
	width: 200px;}
 
    #gallery img:hover {}
 
    #gallery li p {
	background-color: white;
	height: 50%;
	margin: 0;
	opacity: 0.7;
	position: absolute;
	width: 200px;
	left: 0;
	bottom: 0;}

And, a snippet of html:

        <ul>
          <li>
            <img alt=""
                    src="test-image.gif">
	    <p>
	      This is text overlay
	    </p>
          </li>
 
          ...
        </ul>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.