How can I speed this page loading up? (Custom Xenforo Page)

[DaveL]

Ive created this page using Xenforo pages, but was just wondering if anyone could advise me how I might get it to load a bit quicker? It seems to take a while for all the pics to load and im on 20mb broadband.

I also wanted to try and get each line of pics centered rather then starting on the left, but didnt have much joy using <center>, If anyone knows whats stopping that from working I would be a happy man!

 

[Paul B]

Ah, I've just noticed you've still got some of my old code in there.
My site is fixed width so you will need to remove any references to that from it all.

 

[DaveL]

Ah! Is that in the HTML or in the CSS?

 

[Paul B]

Some of the CSS classes.

I would recommend going through each class in turn, starting at the outermost div and setting them up exactly as you want, removing any erroneous code as you go.

 

[DaveL]

I think ive cracked it!

I altered the below into percentages and it now seems to have centered them

.dcr_presenters_gridCell1 {
left: 5%;
}

.dcr_presenters_gridCell2 {
left: 10%;
}

.dcr_presenters_gridCell3 {
left: 15%;
}

.dcr_presenters_gridCell4 {
left: 20%;
}

Seems to be working ok on IE and FF

 

[DaveL]

I think I spoke too soon. Thought I had it cracked until I tried to add a second row in and now its all gone up the wall. Link

This is the HTML im using. Ive been playing around with it for the past hour but not having any joy at all. Can anyone see any glaring obivious error that ive missed!

<div class="messageText baseHtml">
    <div class="dcr_presenters_gridRow">

        <div class="dcr_presenters_gridCell1">
            <a href="{$xenOptions.boardUrl}/pages/OnAir__AlbertThorp" class="dcr_linkPlain">
                <div class="dcr_presenters_image"><img src="{$xenOptions.boardUrl}/images/presenters/Albert 3.jpg" alt="Albert Thorp"></div>
<center><b>Albert Thorp</b></center>
            </a></div>

        <div class="dcr_presenters_gridCell2">
            <a href="{$xenOptions.boardUrl}/pages/OnAir__BarryOBrien" class="dcr_linkPlain">
                <div class="dcr_presenters_image"><img src="{$xenOptions.boardUrl}/images/presenters/Barry 2.jpg" alt="Barry O'Brien"></div>
                    <div class="dcr_presenters_name">Barry O'Brien</div>
</a> </div>

<div class="dcr_presenters_gridCell3">
<a href="{$xenOptions.boardUrl}/pages/OnAir__CallumMoorin" class="dcr_linkPlain">
<div class="dcr_presenters_image"><img src="{$xenOptions.boardUrl}/images/presenters/Callum 2.jpg" alt="Callum Moorin"></div>
<div class="dcr_presenters_name">Callum Moorin</div>
</a></div>

<div class="dcr_presenters_gridCell4">
<a href="{$xenOptions.boardUrl}/pages/OnAir__GaryScott" class="dcr_linkPlain">
<div class="dcr_presenters_image"><img src="{$xenOptions.boardUrl}/images/presenters/Mal 2.jpg" alt="Gary Scott"></div>
<div class="dcr_presenters_nameSingle">Gary Scott</div>
</a> </div>
</div>

<div class="dcr_presenters_gridRow">

<div class="dcr_presenters_gridCell1">
            <a href="{$xenOptions.boardUrl}/pages/OnAir__AlbertThorp" class="dcr_linkPlain">
                <div class="dcr_presenters_image"><img src="{$xenOptions.boardUrl}/images/presenters/Albert 3.jpg" alt="Albert Thorp"></div>
<center><b>Albert Thorp</b></center>
            </a></div>

        <div class="dcr_presenters_gridCell2">
            <a href="{$xenOptions.boardUrl}/pages/OnAir__BarryOBrien" class="dcr_linkPlain">
                <div class="dcr_presenters_image"><img src="{$xenOptions.boardUrl}/images/presenters/Barry 2.jpg" alt="Barry O'Brien"></div>
                    <div class="dcr_presenters_name">Barry O'Brien</div>
</a> </div>

<div class="dcr_presenters_gridCell3">
<a href="{$xenOptions.boardUrl}/pages/OnAir__CallumMoorin" class="dcr_linkPlain">
<div class="dcr_presenters_image"><img src="{$xenOptions.boardUrl}/images/presenters/Callum 2.jpg" alt="Callum Moorin"></div>
<div class="dcr_presenters_name">Callum Moorin</div>
</a></div>

<div class="dcr_presenters_gridCell4">
<a href="{$xenOptions.boardUrl}/pages/OnAir__GaryScott" class="dcr_linkPlain">
<div class="dcr_presenters_image"><img src="{$xenOptions.boardUrl}/images/presenters/Mal 2.jpg" alt="Gary Scott"></div>
<div class="dcr_presenters_nameSingle">Gary Scott</div>
</a> </div>
</div>

</div>

This is the CSS as well incase it helps!

/* Presenters Page */
.dcr_presenters_name {
text-align: center
font-weight: bold;
}

.dcr_presenters_gridRow {
position: relative;

margin: 0 auto;

}

.dcr_presenters_gridCell1,
.dcr_presenters_gridCell2,
.dcr_presenters_gridCell3,
.dcr_presenters_gridCell4 {
position: relative;
width: 180px;
height: 200x;
float: left;
background-color: @secondaryLighter;
border-radius: 4px;
box-shadow: 2px 2px 5px rgba(0,0,0, 0.4);
}

    .dcr_presenters_gridCell1:hover ,
    .dcr_presenters_gridCell2:hover ,
    .dcr_presenters_gridCell3:hover ,
    .dcr_presenters_gridCell4:hover {
    background-color: @pageBackground;
    box-shadow: 2px 2px 5px rgba(0,0,0, 0.8);
    }

    .dcr_presenters_gridCell1 {
    left: 5%;
    }

    .dcr_presenters_gridCell2 {
    left: 10%;
    }

    .dcr_presenters_gridCell3 {
    left: 15%;
    }

    .dcr_presenters_gridCell4 {
    left: 20%;
    }

.dcr_linkPlain {
text-decoration: none !important;
}

EDIT - I went back to the start and did every thing again - All seems to be working, including the text bold/center! Woohoo!