• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Liutauras Vilda
  • Jeanne Boyarsky
  • Devaka Cooray
  • Paul Clapham
Sheriffs:
  • Tim Cooke
  • Knute Snortum
  • Bear Bibeault
Saloon Keepers:
  • Ron McLeod
  • Tim Moores
  • Stephan van Hulst
  • Piet Souris
  • Ganesh Patekar
Bartenders:
  • Frits Walraven
  • Carey Brown
  • Tim Holloway

putting icons at the end of a navbar

 
Ranch Hand
Posts: 207
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
hi guys

i have my navbar running horizontally across the page
i want to put icons for facebook/twitter and instagram (the icons are from fontawesome) to the right of it with a small space between the icons.
whats the best way to do this?
do i just add them to the class for my navbar?
or is there a better way to deal with this?
im taking responsiveness into account of course.
any help appreciated
 
Bartender
Posts: 20838
125
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I recommend putting them in a table. 1 row x however many icons you have columns. That way things get spaced nice and evenly with full CSS control.

I HOPE that the idiot conceit that "tables are bad" has died out now. Tables are very good for stuff like this.
 
Sheriff
Posts: 67266
170
Mac Mac OS X IntelliJ IDE jQuery Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Tables are great for tables. CSS is better for layout. I'd recommend learning how to use flex box CSS.
 
Bartender
Posts: 2291
95
Google Web Toolkit Eclipse IDE Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I would not say Tables are bad, but using tables for html layout isnt good as per my perspective. A table contains a lot more meta tags than a simple div alternative. Next, OP requires a responsiveness layout, this typically requires wrapping icons into seperate lines to accomodate the change in size. While a Table can be styled to achieve this, I wouldnt advise that.

@Op, are you able to write CSS to accomplish what you want using html like this ? :

 
Tim Holloway
Bartender
Posts: 20838
125
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Bear Bibeault wrote:Tables are great for tables. CSS is better for layout. I'd recommend learning how to use flex box CSS.



But it doesn't work with IE6!!!

Seriously, the thing I hate most about the demise of paper magazines is that I have to find out about stuff like this secondhand long after the fact. At least unless I haunt a particular product's website frequently or unless they don't have an RSS feed that's more noise than substance (and RSS is just haunting by proxy).

Yeah. I'd go with that. Unless you're dealing with a company that's still heavily dependent on ActiveX controls.  Or IE8.

Salvin, the problem with a simple div is that it doesn't allow things like even spacing of the contents. The flexbox acts more like a layoutmanager.
 
salvin francis
Bartender
Posts: 2291
95
Google Web Toolkit Eclipse IDE Java
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

Tim Holloway wrote:But it doesn't work with IE6!!!


IE6 !!! I give up !!

Tim Holloway wrote:Salvin, the problem with a simple div is that it doesn't allow things like even spacing of the contents.


Spacing should work fine with margins:
https://jsfiddle.net/mq6cfp2x/1/
 
Bear Bibeault
Sheriff
Posts: 67266
170
Mac Mac OS X IntelliJ IDE jQuery Java
 
Tim Holloway
Bartender
Posts: 20838
125
Android Eclipse IDE Tomcat Server Redhat Java Linux
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator

salvin francis wrote:

Tim Holloway wrote:But it doesn't work with IE6!!!


IE6 !!! I give up !!


What do you think all those municipalities and companies paying ransomware are using? Ifitaintbrokedontfixit, softwaredoesntwearout, allyouhavetodois...
 
It is sorta covered in the JavaRanch Style Guide.
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!