Grow your CSS skills. Land your dream job.

"Band/Badge" thing

  • # January 12, 2009 at 5:16 am

    Hey,

    I do not know what it’s called but I think it’s pretty cool even though I’m sure it’s outdated. I’m talking about such a "band" on the corner of your <div>:

    [img]http://i420.photobucket.com/albums/pp283/QuarterNetwerk/onlinestuk.jpg[/img]

    However I have no idea how to include such piece. This is going to be used on forum software – vBulletin – where I have two templates for the online status. The first template is "online_status_bit" where I need to fill in the if conditions for the images. The other part of the template is my postbit_legacy where all the information comes concerning a post from a person. So if that person is online I’d like such badge. I have no problems with the if-conditions nor do I with creating the image. I just don’t know how to place in that corner.

    Thanks in advance and I hope my post is clear. English is not my mother tongue and therefore I tend to make a few mistakes.

    Rob
    # January 12, 2009 at 6:21 am

    its actually quite simple.

    Just create a div, pop it outside your wrapper and style it like this:

    div#corner { position:absolute; top:0px; right:0px; background:url (your/image/file.png) no-repeat; }

    obviously you need to give it a height and width that matches your image… but that will do it for the top right hand corner :) you might have to put some z-index on it, but normally because its not under anything it wont need it.

    give us a shout if its not working…

    # January 13, 2009 at 6:33 am
    "Robskiwarrior" wrote:
    its actually quite simple.

    Just create a div, pop it outside your wrapper and style it like this:

    div#corner { position:absolute; top:0px; right:0px; background:url (your/image/file.png) no-repeat; }

    obviously you need to give it a height and width that matches your image… but that will do it for the top right hand corner :) you might have to put some z-index on it, but normally because its not under anything it wont need it.

    give us a shout if its not working…

    I didn’t doubt it was simple but I just couldn’t find a solution. I will try it out and report my – hopefully – succes here!

    # January 13, 2009 at 11:41 am

    Or, more simply, add a background image to the existing division…

    Code:
    .online {
    background-image: url(online.png);
    background-repeat: no-repeat;
    background-position: 100% 0
    }

    phpBB uses a condition to call the class on the post division when you’re online:

    <div id="p{postrow.POST_ID}" class="post <!– IF postrow.S_ROW_COUNT is odd –>bg1<!– ELSE –>bg2<!– ENDIF –><!– IF postrow.S_UNREAD_POST –> unreadpost<!– ENDIF –><!– IF postrow.S_POST_REPORTED –> reported<!– ENDIF –><!– IF postrow.S_ONLINE –> online<!– ENDIF –>">

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

You must be logged in to reply to this topic.

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