html Table help.. I can't figure this out...

**Comex** · 07-28-2012, 07:34 PM

Hello,

Going nuts over html issue.I am trying to get three images posted one below the other with text next to it.

I am using a html table and just can't seem to get the text right, I copied from a friends site but not working on mine?

I'm lost, can anyone figure this out?

I am sure some of the coading I dont even need, just can't figure it out.

The current code is:

Code:

 <td>  <div class="pane-content">
    <div class="view view-boating-tests view-id-boating_tests view-display-id-block_1 view-dom-id-2">
    
  
  
      <div class="view-content">
        <div class="views-row views-row-1 views-row-odd views-row-first">
    <div class="left">
	<div class="views-field-common-teaser-image"><a href="/boats/sport/five-fast-center-consoles" class="imagecache imagecache-thumb_100x65 imagecache-linked imagecache-thumb_100x65_linked"><img src="http://www.boatingmag.com/sites/all/files/imagecache/thumb_100x65/_images/201206/5fastcenterconsoles.jpg" alt="Five Fast Center Consoles" title=""  class="imagecache imagecache-thumb_100x65" width="100" height="65" /></a></div>
</div>

<div class="right">
	<div class="views-field-common-title"><a href="/boats/sport/five-fast-center-consoles">Five Fast Center Consoles</a></div>
	<div class="views-field-common-dek">Five of the fastest performance center consoles on the water.</div>	
</div>

<div class="clear"></div>
  </div>
  <div class="views-row views-row-2 views-row-even">
    <div class="left">
	<div class="views-field-common-teaser-image"><a href="/boats/fishing%20boats/contender-39-ls" class="imagecache imagecache-thumb_100x65 imagecache-linked imagecache-thumb_100x65_linked"><img src="http://www.boatingmag.com/sites/all/files/imagecache/thumb_100x65/_images/201206/contender39lstn.jpg" alt="Boat Reviews: Contender 39 LS" title=""  class="imagecache imagecache-thumb_100x65" width="100" height="65" /></a></div>
</div>

<div class="right">
	<div class="views-field-common-title"><a href="/boats/fishing%20boats/contender-39-ls">Contender 39 LS</a></div>
	<div class="views-field-common-dek">The Contender 39 LS is a serious offshore heavyweight.</div>	
</div>

<div class="clear"></div>
  </div>
  <div class="views-row views-row-3 views-row-odd">
    <div class="left">
	<div class="views-field-common-teaser-image"><a href="/boats/fishing%20boats/everglades-230-dc" class="imagecache imagecache-thumb_100x65 imagecache-linked imagecache-thumb_100x65_linked"><img src="http://www.boatingmag.com/sites/all/files/imagecache/thumb_100x65/_images/201206/everglades230dctn.jpg" alt="Boat Reviews: Everglades 230 DC" title=""  class="imagecache imagecache-thumb_100x65" width="100" height="65" /></a></div>
</div>



 </td>
 </tr>
   </td>

Thank you in advance for any help with this issue...

**jscheuer1** · 07-28-2012, 08:09 PM

In about the simplest terms, if I understand you're requirements correctly:

HTML Code:

<table>
<tr>
<td><img src="some1.jpg" alt="" title=""></td><td>Some description text for some1.jpg</td>
</tr>
<tr>
<td><img src="some2.jpg" alt="" title=""></td><td>Some description text for some2.jpg</td>
</tr>
<tr>
<td><img src="some3.jpg" alt="" title=""></td><td>Some description text for some3.jpg</td>
</tr>
</table>

**Comex** · 07-28-2012, 08:39 PM

So, was it simply that I was up staring at this too long......

Wow,,

Thanks John !!!!!!

Any suggestion if I wanted to add color behind the image and text, like a block?

Thanks John, Really appreciate it..

**jscheuer1** · 07-29-2012, 02:22 AM

You can add elements within the cells (td tags) and/or add classes and/or ids to them in order to further style and/or format the presentation. These can be done in the normal ways.

For instance. to have a background color for the images, make the cells with the images larger than the images by giving them padding, and add your background color. To color the text, do something similar, example:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.imgcell {
	padding: 5px;
	margin: 0;
	background-color: #fcb;
}
.imgcell img {
	display: block;
}
.txtcell {
	font: bold 90% sans-serif;
	color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<td class="imgcell"><img src="some1.jpg" alt="" title=""></td><td class="txtcell">Some description text for some1.jpg</td>
</tr>
<tr>
<td class="imgcell"><img src="some2.jpg" alt="" title=""></td><td class="txtcell">Some description text for some2.jpg</td>
</tr>
<tr>
<td class="imgcell"><img src="some3.jpg" alt="" title=""></td><td class="txtcell">Some description text for some3.jpg</td>
</tr>
</table>
</body>
</html>

**Comex** · 07-30-2012, 02:11 AM

worked , Thank you..

Do you happen to know CSS ???

Need some help with a template background.

I assume css code will help me.

The image I have seems wide enough, but not long enough so it repost it'sself again further down the template.

I want to fix this so it is only one image posted so I can add further color behind it to help with middle content.

Could you tell me what needs to be added / corrected to the following?

body
{
font-size:12px;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
color:#333;
margin:0px;
padding:20px;
background-image:url('http://portnewengland.com/b1a.jpg');

}

Thankyou in advance

**bernie1227** · 07-30-2012, 03:23 AM

This is pretty easy, the background is repeating, put:

Code:

background-repeat: no-repeat;

This should stop it from repeating.

**Comex** · 07-30-2012, 03:30 AM

Yes it dose stop it, But I was wondering if some sort of code will center it and also make the image longer in length as well, since paint program will allow allow me a certain length.

**jscheuer1** · 07-30-2012, 03:41 AM

From what you're saying, you want no-repeat, some color, and some kind of positioning.

Try:

Code:

body
 {
 font-size:12px;
 text-align:center;
 font-family:Arial, Helvetica, sans-serif;
 color:#333;
 margin:0px;
 padding:20px;
 background-image:url('http://portnewengland.com/b1a.jpg');
 background-repeat: no-repeat;
 background-color: #e9dabd;
 background-position: center;
 }

BTW, the highlighted and the image can be combined into one declaration, like so:

Code:

background: #e9dabd url('http://portnewengland.com/b1a.jpg' center no-repeat;

For more information on CSS background see:

http://www.blooberry.com/indexdot/cs...colorbg/bg.htm

(my favorite CSS reference)

**bernie1227** · 07-30-2012, 03:45 AM

Code:

background-position:center;

Will center it,
As an example,

Code:

background-size:90px 60px;

Can change the size. The first number in background-size is the width.

**Comex** · 07-30-2012, 03:53 AM

close,,, seems Not at top of page, and My image is not long enough for whole page. can this be streached via css?

The page is: http://portnewengland.com/

Thread: html Table help.. I can't figure this out...

Thread Tools

Search Thread

html Table help.. I can't figure this out...

Bookmarks

Bookmarks

Posting Permissions