Rabastan Posted March 21, 2012 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/259455-centering-problem/ Share on other sites More sharing options...
scootstah Posted March 21, 2012 Share Posted March 21, 2012 Tables are for tabular data, not for layouts. Use proper markup and CSS. Quote Link to comment https://forums.phpfreaks.com/topic/259455-centering-problem/#findComment-1330024 Share on other sites More sharing options...
Rabastan Posted March 21, 2012 Author Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/259455-centering-problem/#findComment-1330026 Share on other sites More sharing options...
Drummin Posted March 21, 2012 Share Posted 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> Quote Link to comment https://forums.phpfreaks.com/topic/259455-centering-problem/#findComment-1330027 Share on other sites More sharing options...
scootstah Posted March 21, 2012 Share Posted 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? Quote Link to comment https://forums.phpfreaks.com/topic/259455-centering-problem/#findComment-1330029 Share on other sites More sharing options...
Rabastan Posted March 21, 2012 Author Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/259455-centering-problem/#findComment-1330036 Share on other sites More sharing options...
Mahngiel Posted March 21, 2012 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/259455-centering-problem/#findComment-1330038 Share on other sites More sharing options...
Rabastan Posted March 21, 2012 Author Share Posted March 21, 2012 seems my next table has done the same thing... This sucks Quote Link to comment https://forums.phpfreaks.com/topic/259455-centering-problem/#findComment-1330039 Share on other sites More sharing options...
Rabastan Posted March 21, 2012 Author Share Posted March 21, 2012 thank you so much!!!! Rab Quote Link to comment https://forums.phpfreaks.com/topic/259455-centering-problem/#findComment-1330040 Share on other sites More sharing options...
Drummin Posted March 21, 2012 Share Posted March 21, 2012 Where 0 should not have px and numbers should. .wrapper { width: 997px; text-align: center; margin: 0 auto; } Quote Link to comment https://forums.phpfreaks.com/topic/259455-centering-problem/#findComment-1330041 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.