Forum Moderators: open
We have been running an old website for years now and recently decided to create a new one. I am about 90% finished. We run a travel agent so the main goal (and content) of the website is tour itineraries, so what I did was to get a designer to create a "template" of the page which I then take and basically just copy and paste the content of our itineraries into the template. I did this because I know html and a bit of coding but my design-skills are useless - I cannot even draw a smiley face :).
Anyway, here is my problem....
The way the page is laid out, it uses many tables eg. Lets take a tour of 13 days. My basic design will look as follows for this 13 day tour:
A table with 13x3 rows (see explanation below - header/description/accommodation)and 4 columns.
Header (day #) - row1 / col1
Description (the itinerary for the particular day #) row2 / col1
Accommodation (the overnight stop per day) row3 / col1
Column 2 - just a spacer
Column 3,row 1 = a small icon showing the area
Column 3, row 2 = a small icon showing more detail of the description
column 3, row 3 = a small icon showing facilities at the accommodation
column 4 - just a spacer
Hope this makes sense, but if not, here is some code as an example:
[code]
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="287">Day 1 </td>
<td width="13"> </td>
<td width="592"><img src="comment1.gif" width="592" height="18" /></td>
<td width="55"> </td>
</tr>
<tr>
<td>The itinerary for day 1 </td>
<td> </td>
<td><img src="comment2.gif" width="592" height="18" /></td>
<td> </td>
</tr>
<tr>
<td>Accommodation</td>
<td> </td>
<td><img src="comment3.gif" width="592" height="18" /></td>
<td> </td>
</tr>
</table>
[code]
Ok, so keep in mind that above code is just for one day.............. there can be 20+ days, so above code could grow quite significantly.
The reason why I use tables here is because the images in the columns (column 3) must align PERFECTLY with the text in column1 - that is a prerequisite and I cannot get away from that!
My question is (after "studying" div/css a bit today) - is above way of doing this very terrible or is it acceptable. Obviously I would like to keep the search engines happy!
Regarding stylesheets and jscript, I use it a lot and store my jscript in a seperate folder and access it where/when I need it....... I dont code that within the page.
Like I said, I had a look at div/css to replace above tables, but I can see it will be a nightmare. I tried doing it tonight and all went well, but I just cannot seem to get my icons aligned with my text - as explained above! Also, the site is practically finished, so a decision to REDO it all in a different way will be a major one!
I really hope this makes sense. Please, any comments will be greatly appreciated.
LL
That does look like tabular data to me -- so tables are the right choice. However you might have much more efficient markup if you use css padding instead of "spacer" columns. Non-breaking spaces are not tabular data.
Please can you explain how I can do the css spacing you are talking about!? Do you mean I just use css to specify the position of my table?
If you can, please give me an example. I have been using a lot of css (as much as I can) on the new website, but I am by no means proficient!
Thanks again,
LLMM
HTML
<tr>
<td>Day 1</td>
<td class="c"><img src="comment1.gif" width="592" height="18" /></td>
</tr>
<tr>
<td>The itinerary for day 1</td>
<td class="c"><img src="comment2.gif" width="592" height="18" /></td>
</tr>
<tr>
<td>Accommodation</td>
<td class="c"><img src="comment3.gif" width="592" height="18" /></td>
</tr>
CSS:
.c {width:592px;padding:0 55px 0 13px;}
I have this code using a table of 3 rows and 2 columns. In the second column I have a div specified at the exact position I want it. The div has a background image which is just a vertical line.
As you can see, the left column of the table can have different heights....... I want the background image in the div (right column of the table) to be continuous and not break-up as it does now.
In other words - how can I have the div in the right-hand column "keep track" of the height of the left-hand column height so that the line will stay continuous. Isn't there something like "repeat" that will accomplish this?
Am I on the right track with this code!?!?
Thanks again,
LL
<table width="100%" cellpadding="0" cellspacing="0"><tr>
<td width="62%" valign="top"><p><strong>Day 1 </strong></p> </td>
<td width="38%" valign="top" ><div align="centre" class="c"></div></td>
</tr>
<tr>
<td width="62%" valign="top"><p><strong>Itinerary</strong></p>
<p>Some text</p>
<p>which could go on for</p>
<p>many lines </p></td>
<td valign="top" ><div align="centre" class="c"></div></td>
</tr>
<tr>
<td width="62%" valign="top"><strong>Accommodation</strong></td>
<td valign="top" ><div align="centre" class="c"></div></td>
</tr>
</table>
.c {width:69px;padding:0 ;
background-image: url(images/verticalline.gif)
}
