Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Vertical alignment within a table

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #42177

    Hi guys,

    Quick and simple hopefully. Take a look at the page I’ve linked below. All of the info (pics,blurb,audio players) is in a table. I created the table in MS Word and literally copied and pasted the table into word press which it apparently likes. However sometimes it doesn’t remember all the formatting so I was wondering if you could let me know the code that will allow me to vertically centre align everything that is in the table? If come across ‘vlign’ but haven’t managed to make it work for me yet.

    http://dnaproductionsuk.com/home/audio-mixing-mastering/

    Any help appreciated. Any code is fine. I realise I’m in a CSS forum but if you know html to solve it that’s just as good.

    Thanks!

    #121987
    Kitty Giraudel
    Participant

    I’d go with vertical-align: middle; on both th and td tags.

    #121988

    Hey Hugo thanks for getting back.

    I’ve tried that yes, seems logical but I haven’t got it to work. Here is the code for the first row of my table. See anything wrong with it that would mean all columns of that row wouldn’t align?

    MOD EDIT: Unviewable Code Removed

    #121999

    It won’t let me post it. Any chance you can check the source code for that page?

    #121998
    Paulie_D
    Member

    You certainly need to remove the inline styling (which is wrong anyway).

    Add: vertical-align: middle;

    to line 3466/7 + in your CSS sheet

    .entry-content td,
    .comment-content td {
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 0;
    vertical-align: middle;
    }

    I do think, however, that you might want to think about converting that table into a series of divs.

    #121993

    Ah great thanks, that’s done it. Could you tell me, does that apply to every table in the site? If not, what section of the code ‘directs’ it to this particular table?

    #121995
    Paulie_D
    Member

    It will apply to all tables **within divs with a class of “entry-content” or “comment-content”**.

    #122000

    I’m used to dabble in a bit of C++ so I’m thinking along those lines… How do I ‘declare’ this table to have the class of entry-content? Obviously it has been done but by word press for me! Thanks for your help!

    #122002
    Paulie_D
    Member

    The table doesn’t have that class, the div in which the table is sitting has that class.

    I have little knowledge of WP but my assumption is that every post/entry is given a div in which to sit and that’s what you have pasted you table into.

    #122017

    That would make sense yes. I’ve just noticed that it has changed the homepage items within the table as well. do you know how I would say, change table in page #x rather than the whole div? At the moment it reads

    .entry-content td,
    .comment-content td {
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 0;
    vertical-align: middle;
    }

    So I just need to change .entry comment td to maybe the page id td? does that sound right?

    #122019
    Paulie_D
    Member

    Well…obviously, it’s really ‘old style’ to be using tables at all….

    However, if you want that vertical alignment on a **specific page** only then you will have identify the ID that goes with your page (.page-id-321 I think.)

    As I sad though, you should be moving away from tables and perhaps thinking of using a custom post type or a wrapping div with a special class.

    As always, there are better people than me at WP…in fact, anyone is better than me.

    #122022

    There’s maybe better people out there at WP but none quite as good at hitting the nail directly on the head! Thanks, that’s done it. I will certainly be looking into wrapping divs for round 2 of website updates but for now I just need this thing up there and looking good! Thanks again!

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.