Grow your CSS skills. Land your dream job.

Problem positioning CSS element

  • # June 24, 2013 at 10:30 am

    I am trying to position “Post Free Ad”, a green button on http://allmyads.com/index.php?use_template_set=abc

    It should be:

    1) On the left of social sharing buttons (it is already like that in HTML code)
    2) It should be centered in the white space between user welcome message and social icons. Social icons should be aligned to the right.

    # June 24, 2013 at 11:06 am

    You can start by

    .post_ad_button {
    /* float: right; < - remove float */
    display: inline-block;
    }

    and then, maybe `text-align: center` on `#user_bar`, which would require you to put the welcome stuff in a left floated div.

    # June 25, 2013 at 2:23 pm

    HI,

    Thanks! I almost got it, except that the second button (“Post Free Ad”) should have text in green color! It seems it is taking the setting from higher class .button-modern span. I set:

    .button-modern.white {
    color: #91bd09;

    }

    It seems to be ignored as Chrome Inspect Element is showing this setting as crossed.

    I do not want to change the original class .button-modern span as it will affect other buttons.

    Please recommend how to set this second button’s text to GREEN

    The link is again: http://allmyads.com/index.php?use_template_set=abc

    # June 25, 2013 at 4:05 pm

    The white comes from `.button-modern span` which means it’s set on the span element, which means you should override it on the span element because it’s never getting the inherited value from the `.button-modern.white`.

    Try `.button-modern.white span { color: #91bd09; }`

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