Grow your CSS skills. Land your dream job.

Problem with CSS positioning

  • AMA
    # April 17, 2013 at 6:04 pm

    Hey there,

    I’m struggling with CSS positioning. In the picture below:
    http://img839.imageshack.us/img839/7501/testingz.jpg

    what i’m trying to do is to separate the “Readmore” button from the text and make the button on a new line..
    I’ve tried –> display: inline-block
    and –> margin

    but still the button follows the text!!
    Do you have any idea guys on how to resolve this???

    Thanks,

    # April 17, 2013 at 6:15 pm

    Tried `display: block;`? Hard to give any more info without knowing what your markup is like.

    # April 17, 2013 at 7:46 pm

    Did you try placing the button inside paragraph tags `

    // button here

    ` that way if you have nice vertical rhythm going paragraph spacing should take care of that. Just make sure to take of any margins on the button.

    AMA
    # April 18, 2013 at 6:40 am

    Re: CrocoDillon,
    The problem is i’m using CSS to create the button, so, using block display will enlarge it due to the
    dimensions..here is the php code for the moretag, and their related css code to give u clear idea:

    php:
    function new_excerpt_more($more) {
    global $post;
    return ‘… ID) . ‘”> ‘.__(‘Readmore’, ‘purepress’).’ ‘;
    }

    add_filter(‘excerpt_more’, ‘new_excerpt_more’);

    CSS (moretag):
    .moretag {
    display: inline-block;
    font-size:15px;
    background-color: rgb(45, 179, 233);
    border-radius: 5px 5px 5px 5px;
    color: #ffffff;
    margin: 2em 0px 0px;
    padding: 0.10em 0.30em;
    border: 1px solid rgba(0, 0, 0, 0.1);
    }

    CSS (excerpt):
    .content,
    .excerpt {
    display: block;
    font-family:Corbel;
    font-size:16px;
    color:#000000;
    padding-top:25px;
    padding-right:20px;
    line-height: 1.7em
    }

    I hope it clarify the structure..
    Thanks for your quick response

    AMA
    # April 18, 2013 at 6:43 am

    Re: AlenAbdula,

    I havn’t tried this, but I’ll try to apply and see the result..
    here is the code, you may have an idea on how to solve it:

    php:

    function new_excerpt_more($more) {
    global $post;
    return ‘… ID) . ‘”> ‘.__(‘Readmore’, ‘purepress’).’ ‘;
    }

    add_filter(‘excerpt_more’, ‘new_excerpt_more’);

    CSS (moretag)

    .moretag {
    display: inline-block;
    font-size:15px;
    background-color: rgb(45, 179, 233);
    border-radius: 5px 5px 5px 5px;
    color: #ffffff;
    margin: 2em 0px 0px;
    padding: 0.10em 0.30em;
    border: 1px solid rgba(0, 0, 0, 0.1);
    }

    CSS (excerpt):

    .content,
    .excerpt {
    display: block;
    font-family:Corbel;
    font-size:16px;
    color:#000000;
    padding-top:25px;
    padding-right:20px;
    line-height: 1.7em
    }

    # April 18, 2013 at 7:01 am

    Try this:

    function new_excerpt_more($more) {
    global $post;
    return ‘…
    ID) . ‘”> ‘.__(‘Readmore’, ‘purepress’).’ ‘;
    }

    Added `
    ` for new line.

    Or, wrapping the link in `p` tag.

    function new_excerpt_more($more) {
    global $post;
    return ‘…

    ID) . ‘”> ‘.__(‘Readmore’, ‘purepress’).’

    ‘;
    }

    http://codepen.io/anon/pen/qwjeL

    AMA
    # April 18, 2013 at 7:05 am

    AlenAbdula:

    It worked so well! Thanks a lot for the quick response and help..appreciated

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

You must be logged in to reply to this topic.

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