Quite Urgent – Need help with centering content

Community Forums Forums Design Tips and Tricks Quite Urgent – Need help with centering content

This topic is: resolved

This topic contains 9 replies, has 2 voices, and was last updated by  LaunchPad777 4 months, 3 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #92299

    LaunchPad777
    Member
    Post count: 96

    Hello all,

    Busy working on client site using Parallax Pro….

    Don’t think I can use Content Column Classes to achieve this because the column size options don’t provide me with enough space for the content….http://my.studiopress.com/tutorials/content-column-classes/

    Let me explain, if I use the 3 column option, it provides 3 equally spaced columns, this doesn’t provide enough width in the middle column. I need the outside columns to be “empty” – purely to re-create the look that the designed has specified.
    See screencast http://screencast.com/t/4sSfwXRoZs3

    1. Is there a way of creating non-standard columns i.e. 20% 60% 20% ?
    - when I say that, I mean easy to create and use in the same way that you use the standard ones!

    2. Is there another effective way to center and restrict the width of the content inside of a widget?

    Your help is appreciated…
    Regards
    Greg

    • This topic was modified 4 months, 4 weeks ago by  LaunchPad777.
    • This topic was modified 4 months, 4 weeks ago by  LaunchPad777.
    http://www.test.gregcooksley.com
    #92319

    Peter
    Participant
    Post count: 95

    Will there be content in those empty columns? Or are you using those empty columns to center your content? If the latter case then don’t make empty columns, better to give your content a width, and then use margin auto to center it. For example…

    .yourcontent {
        width: 700px;
        margin-left: auto;
        margin-right: auto;
    }
    • This reply was modified 4 months, 4 weeks ago by  Peter.
    • This reply was modified 4 months, 4 weeks ago by  Peter.
    #92321

    Peter
    Participant
    Post count: 95

    or just give it padding: 250px; or something instead of margin auto.

    #92339

    LaunchPad777
    Member
    Post count: 96

    Hi Peter,

    Yes, the idea was to use empty columns to force the width of the content to be restricted…..

    In your example above, if the content is in a widget – do you target the widget?

    Regards
    Greg

    #92342

    Peter
    Participant
    Post count: 95

    Without seeing your HTML, I can’t say for sure. But from your description, you should apply the style to the widget’s container (and not the widgets inside the widget container)

    However, since your intention is simply to create white-space around your content, I recommend you instead to use padding on the container of your content. For example if your html looked like this:

    <body>
      <div class="wrap">
        <div class="widget-area">
          <div class="widget">
            <p>some content</p>
          </div>
        </div>
      </div>
    </body>

    then you would add padding to the .wrap { padding-left: 200px; padding-right:200; } Again, I’d need to know the exact html to give a definitive answer.

    #92355

    LaunchPad777
    Member
    Post count: 96

    Hi Peter,

    Managed to find this code:
    #black-studio-tinymce-2 .textwidget {
    margin-left: 100px;
    margin-right: 100px;
    }

    It enabled me to insert margins on each side of the content….so far so good…..applying to other widgets.

    Does that look similar to what you were suggesting?
    Regards
    Greg

    #92367

    Peter
    Participant
    Post count: 95

    Have an example site? But I’ll make a guess and assume #black-studio-tinymce-2 is the content’s container. If so then

    #black-studio-tinymce-2 {
    padding-left: 100px;
    padding-right: 100px;
    }

    should be all that’s needed.

    #92444

    LaunchPad777
    Member
    Post count: 96

    Hi Peter,

    My apologies… http://www.test.gregcooksley.com

    Is it better to use padding rather than margin?
    Best practice?

    Regards

    Greg

    #92532

    Peter
    Participant
    Post count: 95

    In this case padding and margin won’t make a difference. But best practice would be to use padding here. Padding is generally used when you want to add space inside of an element. Margin is generally used when you want to separate elements on the same level (siblings) from each other.

    Do you only want to pad that section? If so then you’re already done. If you want to pad including the title then

    #black-studio-tinymce-2 .widget-wrap {
        padding-left: 200px;
        padding-right: 200px;
    
       /* ...or shorthand, padding: 0 200px; */
    }
    #93079

    LaunchPad777
    Member
    Post count: 96

    Thanks for your help Peter…

    Appreciated it.

    Regards

    Greg

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Quite Urgent – Need help with centering content’ is closed to new replies.