Solved

Social Media Bar As Div

Posted on 2015-01-01
3
99 Views
Last Modified: 2015-01-02
I am putting a social media bar together for this site: http://rosemountata.com/new_site/default.asp and it is in there now as a table.  Is that the best way to do that or is there a better way.  I am wondering if the search engines won't like the links because they are in the table.
0
Comment
Question by:Bob Schneider
3 Comments
 
LVL 33

Assisted Solution

by:Big Monty
Big Monty earned 200 total points
ID: 40527962
tables are going the way of the do-do bird when designing modern pages (html5), a lot of folks will say to use DIVs or other html5 specific containers. with that said, search engines don't care, as far as your structure is clean and valid, you won't lose any "juice" using one over the other

with your design, to me, they look a bit out of place, as they are just stuck in the left hand column surrounded by a whole lot white space. I would either make the images bigger, so they stand out more, or put them elsewhere on the page, such as the footer if you want them to be present but not in your face
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 300 total points
ID: 40528019
greetings BobbaBuoy, , HTML tables can be very necessary for muti Row-Column grid display of organized information. BUT they can be totally unnecessary for display of UN-connected single informations as you have in your social media bar display. You can simply remove ALL of the Table code and then set your "social_media" <div> to a width to fit the Images (32 pixels in this case).

<div id="social_media" style="position: absolute;width:34px;margin:100px 0 0 2px;border:1px solid #000;">
<a href="https://www.facebook.com/Rosemount.ATA" onclick="openThis(this.href,1024,768);return false;">
  <img src="/new_site/graphics/social_media/fb.png" style="width:32px;"></a>
<a href="www.twitter.com" onclick="openThis(this.href,1024,768);return false;">
  <img src="/new_site/graphics/social_media/Twitter.png" style="width:32px;"></a>
<a href="# onclick="openThis(this.href,1024,768);return false;">
  <img src="/new_site/graphics/social_media/youtube.png" style="width:32px;"></a>
<a href="#" onclick="openThis(this.href,1024,768);return false;">
  <img src="/new_site/graphics/social_media/LinkedIn-logo.png" style="width:32px;"></a>
<a href="#" onclick="openThis(this.href,1024,768);return false;">
  <img src="/new_site/graphics/social_media/GooglePlus-512-Red.png" style="width:32px;"></a>

</div>

Open in new window

when using an absolute positioned <div>, it is usually best to set a width to correspond to the contents, if you do not set a width you may not be able to predict the display in all browsers.
    ATTENTION: I have placed a black BORDER on the "social_media" div for DEVELOPMENT, so you can see the size and position of this div, remove the border, when you see that your div display is correct.

Ask questions if you need more info.
0
 

Author Comment

by:Bob Schneider
ID: 40528046
Great assistance and insight.  Thanks to both. I kind of like them off to the side like that but you might be right...ultimately I may move them.  Nonetheless, great solution..I will try the div layout to see what that does.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
If you don’t want your company's site to fail on the web, you’d do well to observe these best web design practices and make sure you implement them when applicable.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now