treehouse : what would you like to learn today?
Web Design Web Development iOS Development

"Band/Badge" thing

  • 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>:

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

    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.
  • 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...
  • "Robskiwarrior" said:
    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!
  • Or, more simply, add a background image to the existing division...


    .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 -->">