- This topic is empty.
-
AuthorPosts
-
April 17, 2013 at 6:04 pm #44192AMAParticipant
Hey there,
I’m struggling with CSS positioning. In the picture below:
http://img839.imageshack.us/img839/7501/testingz.jpgwhat 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 –> marginbut 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 #132217CrocoDillonParticipantTried `display: block;`? Hard to give any more info without knowing what your markup is like.
April 17, 2013 at 7:46 pm #132225AlenParticipantDid 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.
April 18, 2013 at 6:40 am #132281AMAParticipantRe: 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 responseApril 18, 2013 at 6:43 am #132283AMAParticipantRe: 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 #132288AlenParticipantTry 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’).’
‘;
}April 18, 2013 at 7:05 am #132289AMAParticipantAlenAbdula:
It worked so well! Thanks a lot for the quick response and help..appreciated
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.