FP 2003 formating question. please help

D

Dave

Hello group. I am having a diffclut time with this, hopefully someone can
help me. I use FP2003. I have a 19" monitor set to 1261X799 pixels. I noticed
that when viewing my website, if I am in anything other than 1024x768 pixels
the formating is not proper. My pictures and text are shifted all over the
place. Why is that? I notice that when I go to any other site on the web, no
matter what my pixel settings are and no matter what the monitor screen size
is, The page will always be formatted properly. Is there some setting I am
supoose to use in FP2003? Someone suggested that I use tables to design my
site in and set the page view in FP to 800x600 for designing. Can someone
explain this to me? How do I use tables? I did use them to create a excel
type mini spreadsheet in my site but I don't know if that is what they were
talking about. I do not want to have a bunch of rows and colums on everypage
of my site. Thanks for your help.
 
A

Andrew Murray

you use tables and turn the borders off (effectively invisible) therefore
the common user wouldn't know they are there. In Frontpage (and the web)
there is a lot more to tables that just presenting data in columns and rows
(not just limited to what you might use a table for in say Word or Excel.

Tables are the most common layout tool in web design.
 
D

Dave

Thanks Andrew for the response. Do I put pictures in tables as well or just
my test? I figured out that instead of just typing test on my page that I
shoud use text boxes and then place them where I want on the page. With
pictures, I was formating the position to "absoulte" so I was able to move
them freely on the page nd put them where ever I wanted. Should I continue to
do that? Oh yea, one last question. Should I set my page view in front page
to 800x600 pixels and shrink everthing down to that size so no matter which
setting you use everything will properly fit the screen? I am confused about
that topic. I really would like to desing in 1261x799 if possible so I can
take advantage of my 19" screen Thanks again
 
R

Ronx

Using Text boxes will lead to problems with browsers other than IE.
Text Boxes, and all other VML graphics created with the FP Drawing
toolbar, will only display in Internet Explorer V5.0 and later,
running on Windows. Other browsers will not display them at all, or a
poor quality .gif representation.

Your current display problems are probably due to incorrect use of
absolute positioning. If used correctly, absolutely positioned
elements will ALWAYS be in the same place, regardless of screen
resolution or browser size.

A link to the problem page will assist in a better answer.
 
D

Dave

Thanks for the response......how do you use absoutle positioning incorrectly?
I thought all it was used for was to have the abilty to move jpegs any where
on the page, which I was unable to do with "relative" or "none" position
settings.

As for text boxes, I understand what you are saying, so should I just always
use tables regardless of weather I am trying to add pictures or/and text to
my web page? I tried to make a table that was 1 row x 1 colum and stretch it
large enough to add my picture, but it didn't work for some reason.
 
D

Dave

Here is my website for my band. If you navagate though it, you will see what
I mean with the formatting. Maybe this will better describe what I am talking
about

www.webofaddiction.com

Thanks again
 
R

Ronx

Take one example from your band_news page (I have removed some detail
to retain clarity)

<p align="center"><a href="Main%20Page.htm">
<img border="0" id="img3" src="button1B.gif" height="30" alt="Main
Page" style="position: absolute; left: 238; top: 245;
width:90px"></a></p>
<p align="center"></p>
This button can be expected to shift position in different browsers,
and in IE if the user changes their font settings. This button uses
absolute positioning incorrectly.

You should not place absolutely positioned elements inside containers
(<p>...</p> in this case) that have not been positioned. The
container will move around as the browser is resized, font settings
changed, and different browsers follow different rules for this
scenario.
It would be better to use something like:

<body>
<div id="div1" style="position: absolute; left: 238; top: 245;
width:90px"><a href="Main%20Page.htm"><img border="0" id="img3"
src="button1B.gif" height="30" alt="Main Page"></a></div>

Since the absolutely positioned layer comes immediately after the
<body> tag, it cannot move around as browser conditions change. Your
text can also be placed in absolutely positioned layers, instead of
text boxes and tables.

This will still keep the text and images to the left of the page, but
they will be the same in all browsers.

To centre the page in all browsers, wrap the content in another layer:

Following Murray's suggestions: (Murray explains this much better
than I can - look for his posts in this group).

<head>
<style type="text/css">
body{
background: #FFFCFC;
color: #000000;
font: normal normal 100% Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 0px;
text-align: center;
}
#wrapper{
text-align: left;
width:760px;
margin: 0px auto;
position: relative;
}
</head>
<body>
<div id="wrapper">
<div id="div1" style="position: absolute; left: 238; top: 245;
width:90px"><a href="Main%20Page.htm"><img border="0" id="img3"
src="button1B.gif" height="30" alt="Main Page"></a></div>
<!-- rest of layers and page elements -->
</div>
</body>
</html>

The above code will centre the page in all modern browsers, and retain
the flexibility of absolute positioning.
 
D

Dave

Thank you Ronx for the reply.....however, I am not educated in writing HTML
code at all. That is the main reason for me using frontpage 2003.
I am totally frustrated at this point. I really need someone who can help me
in lamines terms as I am not a code person. All I want to do is develp a
simple site that when someone looks at it, it does not shift and look like
crap. Soory for venting but I am on the verge of giving up with this whole
website design thing and may just pay a website developer to design my bands
siite. Thank you for you help.
 
R

Ronx

The easiest way to layout a page, in my opinion, is to draw it on
paper.
Draw a grid that places each object on the page in its own cell -
objects in this context are images, blocks of text, navigation
buttons, etc. You may end up with several distinct grids on the same
page, example a top grid for banner and navigation buttons, a middle
grid for the page content, and a bottom grid for the page footer.

When building your web page these grids translate into tables. Using
the graphical user interface you can insert a table, and set the rows
and columns. Use table properties to give the table a fixed width and
centre it.

Then place the content into the table cells, as per the paper layout.
Use the same basic layout for each page.

Web design is not as easy as print design, where you know how big the
sheet of paper is.

As far as the absolutely positioned example I gave is concerned, use
the code view to set up the wrapper div, then use the GUI to insert
layers and manipulate them within the wrapper. The layers are as easy
to use as Text Boxes, but much more browser friendly.
 

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