PDA

View Full Version : Table alighnment help


steve42000
05-12-2009, 07:17 PM
hi there i have searched Google for an answer to this problem and i cant seem to find anything specific about if i no that it is simple to fix but i don't no how i have a template for a webpage that has a table layout when i enter data in to the cells or i enter a new row to opposite column goes out of sync/line

http://www.dreamweaverclub.com/forum/attachment.php?attachmentid=601&stc=1&d=1242152110
This pic shows what ithe issue is if i enter data on the left the right hand cells go out of sync and the pic is out of line

thanks for your help

domedia
05-12-2009, 08:00 PM
You made the layout with tables. Wrong approach. Use web standards, HTML/CSS.

steve42000
05-12-2009, 08:13 PM
i didn't design it its not my thing i purchased it from TemplateMonster when i click in a cell the Html/Css property are at the bottom of the page and i have a CSS sheet I'm quite new to web design so I'm not quite sure so must not be tables ??

this is what i have done

1. purchased template
2. edited PSD
3. saved for web
4. opened in Dreamweaver CS4
5. started entering data and images started going out of line when i push enter or enter a couple of lines of text.

DWcourse
05-12-2009, 08:37 PM
If you purchased the template, then they should offer support for making it work. Have you contact them?

steve42000
05-12-2009, 09:16 PM
not yet but i will tomorrow if it was something that was quite easy to fix and i think it is i didn't want to have to go all threw that process but thanks anyway

steve42000
05-13-2009, 01:59 AM
I have spent hours trying to find the answer for this to no avail if anyone has any ideas please let me no

i have 2 columns and 5 rows i need certain cells to get bigger and not change the whole rows width across both columns as the data in the second column looks out of place
look at picture in first post

DWcourse
05-13-2009, 03:25 AM
a row of cells will always be the height of the tallest cell in the row.

edbr
05-13-2009, 05:05 AM
let us know if you get support from them. its will be a sad affair if they dont offer you help when you (i assume) paid for the template.
not to be difficult but it is not the norm to use tables as a layout , it is an old format which was less than satisfactory in the main.
if you check out the free templates for download on this site you will see none of them are table based

steve42000
05-13-2009, 07:31 PM
http://www.dreamweaverclub.com/forum/attachment.php?attachmentid=602&stc=1&d=1242239163

This is what im working with and that is what i baought from Template Box 5 days ago http://www.templatesbox.com/premium-templates/website-templates/template237.htm

steve42000
05-14-2009, 09:02 PM
This is the code i have if that helps at all

is there anyway of removing the table and using Div tags???

thanks for this to everyone who has commented

<HTML>
<HEAD>
<TITLE>Mobility</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
<!-- ImageReady Preload Script (index.psd) -->
<SCRIPT TYPE="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
home_over = newImage("images/home-over.gif");
clients_over = newImage("images/clients-over.gif");
solutions_over = newImage("images/solutions-over.gif");
products_over = newImage("images/products-over.gif");
testimonials_over = newImage("images/testimonials-over.gif");
contacts_over = newImage("images/contacts-over.gif");
preloadFlag = true;
}
}

// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<center>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">
<!-- ImageReady Slices (index.psd) -->
<TABLE WIDTH=779 BORDER=0 CELLPADDING=0 CELLSPACING=0 class="frame">
<TR>
<TD><table width=779 border=0 cellpadding=0 cellspacing=0 class="frame">
<tr>
<td colspan=3 rowspan=1 align="left" valign="top" nowrap><table width=779 border=0 cellpadding=0 cellspacing=0 class="frame">
<tr>
<td colspan=3><a href="index.html"
onMouseOver="window.status='home'; changeImages('home', 'images/home-over.gif'); return true;"
onMouseOut="window.status=''; changeImages('home', 'images/home.gif'); return true;"> <img name="home" src="images/home.gif" width=78 height=44 border=0 alt="home"></a></td>
<td colspan=2><a href="clients.html"
onMouseOver="window.status='clients'; changeImages('clients', 'images/clients-over.gif'); return true;"
onMouseOut="window.status=''; changeImages('clients', 'images/clients.gif'); return true;"> <img name="clients" src="images/clients.gif" width=62 height=44 border=0 alt="clients"></a></td>
<td width="76"><a href="solutions.html"
onMouseOver="window.status='solutions'; changeImages('solutions', 'images/solutions-over.gif'); return true;"
onMouseOut="window.status=''; changeImages('solutions', 'images/solutions.gif'); return true;"> <img name="solutions" src="images/solutions.gif" width=76 height=44 border=0 alt="solutions"></a></td>
<td colspan=2><a href="products.html"
onMouseOver="window.status='products'; changeImages('products', 'images/products-over.gif'); return true;"
onMouseOut="window.status=''; changeImages('products', 'images/products.gif'); return true;"> <img name="products" src="images/products.gif" width=73 height=44 border=0 alt="products"></a></td>
<td colspan=6><a href="testimonials.html"
onMouseOver="window.status='testimonials'; changeImages('testimonials', 'images/testimonials-over.gif'); return true;"
onMouseOut="window.status=''; changeImages('testimonials', 'images/testimonials.gif'); return true;"> <img name="testimonials" src="images/testimonials.gif" width=84 height=44 border=0 alt="testimonials"></a></td>
<td colspan=3><a href="contacts.html"
onMouseOver="window.status='contacts'; changeImages('contacts', 'images/contacts-over.gif'); return true;"
onMouseOut="window.status=''; changeImages('contacts', 'images/contacts.gif'); return true;"> <img name="contacts" src="images/contacts.gif" width=97 height=44 border=0 alt="contacts"></a></td>
<td colspan=8 rowspan=2><img src="images/m2.gif" width=305 height=207 alt=""></td>
<td width="10"><img src="images/spacer.gif" width=1 height=44 alt=""></td>
</tr>
<tr>
<td colspan=17><img src="images/m1.gif" width=470 height=163 alt=""></td>
<td><img src="images/spacer.gif" width=1 height=163 alt=""></td>
</tr>
<tr>
<td height="104" colspan=25><img name="" src="images/Banner.png" width="769" height="92" alt=""></td>
<td><img src="images/spacer.gif" width=1 height=12 alt=""></td>
</tr>
<tr>
<td width="27" rowspan=13></td>
<td height="63" colspan=6><p><img src="images/who1.gif" width=241 height=45 alt=""></p></td>
<td colspan=2 rowspan=13></td>
<td width="1" rowspan=13><img src="images/l1.gif" width=1 height=403 alt=""></td>
<td width="10" rowspan=14></td>
<td colspan=5 rowspan=3 align="center" valign="top" nowrap class="frame"><img src="images/pm1.gif" alt="" width=164 height=122 align="baseline"></td>
<td colspan=8 valign="top" nowrap><p><img src="images/pm2.gif" width=300 height=62 alt=""></p></td>
<td width="10" rowspan=14></td>
<td><img src="images/spacer.gif" width=1 height=45 alt=""></td>
</tr>
<tr>
<td height=47 colspan=6 align="left" valign="top" class="text1" style="padding-left:4px">&nbsp;</td>
<td colspan=2 align="left" valign="top" nowrap><img src="images/pm3.gif" alt="" width=37 height=60 align="top"></td>
<td height=60 colspan=6 valign="top" background="images/b_pm.gif" ></td>
<td>&nbsp;</td>
</tr>
<tr>
<td height=47 colspan=6 align="left" valign="top" class="text1" style="padding-left:4px"><p>Home I.T. Repair staff fix and service Desktop and Laptop pc's for home <em>users<br>
</em><br>
<em>we aim to bring about a level of trust and skill rarely seen in the domestic market </em></p></td>
<td colspan=3 rowspan=1 align="left" valign="top" nowrap><img src="images/spacer.gif" width=1 height=30 alt=""></td>
</tr>
<tr>
<td width="43" rowspan=2 align="left" valign="top"></td>
<td height=88 colspan=5 rowspan=2 align="left" valign="top"><p><br>
Open Hours</p>
<p>Mon - Fri 8:30 - 7:30<br>
Sat - Sun 9:00
- 4:00</p></td>
<td colspan=13></td>
<td><img src="images/spacer.gif" width=1 height=12 alt=""></td>
</tr>
<tr>
<td colspan=12 rowspan=2><br>
<img src="images/xp1.gif" width=288 height=63 alt=""></td>
<td width="176" rowspan=3><img src="images/xp3.gif" width=176 height=122 alt=""></td>
<td><img src="images/spacer.gif" width=1 height=46 alt=""></td>
</tr>
<tr>
<td colspan=6><img src="images/do1.gif" width=241 height=37 alt=""></td>
<td><img src="images/spacer.gif" width=1 height=17 alt=""></td>
</tr>
<tr>
<td height=45 colspan=6 rowspan=2 align="left" valign="top" class="text1" style="padding-left:4px"><p>Desktop And Laptop repair in yout local area</p></td>
<td colspan=4><img src="images/xp2.gif" width=80 height=59 alt=""></td>
<td height=59 colspan=8 align="left" valign="top" background="images/b_xp.gif" ><span class="text2">Consetetur sadipscing elitr</span>, sed diam <br>
nonumy eirmod tempor invidunt ut<br>
Lorem ipsum dolor sit amet, conseter</td>
<td><img src="images/spacer.gif" width=1 height=39 alt=""></td>
</tr>
<tr>
<td colspan=9 rowspan=3><img src="images/s1.gif" width=221 height=44 alt=""></td>
<td colspan=4 rowspan=3><img src="images/t1.gif" width=243 height=44 alt=""></td>
<td><img src="images/spacer.gif" width=1 height=6 alt=""></td>
</tr>
<tr>
<td align="left" valign="top"><img src="images/do2.gif" width=43 height=15 alt=""></td>
<td colspan=5 rowspan=3 align="left" valign="top"><a href="#" class="a">L</a><br>
<br>
<br>
<br></td>
<td><img src="images/spacer.gif" width=1 height=15 alt=""></td>
</tr>
<tr>
<td rowspan=2 align="left" valign="top"></td>
<td><img src="images/spacer.gif" width=1 height=23 alt=""></td>
</tr>
<tr>
<td width="27" rowspan=4></td>
<td height=128 colspan=8 rowspan=4 align="left" valign="top">&nbsp;</td>
<td colspan=2 rowspan=4 align="left" valign="top"></td>
<td height=128 colspan=2 rowspan=4 align="left" valign="top" style="padding-right:10px">&nbsp;</td>
<td><img src="images/spacer.gif" width=1 height=38 alt=""></td>
</tr>
<tr>
<td align="left" valign="top"><img src="images/do3.gif" width=43 height=15 alt=""></td>
<td height=65 colspan=5 rowspan=2 align="left" valign="top"><p><a href="#" class="b">L</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><br>
<br>
<br>
</p></td>
<td><img src="images/spacer.gif" width=1 height=15 alt=""></td>
</tr>
<tr>
<td align="left" valign="top"></td>
<td><img src="images/spacer.gif" width=1 height=50 alt=""></td>
</tr>
<tr>
<td colspan=9 rowspan=3><img src="images/sol1.gif" width="290" height="40" alt=""></td>
<td rowspan=5><img src="images/l2.gif" width=1 height=188 alt=""></td>
<td><img src="images/spacer.gif" width=1 height=25 alt=""></td>
</tr>
<tr>
<td colspan=15><img src="images/l3.gif" width=484 height=3 alt=""></td>
<td><img src="images/spacer.gif" width=1 height=3 alt=""></td>
</tr>
<tr>
<td colspan=11 rowspan=2><a href="#"
onMouseOver="window.status='enter'; return true;"
onMouseOut="window.status=''; return true;"> <img src="images/enter.gif" width=248 height=85 border=0 alt="enter"></a></td>
<td colspan=4 rowspan=2><a href="#"
onMouseOver="window.status='enter'; return true;"
onMouseOut="window.status=''; return true;"> <img src="images/enter-31.gif" width=236 height=85 border=0 alt="enter"></a></td>
<td><img src="images/spacer.gif" width=1 height=12 alt=""></td>
</tr>
<tr>
<td colspan=4><img src="images/sol2.gif" width="133" height="73" alt=""></td>
<td height=73 colspan=5 align="left" valign="top" background="images/b_sol.gif" class="text3" style="line-height:16px; padding-right:15px">&nbsp;</td>
<td><img src="images/spacer.gif" width=1 height=73 alt=""></td>
</tr>
<tr>
<td colspan=9><img src="images/call.gif" width="290" height="75" alt=""></td>
<td colspan=3><img src="images/down.gif" width=73 height=75 alt=""></td>
<td height=75 colspan=12 align="left" valign="middle" background="images/b_links.gif" class="text3" style="line-height:14px">&nbsp;</td>
<td><img src="images/spacer.gif" width=1 height=75 alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width=27 height=1 alt=""></td>
<td><img src="images/spacer.gif" width=43 height=1 alt=""></td>
<td width="8"><img src="images/spacer.gif" width=8 height=1 alt=""></td>
<td width="55"><img src="images/spacer.gif" width=55 height=1 alt=""></td>
<td width="7"><img src="images/spacer.gif" width=7 height=1 alt=""></td>
<td><img src="images/spacer.gif" width=76 height=1 alt=""></td>
<td width="52"><img src="images/spacer.gif" width=52 height=1 alt=""></td>
<td width="21"><img src="images/spacer.gif" width=21 height=1 alt=""></td>
<td width="1"><img src="images/spacer.gif" width=1 height=1 alt=""></td>
<td><img src="images/spacer.gif" width=1 height=1 alt=""></td>
<td><img src="images/spacer.gif" width=10 height=1 alt=""></td>
<td><img src="images/spacer.gif" width=27 height=1 alt=""></td>
<td width="36"><img src="images/spacer.gif" width=36 height=1 alt=""></td>
<td width="9"><img src="images/spacer.gif" width=9 height=1 alt=""></td>
<td width="8"><img src="images/spacer.gif" width=8 height=1 alt=""></td>
<td width="84"><img src="images/spacer.gif" width=84 height=1 alt=""></td>
<td width="5"><img src="images/spacer.gif" width=5 height=1 alt=""></td>
<td width="33"><img src="images/spacer.gif" width=33 height=1 alt=""></td>
<td width="19"><img src="images/spacer.gif" width=19 height=1 alt=""></td>
<td width="3">&nbsp;</td>
<td width="17"><img src="images/spacer.gif" width=17 height=1 alt=""></td>
<td width="20"><img src="images/spacer.gif" width=20 height=1 alt=""></td>
<td width="30"><img src="images/spacer.gif" width=30 height=1 alt=""></td>
<td><img src="images/spacer.gif" width=176 height=1 alt=""></td>
<td><img src="images/spacer.gif" width=10 height=1 alt=""></td>
<td></td>
</tr>
</table></td>
</tr>
</table></TD>
</TR>
</TABLE><a href="css/styles.css">styles</a>
<!-- End ImageReady Slices -->
</BODY>
</center>
</HTML>

dzwestwindsor
05-14-2009, 09:07 PM
dude i hate the guys taht say the things like what i am about to say right now, but i have to say it. dont buy templates but make your own.

steve42000
05-14-2009, 09:25 PM
i totally agree but my design skills and creativity are nowhere near good enough to make something on par with a template but when a template is all but useless it does make you want to scream
Thanks anyhow.

domedia
05-15-2009, 06:55 PM
I'm a little stumped here, please don't take this the wrong way.
If you don't have the creative skills to make your own design and not the technical skills to edit a template in Dreamweaver, then why are you doing this?

steve42000
05-15-2009, 07:33 PM
Why am i doing what?

i have a webpage that i edited from a template that was in a CSS format but i was going to do a better one so i was a little stumped with this Table layout and how you enter data without the whole template going out of alignment

I repair PC's for a living i am not a graphics designer or am i a web designer I REPAIR PC'S

every forum i go on there are people on them that are regular contributors and because they were born with all the knowledge they have they seem to think its ok to mock everyone. i don't want a walk threw guide but what i would like from someone who CAN HELP and give some CONSTRUCTIVE criticism is where i am going wrong with the editing of my template and the reasons behind it and maybe a few links to help me learn how to work with issue i have .

i don't mean to be abrupt and i do appreciate the help everyone has given me

Thanks

domedia
05-15-2009, 11:11 PM
Just trying to get some background that's all.
Buying a template is of no use if you're not familiar with the basics of web dev.

It's important to have knowledge about HTML, CSS and related technologies. It might be that Adobe markets DW as a replacement for skills, but it's not.

You're experiencing a behavior that is default in all HTML tables. DWCourse touched up the fact that all cells in a row will have the same height. So you increase height in one cell, then every cell in that row is going to taller as well.

If that does not make 100% sense to you, there's only two constructive approaches you can make:
1. Have someone that knows web design do it for you or train you.
2. Learn HTML/CSS. There's a ton of resources for this available online. Adobe has some very good tutorials on their site you could start off with. Noone here or anywhere was born with this knowledge.

DWcourse
05-16-2009, 12:03 AM
A word of warning. All those spacer.gifs were put in place to force things to align right. When you start messing around with the table, it's going to blow up and be a nightmare. The folks here are very helpful but it's going to be impossible to answer all the questions that will come up using this template.

People shouldn't be selling templates that aren't based on current standards. I'd chalk it as an expensive lesson and start looking for a CSS-based template that does what you want. (I believe there are some free ones on this site).

BTW, you don't hang around a forum long enough to have almost 7000 posts (as domedia has) without providing a great service.

steve42000
05-17-2009, 12:09 PM
BTW, you don't hang around a forum long enough to have almost 7000 posts (as domedia has) without providing a great service.

I take your point as is stated before i didnt mean to be abrupt but i had been trying to adjust this template for hours and i think i may have had a bit of a brain melt down Sorry . i have sort of worked around it now i had the Psd file that was sent with the template and i used site grinder to give me CSS Div tags and now i can edit it normally (is this an Ok idea) ?