10 thoughts on “Part #3 Website Widget tips tricks and snipets CSS Label

  1. Hi Mike, I have another question leading on from your information regarding the label on your site.

    As we position the label absolute rather than relative as you say there is a problem, in as far as if someone magnifies the screen beyond the norm, the label moves out of position in relation to the rest of the page.

    There has to be a way that the positioning can be kept no matter what resolution or magnification the end user is using?

  2. .tags1 a:before {
    content:””;
    float:right;
    position:absolute;
    left:53px; /* added */
    top:0px;
    right:0px;
    width:0;
    height:0;
    border-color:transparent transparent transparent #303;
    border-style:solid;
    border-width:12px 0px 12px 12px;
    }

  3. Thanks for all your help with this, I didn’t even notice the information you had given in the comments. I Appreciate it. As you see I have put in one of the solutions I used for 1 label going of off the css you gave me as well as a couple of minor tweaks RE positioning of the arrow head.

  4. .tags1 a:after {
    content:””;
    position:absolute;
    top:10px;
    right:0;
    float:right;
    width:4px;
    height:4px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    background-color:#fff;
    -moz-box-shadow:-1px -1px 2px #60C;
    -webkit-box-shadow:-1px -1px 2px #60C;
    box-shadow:-1px -1px 2px #60C;
    }

    .tags1 a:hover {
    background-color:#F90;
    }

    .tags1 a:hover:before {
    border-color:transparent transparent transparent #F90;
    }

  5. Hi yes I see what your trying to do and nice site, the info you need to have the label pointing the other way is in the description of this video.
    Regards
    Mike

  6. Hi, thanks for getting back to me, I have tried your suggestion, this moves the arrow head away from the main label but does not turn the arrow head around, I made the changes you recommended as follows

    content:””;
    float:right;
    position:absolute;
    left:60px;
    top:0px;
    right:0px;
    width:0;
    height:0;
    border-color:transparent #0FF transparent transparent;
    border-style:solid;
    border-width:12px 12px 12px 0px;

    I am unsure what needs to change, thanks.

  7. Hi and thanks for your comment and a good question.

    You have something missing from you styles compared to the original

    left: -12px; this is the original positioning – this was when the tag was floated to the left!

    you need to change it to this
    left: 60px; Now the tag is floated to the right change the value, you may need to more than 60px or less but this should fix it for you.

    .tags a:before {
    content:””;
    float:right;
    position:absolute;
    left: 60px;
    etc etc etc;
    }

  8. Hi, I am trying to reverse the arrow head so it is pointing to the right, I have everything else as I want, i.e. curved border on left, dot at right end of main label but I cannot seem to get the arrow to point right, I have tried changing every setting in the following.

    .tags3 a:before {
    content:””;
    float:right;
    position:absolute;
    top:0px;
    right:0;
    width:0;
    height:0;
    border-color:transparent #0FF transparent transparent;
    border-style:solid;
    border-width:12px 12px 12px 0;
    }

  9. You have 3 Errors in your code 1 miss spelling and 2 px’s missing. Great job though, keep up the good work. I in boxed you with solution.

  10. Good tutorial, I have gone through the tutorials 3 times, all 3 times have managed to make same mistake, my arrow head, the dot part does not work as it should, could you advise?

    Thanks

Comments are closed.