Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problem with CSS positioning

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #44192
    AMA
    Participant

    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,

    #132217
    CrocoDillon
    Participant

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

    #132225
    Alen
    Participant

    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.

    #132281
    AMA
    Participant

    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

    #132283
    AMA
    Participant

    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
    }

    #132288
    Alen
    Participant

    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

    #132289
    AMA
    Participant

    AlenAbdula:

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.