making more width space…help please!

  • Author
    Posts
  • #865152

    hey there!
    I’m new to CSS (really new!), and I’d like to manage to be able to put 2 videos (small vimeo frames) one beside the other, rather than one under the other, in a post. But I don’t know how to achieve this… can someone help me please? Or send me to a link that explains how to do it (for noobs)?
    Thanks!
    Bill

    The blog I need help with is williamkraushaar.com.

    #865310

    ps: it seems that the width of the content of the post can’t exceed the width of the header at the top of the page, basically…

    #865317

    timethief
    Member

    Hello there,
    The custom design upgrade does come with Staff support. Please be patient while waiting for help with your CSS editing.
    Useful information here > https://en.forums.wordpress.com/topic/how-to-make-coraline-full-width?replies=13#post-550249
    How to here instructions here > https://en.forums.wordpress.com/topic/change-width-of-theme-1?replies=13#post-776950

    #865385

    thanks timechief,
    I’ve looked into those links and have noticed that I already have done what I need to do to have the most width possible (using the no sidebar option), but I still can’t manage to put 2 videos one next to the other…perhaps even 990 pixels is still not wide enough for that…

    #865391

    raincoaster
    Member

    I don’t think so, unless you reduce the size of the videos. There’s not only the video width, but the frame width too. If you make them both 400 px they might work.

    #865393

    jtanna01
    Member

    ‘ve looked into those links and have noticed that I already have done what I need to do to have the most width possible (using the no sidebar option), but I still can’t manage to put 2 videos one next to the other…perhaps even 990 pixels is still not wide enough for that…

    Have you tried puting the 2 videos in a table of 1 row by 2 columns? It is worth a try.

    <table>
    <tr>
    <td>Video 1 goes here</td>
    <td>Video 2 goes here</td>
    </tr>
    </table>

    When this done and if it still does’t work then you could insert explicit width size of the two columns in the above code. But do one step at a time.

    Good luck.

    #865395

    hey there
    yes I’ve tried something similar:

    <table><tr><td>
    **paste code for photograph 1 here**
    </td><td>
    **paste code for photograph 2 here**
    </td></tr></table>

    but still, I have to reduce the size of each video considerably for them to “fit” within the width of my header.

    I’d sure like to try that “insert explicit width size of the two columns in the above code” that you are talking about but I don’t know how to… :s

    #865396

    Ps: actually it seems like there’s a little extra room at the right that I should be able to use (considering that my content can’t exceed the width of the head banner) but somehow it won’t let my two videos stick side by side in that full potential space…

    #865399

    jtanna01
    Member

    Try this code:

    <table style="margin-left:auto;margin-right:auto;">
    <tr>
    <td style="width: 495px; text-align:center;">Video 1 goes here</td>
    <td style="width: 495px; text-align:center">Video 2 goes here</td>
    </tr>
    </table>

    Let us see what happens. You might need to change the 495px to slightly less just in case it has borders and margins. With WP CSS style sheet, we are not able to change the main/default style sheet so we need to improvise using inline styles.

    Good luck.

    #865401

    my god you’re a genius!
    the only thing now is I have a ugly gray little frame around the 2 videos…is there any way to get rid of that?
    thanks a bunch!

    #865402

    jtanna01
    Member

    OK now change the fist line of the code to this one:

    <table style="margin-left:auto;margin-right:auto; border: 0;">

    In the above code, I have inserted border: 0; as additional table property.

    See if this works.

    #865403

    wow…you’ve got the skillz!
    thanks a lot for your patience and quick replies, it’s working fine now!

    can I also just change 495px to higher if ever I just want to make the whole thing wider to increase the size of the videos (since they’re kinda small now, in order to fit next to each other…)?

    #865404

    justpi
    Member

    First, table cells in the theme you’r using have default padding you need to override. Second, a table is used for items in rows and columns: you don’t use a table for just a couple of items. This is what you need:

    <div style="float:left;">
    [vimeo http://vimeo.com/39498131 w=480]
    </div>
    <div style="float:right;">
    [vimeo http://vimeo.com/37992053 w=480]
    </div>
    <br style="clear:both;" />

    #865405

    jtanna01
    Member

    Sure you can change the code as you wish; Just keep an eye on how it looks in the browser at each change so that you can reverse it if it doesn’t work.

    Good luck.

    #865406

    damn I have so much to learn about html…thanks guys, everything is working just the way I wanted!

    #865407

    justpi
    Member

    You’re welcome.

The topic ‘making more width space…help please!’ is closed to new replies.