Author Topic: positioning Urgent  (Read 2382 times)

shulamis

  • Guest
positioning Urgent
« on: November 28, 2012, 12:36:55 am »
Hi

I am having some difficulty positioning my images. Here is a linkhttp://sd-smdesigns.com/SMDesigns_portfolio.html

Here is a copy of what I did in the CSS. When I uses styles on the first image everything goes out of the left hand column.

 Also I have to make these images links to bigger pictures. What is the easiest and fastest way to do this?

Thanks
Shulamis

#leftcolumn {
   font-family: "Imprima";
   font-size: 14px;
   font-weight: normal;
   text-align: left;
   width: 410px;
   float: left;
   margin-left: 40px;
   margin-right: 0px;
   padding-bottom: 15px;
   position:relative;
   
}
.stylecolumn {
   position: absolute;
   left: 18px;
   top: 43px;
   width: 150px;
   height: 150px;
}
.stylecolumn2 {
   position: absolute;
   left: 220px;
   top: 53px;
   width: 150px;
   height: 150px;
}

JennaSetticasi

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 492
Re: positioning Urgent
« Reply #1 on: November 28, 2012, 10:17:23 am »
The images appear to be positioned correctly for me in IE9.

The best way to create columns is to use the float property: http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

Using absolute positioning can create unexpected results because it's disrupting the normal page flow to place the elements where they wouldn't normally be.

I recommend jQuery lightbox for creating a professional image gallery: http://leandrovieira.com/projects/jquery/lightbox/
Jenna Setticasi
The Art Institute of Pittsburgh | Online Division
Associate Professor, Web Design and Interactive Media

shulamis

  • Guest
Re: positioning Urgent
« Reply #2 on: November 28, 2012, 10:20:14 am »
Thanks Jenna,

Will light box help me by allowing the viewer to click on bigger image?

Shulamis

shulamis

  • Guest
Re: positioning Urgent
« Reply #3 on: November 28, 2012, 10:21:50 am »
Thanks Jenna,

I forgot to meniton. I just played around with images so they looked lined up. I did this by adding or subtracting pixels from the position.

Shulamis

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: positioning Urgent
« Reply #4 on: November 28, 2012, 10:30:33 am »
Thanks Jenna,

Will light box help me by allowing the viewer to click on bigger image?

Shulamis

You'll need to have bigger images to use, but yes, it will allow the viewer to click the thumbnail to view the larger image. There is a demo on the link that Jenna posted so you can see what it looks like. Go to the link and then click the "Example" tab. From there click on one of the thumbnail images.
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu

shulamis

  • Guest
Re: positioning Urgent
« Reply #5 on: November 28, 2012, 03:25:04 pm »
Hi Erikk or Jenna,

the link that was posted shows a row of images. I just want to be able to have the user click in each image that I have already placed and view a larger image.
Would Lightbox 2 be more suitable for that?

Shulamis

erikkross

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 399
    • Personal Blog with Classroom Tutorials
Re: positioning Urgent
« Reply #6 on: November 28, 2012, 05:11:39 pm »
Lightbox doesn't control the layout of the thumbnail images. The person who created that site just wanted his thumbnails in a row so he did it that way. Lightbox will work no matter how you want to layout the thumbnail images.
Erikk Ross
The Art Institute of Pittsburgh, Online Division
Web Design and Interactive Media
Full Time Faculty
eross@aii.edu