Link from an image is incorrectly including the text next to it

Forum Moderators: open

Message Too Old, No Replies

Link from an image is incorrectly including the text next to it

correct HTML needed

Bubzeebub

6:31 pm on Oct 17, 2004 (gmt 0)

What is the best way or correct way to add regular text next to a graphic? I have an Add To Cart button and would like to put a price next to the button. However, it's showing the price as part of the Add To Cart link! Below is the code:

Does anyone know why the price is being included in the link? I'm a newbie at this so sorry if this is such a simple question.

Thanks!

Sanenet

6:36 pm on Oct 17, 2004 (gmt 0)

You'r missing the end </A> tag. Sytax should be:

<a href="http://www.mysite.com/Merchant2/merchant.mvc"><img src="images/addtocart.gif"></A> Text goes here.

BonRouge

6:40 pm on Oct 17, 2004 (gmt 0)

Try :

If you need padding, add it in your head:

Bubzeebub

11:47 pm on Oct 17, 2004 (gmt 0)

Thanks for your responses. The code modification suggest by BonRouge did the job to allow the text to be shown without being a link. However, I still have two issues.

1) I would like the text to be larger
2) I would like the text to show up on right side at a little distance from the image. It should look something like this:

(IMAGE) $39.99

Here is the text that I currently have:

Any ideas how I could fix this?

Saltminer

12:20 am on Oct 18, 2004 (gmt 0)

Add a class to your style sheet:

.price {
font-size: 1.2em; /* set your font size */
padding-left: 2em; /* add space on the left */
}

Then use it when you want to display the price text.

BonRouge

6:09 am on Oct 18, 2004 (gmt 0)

This will do it for you :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
.price {padding: 1em 10px; display:inline; font-size: 1.2em; font-weight: bold;}
</style>
</head>

This will do what you've asked for. However, the text will be inline with the base of the image.
To move the text up, you can add somehting like:

position:relative; top:-10px

to the .price part.

Another option you have (which a lot of people don't like to talk about) is a table.

Something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
table {width:200px}
td {vertical-align:middle; text-align: center; font-size: 1.2em; font-weight: bold;}
</style>
</head>

It's not quite as... small as the top one, but it will automatically vertically centre your text.

There are other ways, but these work (if it's just one picture - I'd go with the top one. If you have a few of these with different sized pictures, I'd probably use the table - although I might regret saying that...)

Jedi Vampire Coffee

8:26 am on Oct 18, 2004 (gmt 0)

I have a question...

Why can he not simply utilise the
<font size=# face="name"><p></p></font>
tag? if it's only 1 para he wishes to change, this is much easier since it only changes one...

Cook

8:41 am on Oct 18, 2004 (gmt 0)

Well he could, however the trend is to separate contents from looks, ie text from style, or again html from css. This is so beacuse site maintenance is made easier when sticking to such principles. The same stands true for dynamic sites by the way, where you try to keep the logic (php, or other scripting languages) separated from the contents (html).

Cheers,
Cook