How can I center these two boxes?

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 :)
 
Sort by date Sort by votes
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>
Click to expand...

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>
Click to expand...

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>
Click to expand...
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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>
Click to expand...


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>
Click to expand...
 
Upvote 0 Downvote
mrGTB said:
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.
Click to expand...

Thanks mrGTB.

I tried the bottom one to test it out and it moved the two boxes over to the left hand side :unsure:
 
Upvote 0 Downvote
Try this.

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

EDIT: Never mind, Brogan posted answer seconds before me.
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

V
  • Question Question
XF 2.2 sf-dump artefacts when mp3s embedded in forum posts
Replies
14
Views
1K
voom
V
Wilouness
  • Question Question
XF 2.1 How to embed a html mailing in post
Replies
0
Views
2K
Wilouness
Wilouness
E
  • Question Question
XF 2.0 Title of thread / forum / board - p-title-header confusion
Replies
2
Views
12K
eXTA
E
Dretax
  • Question Question
XF 1.5 How can I style my login overlay like this?
Replies
3
Views
461
M@rc
M@rc
D
  • Question Question
XF 1.5 How overwrite @property style in extra.css ?
Replies
4
Views
703
dondomainer
D
Top Bottom