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
Jonatan Spahn
6,362 PointsTrying to make a simple navigation
Here is my code on codepen,
http://codepen.io/JohnSpahn/pen/bZQXmR
How do I get the background color (light blue) to fill in the space between each listed element. If i code it in the nav it goes across the screen. I tried putting it in a div, but that still gives me the blue all the way across the screen.
Thanks!
6 Answers
Guil Hernandez
Treehouse TeacherHi Jonatan Spahn,
Check out this video I recored a while back that covers helpful tips for aligning navigation items and centering your nav. Hope this helps. :)
Konrad Pilch
2,435 PointsHeh, I don't know if this is the best, but i just put it with margin, hide it with it.
body{
margin:0;
padding:0;
}
nav {
max-width: 100%;
text-align: center;
}
nav ul{
margin:0;
padding:0;
}
nav a {
text-decoration: none;
color: black;
padding: 5px;
font-size: 1.5em;
background: lightblue;
margin-left:-4px; /* margin */
}
nav li {
list-style-type: none;
display: inline;
}
I don't know if this is the way it's done, or im missing something, i had a break for 2months, and i didnt code pure html and css for a long time lol can't think possibly why these spaces show there, maybe it's default or soemthing, not even with inspect tools coudn't see whats wrong with it.
Jessica Murillo
9,119 PointsI did this if you like it. I don't know if this is exactly what you wanted.
nav {
max-width: 16%; /*changed from 100%*/
text-align: center;
margin: auto; /*gave it an auto margin*/
background: lightblue;
}
nav ul{
margin: 0;
padding: 0;
}
nav a {
text-decoration: none;
color: black;
font-size: 1.5em;
background: lightblue;
}
nav li {
list-style-type: none;
display: inline;
}
Konrad Pilch
2,435 PointsThis basically makes the element nav of a width 20%, and now you are aligning the margin, so the width 20% , is now in the center. I suppose.
And hehe, two different people, two different solutions :D
Jessica Murillo
9,119 PointsI edited this a bit more.
Jessica Murillo
9,119 PointsYeah lol this is fun. i like to see other people's solutions as well!
Konrad Pilch
2,435 PointsOne zero is enough xD
margin: 0 0 0 0;
Konrad Pilch
2,435 PointsMe too! :D
Konrad Pilch
2,435 PointsI wonder what Guil would do.
Jessica Murillo
9,119 PointsYou're right! duh hehe. Thank you! I updated it.
Konrad Pilch
2,435 PointsHey Jessica Murillo , could I as you a question in terms of your journey etc? if you have tiime? If you could contact me here so we don't make a spam. If you got time, and want, and if you do send the email, pelase tell me here, just to be sure.
Jonatan Spahn
6,362 PointsHey thank you for some of the solutions, can't play around right now because I'm at work, but thanks again!
Jessica Murillo
9,119 PointsYes, thank you! I see how my code would not work by adding a navigation item it would not really be inline anymore because of the fixed width that I added. Awesome!
Jonatan Spahn
6,362 PointsI can't seem to take off the space between on the bottom in my gallery between my img and the border. Does someone know how ?
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 Points:D Amazing. Thank you, even though the question was from Jonatan, I was really thinking what's the best for this.
Konrad Pilch
2,435 PointsKonrad Pilch
2,435 PointsIt's great to refresh the mind doing some basic stuff.