Footer & Social Media Links

HTML & CSS
1

I am having a little trouble organizing my footer with social media links too this is what I have so far in my HTML and CSS: the linked icon is off not sure if I have the right coding and organization I want it next to the words “Find Us” IOG Products

Capture.JPG1021×55 13.1 KB

    div id="footer">
                <p> 
                    <a href="https://www.linkedin.com/company/iog-products">
            <img src="images/LINKEDIN.png" alt="IOG Linkedin" style="width:22px;height:22px;">
                    </a>Find Us</p> 
                    <a href="/CONTACT2.aspx">Contact Us</a><p class="IOG" style="margin-right:200px">IOG Products, LLC.&nbsp;&nbsp;United States of America
                </p>
            </div>


#footer {
	width: 974px;
	height:40px;
	clear: both;
    background: #eae9e9;
	margin: 0 auto; 
 
}

#footer a {
   color:black;
   font-size:10pt;
   font-weight:700;
   font-family: "open sans", sans-serif;
   text-decoration: underline;
   padding-top:10px;
   padding-left:20px;
  float:left;

 }

#footer p  {
   color:black;
   font-family: "open sans", sans-serif;
   margin-right:70px;
   float:right;
   margin-top:9px;
   font-size:10pt;
   font-weight:700;
   
   
}
2 
#footer p a {
float: none;
vertical-align: middle;
padding-top: 0;
display: inline-block;
}

Let me know if you need an explanation about why this is needed.

3

Great Ok why did I need those.

4

You selected all anchors in #footer to be floated. You can’t have it floated since there just isn’t enough room (Find Us gets dropped.)
The display inline-block is so we can mess with the vertical alignment
The vertical-align is to line up the image with the text
The padding is to stop the default padding you set on #footer a{} which would otherwise screw up alignment

5

Ok I want the linked in icon to be after the word “Find Us” as well. I know this footer is a mess sorry :disappointed:

6

Then make “Find Us” text come before your link in the HTML :wink: .

7

go it thanks.

8

So I decided to make use of <table> tags instead for better organization but im having spacing issues in my <td> selectors are having space issues not sure why they are spaced out so much.

 <div id="socialmedia">
                <table id="sociallinks">
                <tbody>
                  <tr>
                      <td><p>Find Us</p></td>
                      <td>
                      <a href="https://www.linkedin.com/company/iog-products">
                <img src="images/LINKEDIN.png" alt="IOG Linkedin" style="width:22px;height:22px;border:0;margin-right:-55px;"></a>
                      </td>
                      <td>
                     <a href="https://www.youtube.com/channel/UCyOKfWuCu0aYTFJdzh-4qmg">
        <img src="images/YOUTUBE.png" alt="IOG YouTube" style="width:22px;height:22px;border:0;margin-right:-60px;"></a>
                      </td>
                      <td>
                     <a href="http://www.directindustry.com/prod/iog-products-85455.html">
        <img src="images/DIRECTINDUSTRY.png" alt="IOG DirectIndustry"  style="width:22px;height:22px;border:0;margin-right:-60px;"></a>
                      </td>
                  </tr>
                </tbody>
                </table>
9

Not sure if Ryan is around at the moment.

Please check out your last anchor. The code looks a bit out of the ordinary.

<a href="http://www.directindustry.com/prod/iog-products-85455.html">
        <img src="images/DIRECTINDUSTRY.png" alt="IOG DirectIndustry" <img src="/community/uploads/default/original/3X/a/e/ae9fad3a478fac3ddade4567370fa26aec1e9d81.JPG" width="511" height="103"> style="width:22px;height:22px;border:0;margin-right:-60px;"></a>

Regarding <td> tags, you can temporarily assign a 1px outline to the <td> tags to see what they encompass.
td {outline:1px solid red}

10

Thanks Ron - went for a bit of a run :slight_smile: . Needed a break from Sitepoint.

I’m not sure why you decided to changey our structure to tables? It’s more code and sloppy, not to mention unsemantic.

Ron seems to have helped you out though.

1 Like
11

Well its like that because of space issues when I copy and paste here on the forum…

This is what I get when I temporarily put in the outline syntax…but dont <td> selectors automatically have space?

12

Really?? ugh :weary: …for a second I though it was more organized and better than what I had…

13

What kind of “space” are you looking for? The table is behaving as expected. The cells are as wide as needed. The right alignment you are seeing are because of the left padding you have set on #footer a{}. Removing the padding would show an even smaller table.

You have to balance organization and semantics. You had no need for tables (HTML Tables) in this case.

14

I just needed space between the td’s and yes it was theat #footer a padding that was causing the problem.

ok. ill find some other way of making this…

15

You can use the CSS version of tables instead. Do you know how to do that?

16

Nope. Never knew that existed…

17

Could you put your HTML back to the way it was originally without all the HTML tables?

18

Ok I did it.

19

Now you need to become familiar with these two CSS values.

display:table;
display:table-cell

Pretty self explanatory. Display:table replicates <table> while display:table-cell replicates <td>.

Now take your footer code and apply this code where appropriate. You will want to remove all floating you have in the footer.

Give it some thought. If you get stumped, come back.

You’ve made your code into HTML tables already, so it should be easy for you. This is just making it more semantic, clean, and separating design from content :wink: .

20

Hint: I was mostly curious about the “nested” images in post #8.

1 Like