Smart box html help reqd

[george]

Broke my brain this morning trying to get a simple bit of html written. Finally given up and gone to empty the bins and sweep the floor or something else soothing. Tired 'n grumpy, lol.

Need to put four images into a sidebar box, two rows of two. The images will measure 50 pixels wide (although the actual height may vary), with a gap of 20 pixels between them (vertically). Each image has to be clickable to a product on the 'site, and again each image his its own name tag.

Well I thought it would be an easy thing to do.

[jont]

It's the missus nagging you over the new logo design.. I knew she would wear you down

The "sensible" solution would be to wrap the box inside a <div> and use CSS to float the images left setting the margins accordingly to align the <img> tags

[wjcampbe]

I need to learn to read....

[george]

It's the missus nagging you over the new logo design.. I knew she would wear you down

I think I need to rig an online poll somehow

The "sensible" solution would be to wrap the box inside a <div> and use CSS to float the images left setting the margins accordingly to align the <img> tags

Trust somebody to show off. Jonty lad it's George here... jeez.
What about an "unsensible" solution then?

*crosses fingers that it will be at least a little bit easier to understand/do*

[wjcampbe]

Same mistake that made me delete my first post - its a vertical separation.

To do it in tables, we need
first row - three fixed width cells,
second row - fixed height="20px"
third row same as first.

except if the name tags have to show on the page, there's another two fixed width rows in there to hold that text.

[jont]

I think I need to rig an online poll somehow

No need - we agree on the design so it's 2:1 against Mrs George

Here is how I acheived the same effect in a brochure fragment:

in the html :

<div class="fragmentCOL"><a href="http://www.site.co.uk/acatalog/page.html"><img src="picture.jpg" alt="My Picture" title="New Stuff" /></a></div>

in the CSS:

.fragmentCOL img {
margin: 15px 15px 8px 0;
display: inline;
border: 0px;
}

the margins work clockwise - top, right, bottom, left .. so in your case the 8px would be 20px ... you will need to tweak the others to align correctly in your side bar

The other option would be to wrap all the images into a single <div> and use:

float:left

HTH

** added ***

you can also declare the width in the .fragmentCOL to further control the layout and try setting text-align:center to over come some cross browser issues

[pinbrook]

Mrs George gets my support so its now 2:2

[george]

Mrs George gets my support so its now 2:2

Is there a sweary filter on this forum I wonder?

[Luddite]

Don't worry George - I think I sided with you too. I make that 3-2 against Mrs George. Is the ref looking at his watch yet?

Nick

[jont]

Interesting Male | Female divide on the logo George ... best gear the actual final logo towards your majority audience