Log in

View Full Version : 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:


<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:


<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:


<!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:


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:


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:


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

For more information on CSS background see:

http://www.blooberry.com/indexdot/css/properties/colorbg/bg.htm

(my favorite CSS reference)
bernie1227
07-30-2012, 03:45 AM
background-position:center;

Will center it,
As an example,


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/
bernie1227
07-30-2012, 04:06 AM
Try:


background-size: 100%;
Comex
07-30-2012, 04:22 AM
that made the whole thing wider again...
bernie1227
07-30-2012, 05:36 AM
How about:


background-size: auto 100%;
williamsun
08-04-2012, 02:16 AM
Are you wanting to center the background horizontally and vertically?

Try this:
background-position: 50% 50%;

If you are just wanting to stretch it a certain way, or enlarge the canvas to add more graphics around the original image, maybe a graphics program would be better.
bernie1227
08-04-2012, 02:23 AM
the problem is however, is that his graphics program won't allow him to stretch it anymore
williamsun
08-04-2012, 03:52 AM
Well, ok. I can scale just about to any size. Of course the bigger it gets, the grainier it gets. Same as if stretching with css.

Comex, upload it to Imageshack or somewhere and post a link and tell me what size you want.