displaying photos fairly simply

never tried this simple task before..

Page 1 of 1

12 Replies - 1244 Views - Last Post: 22 April 2008 - 06:35 AM

#1 mlg5454  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 15-October 07

displaying photos fairly simply

Post icon  Posted 20 April 2008 - 03:13 PM

http://www.theartshole.com/art/

i've never really tried doing this, what's the most common way to simply layout a bunch of photos without haven't them touch each other?

also, i think i'll want to have text under all of them. when you click each one it will open a new window with a larger photo. this is simple enough to do so i don't think i need help on this...

Is This A Good Question/Topic? 0
  • +

Replies To: displaying photos fairly simply

#2 girasquid  Icon User is offline

  • Barbarbar
  • member icon

Reputation: 108
  • View blog
  • Posts: 1,825
  • Joined: 03-October 06

Re: displaying photos fairly simply

Posted 20 April 2008 - 07:30 PM

Try taking a look at CSS's margin property - it will allow you to put a bit of space around any images on the page, so that you can keep them from touching each other.
Was This Post Helpful? 0
  • +
  • -

#3 mlg5454  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 15-October 07

Re: displaying photos fairly simply

Posted 20 April 2008 - 09:44 PM

i don't know if you looked at the page or not... but all the images are set to a class which i've css-ed to relative position and have added some padding... you need to LOOK at what's going on to see what i'm talking about, though. the image sizes are different so there is some funky stuff. and also how should i go about adding captions to all of these?
Was This Post Helpful? 0
  • +
  • -

#4 .Maleficus.  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 129
  • Joined: 07-March 08

Re: displaying photos fairly simply

Posted 21 April 2008 - 03:28 AM

You can make them all the same size (albeit a little stretched) by using the height and width HTML properties.

<img src = "http://www.sourceofimage.com/image.jpg" width = 200 height = 200>

Same goes for CSS.
Was This Post Helpful? 0
  • +
  • -

#5 mlg5454  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 15-October 07

Re: displaying photos fairly simply

Posted 21 April 2008 - 07:55 AM

you would actually recommend doing that?

i'm not asking how to make them look the same.

have any of you actually looked at my page?
Was This Post Helpful? 0
  • +
  • -

#6 girasquid  Icon User is offline

  • Barbarbar
  • member icon

Reputation: 108
  • View blog
  • Posts: 1,825
  • Joined: 03-October 06

Re: displaying photos fairly simply

Posted 21 April 2008 - 07:59 AM

Why are you using floats and relative positioning to accomplish what you have? If you put each image inside of a div and then set a margin on it, you will be able to keep them from touching - along with achieving the same effect. You will also be able to store a caption in the div with the images, and by setting the width/height of the container div you can guarantee that they are aligned properly.
Was This Post Helpful? 0
  • +
  • -

#7 mlg5454  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 15-October 07

Re: displaying photos fairly simply

Posted 21 April 2008 - 04:24 PM

ok, individual divs, that's a good recommendation, thanks !! :D
Was This Post Helpful? 0
  • +
  • -

#8 mlg5454  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 15-October 07

Re: displaying photos fairly simply

Posted 21 April 2008 - 06:41 PM

jesus. maybe i should just put them in a list. who are you people?
Was This Post Helpful? 0
  • +
  • -

#9 girasquid  Icon User is offline

  • Barbarbar
  • member icon

Reputation: 108
  • View blog
  • Posts: 1,825
  • Joined: 03-October 06

Re: displaying photos fairly simply

Posted 21 April 2008 - 06:54 PM

I don't understand what you just said.

You can do something like this to lay out your photos:
<div id='photo-one'>
<a href='../foo/bar/baz.png'><img src='../foo/bar/baz.png' /></a>
<p>This is my caption</p>
</div>


And then just write some CSS:
div#photo-one {margin:20px}


If you want fine, fine-grained positioning of your divs, look into position:absolute it will let you force them to be at a position like top:32px;left:48px.

This post has been edited by girasquid: 21 April 2008 - 06:54 PM

Was This Post Helpful? 0
  • +
  • -

#10 mlg5454  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 15-October 07

Re: displaying photos fairly simply

Posted 21 April 2008 - 07:02 PM

but doing that with more than one div puts each div on top of one another. doing that, you have to do something like margin-top: -100px to align them horizontally, which defeats all kinds of purposes. for that reason i'm just going to try putting the image and text into an inline displayed list. these are really ineffective methods.

This post has been edited by mlg5454: 21 April 2008 - 07:06 PM

Was This Post Helpful? 0
  • +
  • -

#11 girasquid  Icon User is offline

  • Barbarbar
  • member icon

Reputation: 108
  • View blog
  • Posts: 1,825
  • Joined: 03-October 06

Re: displaying photos fairly simply

Posted 21 April 2008 - 07:41 PM

I don't think you understand what I am getting at.

The divs appear one on top of the other because they are block-level elements. If you want to fix that, change their display property to "inline".

read and understand this.
Was This Post Helpful? 0
  • +
  • -

#12 mlg5454  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 15-October 07

Re: displaying photos fairly simply

Posted 21 April 2008 - 08:03 PM

ok, so divs DO work. the list is seeming to work, however. will using a list to display my images end up being problematic at all? if not i don't see why i shouldn't....

it's nice to be reminded about displaying normally displayed block elements as inline, though. one of the first useful things i've learned in this thread.
Was This Post Helpful? 0
  • +
  • -

#13 girasquid  Icon User is offline

  • Barbarbar
  • member icon

Reputation: 108
  • View blog
  • Posts: 1,825
  • Joined: 03-October 06

Re: displaying photos fairly simply

Posted 22 April 2008 - 06:35 AM

View Postmlg5454, on 21 Apr, 2008 - 08:03 PM, said:

one of the first useful things i've learned in this thread.


If you can't accept help graciously, don't ask for it. Every response to this thread has been an attempt to help you with your poorly-worded problem - the reason you didn't get an answer you were looking for right away is because your question was not clear enough.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1