CODEWITHSUNDEEP
htmlcsswordpress
user3480560
user3480560

Reputation: 51

Fix footer table/div issue

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>

Upvotes: 0

Views: 150

Answers (4)

VincentVisser
VincentVisser

Reputation: 23

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>

Upvotes: 0

Milan and Friends
Milan and Friends

Reputation: 5610

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.

Upvotes: 1

Jason
Jason

Reputation: 4149

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

Upvotes: 0

dk_french032
dk_french032

Reputation: 648

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>

Upvotes: 2

Related Questions