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:
And this is the current CSS I have:
Im guessing its going to be something realy simple and i'll kick myself afterwards!
Thanks in advance
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