Centering on different size monitors.

Aug 17th, 2008 at 04:28 PM
User 388456 Photo

Ronald Bolger
Registered User
7 posts

Here’s my dilemma, (beyond being very new to this) I have a standard 19� monitor and my home page looks just fine on it. My partner however uses a 21� wide screen. On her screen the page is to the left with a massive boarder to the right. This doesn’t seem to happening on the other areas of my site…forum, store, gallery etc, but they are not of my design, only the templates.

I have been reading and reading, looking for codes of some sort to correct this. I know it can be done I just can’t figure it out. I keep looking at liquid design articles but to no avail.
I really is a simple lay out with only 5 elements.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!-- Created with the CoffeeCup HTML Editor 2008 -->
<!-- http://www.coffeecup.com/ -->
<!-- Brewed on 8/16/2008 4:32:38 PM -->
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>
<body vLink=#800080 aLink=#0000ff link=#0000ff bgColor=#d9cbb1
><A href="http://ttydesigns.com/"><IMG
style="Z-INDEX: 100; LEFT: 232px; POSITION: absolute; TOP: 311px" height=38
src="home.jpg" width=74 border=0></A><A
href="http://ttydesigns.com/ttydesignsshoppe/"><IMG
style="Z-INDEX: 101; LEFT: 361px; POSITION: absolute; TOP: 313px" height=39
src="shoppe.jpg" width=83 border=0></A><A
href="http://ttydesigns.com/forum/"><IMG
style="Z-INDEX: 102; LEFT: 492px; POSITION: absolute; TOP: 335px" height=34
src="forum.jpg" width=70 border=0></A><A
href="http://ttydesigns.com/ttygallery/"><IMG
style="Z-INDEX: 103; LEFT: 604px; POSITION: absolute; TOP: 315px" height=45
src="gallery.jpg" width=81 border=0></A><IMG
height=1080 src="TTY-Designs-FrontPage.jpg"
width=990 align=absMiddle border=0>

</body>
</html>



Any thoughts on this problem would be appreciated.

The addy is http://ttydesigns.com/ if you’d care to take a look.

Thanks much,

Els
Aug 18th, 2008 at 02:53 AM
User 463058 Photo

Cary
Ambassador
1,086 posts
Online Now

You have a bad doctype at the top of your page, so it would break normal centering methods. The code below has the correct doctype.

I moved all the styling into the head of the html so it would be easier for you to move it into an external style sheet if necessary, as you may end up making more pages like this. This required giving your image links IDs.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- Created with the CoffeeCup HTML Editor 2008 -->
<!-- http://www.coffeecup.com/ -->
<!-- Brewed on 8/16/2008 4:32:38 PM -->
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
text-align:center; /* to center page in IE 5, if it matters */
}
#wrapper {
text-align:left; /* to change content back to normal left alignment */
margin:0 auto; /* top and bottom margins of "0". Left and right margins are equal. */
width:990px; /* Auto left and right margins don't work unless you specify the element's width. */
position:relative; /* This is needed so absolutely positioned elements move with the rest of the page as the left and right margins grow or shrink. */
}
#home {
LEFT:358px;
POSITION:absolute;
TOP:299px;
}
#shoppe {
LEFT:481px;
POSITION:absolute;
TOP:319px;
}
#gallery {
LEFT:595px;
POSITION:absolute;
TOP:296px;
}
#chat {
LEFT:223px;
POSITION:absolute;
TOP:298px;
}
img {
border:none; /* so you don't need border=0 on every image in the page. */
}
</style>
</head>
<body vlink="#800080" alink="#0000ff" link="#0000ff" bgcolor="#d9cbb1">
<div id="wrapper"><!-- this must contain all content on the page -->
<a href="http://ttydesigns.com/ttydesignsshoppe/"><img id="home" height="39" src="shoppe.jpg" width="83" alt="Shoppe"></a>
<a href="http://ttydesigns.com/forum/"><img id="shoppe" height="34" src="forum.jpg" width="70" alt="Forum"></a>
<a href="http://ttydesigns.com/ttygallery/"><img id="gallery" height="45" src="gallery.jpg" width="81" alt="Gallery"></a>
<a href="http://ttydesigns.com/"><img id="chat" height="38" src="home.jpg" width="74" alt="Home"></a>
<img height="1080" src="TTY-Designs-FrontPage.jpg" width="990" align="absMiddle">
</div><!-- end of #wrapper -->
</body>
</html>
Aug 18th, 2008 at 11:20 AM
User 388456 Photo

Ronald Bolger
Registered User
7 posts

Thanks so very much Cary.
It is now working exactly right.
I do so appreciate your taking the time to correct this for me and enlightening me along the way.
Also thank you for setting it up so I could easily make an external style sheet.

You have saved me many hours toil.

Els
Aug 18th, 2008 at 06:54 PM
User 463058 Photo

Cary
Ambassador
1,086 posts
Online Now

You're very welcome.
Nov 10th, 2008 at 12:39 PM
User 388456 Photo

Ronald Bolger
Registered User
7 posts

Okay, I'm back again with pretty much the same problem.
I am trying to learn how to do this but with only poor success.

Still trying to get things to center on different size monitors. I am so feeling stupid with this and I'm not using "newbie" as an excuse. Just dazed and confused.

If any one has any ideas or thoughts I'd sure appreciate it.

Thanks a bunch in advance.

Els

Here's the page.
http://ttydesigns.com/photobooksplus.html

Here's my html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- Created with the CoffeeCup HTML Editor 2008 -->
<!-- http://www.coffeecup.com/ -->
<!-- Brewed on 8/16/2008 4:32:38 PM -->

<head>
<title>Photo Books Plus</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body vlink="#800080" alink="#0000ff" link="#0000ff" background="tty-designs-BackgroundforPhotoBooksPlus copy.bmp" bgcolor="#ffffff" text="#000000">
<div id="wrapper"><!-- this must contain all content on the page -->
<IMG style="Z-INDEX: 100; LEFT: 356px; POSITION: absolute; TOP: 816px" height=75 src="clickherebutton.gif" width=400 align=left>
<IMG style="Z-INDEX: 104; LEFT: 655px; POSITION: absolute; TOP: 163px" height=60 src="contactbutton.gif" width=90>
<IMG style="Z-INDEX: 103; LEFT: 550px; POSITION: absolute; TOP: 165px" height=60 src="productbutton.gif" width=90>
<IMG style="Z-INDEX: 102; LEFT: 653px; POSITION: absolute; TOP: 97px" height=60 src="gettingstartedbutton.gif" width=90>
<IMG height=1200 src="buttonreadyfrontpage.gif" width=800 align=left>
<IMG style="Z-INDEX: 101; LEFT: 548px; POSITION: absolute; TOP: 98px" height=60 src="homebutton.gif" width=90>
</div><!-- end of #wrapper -->
</body>
</html>

Here's my external style sheet.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- Created with the CoffeeCup HTML Editor 2008 -->
<!-- http://www.coffeecup.com/ -->
<!-- Brewed on 8/16/2008 4:32:38 PM -->
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
text-align:center; /* to center page in IE 5, if it matters */
}
#wrapper {
text-align:left; /* to change content back to normal left alignment */
margin:0 auto; /* top and bottom margins of "0". Left and right margins are equal. */
width:990px; /* Auto left and right margins don't work unless you specify the element's width. */
position:relative; /* This is needed so absolutely positioned elements move with the rest of the page as the left and right margins grow or shrink. */
}
#clickherebutton {
LEFT:356px;
POSITION:absolute;
TOP:816px;
}
#contactbutton {
LEFT:655px;
POSITION:absolute;
TOP:163px;
}
#productbutton {
LEFT:550px;
POSITION:absolute;
TOP:165px;
}
#gettingstartedbutton {
LEFT:653px;
POSITION:absolute;
TOP:97px;
}
#homebutton {
LEFT:548px;
POSITION:absolute;
TOP:98px;
}
img {
border:none; /* so you don't need border=0 on every image in the page. */
}
</style>
Nov 10th, 2008 at 12:51 PM
User 355448 Photo

BillR
Ambassador
3,144 posts

Els,

This is a section of your code that Tidy thinks is bad:

<head>
<title>Photo Books Plus</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>

The end of your link tag has a /> where your doctype allows > and otherwise is closing the head.

That may not be the issue, but it can't hurt to make the change. Once I get a longer break from writing my term paper, I will take a closer look at the CSS.
Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family
Nov 10th, 2008 at 03:55 PM
User 388456 Photo

Ronald Bolger
Registered User
7 posts

Thanks Bill,
I made that change but to no avail.
Hopefully you will find something else when you get the chance.

Els
Nov 10th, 2008 at 09:40 PM
User 355448 Photo

BillR
Ambassador
3,144 posts

Els,

I just looked at your style sheet. You need to make some changes to that since it has lots of stuff in it that should not be there. What you posted is an internal style sheet that belongs in the head of your page. If you want to make that an external style sheet, remove all the HTML coding. Here is the W3School page that explains: http://www.w3schools.com/css/css_howto.asp

Try saving this as your style sheet.
body {
text-align:center; /* to center page in IE 5, if it matters */
}
#wrapper {
text-align:left; /* to change content back to normal left alignment */
margin:0 auto; /* top and bottom margins of "0". Left and right margins are equal. */
width:990px; /* Auto left and right margins don't work unless you specify the element's width. */
position:relative; /* This is needed so absolutely positioned elements move with the rest of the page as the left and right margins grow or shrink. */
}
#clickherebutton {
LEFT:356px;
POSITION:absolute;
TOP:816px;
}
#contactbutton {
LEFT:655px;
POSITION:absolute;
TOP:163px;
}
#productbutton {
LEFT:550px;
POSITION:absolute;
TOP:165px;
}
#gettingstartedbutton {
LEFT:653px;
POSITION:absolute;
TOP:97px;
}
#homebutton {
LEFT:548px;
POSITION:absolute;
TOP:98px;
}
img {
border:none; /* so you don't need border=0 on every image in the page. */
}

That will not likely fix your centering problem, but it will eliminate a lot of un-needed stuff the browser has to process.
Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family
Nov 10th, 2008 at 09:59 PM
User 462238 Photo

J. Storck
Registered User
144 posts

#wrapper {
text-align:left; /* to change content back to normal left alignment */

margin:0 auto; /* top and bottom margins of "0". Left and right margins are equal. */

width:990px; /* Auto left and right margins don't work unless you specify the

Try this for centering:

margin-right: auto;
margin-left: auto;
http://www.primetimebulldogs.com
http://www.motherlodebulldogclub.com
http://www.ncfbc.com
http://www.sacramentodogcouncil.com
http://www.picalo.com
Nov 10th, 2008 at 10:16 PM
User 355448 Photo

BillR
Ambassador
3,144 posts

els,

Here is your code all in one file. It will center. I added several lines of text and gave the wrapper a background cover to give me something to see while I was testing it. After the testing, I removed the text and background.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- Created with the CoffeeCup HTML Editor 2008 -->
<!-- http://www.coffeecup.com/ -->
<!-- Brewed on 8/16/2008 4:32:38 PM -->

<head>
<title>Photo Books Plus</title>
<link rel="stylesheet" type="text/css" href="style/style.css" >

<style type="text/css">
body {
text-align:center; /* to center page in IE 5, if it matters */
}
#wrapper {
text-align:left; /* to change content back to normal left alignment */
margin:0 auto; /* top and bottom margins of "0". Left and right margins are equal. */
width:990px; /* Auto left and right margins don't work unless you specify the element's width. */
position:relative; /* This is needed so absolutely positioned elements move with the rest of the page as the left and right margins grow or shrink. */
}
#clickherebutton {
LEFT:356px;
POSITION:absolute;
TOP:816px;
}
#contactbutton {
LEFT:655px;
POSITION:absolute;
TOP:163px;
}
#productbutton {
LEFT:550px;
POSITION:absolute;
TOP:165px;
}
#gettingstartedbutton {
LEFT:653px;
POSITION:absolute;
TOP:97px;
}
#homebutton {
LEFT:548px;
POSITION:absolute;
TOP:98px;
}
img {
border:none; /* so you don't need border=0 on every image in the page. */
}
</style>
</head>
<body vlink="#800080" alink="#0000ff" link="#0000ff" background="tty-designs-BackgroundforPhotoBooksPlus copy.bmp" bgcolor="#ffffff" text="#000000">
<div id="wrapper"><!-- this must contain all content on the page -->
<IMG style="Z-INDEX: 100; LEFT: 356px; POSITION: absolute; TOP: 816px" height=75 src="clickherebutton.gif" width=400 align=left>
<IMG style="Z-INDEX: 104; LEFT: 655px; POSITION: absolute; TOP: 163px" height=60 src="contactbutton.gif" width=90>
<IMG style="Z-INDEX: 103; LEFT: 550px; POSITION: absolute; TOP: 165px" height=60 src="productbutton.gif" width=90>
<IMG style="Z-INDEX: 102; LEFT: 653px; POSITION: absolute; TOP: 97px" height=60 src="gettingstartedbutton.gif" width=90>
<IMG height=1200 src="buttonreadyfrontpage.gif" width=800 align=left>
<IMG style="Z-INDEX: 101; LEFT: 548px; POSITION: absolute; TOP: 98px" height=60 src="homebutton.gif" width=90>
</div><!-- end of #wrapper -->
</body>
</html>

Hope this helps.
Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.