Win a copy of Zero to AI - A non-technical, hype-free guide to prospering in the AI era this week in the Artificial Intelligence and Machine Learning forum!
  • 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
  • Paul Clapham
  • Bear Bibeault
  • Jeanne Boyarsky
Sheriffs:
  • Ron McLeod
  • Tim Cooke
  • Devaka Cooray
Saloon Keepers:
  • Tim Moores
  • Tim Holloway
  • Jj Roberts
  • Stephan van Hulst
  • Carey Brown
Bartenders:
  • salvin francis
  • Scott Selikoff
  • fred rosenberger

putting icons at the end of a navbar

 
Ranch Hand
Posts: 289
2
  • 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
 
Saloon Keeper
Posts: 22648
153
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.
 
Marshal
Posts: 67463
173
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: 2697
130
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
Saloon Keeper
Posts: 22648
153
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: 2697
130
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
Marshal
Posts: 67463
173
Mac Mac OS X IntelliJ IDE jQuery Java
 
Tim Holloway
Saloon Keeper
Posts: 22648
153
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...
 
Why does your bag say "bombs"? The reason I ask is that my bag says "tiny ads" and it has stuff like this:
Building a Better World in your Backyard by Paul Wheaton and Shawn Klassen-Koop
https://coderanch.com/wiki/718759/books/Building-World-Backyard-Paul-Wheaton
reply
    Bookmark Topic Watch Topic
  • New Topic