• I have created a table on a showcase page in Twenty Eleven, so that the content can be centered on the page. This worked in Twenty Ten. The table has the code that says “center” but it is not centering on the page. How can I fix this? https://www.cyfairwomensnetwork.com – members.

    On the same site, I have a table to create two columns, and have also done this on another site. There are thin grey lines on these pages where I have inserted the table for this purpose – above and below the content. I have looked through the code and tried different things but I haven’t found the right thing I guess. Do you know how I can get rid of those? The sites are https://www.cyfairwomensnetwork.com – home and https://www.arranginginteriors.com

    One last item, I found how to change the background color of the page from white to whatever, but at the bottom in the footer area that area remains white – see https://www.cyfairwomensnetwork.com Can you tell me where that is located?

    This forum is so helpful. Thanks so much for the help!

Viewing 13 replies - 1 through 13 (of 13 total)
  • 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

    Thread Starter TexasMouse

    (@texasmouse)

    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

    Thread Starter TexasMouse

    (@texasmouse)

    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

    Thread Starter TexasMouse

    (@texasmouse)

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

    At the end.

    ??

    Cheers

    PAE

    Thread Starter TexasMouse

    (@texasmouse)

    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

    Thread Starter TexasMouse

    (@texasmouse)

    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

    Thread Starter TexasMouse

    (@texasmouse)

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

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Twenty Eleven Table questions’ is closed to new replies.