1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How can I center these two boxes?

Discussion in 'Styling and Customization Questions' started by DaveL, Apr 13, 2012.

  1. DaveL

    DaveL Well-Known Member

    Hi,

    Really hoping someone can help as im a little stuck! Im looking to center the two boxes on this page - http://www.doverlocals.co.uk/pages/DoverandFolkestoneAttractions/

    This is the code im using:

    HTML:
    <div class="messageText baseHtml">
    <center>
        <div class="daf_attractions_links_gridRow">
            <div class="daf_attractions_links_gridCell1">
                <a href="{$xenOptions.boardUrl}/pages/DoverAttractions" class="dcr_linkPlain">       
                    <div class="daf_attractions_linkContent">
     
                        <h4 class="daf_attractions_h4">Dover</h4></a>
     
     
                        <div class="daf_attractions_linkImage">
                            <a href="{$xenOptions.boardUrl}/pages/DoverAttractions" class="dcr_linkPlain">    <img src="{$xenOptions.boardUrl}/images/DoverandFolkestoneAttractions/DoverCastle.jpg" alt="Dover Attractions">
    </a>
                        </div>
                    </div>
                           
            </div>
           
            <div class="daf_attractions_links_gridCell2">
                <a href="{$xenOptions.boardUrl}/pages/FolkestoneAttractions" class="dcr_linkPlain">
     
                    <div class="daf_attractions_linkContent">
                        <h4 class="daf_attractions_h4">Folkestone</h4></a>
                        <div class="daf_attractions_linkImage">
                        <a href="{$xenOptions.boardUrl}/pages/FolkestoneAttractions" class="dcr_linkPlain">    <img src="{$xenOptions.boardUrl}/images/DoverandFolkestoneAttractions/folkestoneharbour.jpg" alt="Folkestone Attractions">
                        </div>
                    </div>
                </a>
            </div>
     
        </div>
    And this is the current CSS I have:

    HTML:
    /* Dover & Folkestone Attractions Page */
    .daf_attractions_links_gridRow {
    position: relative;
    width: 90%;
    margin: 10px 0;
    }
     
    .daf_attractions_links_gridCell1,
    .daf_attractions_links_gridCell2,
    .daf_attractions_links_gridCell3,
    .daf_attractions_links_gridCell4 {
    position: relative;
    width: 200px;
    height: 180px;
    float: left;
    background: @primaryLight url('{$xenOptions.boardUrl}/images/dcr_title_gradient.png') repeat-x top;
    border: 1px solid rgb(192, 192, 192);
    border-radius: 10px; -webkit-border-radius:  10px; -moz-border-radius:  10px; -khtml-border-radius:  10px;
    box-shadow: 2px 2px 5px rgba(0,0,0, 0.4); -webkit-box-shadow: 2px 2px 5px rgba(0,0,0, 0.4); -moz-box-shadow: 2px 2px 5px rgba(0,0,0, 0.4); -khtml-box-shadow: 2px 2px 5px rgba(0,0,0, 0.4);
    }
     
        .daf_attractions_links_gridCell1:hover ,
        .daf_attractions_links_gridCell2:hover ,
        .daf_attractions_links_gridCell3:hover ,
        .daf_attractions_links_gridCell4:hover
        {
        background-color: @secondaryLighter;;
        border-color: rgb(160, 160, 160);
        box-shadow: 2px 2px 5px rgba(0,0,0, 0.8); -webkit-box-shadow: 2px 2px 5px rgba(0,0,0, 0.8); -moz-box-shadow: 2px 2px 5px rgba(0,0,0, 0.8); -khtml-box-shadow: 2px 2px 5px rgba(0,0,0, 0.8);
     
    }
     
     
        }
     
        .daf_attractions_links_gridCell1 {
        left: 0%;
        }
     
        .daf_attractions_links_gridCell2 {
        left: 5%;
        }
     
        .daf_attractions_links_gridCell3 {
        left: 10%;
        }
     
        .daf_attractions_links_gridCell4 {
        left: 15%;
        }
     
    .daf_attractions_linkContent {
    text-align: center;
    color: @primaryDark;
    }
     
    h4.daf_attractions_h4 {
    padding: 2px 0 0;
    }
     
    .daf_attractions_linkImage {
    width: 100%;
    height: 100%;
     
    }
    Im guessing its going to be something realy simple and i'll kick myself afterwards!

    Thanks in advance :)
     
  2. Digital Doctor

    Digital Doctor Well-Known Member

    Sorry no idea.
    It must be simple.

    Just wanted to say ... Looks great !!!

    nice.tiles.jpg
     
  3. mrGTB

    mrGTB Well-Known Member

    When I wanted to center something in sidebar before, think it was adsense tower banner. I used this as margin to do it.

    Code:
    margin-left: auto;
    margin-right: auto;
    
    Also, not sure why your using this in your code below, it's long since been deprecated. Plus you don't even have a closing tag included for it anyway.
    <center>


    Why have you also got the closing </a> after 2 closing divs? I'm seeing what looks like quite a few mistakes in your code as a whole, that's just one.

    This looks funny to me also. Not sure why your throwing a DIV CLASS (blue colour) into the middle of a URL that's not yet even been closed with </a>.

     
  4. DaveL

    DaveL Well-Known Member

    Thanks for the replies, I must say im a bit lost now! RE the first <center>, I deleted the closing </center> but forgot to remove the opening when it didnt work.

    Im not sure what to remove and what not too! Also, If I put the margin autos into the css, how do I reference them in the html?

    Anyone know of an easy fix? Really appreciate the help as im going to be using this code on a lot of my pages.
     
  5. mrGTB

    mrGTB Well-Known Member

    Well you could add this in EXTRA.css first.

    .test {
    margin-right: auto;
    margin-left: auto;
    }

    Then in your code using this and see what happens, this is purely a test and I've no idea if will work or not.


    Or try this instead, both the same but bottom one doesn't require anything added in Extra.css at all (just for quick testing). Left out all your code as your only testing to see if gets aligned centre.

     
    DaveL likes this.
  6. DaveL

    DaveL Well-Known Member

    Thanks mrGTB.

    I tried the bottom one to test it out and it moved the two boxes over to the left hand side :unsure:
     
  7. Brogan

    Brogan XenForo Moderator Staff Member

    Code:
    .daf_attractions_links_gridRow {
        margin: 10px auto;
        position: relative;
        width: 430px;
    }
    P.S. I recognise that code ;)
     
    DaveL likes this.
  8. mrGTB

    mrGTB Well-Known Member

    Try this.

    display: inline-block;
    margin-right:auto;
    margin-left:auto;
    text-align:center;

    EDIT: Never mind, Brogan posted answer seconds before me.
     
    DaveL likes this.
  9. DaveL

    DaveL Well-Known Member

    Thank you all, thats worked a treat! Ive also think ive tidyed the code up. This is the code im using now

    HTML:
    <div class="messageText baseHtml">
        <div class="daf_attractions_links_gridRow">
            <div class="daf_attractions_links_gridCell1">
                   
                    <div class="daf_attractions_linkContent">
     
                        <h4 class="daf_attractions_h4">Dover</h4></a>
     
     
                        <div class="daf_attractions_linkImage">
                            <a href="{$xenOptions.boardUrl}/pages/DoverAttractions">    <img src="{$xenOptions.boardUrl}/images/DoverandFolkestoneAttractions/DoverCastle.jpg" alt="Dover Attractions">
    </a>
                        </div>
                    </div>
                           
            </div>
           
            <div class="daf_attractions_links_gridCell2">
               
     
                    <div class="daf_attractions_linkContent">
                        <h4 class="daf_attractions_h4">Folkestone</h4></a>
                        <div class="daf_attractions_linkImage">
                        <a href="{$xenOptions.boardUrl}/pages/FolkestoneAttractions">    <img src="{$xenOptions.boardUrl}/images/DoverandFolkestoneAttractions/folkestoneharbour.jpg" alt="Folkestone Attractions"></a>
                        </div>
                    </div>       
     
            </div>
    One more quick question, when I load the page, the bottom of the page (Share This and below) seems to jump around quite a bit. Is that normal or something ive got wrong in the above code?

    Thanks again for all your help
     

Share This Page