Website Scrollbar Help Required.

  Sibbo 20:31 09 Jan 2007
Locked

I've just designed my very first website (click here)for a family member, and although it looks great on my TFT screen set at 1280 x 1024), a horizontal scroll bar appears at the bottom of all of the pages when viewed on other PC's. This is very annoying for anybody who is browsing the site. I've been told that this can supposedly be corrected easily, but I'm at a total loss. Can anybody please help. Thanks you

  LeadingMNMs 21:38 09 Jan 2007

The way the HTML has been written or generated, its not exactly easy to fix.

Basically the page has been written so its always approximately 1100px wide, so anyone not using a resolution wider than that will get the vertical scroll bar.

I'm at a loss as to what to suggest, since I'm used to writing HTML, and don't really have any experience of using a webpage generator. I suggest you let people know what you used to create the site, and people familiar with the tool will undoubtly be able to suggest more specific help.

  Sibbo 21:52 09 Jan 2007

I used Web Page Maker V2, although I exported the files to html via the program.

  LeadingMNMs 23:05 09 Jan 2007

Hopefully someone will be able to give you some pointers on how to resize the page within that program or perhaps suggest an alternative. Certainly looking at the code it has generated, I'm not that impressed by it.

Essentially, what we want to happen when the browser window is small, is for the "whitespace" (yes, its black in this case) to contract, so things become closer together. At present the code tells the browser, "item x must be 1000px from the left size" and so a scroll bar is needed since that item is outside of the viewable area.

I've had a quick hack at the code and came up with this click here Its pretty much like the original, but will resize better. Its certainly not the finished article, as for example the picture and menu will overlap when the window gets small enough, and the code is a mess, with plenty of stuff that could safely to removed.

I would certainly advise looking around for other (free) web development tools, as the generated code is awful. While I myself try to avoid using tables for layout, most programs will use them to great effect. Essential create a table in the editor and divide up your page into blocks. At the simplest you would have 2 columns, one for the menu and another for the main body. Rows and columns could be added as necessary to the design for the desired effect. The borders of the table would be off so it would not be seen by the user, and would occupy the whole width, whatever the width of the window.

Hope this gives you some ideas.

  LeadingMNMs 23:09 09 Jan 2007

Edit: Forgot to test the page in IE, being a Firefox user, so hadn't noticed the image of the car not being centred. Its only caused by my lazy coding though, and could be fixed without that much effort .... but not until the morning at least.

  Sibbo 17:59 10 Jan 2007

Thanks for your help mate. I'm not sure if I can get my head around html or not. As I say, this is the first time that I have made a website. If I hadn't been asked to try and make this one then I wouldn't have bothered with one at all. If I had known that the program that I had used would cause this problem I obviously would not have used it.

  LeadingMNMs 22:38 10 Jan 2007

Well it was a little unfair of me to say Web Page Maker V2 was useless, without giving it a go. After giving it a go though, I feel my comments were justified.

As I suggested using tables, I was going to try and put something together using it. For most people, tables are the basis of most web page layouts, but the program seems unable to use them for layout.

Essential most websites are created sequentially as such, just like paragraphs follow each other in a book. While perhaps chapters can be moved around (in some books at least) as necessary. A webpage should, at least in my opinion, take this form. Your site for example could be divided up into blocks. At the simplest level you would have perhaps a block for the main page, and a block for the menu. Where each block appears doesn't matter, but each blocks contents should be grouped there. Within the main page block, you could again divide that into blocks, for example the 2 line title, one for the image and one for the rest. You can carry on dividing these blocks up, but they will always be part of the first 2 blocks, which form the page. What WPM V2 does is perhaps more of an artistic approach, where it puts lots of individual items on to the page, with no links between them. Almost like a painter might add something to the middle of the canvass first, then move to the right side and so on, rather than sequentially painting it from left to right, top to bottom.

At least thats my idea of design. Everything has a position relative to the things around it, rather than simply a place on the page.

What I would suggest doing, is starting the page again. I don't mean forget what you've done, have it there in front of you and start by dividing it up. In my opinion the last 2 lowest levels of that will be the lines of text (e.g. " Personal Trips Social Functions Meet & Greet Service") and within that the individual phases.

When you have a idea of how everything fits together, I'm sure a search of the site will find another free WYSIWYG editor thats more adaptable. Use that to create a 2 column, 1 row table and start from there. Merge and split table cells until you have something that looks like it what you designed before.

I had a quick go at doing something with Dreamweaver, and came up with these early stages click here (plonline1.html is the orginal, with broken links). Essentially I'm only playing with the layout, initial the table has a border, and then I hide it. I also play with the alignment of text within the cells to try to recreate the desire layout. In the examples I'm not interested in the fonts and sizes, those can easily be changed later, along with the background.

You may notice there are still a few issues with resizing, and while I could fix these myself within the HTML, I see no point in hiding the problems at this stage. Also I haven't touched the menu, although simply copying the code from the previous page would probably work.

I hope these ideas can be of some use to you in creating a suitable page.

  Sibbo 20:54 11 Jan 2007

Thanks for your thoughts and examples LeadingMNMs.

  anchor 16:07 16 Jan 2007

I cannot help with your problem, (wiser heads than I will do that), but I am used to putting pictures on the web.

I noticed that your photo of the Mercedes is about 840kb is size. This is unnecessarily large, and will take anyone on dial-up a long time to download.

To show you what I mean, have a look at your photo reduced to only 10% of its original size, (84kb).

click here

  Sibbo 17:08 16 Jan 2007

I thought it was a bit big, but that's the smallest it could go with the editing package that I used. Unless I did something wrong of course.

  Sibbo 11:36 17 Jan 2007

I've now fixed the scroll bar problem from within my original program, should anyone care to take a look at the finished website. I've still to reduce the size of the photo though, and cannot see a way to reduce it further using PhotoShop Elements. To reduce it to it's current size, I used the program's reduce for web option.

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

Elsewhere on IDG sites

Alienware 17 R4 2017 review

Is this the future of VR and AR?

Best iPad buying guide 2017

Comment regarder le Bureau des L├ęgendes en ligne ?