8 Replies - 3090 Views - Last Post: 31 July 2012 - 12:35 PM

#1 AnalyticLunatic  Icon User is offline

  • D.I.C Lover

Reputation: 223
  • View blog
  • Posts: 1,035
  • Joined: 25-June 12

Centering Webpage Content

Posted 30 July 2012 - 11:32 AM

Hello, I am trying out some new CSS techniques I've read about, and I am having issues with getting the content to center on the page. In the Header I have 2 images, which are both 750 X 150 pixels. I do not have a particular amount of space I want on each side of the content, but I would like that spacing to be an even amount on each side. I have tried margin-left: auto/margin-right: auto to no avail, and the same with giving the #Container ID a width value and setting margin: 0 auto.

Would anyone have any ideas?

HTML (index.html):
<!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" />
<link href="style.css" rel="stylesheet" type="text/css">
<title>Charger Boats</title>
</head>

<body>
<div id="Container">
<div id="bg">
<img src="../images/BlackBoardStyle.jpg" alt="Background" />
</div>
<div id="Header">
<table>
	<tr>
		<td><img src="../images/deck_header2.jpg" alt="Header" /></td>
		<td><img src="../images/Untitled-1-1.jpg" alt="2ndHeaderImg" /></td>
	</tr>
</table>
<table style="background-color:#CCC; width:100%; table-layout:auto">
	<tr>
		<td class="tdStyle">Home</td>
		<td class="tdStyle">Our History</td>
		<td class="tdStyle">Boats</td>
		<td class="tdStyle">296 PRO TEAM</td>
		<td class="tdStyle">Contact Us</td>
		<td class="tdStyle">Brochure</td>
		<td class="tdStyle">Dealers</td>
		<td class="tdStyle">Downloads</td>
	</tr>
</table>
</div>

<div id="Main">
<div id="mainLeft">
<p>:: Our History
<br /><br />

For more than 30 years, Charger has built some of the most durable, fishable boats on the water. But we're always looking ahead for new ways to build the best boats for you.<br /><br />

That's why we've added scores of design, performance and comfort features to our new lineup of Charger boats, including all-composite construction, modern instrumentation, updated graphics, redesigned seating, and more. Best of all, we put that three decades of experience, refinement and innovation into every Charger boat.<br /><br />

Whether you're a seasoned tournament professional or a "rookie" weekend angler, we build boats that give you a distinct advantage when you're driving down the lake, taming a big river, or trolling the back of a reclusive cove. You'll feel confidence in your Charger every time you hit rough water, make a fast run back to weigh-in, or land the first keeper of the day.<br /><br />

If you're looking for your next boat, it's time you put in with the best: Charger Boats. Because the best just keeps getting better.</p>
</div>
<div id="mainRight">
<img src="../images/Boat-On-Lake-Edited.gif" alt="LakeBoat" />
</div>
</div>

<div id="sideBar">
<table style="background-color:#CCC; height:100%">
<tr><td class="tdStyle">Home</td></tr>
<tr><td class="tdStyle">New!</td></tr>
<tr><td class="tdStyle">Pontoons</td></tr>
<tr><td class="tdStyle">Power Deck</td></tr>
<tr><td class="tdStyle">Trailers</td></tr>
<tr><td class="tdStyle">Options</td></tr>
<tr><td class="tdStyle">Brochure</td></tr>
<tr><td class="tdStyle">Dealers</td></tr>
<tr><td class="tdStyle">PlayCraft Gear</td></tr>
<tr><td class="tdStyle">River Skiff</td></tr>
<tr><td class="tdStyle">Contact Us</td></tr>
</tr>
</table>
<p></p>
<p></p>
<p></p>
</div>

<div id="Footer">
<table style="background-color:#CCC; height:100%">
<tr><td class="tdStyle">Charger Boats PO Box 709, Richland MO, 65556 | Phone: 573-765-3265 |  2012 Charger Boats</td></tr>
</table>
</div>
</div>
</body>
</html>



CSS (style.css):
@charset "utf-8";
/* CSS Document */

#bg {
	position:fixed; 
	top:-50%; 
	left:-50%; 
	width:200%; 
	height:200%;
}
#bg img {
	position:absolute; 
	top:0; 
	left:0; 
	right:0; 
	bottom:0; 
	margin:auto; 
	min-width:50%;
	min-height:50%;
	z-index:-1;
}

#Header {
	width:1500px;
	margin-bottom: 5px;
	top: 0;
	position: fixed;
}

body {
	text-align: center;
}

#Container {
	position: absolute;
	width: 1500px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#Main {
	width: 80%;
	float: right;
	margin: 3px;
	margin-top: 200px;
}

#mainLeft {
	width: 42.5%;
	height: 100%;
	float: left;
	background-color:#900;
}

#mainRight {
	width: 42.5%;
	height: 100%;
	float: right;
	
}

#sideBar {
width: 15%;
float: left;
	margin-top: 200px;
}

#Footer {
   position:fixed;
   bottom:0px;
   width:1500px;
   height:30px;   /* Height of the footer */
   background:#6cf;
   font-weight:bolder;
   color: white;
}

.tdStyle {
	width: 9%;
	background-color:#900;
	text-align:center;
	font-size:13px;
}


[attachment=30459:7-30-2012 1-29-32 PM.png]

This post has been edited by AnalyticLunatic: 30 July 2012 - 11:47 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Centering Webpage Content

#2 jared.deckard  Icon User is offline

  • New D.I.C Head

Reputation: 18
  • View blog
  • Posts: 46
  • Joined: 11-July 12

Re: Centering Webpage Content

Posted 30 July 2012 - 12:33 PM

#Container {
	width: 1500px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}



Setting the position to absolute forces the browser calculate auto margins as 0px.

The Inspect Element feature in Google Chrome and the Firebug plugin for Firefox allow you to quickly change CSS attributes and see the changes live. It is a must have for CSS testing.
Was This Post Helpful? 1
  • +
  • -

#3 AnalyticLunatic  Icon User is offline

  • D.I.C Lover

Reputation: 223
  • View blog
  • Posts: 1,035
  • Joined: 25-June 12

Re: Centering Webpage Content

Posted 30 July 2012 - 01:03 PM

View Postjared.deckard, on 30 July 2012 - 12:33 PM, said:

#Container {
	width: 1500px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}



Setting the position to absolute forces the browser calculate auto margins as 0px.

The Inspect Element feature in Google Chrome and the Firebug plugin for Firefox allow you to quickly change CSS attributes and see the changes live. It is a must have for CSS testing.


Thank You jared.deckard! I have heard of Firebug but never experimented with it. I have now downloaded it and am looking forward to exploring the full-benefits of this tool.

If I may pick your brain, I am slightly concerned that the two images I have for the Header, both are 750px X 150px, may be too large for a standard monitor/resolution. I am currently working on a 22inch monitor with 1680 X 1050 Resolution. What are your thoughts?
Was This Post Helpful? 0
  • +
  • -

#4 jared.deckard  Icon User is offline

  • New D.I.C Head

Reputation: 18
  • View blog
  • Posts: 46
  • Joined: 11-July 12

Re: Centering Webpage Content

Posted 30 July 2012 - 03:36 PM

Display Statistics
You should be ok. People with small monitors can still scroll. :P
I would test on 1024x768 just to ensure it is still functional.

Browser Statistics
You should also consider the current browser trends while testing.
The different browsers implement CSS and DOM defaults slightly differently.

Mobile browsers tend to handle most pages pretty well.
Then again all my mobile devices are at least 1024x768...
I always test my pages on an iPhone and an Android tablet.
Was This Post Helpful? 0
  • +
  • -

#5 AnalyticLunatic  Icon User is offline

  • D.I.C Lover

Reputation: 223
  • View blog
  • Posts: 1,035
  • Joined: 25-June 12

Re: Centering Webpage Content

Posted 31 July 2012 - 06:49 AM

Alright, thanks for the info! :tup:
Was This Post Helpful? 0
  • +
  • -

#6 Sergio Tapia  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1253
  • View blog
  • Posts: 4,168
  • Joined: 27-January 10

Re: Centering Webpage Content

Posted 31 July 2012 - 07:27 AM

You should analyze what your target audience is and what type of website you're going to offer. 1024px wide is a safe bet, but you can also get by using 1220px to have more wiggle room if you think your audience will most likely have that screen real estate.

If you're making a video game related website, it's a pretty safe bet they're using a good computer.

Also check your analytics for resolutions and browser usage. If 1% of your users visit your site using IE, it's not even worth the time to code against it. I mean, a cursory glance is fine, but don't sweat making things pixel perfect on such an old browser. IE8 is a good baseline starting version of IE.

This post has been edited by Sergio Tapia: 31 July 2012 - 07:27 AM

Was This Post Helpful? 0
  • +
  • -

#7 AnalyticLunatic  Icon User is offline

  • D.I.C Lover

Reputation: 223
  • View blog
  • Posts: 1,035
  • Joined: 25-June 12

Re: Centering Webpage Content

Posted 31 July 2012 - 09:20 AM

View PostSergio Tapia, on 31 July 2012 - 07:27 AM, said:

You should analyze what your target audience is and what type of website you're going to offer. 1024px wide is a safe bet, but you can also get by using 1220px to have more wiggle room if you think your audience will most likely have that screen real estate.

If you're making a video game related website, it's a pretty safe bet they're using a good computer.

Also check your analytics for resolutions and browser usage. If 1% of your users visit your site using IE, it's not even worth the time to code against it. I mean, a cursory glance is fine, but don't sweat making things pixel perfect on such an old browser. IE8 is a good baseline starting version of IE.

Well put Sergio. Typically for sites I have done in the past, roughly 87-95% of all visitors are using either Firefox or IE. With current statistics showing Firefox having a slight preference over IE in today's market, I typically begin coding their, validate my code at checkpoints in the development, and perform some IE specific changes towards the end.

As per the clients, with all due respect to them, most of them are the type that go "oh, there is an update available, I should probably update!" so I haven't needed to do much specific coding for older browser versions.
Was This Post Helpful? 0
  • +
  • -

#8 Sergio Tapia  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1253
  • View blog
  • Posts: 4,168
  • Joined: 27-January 10

Re: Centering Webpage Content

Posted 31 July 2012 - 11:53 AM

Lucky for me 90% of my clients use Chrome exclusively, so they aren't even aware IE exists!
Was This Post Helpful? 0
  • +
  • -

#9 AnalyticLunatic  Icon User is offline

  • D.I.C Lover

Reputation: 223
  • View blog
  • Posts: 1,035
  • Joined: 25-June 12

Re: Centering Webpage Content

Posted 31 July 2012 - 12:35 PM

View PostSergio Tapia, on 31 July 2012 - 11:53 AM, said:

Lucky for me 90% of my clients use Chrome exclusively, so they aren't even aware IE exists!


I envy you greatly good sir. About 90% of my clients don't know that there are other browsers besides IE! :glare:
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1