Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Social Media Bar As Div

Posted on 2015-01-01
3
100 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 34

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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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…
Google always has something new and amazing up its sleeve, and the most current thing that they have been working on is another step in the evolution of Google Search, from machine learning to its brilliant successor, deep learning.
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…
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…

808 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