Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Paula Azevedo
4,236 PointsHow to equal spaces between items in nav bar?
So I've started to dev a mockup to put in practice what I'm learning here at Treehouse. I'm using the Bhagaskara PSD Template (https://www.behance.net/gallery/16872707/Bhagaskara-Onepage-PSD-Template) for a start.
Can somebody help me with the align of main navigation bar? I got pretty close with padding but the spaces between them result different due to word's spread. (Can't find how to upload an image here at the forum so you can see what I'm talking about).
I'm trying to add the images using :nth-of-type, got one in place but it repeats towards the others, still figuring it out.
Next my piece of code, it may see a bit tumultuous but it's what got me close to what I'm aiming so far. Thank you for helping.
/* Nav Icons --------------- */
nav_icons {
width: 960px;
height: 190px;
margin: 200px auto;
padding: 0 1%;
}
nav_icons ul {
margin: 0 auto;
overflow: hidden;
}
nav_icons ul li {
float: left;
}
nav_icons ul li a {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-weight: 600;
font-size: .6em;
display: block;
color: white;
text-align: center;
padding: 250px 55px;
text-decoration: none;
}
nav_icons ul li a:nth-of-type(1) {
background: url('../img/navbg_gallery.png') no-repeat center;
background-size: 120px;
float: start;
padding-top: 120px;
padding-bottom: 60px;
}
nav_icons ul li a:hover:nth-of-type(1) {
background: url('../img/navbg_gallery_hover.png') no-repeat center;
background-size: 120px;
color: #48366f;
float: start;
padding-top: 120px;
padding-bottom: 60px;
}
2 Answers
Kevin Goudswaard
11,061 PointsTo be honest, without any other code, or being able to fiddle with your site in the browser using dev tools, it is difficult to grasp what you're having a problem with. If I am understanding correctly, it would appear as though you are trying to create equal space between all NAV items regardless of what the text is of the nav item, as well as make the NAV items be pictures. Using CSS padding properties to modify position on individual items is somewhat sketchy- in terms of your website staying in tune with responsive design.
I have had a lot of luck with flexboxes in some of my recent builds. They can be a bit tricky, but here are a couple guides to help.
https://teamtreehouse.com/library/css-layout-techniques/flexbox-layout/using-flexbox-today
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flexboxes are known to have variable browser support, so go forward with this option if that's not your biggest concern- According to this website: http://caniuse.com/#feat=flexbox Looks like all there is to really worry about is using a webkit for android support.
I hope that helps :( hopefully you'll at least have a direction instead of a dead end? Happy coding!
Paula Azevedo
4,236 PointsHey Kevin, you got what my issue is, I'm glad I made myself understandable somehow.
It seems like flexbox can solve my problem, yes ;) I'll go forward to the CSS-layout-techniques course to check it out and make further progress at my layout.
Thank you very much!
Kevin Goudswaard
11,061 PointsYou are very welcome. The pleasure was all mine.