Twenty Eleven Table questions

The content looks centered to me.

But having said that, using tables is not the way to achieve what you want to achieve. To center a block element you give it a width and then set the left and right margins to auto. For example, your style rule might look something like:

#mydiv {
    margin: 0 auto;
}

So the only problem is in identifying the element you want to center, and it’s just possible you’d have to add one to one or more of your PHP files. Preferably in a child theme.

I also looked at your code. The table looks completely superfluous and there’s all sorts of inline styles that look as though they ought to be going in a style sheet…

Perhaps if you could mockup an image of what you want the page to look like we could suggest a better way of getting to what you want??

But tables should be for tabular data, these days, not for layout.

Cheers

PAE

I figured out the centering problem I think. I am using Google Chrome and in that and Mozilla the content is on the left, in Internet Explorer it displays in the correct place in the center. Is there a solution for this?

I created the table using the visual editor so any of the inline styles were created there. I know it’s probably not the best way to create columns, but I really don’t know how to create and edit php. Wish I did. I can go into the style.css and change out simple stuff. I deleted the “Powered by Word Press” from the footer php but that’s all I can do.

Do you know where they grey line code is located or that white code in the footer area of the style.css?

I copied the theme from the server to my computer and renamed it and copied that back to the server. That is the theme I’m editing.

Thanks for your help and info.

It’s IE that’s wrong, almost certainly.

I looked at your page in FF and everything looked centered to me. Obviously I don’t really understand what you’re after. I’ll see if I can look at it in IE sometime.

To get rid of your footer (the white bit at the bottom), just get rid of the padding from this style rule:

#site-generator {
  background: none repeat scroll 0 0 #F9F9F9;
  border-top: 1px solid #DDDDDD;
  color: #666666;
  font-size: 12px;
  line-height: 2.2em;
  padding: 2.2em 0.5em;
  text-align: center;
}

It’s in style.css on line 2212 (according to Firebug)

As far as I can tell all you’re seeing of the footer is the padding.

The grey line is coming from the border specified in this rule:

.hentry, .no-results {
border-bottom: 1px solid #DDDDDD;
margin: 0 0 1.625em;
padding: 0 0 1.625em;
position: relative;
}

Just get rid of the border-bottom value. It’s at style.css, line 699; but remember, if you get rid of it there will be no grey line between posts on list pages.

I can’t work out whether your home page is a post or a page. I suspect it’s a post and that’s why there’s a grey line there separating this post from the next one. If I’m right and if you ever create another post it will show up beneath this one on the home page, unless you’ve altered the default behaviour somehow (like making it a category list or something).

Cheers

PAE

Thanks. I will look for those items in the style.css.

Below is a link to some screen shots from the three different browsers of the Member’s page.

https://www.cyfairwomensnetwork.com/wp-content/uploads/2011/08/Member-list-screen-shots.jpg

You will see in FF and GC the Members list shows all the way to the left of the screen, IE it is more centered. This is what I was going for.

Everything is created as pages. I’m going for just a website and don’t want to use it as a blog so I deleted all the posts from the start.

Really appreciate your time!

I just looked in IE8 and it looks exactly like Firefox. So I imagine IE9 will do the same. IE7 looks different. That’s because IE7 is rendering it incorrectly. It also looks a lot worse than it looks in proper browsers, to me: but that’s just my opinion.

I really don’t understand why you’re using a table. There must be some way of getting an NGG slideshow to float right. That’s all you need. I’m not an expert with NGG, though, so I wouldn’t know. You could find out from their forum, though.

HTH

Cheers

PAE

Heh!

OK. I was looking at your home page. Sorry.

It’s IE that’s wrong.

Here’s what I think you need to do. First, I think you should create the page without any of that table nonsense (i.e. go back to the editor and just copy in the text without the table stuff); but you should also add a style rule to style.css in your theme folder something like this:

body.page-id-57 #content div.entry-content {
    padding-left: ...;
}

For the style rule to work it’s important that you edit the existing page as I describe rather than creating a new page. If you create a new page, you’ll need to change the page ID number to the ID of the new one. If you don’t know how to do that, just ask me and I’ll visit the page and tell you what it is.

The elipisis (…) in the style rule above is meant to represent some distance in whatever unit you feel happy with. I tend to use ’em’ units in this context.

I’d start by using something like 5em and then altering it until I got the look I wanted.

What the rule does is to shove the content of the entry-content div over to the right by the distance given, but only on the page with the id of 57 (your members-2 page). So you’ll have to play about with the distance until you get it how you want it to look.

It should look the same in all browsers including defective ones like IE.

If that style rule doesn’t appear to be having any effect, just let me know and I’ll check in a browser to see what it should be, using FireBug.

HTH

PAE

Where in the style.css do I add the new style rule to push the content over? Thanks!

At the end.

??

Cheers

PAE

Perfect! Thanks for all your help. One more thing, how do you determine what the id number of a page is? I may want to do this again on some other pages.

I looked in the <body> tag in the html source. In Chrome, right-click on the page and select View Page Source.

To be really professional, click on the spanner at top right in Chrome, then select Tools –> Developer Tools. A window will appear at the bottom of the screen showing the HTMl and the associated style rules. This is Chrome’s version of FireBug.

In the style rules panels on the right, you can amend the styles to see what changes would look like if you made them (they don’t amend the style sheet, so once you’ve got something that works you have to go back to the style sheet and amend it to make the change permanent).

If you want to add another page to the rule, do it like this:

body.page-id-57 #content div.entry-content,
body.page-id-nn #content div.entry-content {
    padding-left: 12em;
}

Where ‘nn’ represents the ID of the other page (assuming you want the same offset on the other page, of course).

Cheers

PAE

Ok great. I will check this out. Thanks again. I’m just a graphic designer but people keep asking me to do websites so trying to do just very simple ones in Word Press. I need to go to school I guess!

“Just” a graphic designer?

You could do a course, I suppose. I got a lot from these:

https://training.gbdirect.co.uk/courses/web/

My course report from some years back is at:

https://peredur.net/csscoursereport.pdf

It may be a bit out-of-date by now. In fact it dates from when I was employed, as you can see, rather than from when I branched out on my own.

And you can use the community. The css-d (css-discuss) mailing list is very good for CSS questions.

Cheers

PAE

Thank you! I’ll be sure to check both of those out. Was away from the computer for a few hours.