Centering a contect box

brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
edited July 25, 2014 in SmugMug Customization
What's the best/ easiest way to center a content box on a page where you do not want the box to fill the width of the page? I currently use empty content boxes (with and empty div) on either side of the "filled" content box. There has to be a better way.

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited July 23, 2014
    A few ways...
    'width: 0 auto;'
    
    'width: 0 20%;' - this will give you a margin left/right 40% of the total width.
    
    'text-align: center;'
    

    Do you have a specific aplication?
  • BeaBea Registered Users Posts: 112 Major grins
    edited July 23, 2014
    Hi Anthony,

    Could you please send us a link to the page where you have those content blocks, via email: http://help.smugmug.com/customer/portal/emails/new ? We'll be happy to have a look and help you further.

    We're standing by,
    Bea
    SmugMug Support Hero | My website: www.beabird.net
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited July 23, 2014
    What's the best/ easiest way to center a content box on a page where you do not want the box to fill the width of the page? I currently use empty content boxes (with and empty div) on either side of the "filled" content box. There has to be a better way.

    There is a spacer content block for making empty space. (Design section? - sorry, don't have SM open at the moment.)
    Then you can set the container width of each of them (one on each side), to force the material where you want it.

    Probably other solutions as well...
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited July 23, 2014
    A few ways...
    'width: 0 auto;'
    
    'width: 0 20%;' - this will give you a margin left/right 40% of the total width.
    
    'text-align: center;'
    
    Do you have a specific aplication?

    This homepage (I maintain the site for the owner) has several empty div html content boxes to center the visible blocks.
    http://www.onbroadwaydancers.com/
  • brandofamilybrandofamily Registered Users Posts: 2,013 Major grins
    edited July 23, 2014
    A few ways...
    'width: 0 auto;'
    
    'width: 0 20%;' - this will give you a margin left/right 40% of the total width.
    
    'text-align: center;'
    
    Do you have a specific aplication?

    Where would I put this code?
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited July 23, 2014
    Use ONE HTML/CSS box. Delete the other. Add this to your HTML box:

    [html]
    <div id="center-container">

    <div class="center-box">
    <p>Text goes here</p>
    </div>

    <div class="center-box">
    <p>Text goes here</p>
    </div>

    </div>
    [/html]

    Add this to the CSS:
    #center-container {
        padding: 5%;
        background: #ccc;
        }
    
    .center-box {
        margin: 20px;
        padding: 5%;
        border: 2px solid #fff;
        background: #999;
        }
    

    Obviously you need to edit your .center-box colors. This way both boxes will have the same size and color/border properties.
  • Darter02Darter02 Registered Users Posts: 947 Major grins
    edited July 25, 2014
    Cool beans. Just commenting so I can find this thread when I need to use this information.
  • zubenelgenubizubenelgenubi Registered Users Posts: 67 Big grins
    edited July 25, 2014
    Thanks Mike,

    The "margin" property did the trick for me. Here's an example, from the "404" page for my site:

    http://zubenelgenubi.smugmug.com/404

    I used the normal smugmug customizer to set the overall width of the text box to 100%. Then I used the following CSS code to set the margins to 25% on each side (and 5% top and bottom.)

    .sm-page-widget-text {
    background-color: rgba(45, 45, 45, 0.60);
    padding: 5px;
    border-radius:10px;
    border: 1px solid black;
    box-shadow: -8px 8px 12px black;
    overflow:hidden;
    text-align: left;
    margin: 5% 25% 5% 25%;
    }

    This produced exactly what I want: a centered text box that is only 50% of the width of the current browser window. It stays centered but automatically adjusts it's width as I resize my browser window. Perfect!

    Thanks,

    - Mark

    Use ONE HTML/CSS box. Delete the other. Add this to your HTML box:

    [html]
    <div id="center-container">

    <div class="center-box">
    <p>Text goes here</p>
    </div>

    <div class="center-box">
    <p>Text goes here</p>
    </div>

    </div>
    [/html]Add this to the CSS:
    #center-container {
        padding: 5%;
        background: #ccc;
        }
    
    .center-box {
        margin: 20px;
        padding: 5%;
        border: 2px solid #fff;
        background: #999;
        }
    
    Obviously you need to edit your .center-box colors. This way both boxes will have the same size and color/border properties.
Sign In or Register to comment.