Jump to content

How To Center Table


masterlock01

Recommended Posts

I have a real estate search page that is provided by a 3rd part service provider. I have access to on the header and footer files. I need to be able to insert code into the header and footer to effect the following change: I want the map/property search tool to be the same width (1000px) as the header and footer. I also need it to be centered the same as the header and footer. Can any of you brilliant minds help a simpleton like me figure this out? Here is the page in question:http://searchin.mswoods.com/index.cfm?action=newsearch&searchtype=map How to I also make the sentence beneath the map/above the footer centered the same as well?"All Information believed to be reliable but not guaranteed..."

Link to comment
Share on other sites

on the table give it a width and apply the auto value to the margin, like this:

table { width:800px;margin:0 auto;}

i dont think this works in IE though, so what you could also do is wrap the table in a div, give the table a width, and do a text-align:center; on the div.

Link to comment
Share on other sites

Are you including/inserting content from other pages, if so the main problem with you page is that the pages that are being including in this main page still have <html><body><style> tags included with them, the <body><html> should be removed the js and css styling should be either placed in <head>..</head> of the main page or ideally a external javascript file and css file and linked to. when you view the page source you should only see one <html><head></head><body></body></html> lot of tags within the whole page. The only time you would see more than one, is when a iframe is being used. At the moment any css you attempt use might have difficultly accessing the specific body area to apply the style. if you try to validate at http://validator.w3.org/ your page you will find you have 977 errors and 45 warnings, THIS IS A MAJOR PROBLEM you need to address. Once these errors are sorted, if you are able to add a unique id ref to the tables you wish to centre, this would make this a whole lot easier.

Link to comment
Share on other sites

Are you including/inserting content from other pages, if so the main problem with you page is that the pages that are being including in this main page still have <html><body><style> tags included with them, the <body><html> should be removed the js and css styling should be either placed in <head>..</head> of the main page or ideally a external javascript file and css file and linked to. when you view the page source you should only see one <html><head></head><body></body></html> lot of tags within the whole page. The only time you would see more than one, is when a iframe is being used. At the moment any css you attempt use might have difficultly accessing the specific body area to apply the style. if you try to validate at http://validator.w3.org/ your page you will find you have 977 errors and 45 warnings, THIS IS A MAJOR PROBLEM you need to address. Once these errors are sorted, if you are able to add a unique id ref to the tables you wish to centre, this would make this a whole lot easier.
Thanks for that info. Actually, this is a service for real estate brokers and is hosted on a server we don't have access to. There are 2 files on our server--the header and footer--which are pulled into the page. Those are the only 2 files we can edit to effect the desired changes. The service provider says that we should be able to insert code into the header or footer to effect the styling changes. The problem is that I don't real understand how, and they weren't interested in spelling out how. We simply need to have the main body, which consists of the map and search tools, stretch 1000px wide and be centered with the header and footer. Was I misinformed by our service provider that this should be possible, do you think?
Link to comment
Share on other sites

The only way it might be able be done by using header and footer, is to add a opening container div below the header table, and add the closing div to the top of the footer

<table>code for header...</table><div style="width:1000px; margin: 0 auto;"><!--- opening container -->

</div><!-- closing container --><div style="width: 1000px; margin-left:auto; margin-right:auto; background-color:#eaeff5; font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height: 150% "> rest of code for footer </div>

This should create a container around anything between the header and footer 1000px wide, and centre it using margin: 0 auto; this should work, but i won't guarantee it as there's a lot code which should not be there, that might interfere with it. meta tags, css styling should not be between <body> and </body> they should be between (or with css styling linked to externally) in the <head>..</head> of the document, if you are not allowed to do any of this, you would have to do it inline as in '<div style="width: 1000px; margin-left:auto; margin-right:auto; background-color:#eaeff5; font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height: 150% ">'

Link to comment
Share on other sites

The only way it might be able be done by using header and footer, is to add a opening container div below the header table, and add the closing div to the top of the footer
<table>code for header...</table><div style="width:1000px; margin: 0 auto;"><!--- opening container -->

</div><!-- closing container --><div style="width: 1000px; margin-left:auto; margin-right:auto; background-color:#eaeff5; font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height: 150% "> rest of code for footer </div>

This should create a container around anything between the header and footer 1000px wide, and centre it using margin: 0 auto; this should work, but i won't guarantee it as there's a lot code which should not be there, that might interfere with it. meta tags, css styling should not be between <body> and </body> they should be between (or with css styling linked to externally) in the <head>..</head> of the document, if you are not allowed to do any of this, you would have to do it inline as in '<div style="width: 1000px; margin-left:auto; margin-right:auto; background-color:#eaeff5; font-family: Arial, Helvetica, sans-serif; font-size:12px; line-height: 150% ">'

I want to be sure I don't mess this up. Below is a summary of how the header and footer files are structured currently. With respect to your suggestion, would I insert the new header code after the </table> tag and before the <body> tag? In the footer, where would this par go: </div><!-- closing container --> Btw, your help is very much appreciated. Header:<html><head></head><body><table></table></body></html> Footer:<html><head></head><div><div><table></table><body></div></div></body></html>
Link to comment
Share on other sites

This is what I meant about unnecessary html code/tags, the <html><head></head><body> </body></html> in the header and footer would not be required, as these tags are already present in the document you are inserting into, and these tags SHOULD be listed only once within a document. therefore the opening and closing div element tag would normally applied header

<table></table><!--- opening container --><div style="width:1000px; margin: 0 auto;">

footer

</div><!-- closing container --><div><div><table></table></div></div>

I have no idea what adding div inside or outside the body/html tags as I never would have it this way, anyway as it is invalid. edit: missed body tag sorry

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...