Forums

Give help. Get help.

  • # 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: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: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 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 5, 2013 at 1:22 pm

    Looks nice!

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag