Aligning text with image problem

carbilldyer

05-05-2010, 11:30 AM

I am having a problem trying to display thumbnails with descriptions to the righthand side. I want both image and description to be a link and I want a bit of space between the image and text.

This is my relevant code within box:-
this part ok working ok
<div class="rboxscr"><br/>
<h1 align="center">Energy Saving Products</h1><br/>
<p class="linkbarsml">
<a href="energyproducts.html"><span class="links"> Products </span></a><img src="i/redline-sep.bmp" width="2" height="15">
<a href="energytips.html"><span class="links"> Tips </span></a><img src="i/redline-sep.bmp" width="2" height="15">
<a href="energyfaqs.html"><span class="links"> FAQs </a></span>
</p><br/>
This is the problem bit
<a href="e2.html"><img src="i/tb/energy/e2tb.jpg" alt="E2 wireless electricity monitor" title="E2 wireless electricity monitor" align="absmiddle" width="100" height="100" hspace="10" border="0"/><span class="inverse-text">E2 Wireless Electricity Monitor with USB connection</span></a><br clear="all"/><br/>
Same code for next thumbnail, etc.
relevant css:-
.rboxscr
{
background-image: url(i/bg/box2ab.jpg);
padding-left: 20px;
padding-right: 20px;
margin: 0;
border-width: 0px;
border-style: solid;
border-color: yellow;
left: 65%;
width: 270px;
position:absolute;
display:block;
top:170px;
bottom:0;
height:auto;
overflow-x: hidden;
overflow-y: scroll;
}
.inverse-text
{
font-size: 13px;
font-family: EurostileLTStd;
font-weight: normal;
text-decoration:none;
color:#ffe4af;
}

What is happening is that the image appears correctly. The text aligns ok in the middle until it needs to wrap because of box size limit. It doesn't go to next line, it jumps down under the image aligned with the lefthand side of image. Also the hspace is having no effect.

If I use "align="left" all text is correctly wrapped to the right of the image but is at the top, but if I try align="top, middle or bottom" it doesn't work. They all position correctly (i.e. top middle or bottom) but only first line, the rest drops below the image in every case. I have tried moving the span to just around text and also around text and image. I have tried not including the text as link. All to no avail

I have tried all combinations of <br clear> and no br clear.

Also the hspace is having no effect in any combination with any of the above.

Any help appreciated

tpeck

05-05-2010, 01:08 PM

Can't you put the thumbnail and links inside a table and relevant cells?

<table border="0" width="100%" cellpadding="0" style="border-collapse: collapse" id="table1">
<tr>
<td><a href="e2.html"><img src="i/tb/energy/e2tb.jpg" alt="E2 wireless electricity monitor" title="E2 wireless electricity monitor" align="absmiddle" width="100" height="100" hspace="10" border="0"/></a></td>
<td> </td>
<td><a href="e2.html"><span class="inverse-text">E2 Wireless Electricity Monitor with USB connection</span></a></td>
</tr>
</table>

carbilldyer

05-05-2010, 02:16 PM

Hi yes I can do that - in fact I had it like that, but having read from somebody else that purists now frown upon tables, I removed it. Having learned how to do it without tables, I find it galling that I can't get it to work. As a last resort I will re-implement the table, but it doesn't answer my question about why my code is not working as it should.

Excavator

05-06-2010, 02:41 AM

Hello carbilldyer,
Good for you for avoiding tables! :thumbsup:
Tables have there uses but page layout is NOT one of them. See the link in my sig about tables if you're interested.

Here's a quick sample of doing it with divs - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
background: #FC6;
}
#container {
width: 760px;
margin: 30px auto;
padding: 20px;
background: #999;
overflow: auto;
font-size: 0.8em;
}
.thumb {
width: 430px;
margin: 10px 0;
padding: 10px;
background: #666666;
overflow: auto;
}
.thumb img {border: 0;}
.one {
float: left;
margin: 0 10px 0 0;
}
.two {
float: right;
margin: 0 0 0 10px;
}
</style>
</head>
<body>
<div id="container">
<div class="thumb">
<a href="#">
<img src="http://nopeople.com/CSS/image%20captions/w9c76982010ram.jpg" width="200" height="136" class="one" />
Some text to go alongside the image
</a>
</div>
<div class="thumb">
<a href="#">
<img src="http://nopeople.com/CSS/image%20captions/w9c76982010ram.jpg" width="200" height="136" class="two" />
Some text to go alongside the image
</a>
</div>
</div>
</body>
</html>

carbilldyer

05-06-2010, 10:31 AM

I've had a look at your code and am happy with most of it. The one last bit I need to know is how to align the text to the middle of the image. If you wouldn't mind adding this to your example, I'd be grateful.
Thanks

Excavator

05-06-2010, 02:47 PM

carbilldyer

05-09-2010, 05:08 PM

Thanks for the help Excavator