- This topic is empty.
-
AuthorPosts
-
June 7, 2013 at 11:11 am #45372dandelionParticipant
I’ve tried making this navigation bar both inline and by floating. Either way works fine, I think. (Is one way better?)
But I am having trouble with centering. I want the background of the bar to go the full width of the page, even though all the content, including the navigation will be limited to 960 px. How do I get the top navigation bar, the actual set of choices, to center across the screen instead of sticking to the left?
June 7, 2013 at 11:17 am #137985Paulie_DMemberStructurally like this:http://codepen.io/Paulie-D/pen/oGKtA
For centering a menu there is nothing better (IMO) than inline-block.: http://joshnh.com/2012/02/07/why-you-should-use-inline-block-when-positioning-elements/
http://codepen.io/Paulie-D/pen/86731daa8998d3df818160b9df55d6d9
June 7, 2013 at 11:19 am #137986SenffParticipantMy general rule of thumb of centering list-items:
–
UL
should havetext-align:center;
–LI
, or anything it contains (including the links) can not be block-levelPretty much like this: http://codepen.io/senff/pen/LFiHp
Then you’ll have to add some more styling to position them better of course — since the LI’s and A’s are not block-level anymore, padding works a little different.
June 7, 2013 at 11:47 am #137992dandelionParticipantThanks guys! I’ll switch over to an inline version and give these a try.
June 7, 2013 at 12:06 pm #137994dandelionParticipantSo I adjusted my code (thanks for all the examples!) and it worked for centering the bar horizontally. But now I’m back to boxes that aren’t centered vertically. (The problem Paulie helped me with yesterday). I still have the height set on that
- so I’m not sure what’s up. Do I have to choose? Use floats if I want vertical centering and inline if I want horizontal?
I edited an re-saved my codepen to show you. http://cdpn.io/grknG
June 7, 2013 at 12:13 pm #137996Paulie_DMemberIf you set inline-block on the `li`s it seems to fix it but I’m not sure if that will have knock on effects elsewhere.
June 7, 2013 at 12:17 pm #137999dandelionParticipantI see what you mean, I made the change. But what do you mean by “knock on effects?”
June 7, 2013 at 12:22 pm #138001Paulie_DMember@Senff mentioned changing the position so you’d have test to make sure the spacing etc. is still how you wanted it.
June 7, 2013 at 12:35 pm #138003dandelionParticipantAh right. Yes, I’ll play with the padding for each LI.
Thanks! I’m learning a lot this week!
June 7, 2013 at 12:44 pm #138006PicnicTutorialsParticipantHere this shows all 6 ways to center your nav http://www.websitecodetutorials.com/code/css/css-center-nav.php
- so I’m not sure what’s up. Do I have to choose? Use floats if I want vertical centering and inline if I want horizontal?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.