Solved

Social Media Bar As Div

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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

708 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

13 Experts available now in Live!

Get 1:1 Help Now