PDA

View Full Version : Alignment Problems ..... for no apparent reason!


moondog
02-15-2006, 06:57 PM
Okay, I have laid out my page and even figured out how to "put" it to the web. However, there appears to be an alignment problem and for the life of me, I can't figure out why.
The page in question is www.gladwincogensoc.org The alignment problem is the in the lower left cell.
I am VERY familiar with FrontPage, new to Dreamweaver .... but I see no reason why this should be happening. Can anyone give me a hand here?

dog

Creative Insanity
02-15-2006, 08:38 PM
Dog you swore! Frontpage is a nasty naughty swear word LOL
DW runs rings around FP and back again.

Anyhoo let's look at your problem.

Remove these for a start: (at the bottom under your close table tag)
<div align="center"></div>
<div align="center"></div>


</p>
<p align="center"></p>


</p>


</p>


</p>


</p>


</p>

Now is that line a BG image? if it was on a td of it's own at the width of the line and made into a bg then you would get nice tiling and it would not go off like that.

moondog
02-15-2006, 11:07 PM
Okay CI, I took out the code .... as you told me to.

That line is a BG (background) image. (Remember that I have been using "bleep" [fp] and that is how I've done what I want to do to accomplish the effect)

Being new to Dreamweaver, I'm not sure what td stands for. So, if you have to treat me like a 5 year old to explain it, I totally understand.

Thanks for helping CI

dog

Creative Insanity
02-15-2006, 11:47 PM
Ok will check the left/right positioning on the bg and make sure the TD is not larger then the bg.

A td is:
<td width="100%" height="208" valign="top" colspan="3"> <p align="center">images/title.jpg</td>

moondog
02-16-2006, 12:15 AM
CI, This is the code for the table, and now I know what you mean by td

<td width="200" height="195" valign="top" background="images/center-left-middle.jpg">
<p align="center">

and after checking the image properties the width of the image is 200. So what next?

Creative Insanity
02-16-2006, 06:14 AM
what that little line is 200px? Ahh I see what you have done.
You have actually done that wrong.. you should of actually created a left and right SINGLE graphic, that way they will not shift with data content which is what I am guessing has happened.

moondog
02-16-2006, 11:51 AM
I'm not sure I understand how to do this .... if I make each image "left-side" and "right-side" I can't put them in the background. How do I make it so that the left and right side cells are "flexiblie" and continue to have those borders?

dog

Creative Insanity
02-16-2006, 05:49 PM
I will grab your bg and code something up and show what I mean.

moondog
02-21-2006, 05:42 PM
Hey CI,
Hope you haven't forgotten my problem here.

Thanks

Dog

Creative Insanity
02-21-2006, 06:06 PM
Opps yes I did actually.. has been a few hectic days with work loads. Will get to this.

moondog
02-21-2006, 06:18 PM
No worries CI,
I DO know how that goes.

dog

Creative Insanity
02-21-2006, 07:00 PM
Ok so I don't forget again I done this.

For a start I ditched the graphic border and used a css border for the simple reason it looks cleaner and they are easier to control.

It looks like this (http://www.webthings.org/vtm/look.html)

and this code is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="70%" border="0" align="center" cellpadding="0" cellspacing="6">
<tr>
<td colspan="2"><div align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="border">
<tr>
<td><div align="center">
<h1>This is the header </h1>
</div></td>
</tr>
</table>
</div></td>
</tr>
<tr>
<td height="4"></td>
</tr>
<tr>
<td width="218" height="18" valign="top"><div align="left">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="border">
<tr>
<td>Link</td>
</tr>
<tr>
<td><hr></td>
</tr>
<tr>
<td>Link</td>
</tr>
<tr>
<td><hr></td>
</tr>
<tr>
<td>Link</td>
</tr>
<tr>
<td><hr></td>
</tr>
<tr>
<td>Link</td>
</tr>
<tr>
<td><hr></td>
</tr>
<tr>
<td>Link</td>
</tr>
<tr>
<td><hr></td>
</tr>
<tr>
<td>Link</td>
</tr>
</table>
</div></td>
<td width="536" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="border">
<tr>
<td valign="top"><table width="96%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
And the css for the border is:
.border {
border: 2px solid #CCCCCC;
}