[DanielB]

Hi, I'm trying to create a link with an image and a text. I want the text vertically aligned with the image (if you don't make it explicity, the text appears aligned to the bottom of the image). I get it only this way:

.myButton {
color: black;
font-family: Verdana;
font-size: 11px;
text-decoration: none;
white-space: nowrap;
}

.myButton #buttonLabel {
position: absolute;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 4px;
}

<a href="x" class=myButton>
<img src="image.gif"/>
<span id="buttonLabel">LabelText</span>
</a>

But, as the inner span has position absolute, it is out of the normal flow of elements, and when I want to have a number of these links in the same row, only the images take it place one after another, but the texts overlap one over another.

Is there any other way to do this, avoiding this problem?

Thanks

[jeremysnyder]

.myButton {
		position: relative;   /* position parent container so children are relative to me */
		width: 400px;         /* positioned elements should have width */
		height: 400px;        /* positioned elements should have height */	
		float: left;          /* so that multiple instances go next to each other */
		
		/* setting up font styles */
		color: black;
		font-family: Verdana;
		font-size: 11px;
		text-decoration: none;
		}

	.myButton img, .myButton p {
		position: absolute;  /* position is absolute, relative to the parent a.myButton tag */
		top: 0px;            /* top of element should be 0px from parent element top */
		border: none;        /* remove border (specifically on img), just looks better */
	}
	.myButton p {
		left: 310px;        /* assumes images are 300px wide */
		margin-top: 0px;    /* removes default top margin on p */
	}

<a href="#" class="myButton">
	<img src="image.jpg"/>
	<p>This is a long explaination of the image on the left.</p>
	</a>
	<a href="#" class="myButton">
	<img src="image.jpg"/>
	<p>This is a long explaination of the image on the left.</p>
	</a>

I commented the code, so it should be obvious what I am doing. However, if you have any questions just let me know.

Jeremy A. Snyder
snydersoft.com | Sharing Web Development Information