0

I'm trying to align three small logos in a footer widget in a single line (using Wordpress, theme is Press coders) I've created a mock up of what I want at:

Image

However everything is skewing beyond belief!

You can see the mess in my footer at:

www.oxfordlifestylecentre.co.uk

I've tried using both a div and a table, my latest table looks like:

<table align="right">
 <tr>
  <td>
    <a href="/gym/">
    <img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-1.jpg" alt="Health and Fitness" />
  </td>
  <td>
    <a href="/hair-and-beauty/>
    <img src="http://www.oxfordlifestylecentre.co.uk/wp- content/uploads/2014/07/hair-and-beauty-1.jpg" alt="Hair and Beauty" />
  </td>
 </tr>
</table>
Milan and Friends
  • 5,560
  • 1
  • 20
  • 28
user3480560
  • 51
  • 2
  • 6

4 Answers4

2

You html syntax is wrong. You are missing closing anchors and quotation marks. Try this.

<table align="right">
    <tr>
        <td>
            <a href="/gym/">
                <img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-1.jpg" alt="Health and Fitness" /></a>
        </td>
        <td>
            <a href="/hair-and-beauty/">
            <img src="http://www.oxfordlifestylecentre.co.uk/wp- content/uploads/2014/07/hair-and-beauty-1.jpg" alt="Hair and Beauty" /></a>
        </td>
   </tr>
</table>
dk_french032
  • 638
  • 1
  • 7
  • 22
  • Thanks for the reply, this works but shrinks my images and aligns them to the left rather than the right. I guess some styling must be being pulled from elsewhere? – user3480560 Jul 24 '14 at 14:40
1

Try this, Fiddle

<div class="logos">
  <a href="/gym/">
    <img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-logo.jpg" alt="Health and Fitness" />
  </a>
  <a href="/hair-and-beauty/">
    <img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/hair-and-beauty-logo.jpg" alt="Hair and Beauty" />
  </a>
  <a href="/nutrition-and-refreshment/">
    <img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/nutrition-and-refreshment.jpg" alt="Nutrition and Refreshment" />
  </a>
</div>

.logos {
  float: right;
  clear: right;
  width: 500px;
  height: 50px;
}
.logos img {
  height: 80%;
}
.logos a {
  text-decoration: none;
}

*Note: For the best effects resize images to same size.

Milan and Friends
  • 5,560
  • 1
  • 20
  • 28
0

As pointed out by previous answers, your HTML syntax is wrong. However, using tables for that is not the correct approach. You can simply keep the links and images inline and text-align right.

It depends on the complexity of the layout, but display:inline-block may be needed or you might need to wrap certain elements in a container. Either approach is superior to using tables for layout (Why not use tables for layout in HTML?)

HTML

<a href="#"><img src="http://placekitten.com/g/200/300" /></a><a href="#"><img src="http://placekitten.com/g/200/300" /></a><a href="#"><img src="http://placekitten.com/g/200/300" /></a>

CSS

body {
  text-align: right;
}

a {
  margin-right: 10px;
}

http://jsbin.com/wuvoriye/1/edit

Community
  • 1
  • 1
Jason
  • 4,079
  • 4
  • 22
  • 32
  • Hold your horses! I only want to align this footer widget text to the right not my entire websites copy! How can I modify the CSS above so that it only applies to this footer widget? – user3480560 Jul 24 '14 at 14:44
  • Reference a parent class or ID. Such as .footer-widget-area or something of that nature. So instead of "body" it would be ".footer-widget-area" or something of that nature. You will need to restructure the footer HTML a little when you remove the table, anyhow. – Jason Jul 24 '14 at 14:47
  • Thanks Jason, will give it a whirl, what do you mean by "restructure the footer html a little"? – user3480560 Jul 24 '14 at 14:52
  • Your footer is constructed using a table. If you remove the table, and use another method, that would be restructuring the HTML. – Jason Jul 24 '14 at 14:54
  • Gotcha, I tried replacing body with the following classes: .footer-widget-container .textwidget .widget widget_text Unfortunately I still have a picture of a kitten on the left hand side :/ – user3480560 Jul 24 '14 at 14:56
0

Ok so where to start:

1: dont use a table. 2: dont use a table. 3: you get the picture here....

Now for the fix: I have left comments into it for you so to explain what I did. I put in inline style for you so just add it to your css file.

<section class="footer-widget-container">
    <div id="footer-widget-area" class="inside widget-area">
        <!-- Social Media Div First -->
        <div id="pc_info_widget_designfolio-pro-3" class="widget pc_info_widget" style="width: 40%; float: left;">
            <!-- simple p tag with a class is all that needed -->
            <p class="phone" style="margin: 0; padding: 0;">
                (949) 867-5307
            </p>
            <!-- keep it simple: list items floated left + you can now just add as many as you want -->
            <ul style="float: left; margin: 0; padding: 0;">
                <li style="float: left; list-style: none;">
                    <a class="sm-icon" target="_blank"  href="http://www.facebook.com//lifestyle-center">
                        <img width="32" height="32" alt="Facebook" src="http://www.oxfordlifestylecentre.co.uk/wp-content/themes/designfolio-pro/images/facebook.png">
                    </a>
                </li>
                <li style="float: left; list-style: none;">
                    <a class="sm-icon" target="_blank" href="http://twitter.com//lifestylecentre">
                        <img width="32" height="32" alt="Twitter" src="http://www.oxfordlifestylecentre.co.uk/wp-content/themes/designfolio-pro/images/twitter.png">
                    </a>
                </li>
            </ul>
        </div>
        <!-- Logo Div Second -->
        <div id="text-8" class="widget widget_text" style="width: 60%; float: left;">
            <div class="textwidget">
                <!-- Dont use tables unless its table data | Simple ul list itmes float left again -->
                <ul style="float: right;">
                    <li style="float: left; list-style: none;">
                        <a href="/gym/">
                            <img alt="Health and Fitness" src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-1.jpg">
                        </a>
                    </li>
                    <li style="float: left; list-style: none;">
                        <a href="/hair-and-beauty/">
                            <img alt="Hair and Beauty" src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/hair-and-beauty-1.jpg">
                        </a>
                    </li>
                 </ul>
            </div>
        </div>
    </div>
</section>
VincentVisser
  • 23
  • 5