Wrapper & Tables

A

ATV

Help!!! I built an entire website off a simple table. I haven't needed a
frame until now. I put a wrapper in the header and the body and the/body.
My frame keeps throwing right. I'm using FrontPage 2003. Please help. I'm
out of ideas to fix it.
 
M

Murray

I'm trying to channel your code, but I'm failing. Can you put your head
closer to the monitor?
 
A

ATV

I'm sorry. I was trying to be so brief that I was not understandable.

I built a website with a table. The right column has been blank on every
page so that I can fill it with the oppropriate text.

I am at a page now, however, that I need to break that colum into two rows.
The top half needs a background fill with text and a picture. The bottom row
will remain blank for text. The top is a little too complicated for the
table to handle so I thought I'd make a frame. The frame looks perfect. I
put the following code in:
The head:

<!--
body { text-align:center; }
#wrapper { text-align:left; width 750px; margin:0 auto; position:relative; }
</head>

in the body I have
<body...>
<div id="wrapper">

at the end of the body I have
</div><!-- /wrapper -->
</body>

Even with the code -- which I've used a dozen times before, the frame I
created is throwing to the right of the screen. There must be a piece of the
code I'm missing.

I hope this is a better explanation of my problem.

Thanks
 
R

Ronx

The embedded style sheet appears to be missing some tags. It should
read:
<head>
<meta tags etc>
<style type="text/css"><!--
body { text-align:center; }
#wrapper { text-align:left; width: 750px; margin:0 auto;
position:relative; }
-->
</style>
</head>

Also note the colon after "width" in the #wrapper attribute list.
 
M

Murray

That's not a "frame". The use of that term is definitely confusing.

And using the wrapper as you have may be overkill for what you want to
accomplish - although it is a great way to center the page.

Are you using any absolute positioning? If not, then remove the
position:relative from your wrapper. Everything will still center, and you
will have removed an unnecessary style that could come back to bite you
later when you forget it's there. It's doing nothing for you.

Could I see this page? I am interested to see why this solves your
problem - the two seem unrelated to me.
 
A

ATV

Yes, your right, I'm sorry. I meant a layer. Understand your confusion.
(My frustration level is affecting my communication skills.) I tried your
suggestion and it still didn't work. I must have really screwed up
something. I put it back to the onriginal "brokenness." The url is:
www.harrisonvolleyball.net/PROFILES/allie.htm

I appreciate your time.

ATV
 
M

Murray

First thing to know is that your Word Art/VML is IE only (that means it will
not display properly for you in any other browser).

Second thing is to change this -

#wrapper { text-align:left; width: 750px; margin:0 auto; }

to this -

#wrapper { text-align:left; width: 750px; margin:0 auto;
position:relative; }

Finally, change this -

<body onload="...GIGANTIC SNIP OF PRELOADS AND GET RID OF THOSE SPACES IN
FILENAMES!...">
<body>
<div id="wrapper">
<div align="center">
<div align="center">

to this -

<body onload="...GIGANTIC SNIP OF PRELOADS AND GET RID OF THOSE SPACES IN
FILENAMES!...">
<div id="wrapper">

(you had several improperly terminated <div align="center" tags there)

Oh, one more thing - get this layer OUT OF THE TABLE - never put absolutely
positioned page elements into a table cell -

<div style="position: absolute; width: 546px; height: 242px; z-index: 1;
left: 497px; top: 367px" id="layer1">
<i>
<font color="#FFFFFF" face="Times New Roman" style="font-size:
2pt">&nbsp;<img border="0" src="../varsity_images/MCj02955030000[1]3.gif"
width="180" height="239" align="right"></font></i><p style="margin-top: 0;
margin-bottom: 0">
....snip...
<p style="margin-top: 0; margin-bottom: 0"><i>
<font face="Times New Roman" size="4" color="#FFFFFF">&nbsp;
Height:&nbsp; 5'8&quot;</font></i></p>
<p style="margin-top: 0; margin-bottom: 0"></div>

You would do that by cutting that code from the page, and pasting it back
immediately above the closing </div><!-- /wrapper --> tag.

I realize that this may be alot for someone unaccustomed to working with
HTML markup, so I have posted the modified page here - you can browse to it
(none of the images will work, but don't worry about that), copy the source,
and paste it into the page in your site.

http://www.murraytestsite.com/allie.htm

BEWARE - I fear that the VML frame around your center text area are not
going to respond properly to this treatment. It would be wise to remove it,
in my opinion.

FURTHER BEWARE - putting text content into an absolutely positioned element
(that layer) is a very bad idea. Take a look at the page in Firefox and see
what happens when you increase the text size a few clicks....
 
A

ATV

Thank you so much for all the time and help. It made me start thinking about
other ways to accomplish my goals. I took out the layer completely. I put
all the player info into the blue header that was already there. The only
thing I lost was the black line... and I can easily live without that. I do
wonder what word art you meant... the placeholder for the photo? If so..
that's just temporary.
Thank you again so very much.

Murray said:
First thing to know is that your Word Art/VML is IE only (that means it will
not display properly for you in any other browser).

Second thing is to change this -

#wrapper { text-align:left; width: 750px; margin:0 auto; }

to this -

#wrapper { text-align:left; width: 750px; margin:0 auto;
position:relative; }

Finally, change this -

<body onload="...GIGANTIC SNIP OF PRELOADS AND GET RID OF THOSE SPACES IN
FILENAMES!...">
<body>
<div id="wrapper">
<div align="center">
<div align="center">

to this -

<body onload="...GIGANTIC SNIP OF PRELOADS AND GET RID OF THOSE SPACES IN
FILENAMES!...">
<div id="wrapper">

(you had several improperly terminated <div align="center" tags there)

Oh, one more thing - get this layer OUT OF THE TABLE - never put absolutely
positioned page elements into a table cell -

<div style="position: absolute; width: 546px; height: 242px; z-index: 1;
left: 497px; top: 367px" id="layer1">
<i>
<font color="#FFFFFF" face="Times New Roman" style="font-size:
2pt"> <img border="0" src="../varsity_images/MCj02955030000[1]3.gif"
width="180" height="239" align="right"></font></i><p style="margin-top: 0;
margin-bottom: 0">
....snip...
<p style="margin-top: 0; margin-bottom: 0"><i>
<font face="Times New Roman" size="4" color="#FFFFFF">
Height: 5'8"</font></i></p>
<p style="margin-top: 0; margin-bottom: 0"></div>

You would do that by cutting that code from the page, and pasting it back
immediately above the closing </div><!-- /wrapper --> tag.

I realize that this may be alot for someone unaccustomed to working with
HTML markup, so I have posted the modified page here - you can browse to it
(none of the images will work, but don't worry about that), copy the source,
and paste it into the page in your site.

http://www.murraytestsite.com/allie.htm

BEWARE - I fear that the VML frame around your center text area are not
going to respond properly to this treatment. It would be wise to remove it,
in my opinion.

FURTHER BEWARE - putting text content into an absolutely positioned element
(that layer) is a very bad idea. Take a look at the page in Firefox and see
what happens when you increase the text size a few clicks....

--
Murray
============

ATV said:
Yes, your right, I'm sorry. I meant a layer. Understand your confusion.
(My frustration level is affecting my communication skills.) I tried
your
suggestion and it still didn't work. I must have really screwed up
something. I put it back to the onriginal "brokenness." The url is:
www.harrisonvolleyball.net/PROFILES/allie.htm

I appreciate your time.

ATV
 
M

Murray

The framed borders on that center text area layer were what I was referring
to - they are VML constructs placed there by FP.

I think you made a good design decision dropping the layer, however. You
have saved yourself some headaches by doing so.

--
Murray
============

ATV said:
Thank you so much for all the time and help. It made me start thinking
about
other ways to accomplish my goals. I took out the layer completely. I
put
all the player info into the blue header that was already there. The only
thing I lost was the black line... and I can easily live without that. I
do
wonder what word art you meant... the placeholder for the photo? If so..
that's just temporary.
Thank you again so very much.

Murray said:
First thing to know is that your Word Art/VML is IE only (that means it
will
not display properly for you in any other browser).

Second thing is to change this -

#wrapper { text-align:left; width: 750px; margin:0 auto; }

to this -

#wrapper { text-align:left; width: 750px; margin:0 auto;
position:relative; }

Finally, change this -

<body onload="...GIGANTIC SNIP OF PRELOADS AND GET RID OF THOSE SPACES IN
FILENAMES!...">
<body>
<div id="wrapper">
<div align="center">
<div align="center">

to this -

<body onload="...GIGANTIC SNIP OF PRELOADS AND GET RID OF THOSE SPACES IN
FILENAMES!...">
<div id="wrapper">

(you had several improperly terminated <div align="center" tags there)

Oh, one more thing - get this layer OUT OF THE TABLE - never put
absolutely
positioned page elements into a table cell -

<div style="position: absolute; width: 546px; height: 242px; z-index: 1;
left: 497px; top: 367px" id="layer1">
<i>
<font color="#FFFFFF" face="Times New Roman" style="font-size:
2pt"> <img border="0" src="../varsity_images/MCj02955030000[1]3.gif"
width="180" height="239" align="right"></font></i><p style="margin-top:
0;
margin-bottom: 0">
....snip...
<p style="margin-top: 0; margin-bottom: 0"><i>
<font face="Times New Roman" size="4" color="#FFFFFF">
Height: 5'8"</font></i></p>
<p style="margin-top: 0; margin-bottom: 0"></div>

You would do that by cutting that code from the page, and pasting it back
immediately above the closing </div><!-- /wrapper --> tag.

I realize that this may be alot for someone unaccustomed to working with
HTML markup, so I have posted the modified page here - you can browse to
it
(none of the images will work, but don't worry about that), copy the
source,
and paste it into the page in your site.

http://www.murraytestsite.com/allie.htm

BEWARE - I fear that the VML frame around your center text area are not
going to respond properly to this treatment. It would be wise to remove
it,
in my opinion.

FURTHER BEWARE - putting text content into an absolutely positioned
element
(that layer) is a very bad idea. Take a look at the page in Firefox and
see
what happens when you increase the text size a few clicks....

--
Murray
============

ATV said:
Yes, your right, I'm sorry. I meant a layer. Understand your
confusion.
(My frustration level is affecting my communication skills.) I tried
your
suggestion and it still didn't work. I must have really screwed up
something. I put it back to the onriginal "brokenness." The url is:
www.harrisonvolleyball.net/PROFILES/allie.htm

I appreciate your time.

ATV

:

That's not a "frame". The use of that term is definitely confusing.

And using the wrapper as you have may be overkill for what you want to
accomplish - although it is a great way to center the page.

Are you using any absolute positioning? If not, then remove the
position:relative from your wrapper. Everything will still center,
and
you
will have removed an unnecessary style that could come back to bite
you
later when you forget it's there. It's doing nothing for you.

Could I see this page? I am interested to see why this solves your
problem - the two seem unrelated to me.

--
Murray
============

I'm sorry. I was trying to be so brief that I was not
understandable.

I built a website with a table. The right column has been blank on
every
page so that I can fill it with the oppropriate text.

I am at a page now, however, that I need to break that colum into
two
rows.
The top half needs a background fill with text and a picture. The
bottom
row
will remain blank for text. The top is a little too complicated for
the
table to handle so I thought I'd make a frame. The frame looks
perfect.
I
put the following code in:
The head:

<!--
body { text-align:center; }
#wrapper { text-align:left; width 750px; margin:0 auto;
position:relative; }
</head>

in the body I have
<body...>
<div id="wrapper">

at the end of the body I have
</div><!-- /wrapper -->
</body>

Even with the code -- which I've used a dozen times before, the
frame I
created is throwing to the right of the screen. There must be a
piece
of
the
code I'm missing.

I hope this is a better explanation of my problem.

Thanks

:

I'm trying to channel your code, but I'm failing. Can you put your
head
closer to the monitor?

--
Murray
============

Help!!! I built an entire website off a simple table. I haven't
needed a
frame until now. I put a wrapper in the header and the body and
the/body.
My frame keeps throwing right. I'm using FrontPage 2003. Please
help.
I'm
out of ideas to fix it.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top