Solved

Positioning elements in FP 2003 so that all browsers can view them the same.

Posted on 2007-11-19
18
185 Views
Last Modified: 2013-12-24
I am building a website in FP2003 that contains images on it's pages. I position everything where I want it, save my work and publish to my website, in this case www.danielbrooksart.com. I then go to another computer and view the pages at different resolutions and the images are all over the screen and not at all where I want them. They have moved either left or right or anywhere else than centered where I want them to be. I have tried absolute positioning and relative but that seems to do no good. Also, the home page has a graphic that stretches when viewed in a browser with any other resolution than 1024 x 768. How can I keep things where I want them and have the images appear as they were intended and not distorted.
0
Comment
Question by:tdp1944
  • 9
  • 8
18 Comments
 
LVL 31

Expert Comment

by:James Murrell
ID: 20318265
ARE YOU USING CSS
0
 
LVL 13

Expert Comment

by:brundo
ID: 20318427
Hi,

first of all, I see you are not using stylesheets (CSS) for positioning, so, let's try without them (although I would recommend you to learn this technique).

I see two problems (and some potential problems, too).

The first problem is with menu at lower resolutions - rows are splitted at spaces between menu items and "bars". The simplest thing to do is to put nonbreaking spaces instead of spaces at those places:

1. delete space
2. type ctrl+alt+spacebar to insert nonbreaking space.

You can test it in smaller window even at your computer :-))

The second problem is in the gallery, where the pictures "dance" left and right. The simplest solution is:

1. right click on the table with picture and description, then Table Properties
2. set: Alignment to center

3. right click on the left cell and Cell Properties
4. set Cell width, to, e.g., to 400px
5. set Horizontal alignment to right

3'. - 5'. repeat 3. - 5. for the right cell, with Horizontal alignment to left

And repeat this for each page... (how to avoid repeating this to each page is another question :-)) ).
0
 

Author Comment

by:tdp1944
ID: 20319402
I thought I WAS working in CSS; that it was automatic in FP2003 but I guess not. I'll try these solutions but would prefer to learn the CSS procedures. I didn't have this problem in FP2000. Thanks
0
 
LVL 13

Expert Comment

by:brundo
ID: 20319835
No, you've positioned your text with tables, and formatted your characters with Format > Font.

Now I've another thing: at some pages in gallery you have a wide table (width = 100%). Uncheck "Specify size" in all tables (step nr. 2 in the second problem.
0
 

Author Comment

by:tdp1944
ID: 20319962
I tried to set up CSS but can't find anything as stated in the silly tutorials. In order to do this in CSS do I have to start from scratch or simply remove the tables? After reading about CSS I am much more inclined to learn it, but as I said, the tutorials I find don't really give me step-by-step. Do you have a source that will explain how to use CSS in terms even I can understand? Thanks again for your help.
T
0
 
LVL 13

Expert Comment

by:brundo
ID: 20320866
In this moment you can achieve what you want without CSS, just following the advice I've written. Just make a your web site on your machine (make a backup) and try - in less than half an hour you'll see the difference.

When you start learning CSS, the best way is to start with simple examples (well, I'm a part time teacher :-)) ). Then, when you'll already can do something with CSS, you can sketch your design and write your stylesheet.

As you are a FrontPage user, if you want to learn something about stylesheets, I would recommend you a free course from office.microsoft.com: http://office.microsoft.com/training/training.aspx?AssetID=RC012111061033
0
 

Author Comment

by:tdp1944
ID: 20321847
brundo-I haven't had the opportunity to try your suggestion in it's entirety and don't completely understand it yet. I printed it out and will try later this afternoon to do as you say.  Thank you again.
TD
0
 

Author Comment

by:tdp1944
ID: 20324053
brundo,
I clicked on the free course link you included in your last message, rubbed my hands in anticipation of coming away with enough knowledge to begin learning CSS. Imagine my disappointment when I discovered that in order to complete the lessons I was required to know how to write HTML.  The reason I bought FP in the first place was so I wouldn't have to learn how to write code. Also, the link on that page, HTML basics, has moved and no longer exists. This is all getting rather frustrating. Isn't there anywhere where I can find simple straightforward instructions on how to build CSS pages?
0
 
LVL 13

Expert Comment

by:brundo
ID: 20329868
tdp1944,

I wrote in my first message: "you are not using stylesheets (CSS) for positioning, so, let's try without them" I.e. if you didn't use the stylesheets, it is the best way to finish the job without them. Learning is a process... it lasts...

With the introductory course from Microsoft you can see what is it about. As with other things, to _learn_ something, you have to use the technique for a while to master it. And, surprisingly, when you master it, you can work with stylesheets just using WYSIWYG (design) view of the FrontPage.

Did you try with my first set of advices?

Maybe you need a summary of those steps:
 - in the first two steps you prevent  breaking menu items between bars and words
- in the second part, you fix the table in the center and widths of the columns, so the images don't "dance" around
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:tdp1944
ID: 20331937
Thank you brundo for your response and I appreciate you sticking with me on this.  In the first place I don't understand what you mean when you say, "...you prevent breaking menu items between bars and words. Do you infer that that they should all be in the same cell?

Secondly, you say, "...fix the table in the center and widths of the colums." What? I don't get it. Sorry to be so dense.
0
 

Author Comment

by:tdp1944
ID: 20332078
brundo,
I went back into the site and deleted the side-by-side table and made  single cell, sized it to accomodate the image and inserted it, then justified it to the left side of the cell.  I then wanted to add descriptive text but it can't be positioned in the middle and wants to go to the bottom of the image. I tried putting the text in a layer that I could position where I wanted it and it seemed to work...until I viewed the page. The text was in the middle of the image.  That was the reason I used two cells in the first place. Now I'm stuck again.
0
 
LVL 13

Expert Comment

by:brundo
ID: 20333652
> "prevent breaking menu items between bars and words"

Look what happens when your visitor has narrower browser window or larger font size:

https://filedb.experts-exchange.com/incoming/ee-stuff/5766-_space.png

... and, about the table... Let's try with a image from my browser, where you can see your cell borders:

https://filedb.experts-exchange.com/incoming/ee-stuff/5767-_table.png

The table with gallery items green is centered. This is ok.

You can temporary set border color in your table properties to see your cells.

Remaining problems come mostly from the fact that all your tables are not equal:
- cells are not of the same size in all pages:
  - left cells have to have enough width to accommodate the widest image
  - for right cells widths you can use the same value (or any other, but equal on all pages)
- left cells:
  - put horizontal align to all of them to right
  - click on the selected alignment method in the toolbar to unselect it (you've
    mixed these two ways of setting alignment)
- right cells:
  - the same thing as with left cells, but aligned to the left
- table:
  - put the same cellpading and cell spacing for all tables

Try with two pages and then, when satisfied with parameters, proceed with others.
0
 

Author Comment

by:tdp1944
ID: 20335548
brundo,
I see what you mean. I have reworked the pages with product in them and think they all justify center on the page. As far as the size of all the cells being the same, that is most difficult because the artwork  is so radicalliy different in size as you can see. In any event with your help, things are getting narrowed down so that they work. I have even opened the pages in FP 2000 (which didn't seem to have the "walking" problem. I'll be working on the site a bit today. In the meantime it is there for your perusal/critique. Thanks again for all your help.
TD
0
 
LVL 13

Expert Comment

by:brundo
ID: 20336492
Hi,

my idea is to have the right border of pictures always on the same vertical line. To achieve this, you have to have all the left cells of the same width, and all of the right cells of the same width.

But, how to solve your problem in determining the width, depends on the author of pictures. You mentioned that they are of various sizes, but the problem can be solved :-))

If you resized the pictures, and you have original files, you can resize them to fit in the "ideal" table. You have to set (in your mind) maximal dimensions of pictures, width as well as height. Then you resize pictures so, that they have widths not greater than your maximal width, and the height not greater than the maximal width.

If you didn't resize the images by yourself, or you have the originals no more, then set the maximal width as the width of the widest picture, and the height as the height of the tallest picture. The rest is the same as before.

In both cases you have to define your left cell size as the picture width plus 2 x cell padding.

Why am I writing about the height? You can set cell height, too, and vertical align... If all the cells on all pages are of the same height, then the "Back" and "Next" buttons will be on the same place on each page.

And then, when you solve your original problem, you can use your new skills to improve another parts of the page. But, now is the upper table important...
0
 

Author Comment

by:tdp1944
ID: 20340302
brundo,
Thanks again. I have reworked the pages and the graphics and text seem to staying where I want them. Since Microsoft FP can't seem to include an embedding tool for fonts I am using WEFT and it works as long as I remember to re-analyze each time before I publish. It's a pain in the you know, but I don't know what else to do. It seems that Firefox doesn't seem to recognize the typefaces the same way Explorer does but I'm working on that. If you would please check out the pages now and see if you get the same results I do. I have included (as attachment)  a bit of HTML that is supposed to resize the pages for the browsers but I'm not sure if it's working or not. It may be unnecessary and should be striped out but I'll wait for your opinion. If all is well, I'll stop bothering you, accept your solutions and attribute all points to you. Again, I appreciate all your patience.
TD
<script>
 

function msieversion ()

{

	var ua=window.navigator.userAgent

	var msie=ua.indexOf ( "MSIE " )

	if ( msie > 0 )

	// is Microsoft Internet Explorer;

	//return version number

	  return parseInt ( ua.substring

			  ( msie+5, us.indexOf ( ".", msie ) ) )

	else

	  return 0;   // is other browser

}
 

function go () {

	if (msieversion() >=4) {

		//if (document.body.clientWidth<780) { 

		if (screen.width<800) {

			image.width=320

			image.height=259

		}

		else {

			image.width=640

			image.height=518

		}

	}

}
 

window.onresize=go;
 

</script>

Open in new window

0
 
LVL 13

Accepted Solution

by:
brundo earned 500 total points
ID: 20347316
Hi,

sorry for answering so late, I has a very busy weekend...

    * * *

Now we have a new question, about fonts. Actually, this should be a new question in this forum, but now I will answer it... I see your BernhardMod BT font, as it is correctly defined (@font-size definition in the "style" part of the page).

A problem with fonts is with "back" and "next" links in gallery, which use default font (Times New Roman). Actually, you have two @font-face definitions, one for "Times New Roman", which you don't use. The part of code shown below can be deleted.

    * * *

Now, back to the problem of positioning pictures. As I've said before, I would set
- the left cell size on all the pages in the gallery on the same value, then
- the same for the right cells (probably to another value)
- padding of all the tables on the same value, and
- horizontal alignment of all the left cells  to "right" and of the all right cells to "left".
This is not done yet, so the right borders of all pictures is not on the same line on all pages in the gallery.

The parameters are not set correctly, and here is what I've written while looking at your page:
https://filedb.experts-exchange.com/incoming/ee-stuff/5809-_looking_at_the_gallery.png

You can try to follow the steps from my post written at the 11.22. - first concentrate to the first two pages and try to get the right borders of both pictures on the same line.

    * * *

I don't like the idea of your script... It should work only for IE, what is bad... But worse is that you let the client program to resize your picture - the task you should do (and control) by yourself in a specialized image editor (e.g. GIMP, or Photoshop, if you want). The worst thing is that your script should set its fix aspect ratio to the picture, regardlessly of the aspect ratio of the original picture.

This can be fixed, but, as i said, I don't like the idea...

If you want to see what your script do, you input the id attribute of your picture:
- in FP switch to the Code view
- look for the <img ...> tag
- type and additional id attribute: <img .... id="image"> (must be image)
- save and test your page in IE by resizing the window.

    * * *

I would suggest you to master the tables first... following the advices you can make a first step :-))
  @font-face {

    font-family: Times New Roman;

    font-style:  normal;

    font-weight: normal;

    src: url(TIMESNE4.eot);

  }

Open in new window

0
 

Author Closing Comment

by:tdp1944
ID: 31411122
All in all I appreciate the efforts of brundo who stayed with the issue until I got headed in the right direction. In all fairness I have not yet tried all the suggestions but will very soon. I felt the language barrier was somewhat of a hinderance in that the syntax was, for me anyway, sometimes confusing. Nonetheless I am appreciative of brundo's help.
0
 
LVL 13

Expert Comment

by:brundo
ID: 20356304
Thanks for points...

Now, I should write another thing I mentioned and make a recommendation to you: your bottom table (with menu) has 9 columns and 3 rows. Actually, content of this table is in 5 columns and 1 row.

If you want to make another task with your knowledge about the tables, you can:
- delete first two columns
- delete last two columns
- delete the first row
- delete the last row
- select all 5 cells and:
   - define the width (the same number)
   - define the height
   - define horizontal and vertical alignment
- center the table

Correct usage of tables is the first step toward using CSS :-))
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
The purpose of this video is to demonstrate how to properly insert a Vimeo Video into a WordPress site or Blog. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp…
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now