Distribute pictures

March 18, 2008 2:48 PM

How do you do this in css? Meaning, specifically, the plotting of pictures in specific spots like that.

Or should I just use a table to do it?

I'm making a website with an unorthodox design; there's to be a central rectangle full-o-text with six photographs surrounding it.

I wish Google would parse natural language enquiries better - I can't figure out the right way to google this. Many thanks, hive mind!

posted by By The Grace of God to Computers & Internet (11 answers total)

Just do a "view page source" and what you need is in the
posted by 543DoublePlay at 2:55 PM on March 18, 2008

Looks like they did it with an Image Map.
posted by trbrts at 2:55 PM on March 18, 2008

#img1 {
position: absolute;
top: 50px;
left: 80px;
}

<img id="img1" src="firstimage.gif">
posted by null terminated at 2:56 PM on March 18, 2008 [1 favorite]

Sorry that would be in the MAP tags -(i forgot MeFi doesn't render the tags)
posted by 543DoublePlay at 2:56 PM on March 18, 2008

Best answer: It's not CSS, although you could do it with absolutely positioned images.

The page you've linked to uses an imagemap - you can see the code in the source of the page. This is a semi-decent introduction to the topic, but any Google search on "HTML image map" will work.

In my opinion, it's one of the few areas in which a WYSIWYG editor like DreamWeaver comes in handy, as hand-coding the coordinates for an image map is a royal pain - DreamWeaver (and even PhotoShop CS3) will allow you to "draw" the hotspots over the image and link them, creating the code automatically.

Alternatively, as a full XHTML Strict / CSS design, you could do a list of linked images, and in the stylesheet something like:

ul li { display: inline; margin: 50px; }

Futz around with the CSS until the linked images were in the right place, and away you go.
posted by Bora Horza Gobuchul at 3:01 PM on March 18, 2008

Response by poster: to clarify - i know that that ol' page doesn't use css- i am trying to be good and do as much in css as possible!
posted by By The Grace of God at 3:07 PM on March 18, 2008

Maybe this will help?

http://www.frankmanno.com/ideas/css-imagemap/

Tip: Google "css image map". Maybe that will lead you in the right direction.
posted by andrewdunn at 3:15 PM on March 18, 2008

Ah, in that case... if the design was purely rectangular... say three evenly spaced images on the same horizontal plane, then an image either side of the central rectangle, and then three images with the same spacing as the first row... a series of linked list items would work, as I mentioned.

Otherwise, if they were in a more oval or circular form, like the example you've shown, you'd have to play with the top / bottom margin / padding of each list item, to push them up or down, or absolutely position a series of divs, each containing a single linked image.. null terminated's example will work, but it won't allow you to link the images.
posted by Bora Horza Gobuchul at 3:19 PM on March 18, 2008

Response by poster: I'll give that a go, thanks Mr Horza and everyone.
posted by By The Grace of God at 3:22 PM on March 18, 2008

Best answer: null terminated had it: make each element a separate image, and absolutely position them.

you don't need to mess around with imagemaps.

Also, a tip to have more flexibility with absolutely positioned elements: Make a container div to hold all your absolutely positioned elements. Set the position to relative. Now you can move that container around, and all the elements will move with it.

#container { position: relative; }
#img1, #img2, #img3 { position: absolute; top: 0; left: 0 }
#img2 { left: 40px; }
#img3 { top: 50px; }

<div id="container">
<img src="a.gif" id="img1">
<img src="b.gif" id="img2">
<img src="c.gif" id="img3">
</div>
posted by kamelhoecker at 7:53 PM on March 18, 2008 [2 favorites]

forgot the links...

<a href="foo.html"><img src="a.gif" id="img1"></a>


posted by kamelhoecker at 7:54 PM on March 18, 2008