Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Center area post/pages (http://forum.bytesforall.com/forumdisplay.php?f=32)
-   -   Table will not center in Page (http://forum.bytesforall.com/showthread.php?t=13042)

bluesboy Feb 28, 2011 04:14 AM

Table will not center in Page
 
I know this has been posted several times in the forum and I've tried every suggestion offered but still I'm unable to center a table in a page. I've tried every suggestion in the forum and outside the forum - HTML, HTML plus CSS, wrapping table in a div plus CSS etc. Still the table sticks like glue to the left. Can anyone help me to solve this? I'm using Atahualpa 3.6.1, Classic theme edited. URL: http://www.webspotdesign.co.uk/?page_id=8

bluesboy Feb 28, 2011 05:14 AM

Just fixed it. Couldn't get div id and css to work but by simply putting <div align="center"> as a single line of code above the table and the closing </div> at the bottom, it works (only testing in Firefox). Bizarre. Not sure what's going on here, I think Atahualpa must over-ride or ignore some css code - even it's own inserts which are supposed to over-ride the built-in css?

juggledad Feb 28, 2011 07:57 AM

Atahualpa just builds the page, the browser applies the CSS

Why are you using a <th> for one of the images in each row instead of a <td>?

bluesboy Feb 28, 2011 08:06 AM

Thanks for responding so quickly. Appreciate it. I made an empty table in Dreamweaver and copied and pasted the html - so Dreamweaver must have put it in. Will it cause problems?

juggledad Feb 28, 2011 08:56 AM

a <th>defines a header cell and you are using it as a data cell. Who knows what it might do eventually. You need to be careful using something like DreamWeaver to create something and then just dropping it in to a pose. You should see what happens if you just do a copy/paste from a styled Word document - disaster

also if you have
HTML Code:

<div align="center">
that doesn't equate to a CSS 'text-align:center' you need to use 'margin-left:auto; margin-right:auto'.

one other thing, if I click on one of the design's I get a small image. you should set it up so I can see a large version of the image, after all, if I'm looking at one of your designs, I actually want to be able to see it.

bluesboy Feb 28, 2011 09:26 AM

"you need to use 'margin-left:auto; margin-right:auto'."

Yes I tried that, it doesn't work. Neither does:

<table style="width: XXXpx; margin: 0 auto;">

Just tried again with:

html:

<div id="table1">
....my table here...
</div>

css insert:

#table1 {
margin-left: auto;
margin-right: auto;
}

Didn't work. Can you see anything wrong here?

Firebug not reading css on this site (not on my mac anyway).

juggledad Feb 28, 2011 11:07 AM

try this, change the post to
HTML Code:

<div id="table1">
<table><tr>
<td> <a href="http://www.webspotdesign.co.uk/wp-content/uploads/2011/02/traceyourancestors.jpg"><img class="pmw aligncenter size-full wp-image-76" title="traceyourancestors" src="http://www.webspotdesign.co.uk/wp-content/uploads/2011/02/traceyourancestors.jpg" alt="" width="250" height="172" /></a></th>
<td><a href="http://www.webspotdesign.co.uk/wp-content/uploads/2011/02/bestsellingplaysets.jpg"><img class="pmw aligncenter size-full wp-image-75" title="bestsellingplaysets" src="http://www.webspotdesign.co.uk/wp-content/uploads/2011/02/bestsellingplaysets.jpg" alt="" width="250" height="173" /></a></td>
<td><a href="http://www.webspotdesign.co.uk/wp-content/uploads/2011/02/smallgreenhouses.jpg"><img class="pmw aligncenter size-full wp-image-74" title="smallgreenhouses" src="http://www.webspotdesign.co.uk/wp-content/uploads/2011/02/smallgreenhouses.jpg" alt="" width="250" height="191" /></a></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><a href="http://www.webspotdesign.co.uk/wp-content/uploads/2011/02/bestportablekeyboards1.jpg"><img class="pmw aligncenter size-full wp-image-72" title="bestportablekeyboards" src="http://www.webspotdesign.co.uk/wp-content/uploads/2011/02/bestportablekeyboards1.jpg" alt="" width="250" height="177" /></a></th>
<td><a href="http://www.webspotdesign.co.uk/wp-content/uploads/2011/02/sneakersonlinereviews.jpg"><img class="pmw aligncenter size-full wp-image-73" title="sneakersonlinereviews" src="http://www.webspotdesign.co.uk/wp-content/uploads/2011/02/sneakersonlinereviews.jpg" alt="" width="250" height="192" /></a></td>
<td><a href="http://www.webspotdesign.co.uk/wp-content/uploads/2011/02/traceaperson.jpg"><img class="pmw aligncenter size-full wp-image-70" title="traceaperson" src="http://www.webspotdesign.co.uk/wp-content/uploads/2011/02/traceaperson.jpg" alt="" width="250" height="185" /></a></td>
</tr>
</table>
</div>

add this to the CSS Inserts
HTML Code:

#table1 {
  margin-left: 03% ;
  margin-right: auto;
}


bluesboy Feb 28, 2011 11:39 AM

Brilliant! That's solved it. Thank you very much.
I've been comparing the code:

you've removed the entire table style code line?
changed the img class to pmw ?
removed <th scope "row"></th> (x2)
removed: <tbody></tbody>

I'd like to be able to understand why this has worked (if you've got the time) - it's certainly tidier coding.

Donation (small - but I hope it will buy you a couple of beers) on it's way.

Cheers!

juggledad Feb 28, 2011 02:17 PM

HTML Code:

you've removed the entire table style code line?
yup, the the table becomes as wide as center column and any styling is done via CSS
HTML Code:

changed the img class to pmw ?
oops, remove it. That was just there so I could put a border around the images and visually look teh layout
HTML Code:

removed <th scope "row"></th> (x2)
the <th> is a column header but you were using it as a table cell, no need for it so simplify
HTML Code:

removed: <tbody></tbody>
again, you don't need them in a simple table so why have them, it just complicates things.

SLIweb Mar 4, 2011 12:00 PM

Quote:

Originally Posted by juggledad (Post 59274)
a <th>defines a header cell and you are using it as a data cell. Who knows what it might do eventually. You need to be careful using something like DreamWeaver to create something and then just dropping it in to a pose. You should see what happens if you just do a copy/paste from a styled Word document - disaster

also if you have
HTML Code:

<div align="center">
that doesn't equate to a CSS 'text-align:center' you need to use 'margin-left:auto; margin-right:auto'.

one other thing, if I click on one of the design's I get a small image. you should set it up so I can see a large version of the image, after all, if I'm looking at one of your designs, I actually want to be able to see it.

Juggledad,

I have hit a wall and don't know where to turn next.

I don't have several months to learn how to do the next step, and it seems it should be easy. I am trying to create one "style" that can be used on a whole series of "fact sheet" pages (http://www.strategiclearning.com/wor...person-series/) to look like the first page of their PDF cousins (http://strategiclearning.com/FactShe...SP20110303.pdf) (without the Headers and Footers on the PDF) which are generated in MS Word. I have experienced the "Disaster" of trying paste MS Word via the ATO interface. I even tried saving the MSWord document as CSS/HTML and pasting that into ATO - more ugliness. I've deleted those attempts since they don't work. Here's a sample of the CSS output by MS Word - if you are interested:

/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:Tahoma;}
p.MsoHeader, li.MsoHeader, div.MsoHeader
{margin:0in;
margin-bottom:.0001pt;
border:none;
padding:0in;
font-size:9.0pt;
font-family:Tahoma;}
p.MsoFooter, li.MsoFooter, div.MsoFooter
{margin:0in;
margin-bottom:.0001pt;
border:none;
padding:0in;
font-size:8.0pt;
font-family:Tahoma;
color:#071F51;}
span.MsoPageNumber
{font-weight:bold;}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:purple;
text-decoration:underline;}
p.MsoAcetate, li.MsoAcetate, div.MsoAcetate
{margin:0in;
margin-bottom:.0001pt;
font-size:8.0pt;
font-family:Tahoma;}
p.FSBorder, li.FSBorder, div.FSBorder
{margin:0in;
margin-bottom:.0001pt;
text-align:center;
font-size:6.0pt;
font-family:Tahoma;}
p.FSNorm, li.FSNorm, div.FSNorm
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:Tahoma;}
p.FSBody, li.FSBody, div.FSBody
{margin-top:0in;
margin-right:0in;
margin-bottom:10.0pt;
margin-left:.2in;
font-size:11.0pt;
font-family:Tahoma;
color:black;}

It seems there should be a way to create a template that would accept output from MS Word and display the HTML with "Styles" that are nearly identical to those in the MS Word document. I have dozens of MS Word Documents that I'd like to make into pages and messing with the text from each one individually to make it look right would be a pain. I really only need seven or eight different paragraph styles, plus one table style. I know I am pretty sure I can get MSWord to put tags around paragraphs with different styling, so I think I could quickly output a plain text document with all the proper tags - if there was a way WordPress to then make them display properly.

So far, the web is not revealing its secrets to me, even after six hours of searching.

If there isn't a way of learning the basics of creating a style sheeet that could be used within ATO just for "Fact Sheet" pages in a couple of days, how do you suggest I proceed? I guess I could just use the page title as a link that goes to a PDF, but I'd prefer to have the text be searchable (I know I don't have a search Widget set up right now, but that's easy with ATO).

Besides, "Here's another idiot who probably also thinks its easy to perform brain surgery." what are your reactions, thoughts, recommendations about my achieving my objective?

Thanks:confused:


All times are GMT -6. The time now is 10:52 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.