Positioning images

rubyfruit · #1 Jan 29th, 2007, 17:51

Hi,

I am trying to create a gallery page. In it will be 9 thumbnail images (75x75px), which will each be links to the full image. They sit within a div called 'content'. Within that area I want them to be in 3 rows each of 3 thumbnails. With a margin around each image, and with them spaced equally and neatly within the div. The div is height: 470px and width 400px.

I'm not sure which method of positioning to use, and how to apply it to so many images. Will each image need its own div? I want my website to be as accessible as possible (diff browsers & ease of use by all).

Any ideas greatfully received. I haven't done any coding for 2 mths and my brain has gone to mush.

Many thanks,

Ruby

karinne · #2 Jan 29th, 2007, 17:57

I would do this

Code: Select all

.thumbnailboxes {
   width: 120px;
   float: left;
   margin: 5px;
}

.clear {
   clear: both;
}

<div id="content">
  <div class="thumbnailboxes"><img src="..." alt="" /></div>
  <div class="thumbnailboxes"><img src="..." alt="" /></div>
  <div class="thumbnailboxes"><img src="..." alt="" /></div>
  <div class="clear"></div>
  
  <div class="thumbnailboxes"><img src="..." alt="" /></div>
  <div class="thumbnailboxes"><img src="..." alt="" /></div>
  <div class="thumbnailboxes"><img src="..." alt="" /></div>
  <div class="clear"></div>
</div>

something like that.

Ryan Fait · #3 Jan 29th, 2007, 18:30

Make .clear in Karines code be this so it works in all browsers

Code: Select all

.clear {
    width: 100%;
    height: 1px;
    margin: 0 0 -1px;
    clear: both;
}

karinne · #4 Jan 29th, 2007, 18:43

In which browser does my clear not work?

moojoo · #5 Jan 29th, 2007, 18:48

http://www.newguyinennis.com/photography/ feel free to steal that code or something. I will whip up a "Photo Gallery" sample tonight.

rubyfruit · #6 Jan 29th, 2007, 19:04

Thank you all. Just about to try out the coding. Will let you know if I succeed.

Ruby

Ryan Fait · #7 Jan 29th, 2007, 22:07

Quote:

In which browser does my clear not work?

Sorry, I said that wrong. Depending on other things in a layout, IE may not recognize a clear <div>. I wrote an article on it, but I'm currently reworking my site now. I'll put the link up here when I'm finished (hopefully today).

Ryan Fait · #8 Jan 30th, 2007, 07:10

As promised

Breaking CSS Floats

Hopefully my site isn't too broken. I haven't done any testing on the articles CSS file in anything but Safari. Oh well, I'll work on it tomorrow.

karinne · #9 Jan 30th, 2007, 12:51

Thanks Ryan, I'll check that out.

moojoo · #10 Jan 30th, 2007, 16:43

But my way works and is uber sexy and because I am the Mooj, you should just do what I say! hehe. Or don't because I am loopy like that.

rubyfruit · #11 Jan 30th, 2007, 19:08

Hi, thanks for your info - I've used all of your advice to get to my current position. I'm now half way there, but still need to figure out how to stop the lower thumbnails falling off the page, and how to centre images within the content div. Currently wading my way through a text book, but in the meantime here is my screenshot:

http://f7.yahoofs.com/users/aD6RXYyb...as=positioning

I'd show you my coding, but I fear it is too dire to reveal.........

PS Moojoo - thankyou for the link to your website - it is beautiful - design, photos & words.

moojoo · #12 Jan 30th, 2007, 19:13

I get a blank page at that URL. At any rate place a clearing div after the thumbnails and before the closing <div> of your container. That will clear the float and keep it down.

rubyfruit · #13 Jan 30th, 2007, 19:42

Dodgey coding alert

:

HTML: Select all

 </head>
 <body> 
  <div id='outer'>  
   <div id='sidebar'>  
     <ul>    
     <li><a href="index.html"title="Home">HOME</a></li>
     <li><a href="sculpture.html"title="Sculpture">SCULPTURE</a></li>
     <li><a href="drawings.html"title="Drawings">DRAWINGS</a></li>
     <li><a href="biography.html"title="'to add">BIOGRAPHY</a></li>
     <li><a href="commissions.html"title="Commissions">COMMISSIONS</a></li>
     <li><a href="exhibitions.html"title="Exhibitions">EXHIBITIONS</a></li>
     <li><a href="classes.html"title="classes">CLASSES</a></li>
     <li><a href="contact.html"title="COntact">CONTACT</a></li>
     </ul>
  
    <div id='sidebarh1'>
    <p> TITLE </p>
     </div> <!-- End of sidebarh1 --> 
    
   </div> <!-- End of sidebar -->

   <div id="content">
    
    <h1> DRAWINGS</h1>
        
  <div class="thumbnailboxes"> <a href="drawing1.html" title="drawing 1"><img src="drawing1.jpg" width="75" height="75" alt= "pencil drawing of"/></a></div>
  <div class="thumbnailboxes"> <a href="drawing1.html" title="drawing 1"><img src="drawing1.jpg" width="75" height="75" alt= "pencil drawing of"/></a></div>
  <div class="thumbnailboxes"> <a href="drawing3.html" title="drawing 3"><img src="drawing3.jpg" width="75" height="75" alt= "pencil drawing of"/></a></div>
  <div class="clear"></div>
 
  <div class="thumbnailboxes"> <a href="drawing4.html" title="drawing 4"><img src="drawing4.jpg" width="75" height="75" alt= "pencil drawing of"/></a></div>
  <div class="thumbnailboxes"> <a href="drawing5.html" title="drawing 5"><img src="drawing5.jpg" width="75" height="75" alt= "pencil drawing of"/></a></div>
  <div class="thumbnailboxes"> <a href="drawing6.html" title="drawing 6"><img src="drawing6.jpg" width="75" height="75" alt= "pencil drawing of"/></a></div>
  <div class="clear"></div>
  <div class="thumbnailboxes"> <a href="drawing7.html" title="drawing 7"><img src="drawing7.jpg" width="75" height="75" alt= "pencil drawing of"/></a></div>
  <div class="thumbnailboxes"> <a href="drawing8.html" title="drawing 8"><img src="drawing8.jpg" width="75" height="75" alt= "pencil drawing of"/></a></div>
  <div class="thumbnailboxes"> <a href="drawing9.html" title="drawing 9"><img src="drawing9.jpg" width="75" height="75" alt= "pencil drawing of"/></a></div>
  <div class="clear"></div>  
  
    <p> Click on the image to view the complete drawing and information.</p>
         
   </div> <!-- End of content --> 
    
  </div> <!-- End of outer -->
  </body>
</html>

Code: Select all

html, body { margin: 0; padding: 0; background-color: white; color: black; font-size: 100.01%; font-family: sans-serif; }

#outer { height: 470px; width: 675px; background-color: white; }
#outer { position: absolute; top: 50%; margin-top: -235px; left: 50%; margin-left: -337.5px; }

#sidebar {  height:470px; width: 145px; float: left; padding-right: 20px;  } /*padding to get text away from edge of sidebar*/
#sidebar { background-color: white; border-right: solid black; font-size: 0.8em;}
ul {text-align: right; list-style: none; line-height: 1.5em; }
a:link {color: black; font-weight: bold; text-decoration: none; }
a:visited {color: black; font-weight: bold; text-decoration: none; }
a:active {color: black; font-weight: bold;  text-decoration: none; }
a:hover {color: #9A803B; font-weight: bold; text-decoration: none; }
#sidebarh1 { text-align: left; color: #9A803B; font-size: 1.2em; font-weight: bold; font-family: sans-serif;}
#sidebarh1 {position:absolute; bottom:0px; left:0px;}
#content { background-color: white; height: 470px; margin-left: 165px; } 
#contentex { background: url(angel.gif) no-repeat right; background-color: white; height: 470px; margin-left: 165px; } 

.thumbnailboxes { width: 120px; float: left; margin: 5px;}
.clear { width: 100%; height: 1px; margin: 0 0 -1px; clear: both; } /* to make the thumbnails line up correctly */

img {display: block; margin-left: auto; margin-right: auto; }
h1 {text-align: center; color: #9A803B;font-size: 1.2em; }
p {padding: 1.5em; text-align: justify; font-size: 0.8em; line-height: 1.5em;}
ol {padding: 1.5em; font-size: 0.8em; line-height: 1.5em; list-style: none; width: 50%;}
li {margin-bottom: 1em; }

This is my first attempt at coding a website, and to add to that I ignored it for 2 mths during which time I forgot everything. But I'm guessing (hoping) I can only improve.............

rubyfruit · #14 Jan 30th, 2007, 20:01

PS have changes link to image. But basically it is a 2 coloumn design, with the navigation coloumn on the left.

rubyfruit · #15 Mar 27th, 2007, 19:30

Hi,

I've fixed my below problem by using clear right instead of clear.

However I still need to make some adjustments to my gallery. The first is that I can't get the images to sit central within the column. Should I put them within a div, and centre that (eg. with margin auto?), or should I use a different form of positioning?

Also I have decided that I want the margin for each image to be 5px, however I can't get this to take effect. If I change the width to 75px, the images stop sitting in rows of 3, and instead form a line. However by changing the width I do get my margin to take effect.

My coding is per Karinne's, except for the change to clear.

I have attached a link to a screen shot. http://www.diaphanouslife.com/photo.html

Thank you.

Ruby

rubyfruit · #16 Mar 29th, 2007, 17:08

Hi, still struggling with this. I now have two galleries, and can't managed to centre either within their div, despite several hours of trying, doh!

The second gallery has 4 rows each with 5 thumbnails (although it needs to be able to expand to 5 or 6 rows if need be). Each thumbnail is 75x75px with a 5px margin, as before.

The div is now 530px wide.

In IE 5 the clear right works, but not in any other browser.
However in IE 5 I can't get my margin of 5px.

In the other browsers the clear is ignored, but the thumbnails respect my request for a margin of 5px.

If I try clear both, all but the first row of pics sit beneath the bottom of my page (ie under the nav coloumn).

Any help greatly appreciated.

Thanks, Ruby

Lchad · #17 Mar 29th, 2007, 20:18

Can you post code? I'm a hands on kind of gal...

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Positioning images