Programming Help

Web Development

Projects



What's Here?

  • Members: 86,248
  • Replies: 356,472
  • Topics: 52,269
  • Snippets: 1,779
  • Tutorials: 422
  • Total Online: 2,208
  • Members: 72
  • Guests: 2,136

Who's Online?

Welcome to Dream.In.Code
Getting Help is Easy!

Join 86,248 Programmers. There are 2,208 online right now! Ask your question and get quick answers from Dream.In.Code experts. Join the #1 programming help community on the internet! Registration is fast and FREE... Join Now!

Chat LIVE With a Expert
Powered by LivePerson.com

Register to Make This Box Go Away!

displaying photos fairly simply

2 Pages V  1 2 >  
 Reply to this topicStart new topic

displaying photos fairly simply, never tried this simple task before..
mlg5454
post 20 Apr, 2008 - 03:13 PM
Post #1


New D.I.C Head

*
Joined: 15 Oct, 2007
Posts: 25


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...
User is offlineProfile CardPM
Go to the top of the page
+Quote Post


girasquid
post 20 Apr, 2008 - 07:30 PM
Post #2


Barbarbar

Group Icon
Joined: 3 Oct, 2006
Posts: 953
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.
User is online!Profile CardPM
Go to the top of the page
+Quote Post

mlg5454
post 20 Apr, 2008 - 09:44 PM
Post #3


New D.I.C Head

*
Joined: 15 Oct, 2007
Posts: 25
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?
User is offlineProfile CardPM
Go to the top of the page
+Quote Post

.Maleficus.
post 21 Apr, 2008 - 03:28 AM
Post #4


D.I.C Head

**
Joined: 7 Mar, 2008
Posts: 64
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.
User is offlineProfile CardPM
Go to the top of the page
+Quote Post

mlg5454
post 21 Apr, 2008 - 07:55 AM
Post #5


New D.I.C Head

*
Joined: 15 Oct, 2007
Posts: 25
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?
User is offlineProfile CardPM
Go to the top of the page
+Quote Post

girasquid
post 21 Apr, 2008 - 07:59 AM
Post #6


Barbarbar

Group Icon
Joined: 3 Oct, 2006
Posts: 953
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.
User is online!Profile CardPM
Go to the top of the page
+Quote Post

mlg5454
post 21 Apr, 2008 - 04:24 PM
Post #7


New D.I.C Head

*
Joined: 15 Oct, 2007
Posts: 25
ok, individual divs, that's a good recommendation, thanks !! biggrin.gif
User is offlineProfile CardPM
Go to the top of the page
+Quote Post

mlg5454
post 21 Apr, 2008 - 06:41 PM
Post #8


New D.I.C Head

*
Joined: 15 Oct, 2007
Posts: 25
jesus. maybe i should just put them in a list. who are you people?
User is offlineProfile CardPM
Go to the top of the page
+Quote Post

girasquid
post 21 Apr, 2008 - 06:54 PM
Post #9


Barbarbar

Group Icon
Joined: 3 Oct, 2006
Posts: 953
I don't understand what you just said.

You can do something like this to lay out your photos:
CODE

<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:
CODE

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 Apr, 2008 - 06:54 PM
User is online!Profile CardPM
Go to the top of the page
+Quote Post

mlg5454
post 21 Apr, 2008 - 07:02 PM
Post #10


New D.I.C Head

*
Joined: 15 Oct, 2007
Posts: 25
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 Apr, 2008 - 07:06 PM
User is offlineProfile CardPM
Go to the top of the page
+Quote Post

girasquid
post 21 Apr, 2008 - 07:41 PM
Post #11


Barbarbar

Group Icon
Joined: 3 Oct, 2006
Posts: 953
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.
User is online!Profile CardPM
Go to the top of the page
+Quote Post

mlg5454
post 21 Apr, 2008 - 08:03 PM
Post #12


New D.I.C Head

*
Joined: 15 Oct, 2007
Posts: 25
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.
User is offlineProfile CardPM
Go to the top of the page
+Quote Post

2 Pages V  1 2 >
Fast ReplyReply to this topicStart new topic
Time is now: 5/16/08 08:48AM
Invision Power Board v2.1.7 © 2008  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

Bye Bye Ads

Free DIC T-Shirt

T-Shirt Example

Related Sites

Monthly Drawing

Thumb Drive

Partners

Top Contributors

Top 10 Kudos This Month