Link Image and Text Alignment

tracey8546 · Joined: 27 Mar 2009 Posts: 6

Hi,

I am trying to add category links to a website page (3 per row) which link to my website's internal pages.

I have studied through a lot of the posts in the forum but I can't seem to figure out how to get the text under my image links, so that they are aligned to the same link as the image and also centred under that image.

Can someone please tell me how to do this?

I have used the following code so far to get 2 of my images next to each other on the page, but can't figure out how to get the text under the image:

<a href="http://www.halloween-and-more.com/index.php?main_page=page&id=21&chapter=10" target="_top">
<img src="http://www.halloween-and-more.com/images/haunted_houses.jpg" height="125" width="125" border="0" alt="Haunted Houses" />

<a href="http://www.halloween-and-more.com/index.php?main_page=page&id=22" target="_top">
<img src="http://www.halloween-and-more.com/images/recipes.jpg" height="125" width="125" border="0" alt="Halloween Recipes" />

Help would be greatly appreciated! Thanks

Corey Bryant · Posted: Wed Apr 01, 2009 10:06 am

Is there more code perhaps? Right now the code you posted - it could go on top of one another if you have it in a container less than 130 pixels wide. If you have it in a container that is more than 250 pixels wide, the images would probably be side beside.

If you have both of the images in a container that is more than 250 pixels wide, you might add the float property

tracey8546 · Joined: 27 Mar 2009 Posts: 6

Thanks for your help Smile

I fixed up the code by using what you mentioned with the floating.

Also, where do I and how do I add a caption that is centred below the image, into this code?

Corey Bryant · Posted: Wed Apr 01, 2009 12:50 pm

Do you have more code to share? Are you wanting to have this text "align" with each image?

_________________
Corey
Toll Free Phone Numbers | Processing Credit Cards | Microsoft Expression Web Blog

tracey8546 · Joined: 27 Mar 2009 Posts: 6

I don't have any other code. This is my first website that I am building on my own so not sure what other code I could have. Could you explain what type of code you mean? Sorry if this seems a silly question.

That's right, I want to know how to centre text beneath each of my images.

sticks464 · Joined: 31 Dec 2006 Posts: 2629

Try this

css

tracey8546 · Joined: 27 Mar 2009 Posts: 6

Hi, thanks for that Smile

I tried to apply it but it came up looking more like a list so I played around with some code from another Zen Cart website I have (which I didn't build fully myself) and applied it to this one.

The code that got me what I was after was:

<div class="categoryListBoxContents" style="width:33%;"><a href="http://www.halloween-and-more.com/index.php?main_page=page&id=21&chapter=10"><img src="http://www.halloween-and-more.com/images/haunted_houses.jpg" alt="Haunted Houses" title=" Haunted Houses " width="150" height="150" /><br />Haunted Houses</a></div>

I thought I might post it just in case anybody else needs the same thing I did, but it may be specific to my website or Zen Cart websites as it came from it's pre-built in coding.

Thanks so much for your help. I really appreciate it and I think this forum is really awesome! It's been a big help for me starting out on my own to build a site. Smile

sticks464 · Joined: 31 Dec 2006 Posts: 2629

Using your code how do you get three images in a horizontal row?

With my code

tracey8546 · Joined: 27 Mar 2009 Posts: 6

Not too sure how I got them there, but it works. Smile

All I edited was my ezpages, not css, because I wasn't sure on how this works and wanted to keep it simple for the moment. If you can explain how to edit the css that might help.

What is divititus? Is this bad? Should I not do it this way?

sticks464 · Joined: 31 Dec 2006 Posts: 2629

Divititus is using too many div containers for content when they are not needed. The purpose of css is to present the markup (html) the way the designer wants it to appear. From looking at your code closer I see your using php, so it must be a Wordpress or other blog type template or software your using and the setup on those do not require much input other than what your doing. So if your method works, fine. Just make sure you chech the page in all modern browsers and IE to make sure it renders the same.

tracey8546 · Joined: 27 Mar 2009 Posts: 6

Ok, I will do that. Thanks so much for your help!