Grow your CSS skills. Land your dream job.

Need Help Moving Menu Items

  • # March 4, 2013 at 3:52 pm

    A lot of issues have been dealt with in this thread. I did not want to start a new thread. Seemed wasteful. So, if you could scroll towards the bottom and read my new message, I would greatly appreciate it!

    Okay, this is essentially what I am trying to get my website to look like: here.

    I want there to be a menu that looks like a ribbon. Pretty simple, but I can not for the life of me figure it out without manually placing the end ribbon bits.

    Here is my current website. I would like to place a picture of each member of “Happy Naked People” on either side of the wrapper. They will be illustrations with PNG transparency. So, I need to control the color of the background somehow.

    Between my wrapper, the body, and anything else that is controlling colors, I have not been able to figure out how to make it so anything outside the body is an off-white. But then you have the ribbon, which is breaking out of the body to create the ribbon effect. And finally, I need to add the images on either side of the body.

    Thank you for any suggestions you can give me to accomplish this. You guys have always been extremely helpful. Hopefully, one day I can return the favor.

    # March 4, 2013 at 4:01 pm

    Well…obviously you can’t get ‘outside’ the body but I assume that you mean the ‘wrapper’.

    Just remove the background blue color from body on line 22 of your stylesheet.

    Apply that color to the wrapper instead.

    The images you want on either side of the wrapper could be placed as positioned background images to the body.

    The ribbon….I guess the simplest method is to make the nav bar wider than 960px, with an internal section that **IS** 960px and background the ribbon ends similar to the body background.

    So, basically, you can’t just have one wrapper.

    Does that make sense?

    Here’s something sort of what I’m talking about.

    http://codepen.io/Paulie-D/pen/KaJCt

    There may be other CSS options for the ribbons ends but I haven’t had time to go over those yet.

    # March 4, 2013 at 4:15 pm

    Okay, yeah, wrapper. Sorry. So, I made the body background color #FFFEF2 (light yellow) and then I made the wrapper background color #00AEEF (cyan). I had to remove width: 100%; because it was still covering the entire page, but now my footer is covered up. I know I can place the footer within the wrapper, but is there another method to make it appear so that the wrapper and footer are separate. I forget who said it, but someone on these forums said that the footer should be separate from everything else. If this is just a preference rather than a rule written in stone, please let me know. Thank you thus far!

    # March 4, 2013 at 4:18 pm

    CSS Pseudo elements will also get it done without the need for extra markup

    http://codepen.io/Paulie-D/pen/AkvCp

    # March 4, 2013 at 4:21 pm

    I suppose the footer doesn’t **have** to be in the wrapper but if you want it to have the same width you’d have to add those properties.

    Frankly, I don’t think it matters…the wrapper is there for stylistic reasons only…it’s not going to affect SEO or anything.

    # March 4, 2013 at 4:29 pm

    The simplest ribbon technique I’ve found is here: http://csswizardry.com/demos/css-powered-ribbons/

    It was built with this code: http://csswizardry.com/2011/02/css-powered-ribbons-the-clean-way/

    However, in order to use this particular ribbon, you’ll need to need to put the width and margins on the #wrapper, instead of on the header and #main-column like you have now.

    It uses two small images to create the ribbons, but they’re placed with CSS. (There’s a few pure CSS solutions around, including one on CSS Tricks, but those may be harder to get working.)

    # March 4, 2013 at 4:31 pm

    Oh…looks like a sticky footer.

    I think if you remove position:relative from the wrapper the footer will pop into place.

    # March 4, 2013 at 5:08 pm

    @Paulie_D, it is indeed a sticky footer and your suggestion worked. Thanks! Now onward to the ribbon! I will try your CSS pseudo elements first.

    @landedstar, thank you for the tutorial. Do you by chance have a link for the one on CSS-Tricks?

    # March 4, 2013 at 5:33 pm

    Two more questions: #1, I would like to add a gradient on either side of the wrapper, i.e. like this. How is this done? If I knew what that specific effect was called, I would Google it myself. #2, my footer seems to be hovering above the bottom of the page by a few pixels, view here. It is a sticky footer and it most definately sticks to the bottom, but it hovers a few pixels above the bottom of the page. What is causing this? Thanks again for all of your help!

    @Paulie_D, okay, so this is what I have so far. The menu bar is not the length it needs to be. I tried to set it to 960px and it did absolutely nothing. Hrm. Also, it is not centered. But the pseudo-elements are working. I tried to replace the left pseudo-element with an SVG and the magenta bar covers it up. I know this because I actually saw it do it. Everything loaded and the menu bar then proceeded to slide over the SVG. Hrm. Don’t know what to do about that.

    # March 4, 2013 at 5:57 pm

    CSS Tricks Ribbon (no images): http://css-tricks.com/snippets/css/ribbon/

    Answer to #1) That site did it with this CSS, on their #wrap.

    -webkit-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.6);
    box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.6);

    But be careful of overloading your website’s design with too much CSS trickery. The ribbon effect and side shadows might not look good together.

    I’d recommend doing just the ribbon, side-shadow gradients seem to fallen out of favor. Try just using just a flat shadow with no gradient, almost like a border. But please experiment.

    Answer to #2) Remove the “height: 70px” from the footer’s CSS.

    # March 4, 2013 at 6:57 pm

    Update: Okay, it is sort of working. I am using the CSS-Tricks version of the ribbon. You can see my progress here. Any suggestions? And thank you to @Paulie_D and @landedstar for helping me thus far!

    Edit: Clearly, I need to center the menu, broaden the ribbon to encapsulate the wrapper, and that is pretty much it. I just do not know how to go about doing that.

    # March 4, 2013 at 9:40 pm

    Hot dog! I got the freakin’ ribbon looking snazzy as hell. Awesome. Now, all I need to do is get my menu items placed within the ribbon. Help would be greatly appreciated.

    Edit: You can see the latest here.

    # March 4, 2013 at 10:43 pm

    Looking at the code quickly…

    Look at [this screen shot](http://farm9.staticflickr.com/8227/8530430690_7d0bf10b2e_o.jpg).

    I’m not sure if you are applying :before & :after correctly (shadow area of ribbon). It’s being applied to unordered list via ID #menu-bar-nav.

    I’ll take a longer look when I get some time.

    # March 4, 2013 at 10:53 pm

    Yeah, I took @chriscoyier‘s code for his CSS ribbon, here, and tried to meld it with what I had already. I most likely did some things that are improper. But I guess this is how I learn. Any advice would be greatly appreciated.

    Edit: Thank you, @AlenAbdula! Your suggestion put me in the right direction. I removed the ribbon from the menu items, then I made two empty divs to create the ribbon, and then it just came down to positioning everything. Here is the final result. If you know of a better way to do it so that I won’t have two empty divs, I am open to suggestions. Thanks again!

    # March 5, 2013 at 1:22 pm

    Looks nice!

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

You must be logged in to reply to this topic.

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