Problem with CSS positioning

[AMA]

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,

[CrocoDillon]

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

[Alen]

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]

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]

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
}

[Alen]

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]

AlenAbdula:

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

[Author]

Posts