WordPress.org

Ready to get started?Download WordPress

Forums

Font-family problem and picture alignment in table (10 posts)

  1. Angelique.van.Campen
    Member
    Posted 2 years ago #

    Hey all,

    I hope this is the good forum section to ask my question(s).
    First of all, before I forget it, here's the website URL involved http://avsim-reviews.flight-simulation.eu>. The problems I have deal with this "WP page". It can be found on http://avsim-reviews.flight-simulation.eu/?page_id=246

    I'm absolutely not an WP expert, no .... far from that, but I'll try and digg by the web to answers. Not always with success, like now.

    Problem I - Font-family in table is different then page font
    I think this has something to do with the style.css reference, but I could be totally wrong. As you can see via the 2nd URL (id-246), page font-family is default and honestly, no clue which font. That's not really the problem. The font looks nice, so that's ok with me however, all the tables that have text, show a different font-family, which is not correct. I want to have the same font in the table as outside the tables. Either I could enter this in the html page or in the style.css. No idea which option is the best or easy to do, but with that, I have no clue which font is what.
    I somebody able to assist me with this problem?

    Problem II - Table pictures are all aligned on the LH side and not centered.
    As you can see on the same page URL, all the pictures are aligned to the left of their cell. Normally I would say align="center" or style="align:center;, but I tried many option in <table>, <tr> and <td>, but nothing works. I'm sure it's an easy trick as long as you know. Checking all the webs for an answer, but haven't found the solution yet. Somebody any idea or what I'm doing wrong?

    Thanks in advance for your help.

    Angelique

  2. Try adding this to your stylesheet to change the font and centre the contents of all table cells. You will then need to specify a left-alignment where you want to override the centering.

    td {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center !important;
    }

    Let me know if this works.

  3. Angelique.van.Campen
    Member
    Posted 2 years ago #

    Hi zoonini,

    First of all, thanks for your reply and suggestions. I added your suggestion at the end of my child located "twentyeleven' style.css, and indeed, the font is now the same, text is aligned in the cells.
    Because of this, I tried myself to remove certain html <table> and <td> commands in the WP page and inserted them in the child style.css.
    Regarding this issue, that part of the style.css looks as follows:

    /* Experimental table commands to get it as I want and to get rid of the html codes*/
    table, td {
    border: 5px double #666;
    }

    td {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center !important;
    vertical-align: bottom;
    }

    Adding the table command works much easier and is applicable for all tables, so no longer a need to add this in the html page.
    Although I'm trying, I'm still stuck with a few problems.
    They are:

    I'm still stuck with the images in the table cells. I've got no idea how to align these. The text is aligned, but not the images.

    I want to add (via the style.css) some space (like a paragraph) at the end of each table. Let's give you an example how a table html looks like .....
    <table style="width: 750px; margin: 0pt auto;">
    <tbody>
    <tr>
    <td> <img src="http://avsim-reviews.flight-simulation.eu/wp-content/uploads/2011/07/evo/T_doc1.jpg" alt="" /></td>
    <td> <img src="http://avsim-reviews.flight-simulation.eu/wp-content/uploads/2011/07/evo/T_doc2.jpg" alt="" /></td>
    <td> <img src="http://avsim-reviews.flight-simulation.eu/wp-content/uploads/2011/07/evo/T_doc3.jpg" alt="" /></td>
    </tr>
    <tr>
    <td>Airbus Evolution Series Notes</td>
    <td>Checklists</td>
    <td>Pilot's Guide</td>
    </tr>
    </tbody>
    </table>

    I tried to do something with the margin command, but that failed. I've got no idea what the auto means. Somewhere or somehow this is now in the html, and my feeling tells me that this could be transferred to the style.css as well.

    I'll try in the mean time and hopefully I'll find the solution myself.

    Thanks in advance for your reply.
    Angelique

  4. voala
    Member
    Posted 2 years ago #

    can you please give us the link of your website to give you the solution? Maybe the exact page link that you wish to modify.

    Valentin

  5. Angelique.van.Campen
    Member
    Posted 2 years ago #

    Hey Valentin,

    Thanks in advance for your reply.
    The link was/is in my first posting, but it's easier when I added it again. So, here you are:

  6. Angelique.van.Campen
    Member
    Posted 2 years ago #

    Oops, something went wrong .. no link!
    Then I'll do it this way -> http://avsim-reviews.flight-simulation.eu/?page_id=246

  7. voala
    Member
    Posted 2 years ago #

    Ok, for the images,
    Go to styles.css line 786.
    There is a padding that prevents the align center of the image. Change from padding: 6px 10px 6px 0; to padding: 0px;
    Also add bellow that line a text-align:center;

    As for the space below the tables
    In styles.css line 770 add a:
    margin-bottom:10px; (replace 10 with your own size)

    I think this will do the trick.
    Waiting for your reply.

    Valentin

  8. Angelique.van.Campen
    Member
    Posted 2 years ago #

    Valentin,

    The padding suggestion works however, the "margin-bottom:10px;" doesn't have any influence. Since I'm working with a style.css child file, I thought probably it's due to this. After that thought, I added this line also in the normal style.css file, but with no result.
    Find below what I did regarding the "margin-bottom:10px;"

    .entry-content table,
    .comment-content table {
    border-bottom: 1px solid #ddd;
    margin: 0 0 1.625em;
    width: 100%;
    margin-bottom:10px;
    }

    I hope this is what you mean?

  9. voala
    Member
    Posted 2 years ago #

    Yes, i seen now that you have a child theme, so the theme is influenced by 2 css files. This is a bit of a problem. First of all from what you wrote above, you have the margin: 0 0 1.625em; that will now work with margin-bottom:10px;

    The margin CSS rule can be used as following: margin: top right bottom left, or margin-top margin-right margin-bottom margin-left. Hope you understand. So instead of the two mentioned above, replace with
    margin: 0px 0px 10px 0px;

    The css class that define the td in your site are as follows:
    .entry-content td, .comment-content td
    in twentyeleven_child/styles.css at line 110
    and
    .entry-content td, .comment-content td
    in twentyeleven.styles.css at line 786

    Valentin

  10. Angelique.van.Campen
    Member
    Posted 2 years ago #

    Valentin,

    What I understand from reading the webs, the style.css (from the child theme) is loaded and refers to the twentyeleven style.css. Those settings are loaded, but modified by the style.css from the child theme. Ok, I'll add below the complete contents of the child style.css file. What you see below are all the mods I made for the child website.

    [please use a Pastebin to post large chunks of code, following forum etiquette]

    The last block in the child style.css is changed as you suggested (I hope I did understand you correct), but not the expected result. Is it correct to write that first from the twentyeleven style.css "margin: 0 0 1.625em;" is loaded and implemented and then modified by the child style.css "margin: 0px 0px 10px 0px;"?

Topic Closed

This topic has been closed to new replies.

About this Topic