Need some CSS/HTML help to make a cool ribbon affect on my site

Discussion in 'Scripts' started by Zoracle, Aug 31, 2012.

to remove all ads.
  1. Zoracle

    Zoracle New Member

    Messages:
    4
    Hi all,

    I would love some quick help on how to make this do what I want it to do. I want to make my subscribe button stick out a little bit more with a funny little message on top of a ribbon that wraps around the menu bar.
    Here's the way it currently looks:
    [​IMG]

    And this is how I'd like it to look:
    [​IMG]

    I'd appreciate any help with this. I'm using a wordpress blog, I'm okay with css and html, so I'll understand what you're saying for the most part I just don't know the quickest and easiest way to implement this.

    Thanks,
    Zach
     
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,670
    To make that work cross-browser. ....




    ... Use an image.
     
  3. Zoracle

    Zoracle New Member

    Messages:
    4
    But how to make it go across the menu bar like that without any white breaks for margins?
     
  4. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,670
    With the green "ribbon" image (transparent background) positioned and at the top of the stacking order.
     
  5. Zoracle

    Zoracle New Member

    Messages:
    4
    My first attempt

    So this is my first attempt. I have to use mostly CSS code because it's wordpress and to change anything within wordpress is a PIA.
    [​IMG]

    As you can see, my main problems are the Subscribe Box not being able to overflow the background image up into the margins, and a minor issue of the navigation bar ribbon going underneath the rulers.

    For the Subscribe Box, I've tried changing z index, messing with padding and margins but still can't get it to overflow.

    Here's my code:
    Code:
    #navigation {
    ...
    background-image: url(image/rbn_02.jpg);
    }
    
    #header {
    ...
    background-image: url(image/rbn_01.jpg);
    }
    
    #woo_subscribe-2 {
    background-image: url(images/rbn_04.png);
    background-position-y: 100px;
    overflow: visible;
    padding-top: 100px;
    margin-top: -100px;
    z-index: 5;
    }
    I'd love any advice you could offer, thanks.
     
  6. Ennesus

    Ennesus New Member

    Messages:
    70
    Just make 1 elelement like a div with the class ribbon use one background image and position it absolute. Note: the parent container has to be position relative.

    Also specify width,height, left and top

    You can place a paragraph inside de ribbon for the text
     
  7. Zoracle

    Zoracle New Member

    Messages:
    4
    Ennesus, thanks! You rule! That was waaaay easier than what I was trying to do. I've never really messed with relative and absolute positioning. Plus it works ACROSS BROWSERS which is the best!
    check it out at www.thetruegeneralist.com

    It looks sweet. Thanks again.
    Z
     
  8. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    yeah one big fat image.
    easy, true, but a shame all your text is images. that is poor form.
     
  9. Ennesus

    Ennesus New Member

    Messages:
    70
    Yeah, word @Phreaddee, I've said to use a paragraph instead.
    In my opinion the text is poorly placed.

    I've did a implementation of a ribbon once check
    http://www.skytours.nl/huishoudbeurs

    Note that text always needs breathing space to be easely readable
     
  10. Phreaddee

    Phreaddee Super Moderator Staff Member

    Messages:
    1,978
    yes, I did read that ennesus (but the OP didnt!)
     

Share This Page