Centering Problem

Rabastan · March 21, 2012

This is confusing the crude out of me.....

Here is my index page, bear in mind I am new to all this and still way into the noobie phase

<title>The Boardwalk</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>

<div class="wrapper">
  <div class="header">
      	<?php include(SUBFILE_HEADER); ?>
      </div>
      <div class="main_nav">
      	<?php include(SUBFILE_HNAV); ?>
      </div>
      <div class="main_nav">
      	<?php include(SUBFILE_CONTENT); ?>
      </div>
      <div class="main_nav">
      	<?php include(SUBFILE_FOOTER); ?>
      </div>
</div>

</body>
</html>

Here is my CSS

body {
background-color: #dbd7cc;
font-family: Verdana, Geneva, sans-serif;
margin: 0px;
}

table {
    border-collapse: collapse;
}
th, td {
    padding: 0;
}

.wrapper {
width: 997;
text-align: center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

.header {
width: 997px;
margin: auto;
position: relative;
}

.main_nav {
width: 997;
margin:auto;
position: relative;
}

.content {
width: 997;
margin:auto;
}

.footer {
width: 997;
margin:auto;
}

In the navigation Area "SUBFILE_HNAV" if I use this code which basically just uses an image of the navigation to test the postioning it center with the rest of the site just fine

<img src="../images/main_nav_test.jpg" width="998" height="82">

However when I slice the image and place them in a table like so........

<table id="main_nav">
<tr>
	<td>
		<img id="main_nav_01" src="../images/main_nav/main_nav_01.jpg" width="9" height="64" alt="" /></td>
	<td>
		<img id="main_nav_home_down" src="../images/main_nav/main_nav_home_down.jpg" width="84" height="64" alt="" /></td>
	<td>
		<img id="main_nav_about_down" src="../images/main_nav/main_nav_about_down.jpg" width="104" height="64" alt="" /></td>
	<td>
		<img id="main_nav_menu_down" src="../images/main_nav/main_nav_menu_down.jpg" width="98" height="64" alt="" /></td>
	<td>
		<img id="main_nav_logo" src="../images/main_nav/main_nav_logo.jpg" width="411" height="64" alt="" /></td>
	<td>
		<img id="main_nav_venues_down" src="../images/main_nav/main_nav_venues_down.jpg" width="92" height="64" alt="" /></td>
	<td>
		<img id="main_nav_gallery_down" src="../images/main_nav/main_nav_gallery_down.jpg" width="100" height="64" alt="" /></td>
	<td>
		<img id="main_nav_contact_down" src="../images/main_nav/main_nav_contact_down.jpg" width="93" height="64" alt="" /></td>
	<td>
		<img id="main_nav_02" src="../images/main_nav/main_nav_02.jpg" width="7" height="64" alt="" /></td>
</tr>
<tr>
	<td>
		<img id="main_nav_03" src="../images/main_nav/main_nav_03.jpg" width="9" height="18" alt="" /></td>
	<td colspan="7">
		<img id="main_nav_content" src="../images/main_nav/main_nav_content.jpg" width="982" height="18" alt="" /></td>
	<td>
		<img id="main_nav_4" src="../images/main_nav/main_nav_4.jpg" width="7" height="18" alt="" /></td>
</tr>
</table>

It Justifies Left, can anyone tell me how to fix this??

RAb

scootstah · March 21, 2012

Tables are for tabular data, not for layouts.

Use proper markup and CSS.

Rabastan · March 21, 2012

I am using this page to learn CSS, this menu is a little to advanced for me to do in CSS yet. So I have laid it out in a table for the time being till I get to that level. So how about you give me a solution to my issue instead of putting me down. Further more developers used nested tables for layouts long before CSS existed, I am using what I know and trying to get caught up.

Rab

Drummin · March 21, 2012

I agree not the best use for tables however, just working with what's provided, I don't see an error. Seems to display fine.

<title>The Boardwalk</title>
<link href="/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts.js"></script>
<style type="text/css">
body {
background-color: #dbd7cc;
font-family: Verdana, Geneva, sans-serif;
margin: 0px;
}

table {
    border-collapse: collapse;
}
th, td {
    padding: 0;
}

.wrapper {
width: 997;
text-align: center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

.header {
width: 997px;
margin: auto;
position: relative;
}

.main_nav {
width: 997;
margin:auto;
position: relative;
}

.content {
width: 997;
margin:auto;
}

.footer {
width: 997;
margin:auto;
}

</style>
</head>
<body>

<div class="wrapper"> 
      <div class="header">
      	<?php include(SUBFILE_HEADER);?>
      </div>
      <div class="main_nav">
      	<table id="main_nav">
<tr>
	<td>
		<img id="main_nav_01" src="../images/main_nav/main_nav_01.jpg" width="9" height="64" alt="" /></td>
	<td>
		<img id="main_nav_home_down" src="../images/main_nav/main_nav_home_down.jpg" width="84" height="64" alt="" /></td>
	<td>
		<img id="main_nav_about_down" src="../images/main_nav/main_nav_about_down.jpg" width="104" height="64" alt="" /></td>
	<td>
		<img id="main_nav_menu_down" src="../images/main_nav/main_nav_menu_down.jpg" width="98" height="64" alt="" /></td>
	<td>
		<img id="main_nav_logo" src="../images/main_nav/main_nav_logo.jpg" width="411" height="64" alt="" /></td>
	<td>
		<img id="main_nav_venues_down" src="../images/main_nav/main_nav_venues_down.jpg" width="92" height="64" alt="" /></td>
	<td>
		<img id="main_nav_gallery_down" src="../images/main_nav/main_nav_gallery_down.jpg" width="100" height="64" alt="" /></td>
	<td>
		<img id="main_nav_contact_down" src="../images/main_nav/main_nav_contact_down.jpg" width="93" height="64" alt="" /></td>
	<td>
		<img id="main_nav_02" src="../images/main_nav/main_nav_02.jpg" width="7" height="64" alt="" /></td>
</tr>
<tr>
	<td>
		<img id="main_nav_03" src="../images/main_nav/main_nav_03.jpg" width="9" height="18" alt="" /></td>
	<td colspan="7">
		<img id="main_nav_content" src="../images/main_nav/main_nav_content.jpg" width="982" height="18" alt="" /></td>
	<td>
		<img id="main_nav_4" src="../images/main_nav/main_nav_4.jpg" width="7" height="18" alt="" /></td>
</tr>
</table>
      </div>
      <div class="main_nav">
      	<?php// include(SUBFILE_CONTENT);
	 ?>
      </div>
      <div class="main_nav">
      	<?php// include(SUBFILE_FOOTER);
	 ?>
      </div>
</div>

</body>
</html>

scootstah · March 21, 2012

I wasn't trying to be condescending. I apologize if I came across as such.

Do you have a screenshot or something to show what it looks like now and what it is supposed to look like?

Rabastan · March 21, 2012

OK, not a problem the page with just the graphic in place is here and centered within the div tag perfect.

http://boardwalk.xcarbondesign.com/nav_centered.php

The one that is messing up is here

http://boardwalk.xcarbondesign.com

I have made no other changes except slicing the graphic into a table.

Thanx

Mahngiel · March 21, 2012

Divs are block elements that stretch the entire width of the browser unless told to do differently.

Your table is contained in a wrapping div #main_nav

Therefore, you can center the table inside of it with auto margins left+right.

table {
    border-collapse: collapse;
    margin: 0 auto;
}

You should really look into using an unordered list. It may be "easier" for you to learn with 1995 markup, but it won't do you a lick of good if you don't start implementing current standards.

Rabastan · March 21, 2012

seems my next table has done the same thing...

This sucks

Rabastan · March 21, 2012

thank you so much!!!!

Rab

Drummin · March 21, 2012

Where 0 should not have px and numbers should.

.wrapper {
width: 997px;
text-align: center;
margin: 0 auto;
}

Sign In

Centering Problem

Recommended Posts

Rabastan

Link to comment

Share on other sites

scootstah

Link to comment

Share on other sites

Rabastan

Link to comment

Share on other sites

Drummin

Link to comment

Share on other sites

scootstah

Link to comment

Share on other sites

Rabastan

Link to comment

Share on other sites

Mahngiel

Link to comment

Share on other sites

Rabastan

Link to comment

Share on other sites

Rabastan

Link to comment

Share on other sites

Drummin

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information