Website appearance in browsers

Forum Moderators: open

Message Too Old, No Replies

Website appearance in browsers

Advice needed for a beginner

Principiante

11:22 pm on May 15, 2010 (gmt 0)

Hi,

I recently made my first ever website in Microsoft Publisher (yes, I know, not the best programme to do it in but all I have at the moment).
When I published it to the net it appears on the left of the screen, whereas all the other websites I go to are in the middle of the screen. I came across the same sort of problem in some posts in this forum in 2004, so, had a go at editing the source in notepad. I used the suggestion made by HelenDev but that put the page on the right of the screen. All the other suggestions showed the text I put in and then the web page so I am obviously not doing it correctly. You will all have guessed that I am a complete novice in websites.

My screen resolution is 1690 x 1050 which is the recommended resolution and my browser is IE8.

Can anyone help a complete beginner?

Many thanks.

tedster

2:18 am on May 16, 2010 (gmt 0)

Welcome to the forums, Principiante.

Note - there is a forum here for HTML Editor Porgrams [webmasterworld.com], but since you've shown the initiative to join the "hard guys' and edit your HTML manually, this might be the right place for your discussion.

So, is this your question: "How can I make my pages display in the center of the browser window?"

If so, you may not be able to make one small change in your code, depending on what you;ve already got. Here's a thread that discusses some approaches: Centering a web page for all resolutions [webmasterworld.com].

You can also do research using our Site Search [webmasterworld.com]. This is a commonly discussed topic.

Principiante

9:44 pm on May 17, 2010 (gmt 0)

Thanks for your reply Tedster.

I followed the link to the discussion about centering a webpage but for all I understood it, it may as well have been written in a foreign language. I have no clue as to what all that code means.

When I looked at the source for my website in Notepad there was no <body>, only <body link=navy vlink="#660099" style='margin:0' > and </body> at the end of the page.

I think I will just have to live with it being on the left of the screen.

I am out of my depth.

Thanks again for taking the time to reply to my initial posting.

tangor

9:57 pm on May 17, 2010 (gmt 0)

Do a little more reading before giving up. "center", "align", "text-align" and "margin" all apply and can give much love to your display.

Principiante

10:25 pm on May 17, 2010 (gmt 0)

The trouble is I don't know where to put any of these entries or what they should actually read. I would love my webpage to be in the centre of the screen but it all seems too complicated to me.

I once taught myself Word Basic but I was a lot younger then and Microsoft changed it to Visual Basic which I really struggled with. I think that is the real trouble, I don't understand what I am doing and I wonder if learning a new programming language is a good idea for a pensioner!

tangor

10:31 pm on May 17, 2010 (gmt 0)

Let's try something different:

Send the top part of your code, sans identifying links (ie. no URLS not allowed per TOS) and let's take a look at what you have. Delete content, only show your tags.

BTW: Welcome to Webmasterworld!

meelosh

10:50 pm on May 17, 2010 (gmt 0)

Principiante I dont know anything about Microsoft publisher but do understand your problem all to well and is something i used to encounter in the early days.
assuming you have access to the sites css (as i said i dont know microsoft publisher) you would need to start your main div and body with something like this...and remember there are many answers to this type of question and you generally have to find what works for your specific needs...but something like this should do it..

body
{
text-align:center;
margin:0;
}

#maincontainer
{
position:relative;
text-align:center;
width:""px;
margin:0 auto;
}

above width being the width of your site.....so if you can trap all of the site in a div called maincontainer it should all center...i would also zero all padding and margins for * to be safe.
I also added position:relative should you need any positioning in and sub "divs" otherwise it can go.

hope this helps

Principiante

10:51 pm on May 17, 2010 (gmt 0)

Thanks for that, I admire your patience.

I hope that this is enough code, not sure what a tag is. This is only part of it, it goes on forever!

<html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"
xmlns="http://www.w3.org/TR/REC-html40">

<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">
<link rel=File-List href="index_files/filelist.xml">

<title>Home</title>
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Times New Roman";
panose-1:2 2 6 3 5 4 5 2 3 4;}
@font-face
{font-family:"Matura MT Script Capitals";
panose-1:3 2 8 2 6 6 2 7 2 2;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;}
p.MsoTagline, li.MsoTagline, div.MsoTagline
{margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
line-height:113%;
text-align:left;
font-family:"Times New Roman";
font-size:10.0pt;
color:black;
font-style:italic;
letter-spacing:1.0pt;}
p.MsoTitle3, li.MsoTitle3, div.MsoTitle3
{margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
line-height:113%;
text-align:left;
font-family:"Times New Roman";
font-size:16.0pt;
color:#666633;
font-weight:bold;
text-transform:uppercase;
letter-spacing:1.75pt;}
p.MsoAddress, li.MsoAddress, div.MsoAddress
{margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:0pt;
line-height:113%;
text-align:left;
font-family:"Times New Roman";
font-size:9.0pt;
color:black;}
p.MsoAccentText, li.MsoAccentText, div.MsoAccentText
{margin-right:0pt;
text-indent:0pt;
margin-top:0pt;
margin-bottom:3.0pt;
text-align:left;
font-family:"Times New Roman";
font-size:12.0pt;
color:black;
font-weight:bold;
letter-spacing:.75pt;}
ol
{margin-top:0in;
margin-bottom:0in;
margin-left:-2197in;}
ul
{margin-top:0in;
margin-bottom:0in;
margin-left:-2197in;}
@page
{size:8.-1980in 11.2192in;}

[edited by: tedster at 4:28 am (utc) on May 18, 2010]
[edit reason] disabled graphic smile faces [/edit]

tangor

11:11 pm on May 17, 2010 (gmt 0)

Ye gollies! (I had forgotten how verbose MSFP was...)

Top of page (after head, after body):
<div align="center">

bottom of page (before /html):
</div>

Works, but is not best way.

Principiante

11:30 pm on May 17, 2010 (gmt 0)

I tried it as you said, after <head> (there is no <body>, only <body link=navy vlink="#660099" style='margin:0' >).

It has now gone to the right of the screen.

Thanks for trying.

It is now 00.30 here in the UK and I am off to bed.

Thanks again.

tangor

11:36 pm on May 17, 2010 (gmt 0)

It will work. Your body with all the other goodies is still the body. Solution offered is brute force. Texas here and about to watch "Dancing with the Stars."

bill

4:55 am on May 18, 2010 (gmt 0)

Ye gollies! (I had forgotten how verbose MSFP was...)

He's not using FrontPage, this is Publisher. It's a program made for the print medium, not the web. Publisher is really the wrong tool to be using for making a webpage. FrontPage would have been a better alternative, but Microsoft stopped making it after 2003. Microsoft Expression Web would probably be the best current alternative for web page creation from MS today.

Principiante

1:17 pm on May 18, 2010 (gmt 0)

Thanks everyone for helping me.

The website is actually for my wife's business. She is a craftperson who designs and makes garments and accessories in pleated silk combined with leather or velvet.

The only further things I will be doing to the website will be updating it as she introduces new items. It is unlikely that I will be attempting another website (unless she makes me super rich and I can afford different software to redo hers!)

Thanks again for your help.

tangor

10:14 pm on May 18, 2010 (gmt 0)

@bill... thanks, missed that...but not by much...
@Principiante... do what wifie asks. Been there, done that! :)

Serious: did your align for monitor display get resolved?

Principiante

8:10 pm on May 19, 2010 (gmt 0)

No,Tangor, it puts it on the right.

The <body link ...............> bit is well down the page. The line after it is
<div style='position:absolute;width:7.-71in;height:13.1709in'>

Is that anything to do with how it appears?

tedster

8:35 pm on May 19, 2010 (gmt 0)

The <body> element should contain ALL your visible content. I'd suggest a basic HTML tutorial [w3schools.com] as soon as you can, or else you may spin your wheels, at best... or even do some real damage and throw away a lot of time.

Principiante

9:26 pm on May 19, 2010 (gmt 0)

I think I will leave it as it is.

As I stated earlier, the only things I will be doing is updating it as and when.

One bit of success I am basking in is that I left off some prices on one page and I edited it in Notepad and successfully uploaded it.

The phrase "quit while you are ahead" now comes to mind

Thanks again for your help.

Principiante

10:28 pm on May 19, 2010 (gmt 0)

Guess what, I didn't take my own advice and "quit when I was ahead" and finally I have fixed it.

Publisher creates web pages left justified.

To fix it you have to do the following:

Publish to your hard drive
Edit the htm file(s) and replace <head/> with

<head/><table border="0" cellpadding="0" cellspacing="2"
width="760"align="center"><tr><td>
(All on one line)

Then ftp the files to your ISP

I typed the problem into the Ask search engine and it came up with the solution in Tech-Archive

All I have to do now is edit 18 more pages and I will be done!

Not tonight, though. 11.25pm and time for bed.

bill

1:45 am on May 20, 2010 (gmt 0)

It's </head>
, not <head/>

I was going to suggest you validate your code [validator.w3.org], but that would probably bring up a lot more issues...

tangor

4:02 am on May 20, 2010 (gmt 0)

<head>content</head>

Not being picky.

Don't want to deal with head, deal with what is INSIDE <body>content</body>

<body and whatever is there...>
<div align="center>
content
</div>
</body>

Not best way, but is ONE way to get 'er done.

Principiante

7:52 pm on May 20, 2010 (gmt 0)

You are quite right, Bill, it is </head>.
Just a slip of the finger.
I copied the code from Tech-Archive when I edited the pages so I got it right. The fix is from a forum on that website as a lot of people were having the same problem, i.e. "Cannot center webpage design with Publisher 2007".
That is because that is the way Publisher creates websites, left justified.
What I forgot to say was that if the page width used is different than 760 pixels then you have to change the number accordingly.

I have edited the pages and uploaded to the Web and it is all working OK. Every page is in the centre of the screen and the wife is pleased so I have passed the main test.

Thanks to you and Tangor for the help.

I will now leave well alone!