20 replies [Last post]
suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 34 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Hi,
The url to my site is www.trecall.com.
The site becomes un-centered and messed up when viewed on a screen smaller or larger than the one I designed it on. How do I make it look centered regardless of screen size?

Any suggestions would be greatly appreciated!

//mod edit: link fixed --gt

Vashin
Vashin's picture
Offline
Regular
Brisbane, Australia
Last seen: 11 years 20 weeks ago
Brisbane, Australia
Timezone: GMT+10
Joined: 2011-05-07
Posts: 48
Points: 48

Needs a containing div

Friendly advice: In future please supply the page HTML and CSS styles in case your problem is larger than meets the eye. It's better to give us too much code than too little.

Relating to your problem, you need to put the website in a containing div to keep everything centered. Measure up the width of all your elements combined and then apply the following code.

<div id="container">

Place the above code under the opening body tag, and place a closing div tag for the container before the closing body tag but after all your other tags.

Now, apply the following CSS.

#container {
width: 800px; /* Default; change to your desired width. */
margin: 0px auto; /*0px top margin, automatic right margin, 0px bottom margin, automatic left margin. */
}

It's the automatic margins on the left and right that center the website.

Please read the rules of CSSCreator before your next post. Following the rules and posting within the guidelines will enable members to assist you much more accurately than if you don't which not only saves us time, but gives you your answers faster.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 34 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

thanks for your reply. I got

thanks for your reply. I got it centered in FF. In IE, however, no matter what I do, it does not get centered.
It's actually just the main animated menu that I am trying to center, not the whole site. (Which was already centered.) No matter what I do, IE will not show the main animated menu in the center. Can you take a look at my code to see where I may have gone wrong to cause this?
Thanks a lot. (Is this where I'm supposed to post the code??)

HTML DOC CODE:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Total Recall Solutions</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
  <script type="text/javascript" src="js/jquery-1.4.2.js" ></script>
  <script type="text/javascript" src="js/cufon-yui.js"></script>
  <script type="text/javascript" src="js/cufon-replace.js"></script>  
  		<script type="text/javascript" src="js/Bebas_400.font.js"></script>
  <script type="text/javascript" src="js/collapsing-site-navigation.js"></script>
  <!--[if IE 7]>
  <link rel="stylesheet"href="css/ie7.css"type="text/css"media="all" />
  <![endif]-->
  <!--[if IE 8]>
  <link rel="stylesheet"href="css/ie8.css"type="text/css"media="all" />
  <![endif]-->
  <!--[if lt IE 9]>
    <script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
  	<script type="text/javascript" src="js/html5.js"></script>
  <![endif]-->
 
</head>
 
<body id="page1">
<div id="container">
<div class="bg1">
		<div class="main">
			<!--header -->
			<header>
				<h1><a href="index.html"id="logo"></a><span id="slogan">We keep them coming back</span></h1>
				<nav>
					<ul id="top_nav">
                    <li><a href="index.html">Home</a></li>
						<li><a href="delay_notifications.html">Delay Notifications</a></li>
						<li><a href="smart_pay.html">Smart Pay</a></li>
						<li><a href="patient_feedback.html">Patient Feedback</a></li>
                        <li><a href="about_us.html">About Us</a></li>
                        <li><a href="contact_us.html">Contact Us</a></li>
					</ul>
				</nav>
 
			</header>
		</div>
</div>
 
			<!--header end-->
			<!--content -->
<!--<div class="bg_bot2">-->
<div class="bg2">
<div class="bg_bot">
<div class="bg_top">
 
		<div class="main">
			<section id="content">
 
 
				<div id="cc_menu"class="cc_menu">
                	<div class="cc_item" style="z-index:6;margin-right:14px;">
						<div class="cc_content_1">
						<img src="images/img1.jpg" alt="" />
						<span class="cc_title">Patient <br /> Communication Center</span>
						<span class="cc_submenu">
						<span>Patient Communication Center</span>						</span></div>
					</div>
					<div class="cc_item" style="z-index:5;">
						<div class="cc_content_6">
						<img src="images/img2.jpg" alt="" />
						<span class="cc_title">Grow <br />Your Practice</span>
						<span class="cc_submenu">
						<span>Grow Your Practice</span>						</span></div>
					</div>
					<div class="cc_item" style="z-index:4;">
						<div class="cc_content_2"><img src="images/img3.jpg" alt="" />
						<span style="padding:14px 0px 14px 0px" class="cc_title">Online Scheduler</span>
						<span class="cc_submenu">
						<span>Online Scheduler</span>						</span></div>
					</div>
					<div class="cc_item" style="z-index:3;">
						<div class="cc_content_3"><img src="images/img4.jpg" alt="" />
						<span style="padding:14px 0px 14px 0px" class="cc_title">Automatic Reminders</span>
						<span class="cc_submenu">
					    <span>Appointment Reminders</span>						</span></div>
					</div>
					<div class="cc_item" style="z-index:2;">
						<div class="cc_content_4"><img src="images/img5.jpg" alt="" />
						<span style="padding:14px 0px 14px 0px" class="cc_title">Mobile Access</span>
						<span class="cc_submenu">
					    <span>Mobile Access</span>						</span></div>
					</div>
					<div class="cc_item no_pad" style="z-index:1;">
						<div class="cc_content_5"><img src="images/img6.jpg" alt="" />
						<span class="cc_title">S.E.O.<br/> <span style="font-size:12px">we'll get you to the top</span></span>
						<span class="cc_submenu">
						<span>S.E.O. <br /><span style="font-size:12px">We'll get you to the top</span></span>						</span></div>
                    </div>
 
 
					<div id="cc_content" class="cc_content">
 
						<section class="cc_content_1">
							<div class="line1">
								<article class="pcc">
 
									<p>Have you ever wondered how you would contact your patients should an emergency arise? As each crucial minute ticks by, how would you go about tracking down your patients to cancel their appointments?
With TOTAL RECALL SOLUTIONS you’ll never have to ponder such a question. In just a few clicks you’ll be able to quickly and efficiently notify your patients of any last minute changes or cancellations.</p>
<p>The Patient Communication Center allows our doctors to take their patient care to the next level. Now, at the click of a button, Total Recall Solutions allows providers to check in and see how patients are feeling post- op and provide updates with important after-care information detailing the proper protocol and hygiene necessary to help the patient keep their treatment on track. You can also utilize our system to send customized holiday and birthday e-cards to let your patients know that you are thinking about them.</p>
<p>Now you will be able to keep track of who confirmed and who still needs to confirm their appointment. Total Recall Solutions’ Direct Messaging allows office staff to send customized messages to an individual patient or a specific group. Our system will automatically generate a “To Do List” to help organize the following real time events: <br />
• Notifications for all appointments booked online<br />
• Notifications for confirmed appointments<br />
• Patients who needs an additional reminder<br /> 
• Patients who cancelled and needs to reschedule<br />
• Patients who need their inquiry responded to</p>
							 </article>
                             <article class="col2 pad_left2">
                                     <h3>Recall Wizard</h3>
<img class="hat" src="images/hat.jpg" />
<p class="hatPara">
 
Sit back, relax and let our Recall Wizard do just that, recall your patients with new found ease. Developed to be a flawless transition from your current practice management software, Total Recall Solutions’ Recall Wizard will redefine the way your practice communicates with your patients. Whether it’s a hard to reach patient, or one who has no continuing care appointment scheduled, our wizard effortlessly allows you to contact any patient via email, SMS, or by phone. Our messages, which are completely customizable, can be configured to be sent out at the time of you desire to help you achieve optimal recall results.</p>
                          </article>
						</div>
                         <a class="back"href="index.html">Home</a>					</section>
 
                        <section class="cc_content_6">
							<div class="line1">
								<article class="signintro">
									<img class="sign" src="images/sign.jpg" />
									<p class="signPara">You want to increase your client base and we’re here to help.
At Total Recall Solutions, we’ve developed some innovative features that are sure to put smiles on your clients’ faces. Now you can instantaneously email or text message your patients, potential patients and referring physicians, for just about anything. With just the click of a button you’ll be able to alert all those in your system of promotional treatments and new procedures, or to simply send a holiday greetings.</p>
<p class="signParaThree">Whether you decide to use our professionally designed e-mail templates, or customize your own, your patients will receive up-to-date information that will keep them in “the know” about you and your practice.</p>
					          </article>
 
                                <article class="col2 pad_left2">
 
                                <h3 class="social">Social Media</h3>
 
									<p class="pad_bot1">
                                    <img class="network" src="images/network.jpg" />
Social Media has revolutionized the way the world communicates, bringing new meaning to mass-marketing. And Total Recall Solutions wants YOU to capitalize on its potential.
At Total Recall Solutions we’ve brought the alluring world of social media to your fingertips with attractive and easy to use features that will get your practice noticed and encourage readers to share it with their social network. With Total Recall Solutions your social media buttons are automatically included in all your emails and are similarly embedded in all your SMS links. We also provide specialized tools and platforms to help you increase communications that foster brand awareness and better customer service.
So put the relatively inexpensive world of social media to work for you, and watch your practice flourish.</p>
                              </article>
                               <a class="backGrow"href="index.html">Home</a>							</div>
						</section>
 
 
                        <section class="cc_content_2">
							<div class="line2">
								<article class="ols">
                               <p>The internet has opened up a wealth of opportunities and services. How many times a day do people “point and click” from the comfort of their home, office or anywhere for that matter, as he quickly and efficiently accomplishes many daily tasks? In just a few clicks bills get paid, lunch gets ordered, and a vacation gets planned…. All done at the time and place most convenient to the consumer.</p>
<p>Why should the rapidly growing and sophisticated dental industry be left behind?</p>
<p>Why not offer the same 24/7 convenience of the internet to your patients?</p>
<p>With TOTAL RECALL SOLUTIONS’  ONLINE SCHEDULING SYSTEM  you can set your practice apart by allowing your patients to easily book their appointments 24 hours a day 7 days a week using the online device of their choice. </p>
<p>And your staff will love it too! Monday mornings will no longer be stressful days as office staff scurry about trying to catch-up on weekend calls and cancellations.  With TOTAL RECALL SOLUTIONS’ ONLINE SCHEDULING SYSTEM patients will have rescheduled their own appointments and wait-listed patients will be notified- all before your secretary even arrives. Leaving your staff readily available to greet your patients with the attention and smile they deserve.</p>
<a href="features.html" class="button read_more"><span>Features</span></a>								</article>
 
                                <article class="col1 pad_left2">
						                <div class="ben">
										<a href="Benefits.html" class="button read_more"><span>Benefits</span></a>                                        </div>
						        </article>
							<a class="backGrow"href="index.html">Home</a>                            </div>
						</section>
 
 
                        <section class="cc_content_3">
							<div class="line1">
								<article class="col1 pad_left1">
                                <p class="ar">Today, as usual, the office staff has been extremely busy. Sue’s  has been calling the office all morning to be squeezed in and Mary just called to cancel at the last minute, and James, well James didn’t call at all….. apparently he totally forgot about his appointment! We don’t have to tell you the stories… we’re sure that YOU could write the book about who didn’t show up for their appointment and why they didn’t. That’s why managing your office appointment reminders is crucial, both for your practices’ productivity and profitability. You need to keep your chairs filled in order to maximize your bottom line. Unfortunately, this key component is also an extremely time consuming and often tedious job for your office staff. Until now…</p>
								</article>
 
								<article class="col2 pad_left2">
 
									<a href="read.html" class="button read_more"><span>Read More</span></a>								</article>
                                <a class="backGrow"href="index.html">Home</a>							</div>
						</section>
 
 
                        <section class="cc_content_4">
							<div class="line2">
								<article class="col2 pad_left1">
                                <p class="mobile">Using Total Recall Solutions, our doctors can remotely access all the information they need to determine how their practice is functioning. Whether you’re on vacation, out on an errand or at a convention, you’ll always have your finger on the pulse of your practice.</p>
<p class="mobile">Your office staff will also benefit from our mobile accessibility. Turn the tedious job of patient recall into a simple task performed by a few clicks on the train ride home.</p>
<p class="mobile">Using our iPhone, iPad or Android app, or any other mobile device, you and your staff will have instant access to all the features we offer.</p>
								</article>
                                <a class="backGrow"href="index.html">Home</a>							</div>
						</section>
 
                                              <section class="cc_content_5">
							                          <div class="line1">
								                    <article class="col1 pad_left1"> 
									<h2 class="coming">coming soon</h2>
								                     </article> 
                                                     <a class="backGrow"href="index.html">Home</a>							                             </div>
						                     </section> 
				</div>
 
 
		</section>
		</div>
 </div>
 </div>
 
 
</div>
 
 
 </div>
			<!--content end-->
			<!--footer -->
<div class="bg3">
		<div class="main">
			<footer>
				<!--<span id="cc_back" class="cc_back">back to menu</span>-->
				<!--<span id="cc_back" class="cc_back_page">back to page</span>-->
				<span class="right"><!-- {%FOOTER_LINK} --></span>
				Total Recall Solutions &copy; 2011  &nbsp;|&nbsp;  <a id="privacy">Design by Suave Design</a>
			</footer>
			<!--footer end-->
		</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
</div>
</body>
</html>

CSS CODE:

/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }
 
/* Left & Right alignment */
 
.left { float:left;}
.right { float:right;}
.wrapper {width:100%; overflow:hidden;/*border:1px solid green;*/}
 
/* Global properties ======================================================== */
 
body{ background:#fff; border:0; font:12px Arial, Helvetica, sans-serif; color:#fff; line-height:18px; /*border:2px solid red;*/}
 
.css3{border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; box-shadow: 0 0 4px rgba(0, 0, 0, .4); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .4); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .4); behavior: url(js/PIE.htc); position: relative;}
.clear{
	clear:both;
}
 
/* Global Structure ============================================================= */
 
.main {	width: /*1280px;*/125em;/*2000*/ /*border:4px solid yellow;*/}
 
#conatiner{width:100%;margin:0 auto;border:1px solid red;}
 
.bg1{ border-bottom:1px solid #eaeaea; margin-bottom:14px;}
.bg2{ background:url(../images/bg.gif) top center repeat; padding:15px 0 15px 0; border:1px solid gray; margin-top:-20px;}
/*.bg_top{ background:url(../images/bg_shadow_top.png) top repeat-x;}*/
/*.bg_bot{ background:url(../images/bg_shadow_bot.png) bottom repeat-x;}*/
.bg_bot2{ background:url(../images/bg_bot.gif) bottom repeat-x; padding-bottom:2px;/*border:1px solid red;*/}
.bg3{ border-top:1px solid #eaeaea; margin-top:14px;}
 
 
 
/* ============================= main layout ====================== */
 
a{ color:#fff; text-decoration: underline; outline:none}
a:hover{ text-decoration: none}
h1{ float:left; padding:67px 0 0 26px;}
h2{ font-size:36px; color:#article; line-height:44px; padding:0 0 23px 0; text-transform:uppercase;}
p{ padding-bottom:18px;}
 
/* ============================= header ====================== */
header{/* width:100%;/*1300px;*1024%*/ overflow:hidden; padding-bottom:17px; padding-right:12px; margin-left:165px;/*165*//*border:3px solid red;*/}
 
#logo{ display:block; background:url(../images/tr_logo_home.gif) no-repeat; width:/*218px;*/14.925em; height:81px; text-indent:-5000px; padding-bottom:72px; margin-top:-60px;}
#slogan{ font-size:24px; color:#ea803e; line-height:38px; display:block; text-transform:uppercase; margin-left:-4px; word-spacing:4px; margin-top:-5px;}
 
#top_nav{ float:right; padding-top:107px; margin-right:121px;/*75*//*border:1px solid red;*/}
#top_nav li{ float:left; background:url(../images/line_top.gif) no-repeat #ea803e; padding-left:1px;}
#top_nav li a{ display:block; font:13px "Trebuchet MS", Arial, Helvetica, sans-serif; color:black; line-height:51px; text-decoration:none; padding:0 27px; font-weight:bold;}
#top_nav li a:hover{ color:white; background:gray; /*orange;*/}
 
/* ============================= content ====================== */
 
#content{ height:591px; width:100%; overflow:hidden; /*position:relative;*//*border:4px solid orange;*/margin-right:-200px;}
 
.pad_left1{ padding-left:46px; /*border:2px solid red;*/ width:/*800px;*/50em;}
.pcc{ padding-left:46px; /*border:2px solid red;*/ width:/*800px;*/55em;margin-top:-20px;}
.signintro{padding-left:-16px; /*border:2px solid red;*/margin-left:-200px; width:/*850px;*/61.125em;margin-top:-30px;}
.signPara{float:left; /*border:1px solid blue;*/ width:/*250px;*/18.125em; padding-right:6px; margin-left:240px;margin-top:-250px;}
.signParaThree{float:left; /*border:1px solid yellow;*/ width:/*620px;*/38.75em; padding-right:6px;margin-top:0px;padding-left:-150px;margin-left:240px;}
.pad_left2{ padding-left:-36px; /*border:4px solid green;*/ width:/*700px;*/ 49.75em;margin-top:-12px;  margin-left:45px;} 
.marg_right1{ margin-right:20px;/*border:4px solid yellow;*/}
.marg_right2{ margin-right:30px;}
.pad_bot1{ padding-bottom:38px; /*border:2px solid orange;*/ width:/*615px;*/38.438em; float:left;margin-top:15px;}
.hatPara{padding-bottom:38px; /*border:2px solid orange;*/ width:/*612px;*/43.5em; float:left;margin-top:-155px;}
.benWrapper{ padding-bottom:38px;/*border:2px solid orange;*/ width:/*505px;*/ 31.563em;float:left;margin-top:90px;/*margin-left:-100px;*/}
.pad_bot2{ padding-bottom:18px; /*border:2px solid red;*/}
.ols{/*border:1px solid red;*/ width:/*700px;*/43.75em; padding-left:-40px;/*-40*/margin-left:40px;/*40*/}
.ar{width:/*590px;*/42.875em; margin-bottom:22px; margin-top:25px; margin-left:35px;}
.mobile{width:580px; /*margin-top:30px;*/ margin-left:50px;}
.ben{/*border:1px solid red;*/margin-top:16px; margin-left:-4px;}
.featurePara{margin-top:15px; /*float:left;*/ width:/*590px;*/36.875em; text-transform:none; font-size:14px; /*border:1px solid red;*/ /*margin-left:300px;*/}
.featureParaOne{/*margin-top:-200px;*/ /*float:left;*/ width:/*300px;*/20.75em; text-transform:none; font-size:14px; /*border:1px solid red;*/margin-left:250px;margin-bottom:20px;}
.featuresPara{margin-top:15px; /*float:left;*/ width:/*500px;*/31.25em; text-transform:none; font-size:14px; /*border:1px solid red;*/}
.benefitsPara{margin-top:15px; /*float:left;*/ width:/*600px;*/41.5em; text-transform:none; font-size:14px; /*border:1px solid red;*/}
.delay{margin-left:200px; magin-top:300px; /*border:1px solid red;*/ padding-top:20px;margin-bottom:0px;}
.delayPara{width:/*280px;*/21.5em; margin-right:300px; float:right; margin-top:30px; line-height:25px;font-size:14px;margin-bottom:-30px; /*border:1px solid green;*/padding-bottom:0px;}
.delayParatwo{width:/*600px;*/37.5em; margin-left:700px; float:left; margin-top:10px; line-height:25px;font-size:14px;}
.smartPara{width:/*530px;*/33.125em; margin-left:700px; float:left; /*margin-top:40px;*/ line-height:25px; font-size:14px;/*border:1px solid red;*/}
.smartPara2{width:/*400px;*/25em; margin-left:700px; float:left; margin-top:-130px; line-height:25px;font-size:14px;}
.smartWrapper{margin-top:40px;}
.contactWrapper{margin-left:600px; /*float:left;*/}
.featuresWrapper{margin-left:300px; /*border:1px solid green;*/ margin-top:-180px;}
.contactHeader{margin-left:450px; magin-top:300px; /*border:1px solid red;*/ padding-top:20px;margin-bottom:0px;}
.featuresWrapperTwo{margin-left:100px; margin-right:190px;/*border:1px solid green;*/ margin-top:-500px;float:right;width:/*400px;*/28em;}
.featureWrapper{margin-left:300px; /*border:1px solid green;*/margin-top:5px; width:/*400px;*/28em;}
.benefitsWrapper{margin-left:150px; margin-top:50px; /*border:1px solid red;*/}
.readWrapper{width:/*400px;*/25em;/*border:1px solid red;*/margin-left:300px;margin-top:-530px;}
.readPara{width:/*500px;*/ 35.25em;text-transform:none;font-size:14px;margin-top:20px;/*border:1px solid red;*/}
.tabs{background:#171717;padding:0px -300px 300px -300px; /*border:1px solid red;*/}
.delayWrapper{margin-top:-50px; /*border:1px solid red;*/margin-left:-350px;}
.bulbPara{width:/*330px;*/20.625em; margin-left:1090px; /*float:left;*/ /*margin-top:40px;*/ line-height:25px; font-size:14px;/*border:1px solid red;*/margin-top:-480px;}
.bulbWrapper{/*border:1px solid red;*/margin-left:-300px;}
.smart{margin-left:700px; magin-top:300px; /*border:1px solid red;*/ padding-top:20px;margin-bottom:0px;}
.aboutPara{width:/*330px;*/20.625em;margin-left:975px; /*float:left; */margin-top:-345px; line-height:25px; font-size:14px;/*border:1px solid red;*/}
.about{margin-left:500px; magin-top:300px; /*border:1px solid red;*/ padding-top:20px;margin-bottom:0px;}
.patientWrapper{margin-top:10px;/*border:1px solid red;*/margin-left:0px;}
.patient{margin-left:400px; magin-top:300px; /*border:1px solid red;*/ padding-top:20px;margin-bottom:0px;}
.feedbackPara{width:/*680px;*/49.5em; margin-left:400px; float:left; /*margin-top:40px;*/ line-height:25px; font-size:14px;/*border:1px solid red;*/}
.benefitsHeader{margin-left:10px; /*border:1px solid red;*/ padding-top:20px;margin-bottom:0px;}
.readHeader{margin-left:10px; /*border:1px solid red;*/ padding-top:20px;margin-bottom:0px;font-size:26px;}
.portalHeader{text-transform:uppercase; margin-top:-4px; background:1px solid red;margin-bottom:8px;}
 
#menu {}
#menu li {}
#menu li a{}
#menu li a:hover, #menu #menu_active a{ }
 
.cc_menu{width:/*1290px;*//*99.625em;*/100%;/*text-align:center;*/ margin-left:/*150px;*/11%;/*12em;*//*height:591px;*/position: absolute;	font-size:14px;text-transform:uppercase;color:#fff; overflow:hidden;/*border:3px solid green;*/}
.cc_item{	text-align:center;	width:/*210px;*//*195*/15.125em;	height:591px;	float:left;	background:#171717;	position:relative; margin-right:4px;}
.no_pad{ margin-right:0px;}
span.cc_title{	color:#fff; line-height:28px;	font-size:17px;	top:224px;	left:14px;	position:absolute;	background:#272727;	width:/*177px;*//*167*/10.3763em;	display:block;	z-index:11;}
.cc_item div{ cursor:pointer}
.cc_submenu { display:block;width:180px;/*11.188em;*//*163*/	margin:0;	padding:0;	height:0px; /*increase to 200px to slide up*/	overflow:hidden;	text-align:left;	position:absolute;	left:0px;	bottom:-32px; background:url(../images/bg_opacity.png) repeat;	z-index:13; /*border:2px solid blue;*/}
.cc_submenu {	color:#fff; font-size:30px;	cursor:pointer;	padding:16px; line-height:44px; text-transform:uppercase}
.cc_submenu  span{ display:block; font-size:20px; color:#c5c5c5; line-height:26px; padding-top:8px;}
.cc_item img{	position:absolute;	width:/*210px;*/15.125em; /*195*/	height:591px;	top:-591px;	left:0px;}
.cc_content{	width:/*920px;*/65.7em;	height:591px;	position:absolute;	left:-800px;	background:#171717;	overflow:hidden; /*border:3px solid purple;*/ margin-left:100px;}
.cc_content section{ width:100%; text-transform:none;font-size:14px; line-height:18px; display:none; /*border:1px solid red;*/}
.cc_content p{}
span.cc_back, .cc_back_page{	position:absolute; top:11px;	right:-140px;	cursor:pointer; font:14px Arial, Helvetica, sans-serif; color:#171717; line-height:35px; text-transform:uppercase; padding:0 18px; background:#e8773c;}
h3{color:#ea803e; margin-bottom:-18px; /*border:1px solid red;*/margin-left:0px;margin-top:12px;}
.hat{float:right; /*border:1px solid red;*/ padding-right:8px; margin-top:-47px; margin-right:-133px; margin-bottom:0px;}
.network{float:right; /*border:1px solid red;*/ padding-right:8px; margin-top:3px; margin-right:-133px; margin-bottom:0px;}
.social{font-size:19px; text-transform:uppercase; margin-top:15px; margin-left:-3px;}
.accurate{text-transform:uppercase; margin-top:-4px; background:1px solid red;margin-bottom:-12px;}
.sign{float:right; padding-left:3px;margin-top:-20;}
.coming{margin-left:40px; margin-top:20px;}
.patient{text-transform:uppercase; margin-top:-4px;margin-bottom:0px;}
.corridor{float:left; padding-top:4px; padding-right:6px; margin-bottom:-5px;}
.bulbs{margin-left:500px;margin-top:-50px; /*border:1px solid red;*/ /*padding-bottom:30px;float:left;*/}
.contact{text-transform:uppercase; font-size:22px;}
.contactSpan{font-size:19px; line height:30px;}
.contactinfo{margin-top:10px; font-size:20px;}
.employees{/*float:left;*/margin-left:-460px;margin-top:20px;/*border:1px solid red;*/}
.contacttwo{/*margin-bottom:-410px;*/ margin-top:10px; font-size:20px; border:2px solid green; margin-left:200px;}
.bene{float:left; padding-right:10px; margin-top:-15px;}
.tools{/*float:left;*/ /*padding-right:8px;*/margin-left:190px;margin-top:100px;}
.dsign{/*float:left;*/ /*border:1px solid red;*/ padding-right:0px; margin-top:30px; margin-left:550px; margin-bottom:-6px;margin-right:-5px;}
.bulb{padding-right:8px;margin-top:-7px; margin-left:700px; margin-bottom:-6px;}
.faces{float:left; /*border:1px solid red;*/ padding-right:28px; margin-top:-37px; margin-right:-12px; margin-bottom:0px;margin-top:8px;}
 
.line1, .line2, .cont{ margin:44px 0;height:503px;}
 
/*.line1{ background:url(../images/line_ver1.gif) 478px 0 repeat-y; }
.line2{ background:url(../images/line_ver1.gif) 304px 0 repeat-y;}*/
.back{/*margin-right:-185px;*/ background:#e8773c;/*border:2px solid blue;*/text-decoration:none;padding:4px 15px 4px 15px;text-transform:uppercase;font-weight:bold;margin-top:450px;position:absolute;top:110px;left:835px;}
.backGrow{/*margin-right:-185px;*/position:absolute;top:110px;left:835px; background:#e8773c;/*border:2px solid blue;*/text-decoration:none;padding:4px 15px 4px 15px;text-transform:uppercase;font-weight:bold;margin-top:450px;}
.backFeatures{/*margin-right:-185px;*/position:absolute;top:340px;left:1315px; background:#e8773c;/*border:2px solid blue;*/text-decoration:none;padding:4px 15px 4px 15px;text-transform:uppercase;font-weight:bold;margin-top:450px;}
.button{ display:inline-block; background:url(../images/bg_button.gif) top repeat-x;border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; position:relative;behavior: url(js/PIE.htc); font-weight:bold; color:#fff; text-decoration:none; line-height:20px; height:22px; /*border:1px solid red;*/ margin-left:240px;}
.benefits{display:inline-block; background:url(../images/bg_button.gif) top repeat-x;border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; position:relative;behavior: url(js/PIE.htc); font-weight:bold; color:#fff; text-decoration:none; line-height:20px; height:22px; /*border:1px solid red;*/ margin-left:237px; margin-top:20px;}
.button span{ background:url(../images/marker_1.gif) 10px 9px no-repeat; display:block; padding:0 13px 0 20px}
.benefits span{background:url(../images/marker_1.gif) 10px 9px no-repeat; display:block; padding:0 13px 0 20px}
.button:hover{ color:#000}
.benefits:hover{color:#000}
.backButton{/*border:1px solid blue;*/position:absolute;top:340px;left:1315px; background:#e8773c;/*border:2px solid blue;*/text-decoration:none;padding:4px 15px 4px 15px;text-transform:uppercase;font-weight:bold;margin-top:450px;color:white;}
.backButton:hover{color:black;}
.backFeatures{/*border:1px solid blue;*/position:absolute;top:340px;left:1315px; background:#e8773c;/*border:2px solid blue;*/text-decoration:none;padding:4px 15px 4px 15px;text-transform:uppercase;font-weight:bold;margin-top:450px;color:white;}
 
.under{ padding-bottom:25px; height:0; font-size:0; line-height:0; border-bottom:1px solid #353535; margin-bottom:25px;}
 
.font1{ font-weight:bold; color:#feb000; text-transform:uppercase; padding-bottom:6px;}
.font2{ font-size:24px; line-height:30px; color:#ffad00; padding-bottom:6px;}
 
.color1{ color:#feb000}
 
.list1 li{ line-height:20px;}
.list1 li a{ color:#feb000; padding-left:12px; background:url(../images/marker_2.gif) 0 4px no-repeat}
 
/*#cont_privacy, .read_more_content{ width:1087px; position:absolute; right:-980px;/*980*/ /*top:0; background:#171717; z-index:20; padding:0 46px;
.read_more_content{ z-index:19; text-transform:none; font-size:12px;}*/
/* ============================= footer ====================== */
 
footer { line-height:18px; position:relative; overflow:hidden; font:13px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#a8a8a8; text-transform:uppercase; padding:10px 0 20px 0;  margin-top:-12px;}
footer a{ color:#a8a8a8; text-decoration:none;}
 
.footerOne{margin-top:14px; /*border:1px solid red;*/ padding-top:20px; margin-bottom:-200px;}
 
 
/* ============================= forms ============================= */
 
#ContactForm {}
#ContactForm a{ margin-left:20px; margin-top:17px}
#ContactForm .input {width:167px; height:15px; border:1px solid #747474; background:#434343; padding:2px 5px; margin-bottom:10px;color:#fff; font:12px Arial, Helvetica, sans-serif}
#ContactForm textarea { overflow: auto;width:182px; height:113px; border:1px solid #747474; background:#434343; padding:2px 5px; margin-bottom:10px;color:#fff; font:12px Arial, Helvetica, sans-serif}
 
.cc_content .line1 .col_1{ width:179px; float:left;}
.cc_content .line1 .col_2{ width:194px; float:left; padding-left:31px;}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Two comments

Good lord! What's your design width? 1567px? Way too wide for the real world.

Do keep in mind that IE<9 has little or no support for html5 elements.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 34 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

according to the w3schools,

according to the w3schools, html5 is supported in ie9.
http://www.w3schools.com/browsers/browsers_explorer.asp- look towards the bottom of the page.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 34 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

It's strange- I added under

It's strange- I added <div align="center"> under the body tag in the html. This centered the site for all screen sizes, but the menu does not get centered! It just stays in the same place!! Can anyone help????
Thanks!

//mod edit: Code tags added. Please read the instructions for posting code found at the top of each forum. --gt

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

IE9 not enough

That's what I said, "IE<9". My point being that IEs 6, 7 & 8 lack said support and all have significant market shares. Consider, too, that there are a potload of people running Windows XP, and they cannot install IE9.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Don't mix ems, %, px, etc.

Don't mix ems, %, px, etc.

Do these things:

#content {
    height: 591px;
}
 
.cc_menu {
    color: #FFFFFF;
    font-size: 14px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-transform: uppercase;
    width: 97.5em;
}
 
.cc_item {
    background: none repeat scroll 0 0 #171717;
    float: left;
    height: 591px;
    margin-right: 0.25em;
    position: relative;
    text-align: center;
    width: 16em;
}

Why the div elements instead of the more correct unordered list?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 34 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Gary, Thanks for your help.

Gary,
Thanks for your help. However, the menu was still NOT centered when I followed your code. The margin:0 auto was not read as a margin, and the menu stayed on the left side of the page. What do you think might be the problem???
Thanks again...

(This is a template that I edited. The original template had the divs in the menu, instead of unordered lists.)

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

suavedesign

suavedesign wrote:

Gary,
Thanks for your help. However, the menu was still NOT centered when I followed your code. The margin:0 auto was not read as a margin, and the menu stayed on the left side of the page. What do you think might be the problem???

I don't know, since you didn't post (or upload to your server) the modified code. I would suspect you didn't do all the changes, which include removing several properties also.

Quote:

(This is a template that I edited. The original template had the divs in the menu, instead of unordered lists.)

If you're going to alter the template, may as well do it right. A menu is a list, by definition.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 34 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Here is my code: #content{

Here is my code:

#content{ height:591px;} /*width:100%; overflow:hidden; /*position:relative;*//*border:4px solid orange;*//*margin-right:-200px;}*/
 
.pad_left1{ padding-left:46px; /*border:2px solid red;*/ width:/*800px;*/50em;}
.pcc{ padding-left:46px; /*border:2px solid red;*/ width:/*800px;*/55em;margin-top:-20px;}
.signintro{padding-left:-16px; /*border:2px solid red;*/margin-left:-200px; width:/*850px;*/61.125em;margin-top:-30px;}
.signPara{float:left; /*border:1px solid blue;*/ width:/*250px;*/18.125em; padding-right:6px; margin-left:240px;margin-top:-250px;}
.signParaThree{float:left; /*border:1px solid yellow;*/ width:/*620px;*/38.75em; padding-right:6px;margin-top:0px;padding-left:-150px;margin-left:240px;}
.pad_left2{ padding-left:-36px; /*border:4px solid green;*/ width:/*700px;*/ 49.75em;margin-top:-12px;  margin-left:45px;} 
.marg_right1{ margin-right:20px;/*border:4px solid yellow;*/}
.marg_right2{ margin-right:30px;}
.pad_bot1{ padding-bottom:38px; /*border:2px solid orange;*/ width:/*615px;*/38.438em; float:left;margin-top:15px;}
.hatPara{padding-bottom:38px; /*border:2px solid orange;*/ width:/*612px;*/43.5em; float:left;margin-top:-155px;}
.benWrapper{ padding-bottom:38px;/*border:2px solid orange;*/ width:/*505px;*/ 31.563em;float:left;margin-top:90px;/*margin-left:-100px;*/}
.pad_bot2{ padding-bottom:18px; /*border:2px solid red;*/}
.ols{/*border:1px solid red;*/ width:/*700px;*/43.75em; padding-left:-40px;/*-40*/margin-left:40px;/*40*/}
.ar{width:/*590px;*/42.875em; margin-bottom:22px; margin-top:25px; margin-left:35px;}
.mobile{width:580px; /*margin-top:30px;*/ margin-left:50px;}
.ben{/*border:1px solid red;*/margin-top:16px; margin-left:-4px;}
.featurePara{margin-top:15px; /*float:left;*/ width:/*590px;*/36.875em; text-transform:none; font-size:14px; /*border:1px solid red;*/ /*margin-left:300px;*/}
.featureParaOne{/*margin-top:-200px;*/ /*float:left;*/ width:/*300px;*/20.75em; text-transform:none; font-size:14px; /*border:1px solid red;*/margin-left:250px;margin-bottom:20px;}
.featuresPara{margin-top:15px; /*float:left;*/ width:/*500px;*/31.25em; text-transform:none; font-size:14px; /*border:1px solid red;*/}
.benefitsPara{margin-top:15px; /*float:left;*/ width:/*600px;*/41.5em; text-transform:none; font-size:14px; /*border:1px solid red;*/}
.delay{margin-left:200px; magin-top:300px; /*border:1px solid red;*/ padding-top:20px;margin-bottom:0px;}
.delayPara{width:/*280px;*/21.5em; margin-right:300px; float:right; margin-top:30px; line-height:25px;font-size:14px;margin-bottom:-30px; /*border:1px solid green;*/padding-bottom:0px;}
.delayParatwo{width:/*600px;*/37.5em; margin-left:700px; float:left; margin-top:10px; line-height:25px;font-size:14px;}
.smartPara{width:/*530px;*/33.125em; margin-left:700px; float:left; /*margin-top:40px;*/ line-height:25px; font-size:14px;/*border:1px solid red;*/}
.smartPara2{width:/*400px;*/25em; margin-left:700px; float:left; margin-top:-130px; line-height:25px;font-size:14px;}
.smartWrapper{margin-top:40px;}
.contactWrapper{margin-left:600px; /*float:left;*/}
.featuresWrapper{margin-left:300px; /*border:1px solid green;*/ margin-top:-180px;}
.contactHeader{margin-left:450px; magin-top:300px; /*border:1px solid red;*/ padding-top:20px;margin-bottom:0px;}
.featuresWrapperTwo{margin-left:100px; margin-right:190px;/*border:1px solid green;*/ margin-top:-500px;float:right;width:/*400px;*/28em;}
.featureWrapper{margin-left:300px; /*border:1px solid green;*/margin-top:5px; width:/*400px;*/28em;}
.benefitsWrapper{margin-left:150px; margin-top:50px; /*border:1px solid red;*/}
.readWrapper{width:/*400px;*/25em;/*border:1px solid red;*/margin-left:300px;margin-top:-530px;}
.readPara{width:/*500px;*/ 35.25em;text-transform:none;font-size:14px;margin-top:20px;/*border:1px solid red;*/}
.tabs{background:#171717;padding:0px -300px 300px -300px; /*border:1px solid red;*/}
.delayWrapper{margin-top:-50px; /*border:1px solid red;*/margin-left:-350px;}
.bulbPara{width:/*330px;*/20.625em; margin-left:1090px; /*float:left;*/ /*margin-top:40px;*/ line-height:25px; font-size:14px;/*border:1px solid red;*/margin-top:-480px;}
.bulbWrapper{/*border:1px solid red;*/margin-left:-300px;}
.smart{margin-left:700px; magin-top:300px; /*border:1px solid red;*/ padding-top:20px;margin-bottom:0px;}
.aboutPara{width:/*330px;*/20.625em;margin-left:975px; /*float:left; */margin-top:-345px; line-height:25px; font-size:14px;/*border:1px solid red;*/}
.about{margin-left:500px; magin-top:300px; /*border:1px solid red;*/ padding-top:20px;margin-bottom:0px;}
.patientWrapper{margin-top:10px;/*border:1px solid red;*/margin-left:0px;}
.patient{margin-left:400px; magin-top:300px; /*border:1px solid red;*/ padding-top:20px;margin-bottom:0px;}
.feedbackPara{width:/*680px;*/49.5em; margin-left:400px; float:left; /*margin-top:40px;*/ line-height:25px; font-size:14px;/*border:1px solid red;*/}
.benefitsHeader{margin-left:10px; /*border:1px solid red;*/ padding-top:20px;margin-bottom:0px;}
.readHeader{margin-left:10px; /*border:1px solid red;*/ padding-top:20px;margin-bottom:0px;font-size:26px;}
.portalHeader{text-transform:uppercase; margin-top:-4px; background:1px solid red;margin-bottom:8px;}
 
#menu {}
#menu li {}
#menu li a{}
#menu li a:hover, #menu #menu_active a{ }
 
.container{text-align:center;width:100%;margin:0 auto;}
 
 
.cc_menu{width:/*1290px;*//*99.625em;*//*100%;*/97.5em;/* margin-left:150px;*//*9.375em;*/margin:0:auto;/*height:591px;*/position: relative;/*top:/*13.75em;*//*220px;left:/*0.938em;*//*15px;*/	font-size:14px;text-transform:uppercase;color:#fff; overflow:hidden;/*border:3px solid green;*/}
 
.cc_item{	text-align:center;	width:/*210px;*//*195*/15.125em;	height:591px;	float:left;	background:/*#171717*/ none repeat scroll 0 0 #171717;
	position:relative; margin-right:/*4px;*/0.25em;}
.no_pad{ margin-right:0px;}
span.cc_title{	color:#fff; line-height:28px;	font-size:17px;	top:224px;	left:14px;	position:absolute;	background:#272727;	width:/*177px;*//*167*/10.3763em;	display:block;	z-index:11;}
.cc_item div{ cursor:pointer}
.cc_submenu { display:block;width:180px;/*11.188em;*//*163*/	margin:0;	padding:0;	height:0px; /*increase to 200px to slide up*/	overflow:hidden;	text-align:left;	position:absolute;	left:0px;	bottom:-32px; background:url(../images/bg_opacity.png) repeat;	z-index:13; /*border:2px solid blue;*/}
.cc_submenu {	color:#fff; font-size:30px;	cursor:pointer;	padding:16px; line-height:44px; text-transform:uppercase}
.cc_submenu  span{ display:block; font-size:20px; color:#c5c5c5; line-height:26px; padding-top:8px;}
.cc_item img{	position:absolute;	width:/*210px;*/15.125em; /*195*/	height:591px;	top:-591px;	left:0px;}
.cc_content{	width:/*920px;*/65.7em;	height:591px;	position:absolute;	left:-800px;	background:#171717;overflow:hidden; /*border:3px solid purple;*/ margin-left:100px;}
.cc_content section{ width:100%; text-transform:none;font-size:14px; line-height:18px; display:none; /*border:1px solid red;*/}
.cc_content p{}
span.cc_back, .cc_back_page{	position:absolute; top:11px;	right:-140px;	cursor:pointer; font:14px Arial, Helvetica, sans-serif; color:#171717; line-height:35px; text-transform:uppercase; padding:0 18px; background:#e8773c;}
h3{color:#ea803e; margin-bottom:-18px; /*border:1px solid red;*/margin-left:0px;margin-top:12px;}
.hat{float:right; /*border:1px solid red;*/ padding-right:8px; margin-top:-47px; margin-right:-133px; margin-bottom:0px;}
.network{float:right; /*border:1px solid red;*/ padding-right:8px; margin-top:3px; margin-right:-133px; margin-bottom:0px;}
.social{font-size:19px; text-transform:uppercase; margin-top:15px; margin-left:-3px;}
.accurate{text-transform:uppercase; margin-top:-4px; background:1px solid red;margin-bottom:-12px;}
.sign{float:right; padding-left:3px;margin-top:-20;}
.coming{margin-left:40px; margin-top:20px;}
.patient{text-transform:uppercase; margin-top:-4px;margin-bottom:0px;}
.corridor{float:left; padding-top:4px; padding-right:6px; margin-bottom:-5px;}
.bulbs{margin-left:500px;margin-top:-50px; /*border:1px solid red;*/ /*padding-bottom:30px;float:left;*/}
.contact{text-transform:uppercase; font-size:22px;}
.contactSpan{font-size:19px; line height:30px;}
.contactinfo{margin-top:10px; font-size:20px;}
.employees{/*float:left;*/margin-left:-460px;margin-top:20px;/*border:1px solid red;*/}
.contacttwo{/*margin-bottom:-410px;*/ margin-top:10px; font-size:20px; border:2px solid green; margin-left:200px;}
.bene{float:left; padding-right:10px; margin-top:-15px;}
.tools{/*float:left;*/ /*padding-right:8px;*/margin-left:190px;margin-top:100px;}
.dsign{/*float:left;*/ /*border:1px solid red;*/ padding-right:0px; margin-top:30px; margin-left:550px; margin-bottom:-6px;margin-right:-5px;}
.bulb{padding-right:8px;margin-top:-7px; margin-left:700px; margin-bottom:-6px;}
.faces{float:left; /*border:1px solid red;*/ padding-right:28px; margin-top:-37px; margin-right:-12px; margin-bottom:0px;margin-top:8px;}
 
.line1, .line2, .cont{ margin:44px 0;height:503px;}
 
/*.line1{ background:url(../images/line_ver1.gif) 478px 0 repeat-y; }
.line2{ background:url(../images/line_ver1.gif) 304px 0 repeat-y;}*/
.back{/*margin-right:-185px;*/ background:#e8773c;/*border:2px solid blue;*/text-decoration:none;padding:4px 15px 4px 15px;text-transform:uppercase;font-weight:bold;margin-top:450px;position:absolute;top:110px;left:835px;}
.backGrow{/*margin-right:-185px;*/position:absolute;top:110px;left:835px; background:#e8773c;/*border:2px solid blue;*/text-decoration:none;padding:4px 15px 4px 15px;text-transform:uppercase;font-weight:bold;margin-top:450px;}
.backFeatures{/*margin-right:-185px;*/position:absolute;top:340px;left:1315px; background:#e8773c;/*border:2px solid blue;*/text-decoration:none;padding:4px 15px 4px 15px;text-transform:uppercase;font-weight:bold;margin-top:450px;}
.button{ display:inline-block; background:url(../images/bg_button.gif) top repeat-x;border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; position:relative;behavior: url(js/PIE.htc); font-weight:bold; color:#fff; text-decoration:none; line-height:20px; height:22px; /*border:1px solid red;*/ margin-left:240px;}
.benefits{display:inline-block; background:url(../images/bg_button.gif) top repeat-x;border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; position:relative;behavior: url(js/PIE.htc); font-weight:bold; color:#fff; text-decoration:none; line-height:20px; height:22px; /*border:1px solid red;*/ margin-left:237px; margin-top:20px;}
.button span{ background:url(../images/marker_1.gif) 10px 9px no-repeat; display:block; padding:0 13px 0 20px}
.benefits span{background:url(../images/marker_1.gif) 10px 9px no-repeat; display:block; padding:0 13px 0 20px}
.button:hover{ color:#000}
.benefits:hover{color:#000}
.backButton{/*border:1px solid blue;*/position:absolute;top:340px;left:1315px; background:#e8773c;/*border:2px solid blue;*/text-decoration:none;padding:4px 15px 4px 15px;text-transform:uppercase;font-weight:bold;margin-top:450px;color:white;}
.backButton:hover{color:black;}
.backFeatures{/*border:1px solid blue;*/position:absolute;top:340px;left:1315px; background:#e8773c;/*border:2px solid blue;*/text-decoration:none;padding:4px 15px 4px 15px;text-transform:uppercase;font-weight:bold;margin-top:450px;color:white;}
 
.under{ padding-bottom:25px; height:0; font-size:0; line-height:0; border-bottom:1px solid #353535; margin-bottom:25px;}
 
.font1{ font-weight:bold; color:#feb000; text-transform:uppercase; padding-bottom:6px;}
.font2{ font-size:24px; line-height:30px; color:#ffad00; padding-bottom:6px;}
 
.color1{ color:#feb000}
 
.list1 li{ line-height:20px;}
.list1 li a{ color:#feb000; padding-left:12px; background:url(../images/marker_2.gif) 0 4px no-repeat}
 
/*#cont_privacy, .read_more_content{ width:1087px; position:absolute; right:-980px;/*980*/ /*top:0; background:#171717; z-index:20; padding:0 46px;
.read_more_content{ z-index:19; text-transform:none; font-size:12px;}*/

The only thing I did different than your instructions was the 16em width for .cc_item, it was too wide, so I changed it to 15.125. Otherwise, everything else is per your instructions, including what had to be moved.
The margin:0 auto did not do anything, and the menu is not centered at all...

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Always validate

Your css has 61 errors. Among them is this:

.cc_menu{width:/*1290px;*//*99.625em;*//*100%;*/97.5em;/* margin-left:150px;*//*9.375em;*/margin:0:auto;/*height:591px;*/position: relative;/*top:/*13.75em;*//*220px;left:/*0.938em;*//*15px;*/	font-size:14px;text-transform:uppercase;color:#fff; overflow:hidden;/*border:3px solid green;*/}

Think there might be a problem centering, maybe?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 34 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

How do I validate my css

How do I validate my css code?
And yes, I know there's a problem with centering, I just don't know what that problem is or how to solve it!
Thanks for your help!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

css validation

The w3.org css validator.

See the margin property I highlighted in red. Notice the colon within the value. The browser, by rule, must ignore that property.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 34 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

I removed that colon, and the

I removed that colon, and the margin: 0 auto; still does not move the menu to the center!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Do this: .main {} Maybe I

Do this:
.main {}

Maybe I changed it, but missed telling you about it. Part of the problem is that you've fallen in love with the div elements, and spurned all the elements that have actual semantic value. That whole page shouldn't have but a few div elements.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 34 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

Gary, I posted this problem

Gary,
I posted this problem on a few different forums, and received many answers- finally- this is the first solution that WORKED!!! Thank you!!!
Two things, though:
1) This does not work for IE. is there a way to fix that?
2) Now, the header, which used to be aligned with the main animated menu is not aligned when the menu moves. (The header is the logo and the top, small navigation.) How can I make that also stay in the same place for all screen sizes? I tried margin:0 auto for the header, but that did not work. (It was as if there was no margin at all.)

Again, thanks a LOT for this answer!! Big smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

First, remove the right

First, remove the right margin found here:<div class="cc_item" style="z-index:6;margin-right:14px;"> Then you can use the width value I gave you, and have a better fit.

Then,

.bg1 {
    border-bottom: 1px solid #EAEAEA;
    margin: 0 auto 14px;
    width: 97.5em;   
}
 
header { /*delete margin-left*/
    overflow: hidden;
    padding-bottom: 17px;
    padding-right: 12px;
}
You may still have problems with IE since you're using html5 elements, without any compelling reason or advantage. Why would you worry about increased semantic value here, while totally ignoring semantic values elsewhere?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 34 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

You did succeed in making the

You did succeed in making the top nav be centered for all size screens, however, I wanted it to be aligned right with the animated nav on bottom of it.
Also, when I followed your instructions, this is what happened:
1) When you open the tabs of the animated menu, the text got cut off a little on the right.
2)the whole website got pushed down, making a vertical scroll bar appear on the side. (The header had took up a lot of space on the top.)

And which elements am I using that are html5?

Thanks for all your help!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

I noticed these:

  • header
  • section
  • article
  • footer

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 6 years 34 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

thanks!

thanks!