Solved

Webpage centers correctly in Dreamweaver CS5 but not in webserver

Posted on 2010-11-18
9
528 Views
Last Modified: 2013-11-12
I'm having a bit of a problem making the webpage center correctly.  It looks fine in Dreamweaver, perfectly centered and all, but when I run the test server, it displays to the left.

I have tried various combinations of floating the divs, not floating the divs, adding padding, not adding padding, setting margins to auto, ect to no avail.

I'm sure it's something simple that I haven't taken into account.  

I've attached the pertainent CSS code.  I have a body div, a 'container' div which wraps the main content, and a 'main' div which contains the webpage content.
body {
	background-color: #fff;
	font-size: 62.5%;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-top: 0px; 
	padding: 0;
	
}

#container {
	height:auto;
	width: auto;
	
}

#main {
	margin-right:auto;
	margin-left:auto;
	width: 800px;
	border:1px solid silver;
	
}

Open in new window

0
Comment
Question by:brohjoe
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 34167857
Your 'container' will probably be left-aligned as you have it.  Below is the 'standard' way of centering content.  A <div> will occupy 100% of the width (of the container it is in) unless you tell it otherwise.
#container {
	margin-right:auto;
	margin-left:auto;
	width: 800px;
}

#main {
	border:1px solid silver;
}

Open in new window

0
 

Author Comment

by:brohjoe
ID: 34167995
Thanks DaveBaldwin for your quick response.   I just tried that and it doesn't work.  Perhaps the container should be larger than the main?
0
 

Author Comment

by:brohjoe
ID: 34168008
I made the container 1000px and the page is still left aligned.
0
NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 34168539
Then I need to see your complete code.  I have too many pages that are setup that way.
0
 

Author Comment

by:brohjoe
ID: 34168615
Ok.  Here you go.

I was thinking that perhaps there is some other CSS tag that is preventing this page from displaying correctly.  Anyway, Good Luck!
@charset "utf-8";

body {
	background-color: #fff;
	font-size: 62.5%;
	margin:0;
	padding:0;
	
}
body * {
	font-size: 100%;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
p {
	margin-bottom: 1.1em;
	margin-top: 0;
}

#container {
	margin:0 auto;
	text-align:left;
	width: 1000px;
	
}

<!--#main p.lastNode {
<!--	margin-bottom: 0;  
}
a:link img, a:visited img {
	border: none;
}
div.clearFloat {
	clear: both;
	font-size: 0;
	height: 0;
	line-height: 0px;
}
li.clearFloat {
	clear: both;
}
ul.symbolList {
	display: inline;
	float: left;
	list-style-type: none;
	padding: 0;
}
.AbsWrap {
	position: relative;
	width: 100%;
}
.rowWrap {
	width: 100%;
}
#main {
	margin:auto;
	width: 800px;
	border:1px solid silver;

}

#Logo {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 92px;
	margin-bottom: 0;
	width: 281px;
}
#MenuBar {
	margin-left: 0px;
	margin-top: 0px;
	height: 5px;
	margin-bottom: 0;
	width: 798px;
}
#home_r3_c1 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 25px;
	margin-bottom: 0;
	width: 5px;
}
#colwrap1 {
	float: left;
	margin-left: 0px;
	margin-top: 0px;
	width: 127px;
}
#btn_Home {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 23px;
	margin-bottom: 0;
	width: 127px;
}
#home_r4_c2 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 2px;
	margin-bottom: 0;
	width: 127px;
}
#home_r3_c5 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 25px;
	margin-bottom: 0;
	width: 6px;
}
#colwrap2 {
	float: left;
	margin-left: 0px;
	margin-top: 0px;
	width: 127px;
}
#btn_aboutUs {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 23px;
	margin-bottom: 0;
	width: 127px;
}
#home_r4_c6 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 2px;
	margin-bottom: 0;
	width: 127px;
}
#home_r3_c7 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 25px;
	margin-bottom: 0;
	width: 6px;
}
#colwrap3 {
	float: left;
	margin-left: 0px;
	margin-top: 0px;
	width: 127px;
}
#btn_services {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 23px;
	margin-bottom: 0;
	width: 127px;
}
#home_r4_c8 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 2px;
	margin-bottom: 0;
	width: 127px;
}
#home_r3_c10 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 25px;
	margin-bottom: 0;
	width: 6px;
}
#colwrap4 {
	float: left;
	margin-left: 0px;
	margin-top: 0px;
	width: 127px;
}
#btn_methodology {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 23px;
	margin-bottom: 0;
	width: 127px;
}
#home_r4_c11 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 2px;
	margin-bottom: 0;
	width: 127px;
}
#home_r3_c12 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 25px;
	margin-bottom: 0;
	width: 5px;
}
#colwrap5 {
	float: left;
	margin-left: 0px;
	margin-top: 0px;
	width: 127px;
}
#btn_coreValues {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 23px;
	margin-bottom: 0;
	width: 127px;
}
#home_r4_c13 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 2px;
	margin-bottom: 0;
	width: 127px;
}
#home_r3_c14 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 25px;
	margin-bottom: 0;
	width: 5px;
}
#colwrap6 {
	float: left;
	margin-left: 0px;
	margin-top: 0px;
	width: 127px;
}
#btn_contactUs {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 23px;
	margin-bottom: 0;
	width: 127px;
}
#home_r4_c15 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 2px;
	margin-bottom: 0;
	width: 127px;
}
#home_r3_c16 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 25px;
	margin-bottom: 0;
	width: 3px;
}
#headerImg {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 146px;
	margin-bottom: 0;
	width: 798px;
}
#HomeText {
	margin-left: 17px;
	margin-top: 8px;
	display: inline;
	float: left;
	height: 21px;
	margin-bottom: 0;
	width: 58px;
}
#bar {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 17px;
	margin-bottom: 0;
	width: 798px;
}
.textBoxMain {
	float:left;
	margin-top:5px;
	margin-bottom:5px;
	margin-left:30px;
	margin-right:15px;
	width:750px;
}
.textBoxMain p {
	text-align:left;
	color:#666;
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif;
}

.textBoxServiceLeft {
	float:left;
	margin:0;
	width:141;
	vertical-align:top;
}

.textBoxService {
	float:left;
	width:635px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 10px;
}

.textBoxService p {
	text-align:left;
	font-size:14px;
	color:#666;
	font-family:Arial, Helvetica, sans-serif;
	
}

.listWrap {
	float:left;
	margin:0;
	padding:0;
	width:200px;
}


ul.service {
	list-style:disc;
	padding:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666;
}

ul.service li {
	display:block
	list-style-position: inside;
}

.contactLowerWrap {
	float:left;

	margin:0
	padding:0;
	padding-bottom: 50px;
}

.contactLowerWrap p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666;
	text-align:left;
}

.contactLeft  {
	float:left;
	margin:0;
	padding:0;
	width:250px;
}

.contactRight  {
	float:left;
	margin:0;
	width:350px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 25;
	padding-left: 110px;
}


.textBoxContact {
	float:left;
	margin:0;
	padding-left: 20px;
	
}

.textBoxContact p {
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666;
	text-align:left;
}

.logoWrap {
	float:left;
	padding:0;
	margin:0;
	width:auto;
}

Open in new window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>HeaderHome</title>
	<link rel="stylesheet" type="text/css" href="home.css" media="all" />
	<!--[if IE]>
	<style type="text/css" media="all">.borderitem {border-style: solid;}</style>
	<![endif]-->
</head>

<body>

<div id="container">
<div id="main">
	<img src="Images/Logo.gif" id="Logo" alt="" />
    <img src="Images/HomePageQuote.png" />
		<div class="clearFloat"></div>
	<img src="Images/MenuBar.gif" id="MenuBar" alt="" />
		<div class="clearFloat"></div>
	<img src="Images/home_r3_c1.gif" id="home_r3_c1" alt="" />
		<div id="colwrap1">
		<a href="home.html">
			<img src="Images/btn_Home.gif" id="btn_Home" alt="home page" />
					</a>
		<img src="Images/home_r4_c2.gif" id="home_r4_c2" alt="" />
			</div>
	<img src="Images/home_r3_c5.gif" id="home_r3_c5" alt="" />
		<div id="colwrap2">
		<a href="aboutUs.html">
			<img src="Images/btn_aboutUs.gif" id="btn_aboutUs" alt="About Us" />
					</a>
		<img src="Images/home_r4_c6.gif" id="home_r4_c6" alt="" />
			</div>
	<img src="Images/home_r3_c7.gif" id="home_r3_c7" alt="" />
		<div id="colwrap3">
		<a href="services.html">
			<img src="Images/btn_services.gif" id="btn_services" alt="Services" />
					</a>
		<img src="Images/home_r4_c8.gif" id="home_r4_c8" alt="" />
			</div>
	<img src="Images/home_r3_c10.gif" id="home_r3_c10" alt="" />
		<div id="colwrap4">
		<a href="methodology.html">
			<img src="Images/btn_methodology.gif" id="btn_methodology" alt="Our Methodology" />
					</a>
		<img src="Images/home_r4_c11.gif" id="home_r4_c11" alt="" />
			</div>
	<img src="Images/home_r3_c12.gif" id="home_r3_c12" alt="" />
		<div id="colwrap5">
		<a href="coreValues.html">
			<img src="Images/btn_coreValues.gif" id="btn_coreValues" alt="Core Values" />
					</a>
		<img src="Images/home_r4_c13.gif" id="home_r4_c13" alt="" />
			</div>
	<img src="Images/home_r3_c14.gif" id="home_r3_c14" alt="" />
		<div id="colwrap6">
		<a href="contactUs.html">
			<img src="Images/btn_contactUs.gif" id="btn_contactUs" alt="Contact Us" />
					</a>
		<img src="Images/home_r4_c15.gif" id="home_r4_c15" alt="" />
			</div>
	<img src="Images/home_r3_c16.gif" id="home_r3_c16" alt="" />
		<div class="clearFloat"></div>
	<img src="Images/headerImg.png" id="headerImg" alt="" />
		<div class="clearFloat"></div>
	<img src="Images/HomeText.gif" id="HomeText" alt="" />
		<div class="clearFloat"></div>
	<img src="Images/bar.gif" id="bar" alt="" />
		<div class="clearFloat"></div>
         <div class="textBoxMain">
    <span><p>Strategic Point Consulting (SPC) takes pride in establishing a success oriented partnership with our clients -<br />
    first step is to develop a professional relationship. As you review this website or our materials, you will discover <br /> 
    that SPC was formed by a group of professional consultants who have come together to establish a group of <br />
    <strong><i>Process Improvement Specialists.</i></strong></p>
    <p>The SPC Methodology is rooted in PMI and Lean Six Sigma. Our implementation approach is unique in the fact<br />
     that we realize each client's environment is uniquely different - no two companies are the same and <u><i>one size <br />
     may not fit all!</i></u></p>
    <p>Armed with this knowledge, SPC values your time and the opportunity to speak with a prospective client to<br />
    begin an exchange of ideas and the exploratory process. Output from this meeting will determine whether<br />
    expectations can be met, establishing a win-win partnership.</p><br />
    <p>At SPC, we fully comprehend the need to deliver cost effective solutions in a timely manner. Our staff members<br />
    each possess an average of ten years consulting experience, working for Fortune 500 consulting firms,<br />
    managing successful projects for domestic and international clients.<br /></p>
    <p>Contact us today and discover how a partnership with SPC will benefit your organization.
    </p></span></div>
    <div class="clearFloat"></div>
    <div><img src="Images/Footer.png" width="800" height="38" alt="Footer" /></div>
</div > <!--end div main-->
</div> <!--end div container-->
</body>
</html>

Open in new window

0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 34168793
Although I don't have your images, it looks fine from here.  What browser and what size screen are you using?
0
 

Author Comment

by:brohjoe
ID: 34169062
I have two monitors; a 17inch and a 22 inch.  Are you viewing the files online?   Let me give you my development server address:  http://dev.techniqsystems.com/home.html.
0
 

Author Comment

by:brohjoe
ID: 34169098
I see what happened.  When I was saving the files, for some reason Dreamweaver wasn't saving the CSS file update.  I had to manually upload the .css file.  It's displaying fine now.  Thanks for your time anyway.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 34169480
You're welcome.  Dreamweaver does seem to have some quirks you have to watch out for.  Thanks for the points.
0

Featured Post

NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
About Wordpress website 3 118
How do I bind my model the view. 7 61
Creating a password protected individual webpage 1 1,215
free webina streaming recording software 5 104
Turn A Profile Picture Into A Cartoon Using Photoshop And Illustrator This tutorial will teach you how to make a cartoon style image out of a regular picture. I have tried to keep the tutorial as simple as possible. I used Adobe CS4 for this tuto…
This guide will walk you through the essential considerations and tech stack for building scalable websites. Know how to grow your business the smart way!
The purpose of this video is to demonstrate how to connect a WordPress website to Google Analytics. This will be demonstrated using a Windows 8 PC Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php :…
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question