To obtain the look of an image on the
left side of our page with
the text being to the left of it but not over it, I use a set of nested
tables. Nested tables are nothing more than a table inside of a table.
Internet Explorer doesn't display web pages the same as other web
compliant browsers such as Firefox or Opera sometimes.
So
to make sure the page will show up right in the browser that a visitor
is using I am using nested tables with the alignment to the right. that
will give us the proper spacing so our image on the left isn't covered
up by text.
I am going to use Nvu to accomplish this.
The first thing we need to do is open Nvu.
The
first thing I want to do in Nvu is put my background image into the
page. This way I can see exactly where the tables will be in
relationship to my background image that has a design along the left
side.
The image I am selecting for this is an image I got off of a free image
download site.
I already have the image uploaded to my image host so all I need is the
complete URL for the image.
The image I want is located at; http://www.4u2go2.com/ebay/background/floral01boquet.jpg
So now I want to make that my background image
At the top of the tool bar, directly under the blue bar, 5 over from
the left, is Format.
We select Format
then next to the bottom of the pop up menu is Page Colors and Background
select that and we get a new pop up menu with Page Colors and Background at
the top.
Go down towards the bottom and we see a white box with the name above
it Background Image.
Now we want to paste the entire url of your Background Image into the
box.. Select OK
and you now have a background image in your page.
This give us the following code;
<body
style="background-image:
url(http://www.4u2go2.com/ebay/background/floral01boquet.jpg);">
You
are free to download the image onto your computer then upload it to
your own image host. Please do not link to the image on my web host, or
anyone else's. That is called bandwidth stealing.
Next we go to the tool bar along the top directly under the blue bar.
Go to Table
then Insert
then Table.
We now have a Insert
Table Menu with 3 tabs. For this we want to
select the center tab, Precisely,
then we want to set our table parameters. In the first box, Rows, I want 1 row
so we set that value to 1.
On the second row, Columns
I set that value to 1
Now for the Width
I am setting the width for his table to 100 and the box to
the right to % of window
Now
for the border width. I personally prefer frames with out borders but
it is harder to work in the frames if you can not see the border so I
am setting the Border to 2.
Now I click on Advanced
Edit, this brings up another menu Advanced Property Editor
also with 3 tabs. We only need to concern our selves with the
HTML
Attributes.
Almost to the bottom of the Advanced
Property Editor is two boxes. the left is the
actual attribute and the right one is the value of the attribute.
Select the little down arrow on the Attribute
and then we want to select Align
and for the Value
we want to select right.
Now I want to increase the padding, the distance that any thing is from
the inside edges of our table to 50.
So select cellpadding
in the attributes that are showing and change the 2 into a 50
Next is the cellspacing
Change CellSpacing to 50
Click Ok
for the Advanced
Property Editor
Click OK
for the Insert Table
menu
This gives us the following code;
<table
style="margin-left: auto; margin-right: 0px; text-align:
left; width: 100%;"
border="2" cellpadding="50" cellspacing="50">
<tbody>
<tr>
<td
align="undefined" valign="undefined"></td>
</tr>
</tbody>
</table>
Now I need the table to that the actual description will go into nested
inside the table I just made.
Place your mouse cursour, inside of the table we just made and once
again we want to select Table
then Insert,
Table.
This once again brings up the Insert
Table pop up menu.
Select Precisely,
center tab, again.
Then we want to set the Rows
to 1
Columns
to 1
Width
to 80 % of the cell ( that is what worked out with this
particular
image. You may need to change the width to match your background image)
Set Border
to 2
Now we go to Advanced
Edit...
choose the Attribute
button at the bottom again and
select align
and for its value we want to select right once more.
Now click on cellpadding
up in the attributes and we are going to change the cell padding to 40
Next click on cellspacing and set that value to 40
Click OK
Now we are back to the Insert
Table menu
This time we want to select the Cell
tab
Now we have
Horiz.alignment
we set to Left
Vert.
alignment we set to Top
Text wrapping
is set to Wrap
Here
we can also change the cellspacing (distance between cells) and the
cell padding (distance from the insed edge of the cell) if we need to
but they should now show Cellspacing 2 and Cellpadding 40
Click OK
Now the code for the tables is:
<table
style="margin-left: auto; margin-right: 0px; text-align: left; width: 100%;"
border="2" cellpadding="50" cellspacing="50">
<tbody>
<tr>
<td align="undefined" valign="undefined">
<table
style="margin-left: auto; margin-right: 0px; text-align: left; width: 80%;"
border="2" cellpadding="40" cellspacing="40">
<tbody>
<tr>
<td align="left" valign="top"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Now
would be a good time to save your work. I can't say it enough save your
work often. This will save you a lot of extra work for nothing if
something were to happen as you could easily loose everything if the
computer were to lock up or cut off.
Now we have a saved page with a set of nested tables and a nice
background image to the left.
We
can start typing your description into the inside table now. That is
why I put borders up so we can see what we are doing and where the
tables are located.
Once you have your description you can insert your image or images into
the description area also.
Now if you are like me and want the page to appear seamless and not
show any borders there are two ways to accomplish this;
If you are working in Nvu the tables will show tiny little white boxes
at certain points along the table border.
Put your mouse over one of the little white boxes
It
should turn into an arrow pointing in both directions. Once it does
that you can right click with your mouse and a new pop up menu appears.
Select Table
Cell Properties. Now you get a new pop up menu called; Table Properties.
There are 2 tabs for this menu. Select the one to the left named Table.
Delete the 2 for border and change it into a 0
Click Apply
Click OK
Do this again for the second table
You can also remove the border by going to the tool bar at the top
again.
select View,
(third one from the left just under the blue bar) and then select HTML
This lets you view the actual HTML source code for the page.
Look for the border="2"
and change it into border="0"
do this again for the second table and now you have this code:
including the tag for the background image;
<body
style="background-image: url(http://www.4u2go2.com/ebay/background/floral01boquet.jpg);">
<table
style="margin-left: auto; margin-right: 0px; text-align: left; width: 100%;"
border="2" cellpadding="50" cellspacing="50">
<tbody>
<tr>
<td align="undefined" valign="undefined">
<table
style="width: 80%; text-align: left; margin-left: auto; margin-right: 0px;"
border="2" cellpadding="40" cellspacing="40">
<tbody>
<tr>
<td style="vertical-align: top; text-align: left;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br>
</body>
Once again Save Your Work
Coleman
|
|