• 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?

DaveL

Well-known member
#1
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 :)
 

mrGTB

Well-known member
#3
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>


<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>
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.

<a href="{$xenOptions.boardUrl}/pages/FolkestoneAttractions" class="dcr_linkPlain"> <img src="{$xenOptions.boardUrl}/images/DoverandFolkestoneAttractions/folkestoneharbour.jpg" alt="Folkestone Attractions">
</div>
</div>
</a>
</div>
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>.

<a href="{$xenOptions.boardUrl}/pages/DoverAttractions" class="dcr_linkPlain">
<div class="daf_attractions_linkContent">

<h4 class="daf_attractions_h4">Dover</h4></a>
 

DaveL

Well-known member
#4
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.
 

mrGTB

Well-known member
#5
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.

<div class="messageText baseHtml">
<div class="test">
Bla, Bla, Bla, Bla, Bla, Bla,
</div>
</div>

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.

<div class="messageText baseHtml">
<div style="margin-right:auto;margin-left:auto;">
Bla, Bla, Bla, Bla, Bla, Bla,
</div>
</div>
 

DaveL

Well-known member
#6
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.
Thanks mrGTB.

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

mrGTB

Well-known member
#8
Try this.

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

EDIT: Never mind, Brogan posted answer seconds before me.
 

DaveL

Well-known member
#9
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