[Resolved] Styling GP hooks

[Davinder Sangha]

Hi.

Trying to style the bottom of the blog so that the box/table is max 1060 wide. However, anything I try isn’t reflected in the bottom.

http://www.workwearexpress.com/blog/

I’ve tried adding classes to the table, etc. in Dreamweaver, but it only applies them to the images in the footer.

[Tom]

You shouldn’t really be using tables to display information like this – you should be using divs.

For example:

<div class="grid-container grid-parent">
      <div class="grid-30">
          social icons in here
      </div>
      <div class="grid-70" style="text-align:right;">
          other info in here
      </div>
</div>

If you must use tables, try removing the width=”” attribute, and set the style width attribute to “max-width” instead.

Let me know if this helps or not 🙂

[Davinder Sangha]

Works’s great. Thanks!

I modified it a little bit so the HTML is:

<div class="grid-container grid-parent"> 
	<div class="grid-1"><a href="https://www.twitter.com/workwear_ex"><img src="https://www.workwearexpress.com/images/social/1.png" alt="Twitter" width="40" height="40"></a> <a href="https://www.facebook.com/pages/The-Workwear-Express-Group/133728690017823"><img src="https://www.workwearexpress.com/images/social/3.png" alt="Facebook" width="40" height="40"></a> <a href="https://plus.google.com/b/100249405216224979417/+Workwearexpressltd/posts"><img src="https://www.workwearexpress.com/images/social/2.png" alt="Google+" width="40" height="40"></a> <a href="https://www.youtube.com/channel/UClvfQROSDFjbdXs75u6-QCg"><img src="https://www.workwearexpress.com/images/social/4.png" alt="YouTube" width="40"></a></div> 
	<div class="grid-2"><img src="https://www.workwearexpress.com/images/payment-logos.png" alt="Payment Methods" class="Security"></span></div>
	<div class="grid-3">Head Office and Factory: Workwear Express Ltd, Cathedral Park, Belmont Industrial Estate, Durham, DH1 1TF<br>
Tel: 0800 028 5867 | Fax: 0191 384 7468 | Email: <a href="mailto:sales@workwearexpress.com">sales@workwearexpress.com</a><br>
Registered in England. Company No. 3743499</span></div>
<div class="grid-4"><img src="https://www.workwearexpress.com/images/25years.png" alt="Celebrating 25 Years" width="70" height="70"></div></div>

and the CSS is:

.grid-1 {
    float: left;}

.grid-2 {
    float: right;}

.grid-3 {
    display: block;
    float: left;
    font-family: arial;
    font-size: 12px;
    line-height: 18px;
    position: relative;
    text-align: right;
    width: 92%;}

.grid-4 {
    float: right;}

[Tom]

Awesome! 🙂

[Author]

Posts