FP 2002/3 and css navigation positioning

  Simon_P 18:58 03 Oct 04
Locked

I am now using FP 2003 but was previously using 2002

My site is built using html and css and the piece, side and nav bar are configured using style sheets for formatting and positioning, I personally like that way it looks (mostly) and the only issue that I cant seem to over come is that if viewed on a small screen the nav bar drops down out of site and the side bar overlaps the piece!

Is there a way round this?

The css for these are: I have left out the colouring fonts etc.

/*link column*/
#links{float:left;width:15%;padding:0px;margin:0px;}

/*text sections*/
.piece{width:72%;position:relative;float:left }

/*side blocks*/
.side{width:28%;position:absolute;top:0;right:-35% }

It is not that easy to explain so I guess the best way it to show you, resizing the browser window will show you what I mean.

My site is click here

Also I have noticed that some of my pages are htm and some are html.

Is this important or should I not need to worry about that?

I also wish to convert it to xhtml over the winter if it is possible (for me)

TIA

Simon

  Taran 09:07 04 Oct 04

To convert your page to XHTML in FrontPage 2003, go to code view, right click anywhere in the code of the page and select the option to 'Apply XML formatting rules'.

This will not put the relevant DTD header into your page but it will convert your HTML into XHTML.

To move one step further to valid code you need to include a relevant DTD. You can find the right code more or less anywhere, but the excellent W3Schools site has a full set of tutorials on XHTML and is as good a place to begin as any: click here

Your CSS issue can be solved in any number of ways but to be honest about the quickest and easiest would be to reduce the size of the font and the length of the text in the hyperlinks. Neither one has to be reduced by much, but a marginally smaller font and shorter text hyperlinks will avoid having to use diffferent positional commands in the CSS which can knock things all over the place.

Try shortening some of your links from 'The Pentland Hills' to 'Pentland Hills', 'Scotland Gallery' and 'England Gallery' could both be simply 'Scotland' and 'England' since they both fall under the subheading of gallery. Yout top navigation bar gets overlapped purely because of the huge link at the end: 'Add UK Photos web to your favourites'. Have you considered 'Bookmark this site' or 'Add to favourites' instead ?

I dropped the font size to 76% in your CSS #nav line and in the #links A line and all was well.

Play around with it a bit and see how you get along.

I'd try the font size and hyperlink wording before you start hacking your page element positioning though.

  Simon_P 12:24 04 Oct 04

Thank you very much once again

Changing the font size in the #links and #nav has helped (I had over looked doing that in those parts of the css) and it has made an improvement.

Reducing the names to Scotland/England etc in the links and nav is another good idea and you have highlighted a good point that they are already under a sub heading. However due to my lack of foresight I will have to do that to every page individually, as there is not a linked file to all navagation (because I didn’t know how to do that)

Playing about with the page element positioning can have some nasty effects so I will do that as a last resort.

The tip on changing to xhtml using FP is excellent, I hadn’t realised that feature was available, and had spent ages doing one page manually, the convert only leaves 12 errors in the w3c validation tool.

I am currently using html 4.01 transitional dtd’s on all of my pages, and the ones with the w3c logo are valid.

The w3c site is excellent but difficult at times to understand for an amateur, I will just keep learning.

I think that there will be issues with the java script when converting, but I will open a new thread if and when I come across any issues that I cannot fix myself.

I will probably drop the hit counter (to tacky) and maybe the nedstatbasic as my hosts 1&1 now provide excellent stats in a text and graphic interface in their control panel. The java slide show is likely to be my main problem.

Sorry it’s a bit long winded, just too many questions

Thank you for all your help

Simon

  Taran 13:08 04 Oct 04

Might I suggest that you reconsider your production methods.

FrontPage, like all top end web authoring programs, has an excellent templating facility. Design a page with common layout elements (Header, Footer, Navigation bars with live links) then create your pages from the template. If you change the template in the future, all pages created from it will update if you follow the prompts FrontPage gives you to do so.

Since you're staring a lot of work in the face already, now might be a good time to put a stake in the ground and start afresh so that your future site modifications can be made far easier.

CSS is a superb way of affecting the entire site format in one fell swoop. Nothng beats the overall power of page templates when producing a large site though, and if you combine it ith CSS you have a lot of flexibility at your command.

You could quite feasibly create one valid XHTML page, save it as your template then all pages created from it will also be XHTML, unless of course you go dumping HTML content into the mix.

One easy way around this is to copy text from existing pages into a simlpe text editor like Notepad then copy from Notepad into FrontPage, or an even easier way is to copy from your source page and then choose the Edit, Paste Special option in FrontPage and select unformatted text. As long as you are prepared to maybe alter a few hard returns to get your paragraphs correctly spaced out, you can reproduce a site in pretty short order.

If you click once on your images folder in a new website to highlight it, then go to File, Import and follow the prompts you can import all images from one to another site in seconds. You can also use the built in gallery tools to create your image galleries, but for this I suggest creating a subfolder within the images folder for each gallery to keep its images separate, along the lines of images/scotland or images/england. Keep file and folder names lower case and if you want to use multiple words to name them, use an underscore instead of a space, like_this.

There are also ways of inlcuding one file into another but let's not go too far down that road just yet.

Have a think about the above. FrontPage can make life far, far easier for you if you learn some of its tricks.

  Simon_P 15:22 04 Oct 04

I have already starting playing about with templates in FP with a view to a complete redesign from scratch, I just need to spend some time getting to grips with FP and its useful features.

I didn’t know that you could change all the pages from the main template, thank you for pointing that out, I use notpad like you said to remove formatting, some of my images are lower case and with the _ to separate words, so that helps, the rest I can use PSP to batch rename so that shouldn’t be any real problem. The import feature will be very handy.

One last question if I may, just so I understand it right, by page templates do you mean layout tables and cells in the tables menu ?

Thanks again

Simon

  Taran 01:31 05 Oct 04

Page templates can indeed feature layout tables and cells in the tables menu, but what I am getting at is far more powerful and goes something like this:

1. Design a single site page that contains all common elements.

2. Assign editable regions to the page - these will be areas where content will differ from page to page.

3. Save the page as a FrontPage Template or better yet, make a dynamic template (see help files).

4. Create your site pages from the template using the File, New, More page templates option.

You can alter anything inside the editable region but everything outside of it will be locked, so preserving your overall layout and look.

Check out the FrontPage help files (press F1) and type in the word Template for lots of general information.

Basically, you can mass update any page created from a template, like this:

With the Dynamic Web Template open, on the Format menu, point to Dynamic Web Template, and then click one of the following:

Update All Pages

or

Update Attached Pages

So if you alter the template at all you can also opt to have all pages that were created from it update to share the changes you made to the parent template.

Think of it like an invisible umbilical cord to a mirror image of the skeleton layout page. Alter the skeleton layout (template) and all pages created from it will share those alterations via the umbilical. In this way your template can have a common header, footer, navigation bars with live links (you can manually type these in regardless of whether there is a page to select as the link target yet) and then you use it as a blueprint to create a new page from. All pages created from the template share the common elements you included and may only be edited and altered in the editable region(s) you assign in the template.

You should read the help files for more information and play around with a dummy site to get the hang of it all.

Templates offer a designer the option to affect an entire site, reagrdless of size, with a few mouse clicks. This can work well on its own and arguably even better when used in tandem with CSS.

I'm not sure if I've cleared anything up or muddied the waters evern more *sigh*.

T

  Simon_P 02:59 05 Oct 04

I have played with it and like it very much, what a great feature. As I interpret it, it is a very powerful extension on the old shared borders, excellent feature and another big thumbs up for FP, I ummed and aahed about upgrading to 2003, it was a good move.

I did burn out a few brain cells in the process and got the editable regions the wrong way round, "oops those damn amateurs"

I have produced a basic (very basic) three page test web, and incorporated some of the css from the live site, so far so good! I use a free ISP provided web space to do my testing, but have not yet uploaded it, I will upload maybe tomorrow (working all day) and leave a link if you want to have a look.

Well I guess that is the easy bit over, all I have to do now is rebuild the whole thing.

I think I will spend a fair time getting the template just right, dimensions etc before I start the hard work, not sure if there is a go back if I don’t get it right first time.

Are there any rules that I should stick to regarding the page width? I was thinking maybe 955 px as that will fit into a 1024 window with no problems (I think)
Something like 150px nav 620 ish px middle pluss padding 150px side plus header and footer.

Thanks again for all your help it is really appreciated.

I'm going to leave this thread open for a while just in-case I run into any problems, to keep all the good info in one place (I like tidy)

  Taran 10:11 05 Oct 04

To begin with, most free webspace with an ISP does not support FrontPage Extensions and so, depending on the features of FrontPage you have used, your attempts to test publish to it may not go according to plan.

You could always create a subfolder within your current website, perhaps called test. Upload your test pages to this folder making sure the first page is an index.html document. If you type in the domain_name.co.uk/test/ address into your browser the index page will load in the test site. Ideal for playing around without affecting the main site area.

Dimensions for pages is a sticky wicket at best. Most professional designers target 1024x768 as the standard page size, but all good designers will use percentages for a fluid layout rather than pixel widths. This means that in smaller or larger resolutions the page will resize to whatever percentage of its width that you deside upon. I often use a 90% page width area for the main site body. You can fix a width for your navigation panel if you like, and this leaves the rest of your content area to resize in a fluid manner, regardless of the size of monitor being used.

Just be careful of fixing widths at 1024 r thereabouts, since anything lower than this resolution will display an ugly horizontal scollbar and anything over it will have a weird interpretation of your intended result.

Percentages allow you the freedom to cater to most screen resolutions without igoring any of the mainstream ones.

T

  Simon_P 19:49 05 Oct 04

My ISP is Blueyonder and they have FP server extensions installed by default on their free web space and you can reset them/de-activate them as and when required.

On my main site I believe that extensions are only available in the root directory. I suppose that I could download the extensions and make a virtual local server on my comp

The page size as you say is an odd and varied issue, my reasoning for fixed is that frames wont get squashed, but have up till now favoured a 90% width, so maybe I will go with that anyway and play around with it. As I'm not really tied to a time frame I can take my time within reason.

I agree on a 800 x 600 it would most likely look awful.

Time to go and play

Simon

  Simon_P 01:06 06 Oct 04

I have uploaded the basic test 4 page site, I quite like it and although in a very basic form it has potential I think. The dynamic templates are a great feature, and wont have too much trouble adapting to this (new for me) style of web design.

I have only edited the css from the original so there is allot that can go when I do it all for real.

There are a few frame dimension issues, but nothing major, the colour scheme needs work to make it look more appealing and the pages don’t validate but that wasn’t really the object of the exercise.
I read somewhere that there is a html code to make hex colour values into gradients, maybe I will learn to walk first though!

Some of the characters in the dynamic web code are in upper case, so I don’t know if that will be a problem.

As I understand it the dynamic web template can be kept local and not uploaded? However I don’t really see a problem if it is uploaded as it can be blocked with robots txt

I think I will probably have to make 2 or 3 dynamic templates for different page layouts as required.

Well I guess that’s the steak in the ground, just need to put up the tent now!

Thanks for all your excellent advice.

Simon

click here

  Taran 01:09 06 Oct 04

Ditch frames.

I can think of more reasons not to use frames than I ever could in their favour and if your basis for selecting a layout is to preserve a frame or the possibility of using them I think you've done yourself out of a useful layout in favour of a potentially site crippling feature.

If you must use frames, use them sparingly. I still suggest you don't use them at all though.

Try a 90% width layout with a fixed width 150 pixel left hand navigation bar for your hyperlink buttons. That's an old favourite of mine and the arguments against pixels may be valid but are far less of a potential concern than frames.

This thread is now locked and can not be replied to.

Best phone camera 2016/2017: Galaxy S7 vs iPhone 7 vs Google Pixel vs HTC 10 Evo vs OnePlus 3T vs…

1995-2015: How technology has changed the world in 20 years

Best Christmas Agency Projects of 2016

Super Mario Run preview | Hands-on first impressions of Super Mario Run: Mario's iPhone & iPad…