Solved

Social Media Bar As Div

Posted on 2015-01-01
3
96 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 32

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

895 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

15 Experts available now in Live!

Get 1:1 Help Now