Grow your CSS skills. Land your dream job.

Centering Menu Items Vertically

  • # January 19, 2013 at 8:35 am

    EDIT: Make your way towards the bottom. I did not want to start a whole new thread since it still deals with centering (but this time it is vertically). Thank you muchly!

    I currently only have my website on my localhost, but I screen captured the length of the website so I could receive some feedback about the design of the front page, here.

    I am not finished with the footer and I really do not like the way it looks currently. Any suggestions on that would be greatly appreciated. Also, I would like to center the menu bar, so I tried to do a simple text-align, but nothing came of it. Here is a CodePen of my menu bar to help you figure out whatever I need to do.

    Thank you in advance!

    # January 19, 2013 at 8:51 am

    What is this website about/for?

    # January 19, 2013 at 8:53 am

    You need some background behind the body text and white titles as it is hard to read. Maybe make the green background less bright

    # January 19, 2013 at 9:06 am

    @Jarolin: This is going to be a portfolio website with sections for my various projects. The front page will be a blog, then you have a drop-down menu for _Graphic Novels & Written Novellas_ that has two options, _Feel Good Candy_ and _Gloom_. Each option sends you to a page that discusses that specific story. Then there is a forum for people to talk about anything related to art or my works. “Contact” should be fairly self-explanatory. So should “Store” and “Support.”

    @jshjohnson: This is the Tumblr theme that inspired my current design, here. I like how bold everything is (and I mean “out there” rather than font-weight). I would like to stay fairly close to that design if possible. If I enlarge the white text to the point of my inspiration, then it may make it easier to read. Also, I opted for Droid Sans rather than Georgia. Was this a bad decision?

    Thank you for your comments thus far!

    Edit #1: And anyone who knows how to center menu items, feel free to share your wealth of knowledge.

    Edit #2: Also, I just looked at the screen capture and it displays it much smaller than what the actual width of the website is (which is 960 pixels). So, that might be part of the problem. The body text is 16 px as well.

    # January 19, 2013 at 11:42 am

    Take your pic http://www.visibilityinherit.com/code/center-nav.php

    # January 19, 2013 at 12:04 pm

    There are a few things that i would change about your website.

    1. Usually when people visit a website that isn’t an article or aren’t looking for information, they might not want to read. So i would replace that long description with something allot shorter. Or you can keep it the same length but move that introduction to an “About Me” or whatever text goes there.

    2. The footer of the website that includes the copyright,navigation,and social network is too big. I don’t think people would care much about the copyrighting and all. So try making that smaller so it doesn’t become a large part of the website.

    3. You should replace that “Forum” with a “Blog”. usually websites that are personal and about yourself don’t have much to talk about.

    But overall its a great looking website. Very nice design and font-color.

    # January 19, 2013 at 12:26 pm

    Here’s a fork of the centered menu:

    http://codepen.io/wolfcry911/pen/vitrx

    # January 19, 2013 at 3:09 pm

    Thank you, @wolfcry911! I was having difficulty understanding @Eric‘s link and then I saw you had responded. Also, thanks @Jarolin. The text that was in the “Introduction” post was just lorem ipsum. I wanted to see what it looked like with a whole article in one post. And the forum is equally as pointless. I wanted to test out bbPress, so I created a forum on my localhost. bbPress still does not have as much customization as I would like, so that will go as well when I take everything over to the interwebs. I got rid of the entire footer and replaced it with a petite one liner stating a copyright (because there will be illustrations of mine on my site and I want people to know that those are technically mine), the RSS feed, and designer. Although, I will make a post about all of the wonderful people here on CSS-Tricks. I would be lost without you guys. Thanks again! Cheers!

    # January 19, 2013 at 4:55 pm

    I have one more question. Now that the menu items are centered, I would like to center “Feel Good Candy” and “Gloom” in line with the newly named “Literature.” I have created a CodePen so that you may see my current code: here. I apologize for the amount of CSS. I am usually pretty good at figuring out which line of code does what, but I know very little about how my own menu works. Thank you in advance!

    # January 19, 2013 at 5:06 pm

    @mintertweed, you have to set this some minus px

    #menu-bar ul li ul {left: 0px;}

    and add text-align center

    # January 19, 2013 at 5:55 pm

    Okay, the nudging to the left with a negative value works fine. The text-align, not so much. Here is a fork in CodePen: here. Also, I can see that the size of the menu is increasing. Is this because I have created a negative value for the left property? And if so, how do I diminish the menu box, as well, once it is positioned properly? Thank you for your help thus far, @jurotek.

    # January 19, 2013 at 6:18 pm

    [here you go…](http://codepen.io/jiri/full/gItey “”)

    you gave your dropdown LI width instead your UL

    # January 19, 2013 at 6:50 pm

    Thank you muchly. I need to read up on menu making. Look at that sexy menu!

    # January 19, 2013 at 6:55 pm

    you welcome

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".