Why Is "body" All The Way To The Right?

Scotty13 · November 10, 2012

The table is at 100% / center. I’ve even tried right, left, and no change.

Im using Dreamweaver CS4 and when I save the file “Save As” it centers it, but when test in my browser, it’s to the right.

What is going on? Image attached.

Thanks,

Scotty

falkencreative · November 10, 2012

An image (thought you didn't actually attach an image) won't really help. We'd need to look at the HTML/CSS to see what's going on.

Keep in mind -- you can't always trust the Dreamweaver preview. Ultimately, what the browser shows is always right.

Scotty13 · November 10, 2012

<?php

include_once("scripts/checkuserlog.php");

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>About Us at My Global PNR</title>

<!--

.boldtext {

font-weight: bold;

font-size: 36px;

}

body

{

background-image:url('images/bgaboutus.jpg'); background-position:center top;

background-repeat:no-repeat;

}

-->

</style>

</head>

<body>

<?php include_once 'mgpheader_template.php'; ?>

<tr>

<tr>

<td width="100%"><p align="left">Welcome Aboard,

<p align="left">Won’t you take a few moments to make a reservation on the newest, most exciting new social network on the web? Enjoy the ease of navigating the site’s clever pages and share your love of the airline industry with other ticketed members? - Membership is free, so why not? </p>

</p>

<p align="left">We'll see you onboard,</p> </p>

</tr>

</table>

</div></td>

</tr>

</table>

<?php include_once "footer_template.php"; ?>

</body>

</html>

Andrea · November 10, 2012

We need to see the CSS, too - that's what tells things where to go and how to look.

Also, you might want to read up on some SEO and keyword topics, words like 'us', 'my' (twice), about, etc, are pretty darn useless.

Scotty13 · November 10, 2012

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

text-align: center;

}

.centerStuff{

text-align: center;

background-image: center;

}

.footercenterlinks {

text-align: center;

}

.bluetext {

color: #00F;

}

.greentext {

color: #0C0;

}

.alignRt .brightRed .answerquestion {

color: #F00;

font-size: 24px;

}

#locationForm tr td strong {

color: #00F;

}

#websiteForm tr td strong {

color: #00F;

}

#youtubeForm tr td strong {

color: #00F;

}

#bioForm tr td strong {

color: #00F;

}

#locationForm tr td strong {

font-size: 18px;

}

#websiteForm tr td strong {

font-size: 18px;

text-align: center;

}

#youtubeForm tr td strong {

font-size: 18px;

}

#bioForm tr td strong {

font-size: 19px;

}

#bioForm tr td strong {

font-size: 20px;

}

#youtubeForm tr td strong {

font-size: 20px;

}

#youtubeForm tr td strong {

font-size: 18px;

}

#locationForm tr td strong {

font-size: 20px;

font-weight: bold;

}

.Edityourresdataherefont {

font-size: 20px;

}

.fonteditres {

font-size: 19px;

}

.bluefonteditres {

color: #00F;

font-weight: bold;

}

.boldfonteditres {

font-weight: bold;

}

.boldfonteditres {

font-weight: bold;

}

.boldfonteditred {

font-weight: bold;

color: #00F;

font-size: 16px;

}

.boldfonteditres {

font-weight: bold;

color: #00F;

}

.boldfonteditres {

font-weight: bold;

font-size: 18px;

text-align: left;

}

.alignRt .boldfonteditres {

font-size: 16px;

}

.totheright {

text-align: right;

}

.totheright strong {

color: #00F;

}

.formFields {

background-color:#FFFFFF;

color:#000;

}

.smallertext {

font-size: 16px;

}

.smaller {

font-size: 12px;

}

.alignleft {

text-align: left;

}

#last_posts {

font-size: 10px;

line-height: 1.5;

text-align: left;

border: 1px solid black;

}

/* -------------------- What the entire dropdown backround will look like and its positioning ---------------------- */

ul {

margin:0;

padding:0;

}

.dc{

display:inline;

position: relative;

z-index: 0;

margin:0;

padding:0;

text-align:center;

}

.dc:hover{

background-color: transparent;

z-index: 50;

}

.dc ul{

position: absolute;

width:120px;

background-color: #999;

left: -1000px;

list-style-type:none;

visibility: hidden;

}

.dc:hover ul{

visibility: visible;

top: 13px;

left:-5px;

}

/* -------------------- What the list items will look like inside the dropdown ---------------------- */

.dc ul li{

margin:0;

padding:0;

background-color: #EBEBEB;

margin:1px;

}

.dc ul li:hover {

background-color: #FFF;

margin:1px;

}

/* -------------------- What the links look like inside the dropdown ---------------------- */

.dc ul li a {

display:block;

padding:4px;

font-size:12px;

}

.dc ul li a:link {

color: #333;

text-decoration: none;

}

.dc ul li a:visited {

text-decoration: none;

color: #000;

}

.dc ul li a:hover {

text-decoration: none;

color: #333;

}

.dc ul li a:active {

text-decoration: none;

color: #333;

}

.rightside {

text-align: right;

}

.instructionsleft {

text-align: left;

}

.style7 div .redtext strong {

color: #F00;

}

.style7 div {

font-weight: bold;

}

.emailcolorblue {

color: #00F;

}

#currentairlineForm tr .center strong {

color: #00F;

}

#previousairlineForm tr .center strong {

color: #00F;

}

#myfirstairlineForm tr .center strong {

color: #00F;

}

.left {

text-align: left;

}

#bioForm tr td {

font-weight: bold;

font-size: 20px;

}

.lgtext {

font-size: 16px;

}

.centertitle {

text-align: center;

}

.centerairlines {

text-align: center;

}

.centerworkstatus {

text-align: center;

}

.smtext50kbmax {

font-size: small;

}

.smller {

font-size: 18px;

}

.small50kbmax {

font-size: 12px;

}

#websiteForm tr td strong {

text-align: left;

}

#locationForm tr td div .boldlocation {

color: #00F;

}

#locationForm tr td div .boldlocation {

font-weight: bold;

}

#locationForm tr td div .boldlocation {

font-size: 16px;

}

#locationForm tr td div .boldlocation {

font-size: 18px;

}

.search_results a:link {

text-decoration: none;

}

Andrea · November 11, 2012

I uploaded your code and gave your outer table a border, just so we could better see where things are, and your table is centered: See Here

(Your includes won't show, since I don't have the files uploaded)

HOWEVER - there is absolutely no good reason to use tables for this.

Here, I've gotten rid of the tables and used proper CSS positioning:

You should also not use empty p tags to create space - use your CSS and add margins or padding.

In your CSS, there's no point in adding any margins to your body - the body is pretty much the monitor space you see. All you could do is add padding, which would move in anything inside your body. And don't text-align center anything in the body, unless you really want all your text centered.

To center your content, I've created a division called 'wrapper' (you could call it Elvis_Presley - the name is irrelevant, but it's helpful to use descriptive names) and in my CSS, I'm giving the wrapper a width and centering it via a margin of auto, created a division for your main and right content, and floated both of those. You'll now have to add a clear: both to whatever division follows the floats, and there you go:

This is just the basic positioning, detail depends on what you want things to look like. Also note that I used the h2 tag for your title, assuming the h1 is better spend in whatever portion is in your include.

Sign In

Why Is "body" All The Way To The Right?

Recommended Posts

Scotty13

Link to comment

Share on other sites

falkencreative

Link to comment

Share on other sites

Scotty13

Link to comment

Share on other sites

Andrea

Link to comment

Share on other sites

Scotty13

Link to comment

Share on other sites

Andrea

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Store

Support