- This topic is empty.
-
AuthorPosts
-
October 29, 2012 at 4:03 pm #40514
ricksmith
ParticipantAt the bottom of this post I’d like to get the 2 social buttons to line up correctly, but not sure how. I’m using a child theme, so hopefully someone can suggest some css I can put in there. Thanks so much!
October 29, 2012 at 4:31 pm #112881Senff
ParticipantLink please.
October 29, 2012 at 4:41 pm #112882ricksmith
Participant@senff
Oh sorry! [Here’s the link](http://rickwsmith.com/blog/noahs-dad-twitter/ “noah’s dad”). I’d really like to use the tall buttons in that call to action box at the bottom of the post if posable. But I change it in the plug in, it changes it up top as well, which doesn’t look good. Any thoughts on how I could do that?October 31, 2012 at 1:37 pm #113049sheepysheep60
ParticipantI would add this css to your current style sheet or classes in the style sheet:
.socialize-buttons{
position:relative;
}.socialize-button{
position: absolute;
top: 50px;
}that will line up both the buttons but they will be on top of each other. To move one of them to the right a bit, I’d add another bit of css like:
.socialize-button:last{
left: 100px;
}October 31, 2012 at 1:38 pm #113050sheepysheep60
ParticipantBy giving the surrounding div a position of relative, it will let you place the other elements freely inside it – if they have position: **absolute**. The next bit just says place them 50px from the top, then that last bit just says “of the two you just placed, place the last one of them 100px from the left hand edge.”
October 31, 2012 at 9:23 pm #113075ricksmith
Participant@sheepysheep60 Thanks for your help, and for the incredible explanation. It looks like it still isn’t lining up correctly. Any thoughts?
November 1, 2012 at 6:33 am #113099sheepysheep60
ParticipantNo worries, sorry it didn’t work out. I think :last is only meant for list elements, my bad.
.socialize-buttons {
position: absolute;
top: 56px;
}.socialize-button {
position: relative;
float: left;
width: 100px;
}.socialize-containter {
position: relative;
}Try the above, so this time we position the socialize buttons absolutely – under the text – then we give the individual buttons widths and use float to make them sit next to each other.
November 1, 2012 at 11:48 am #113114ricksmith
Participant@sheepysheep60 Thanks! It looks great. Do you know to use use the vertical buttons , and put them on to the left of the content, where they were? I think that would actually look better.
So basically keep everything as it was, but use vertical buttons instead of horizontal ones? Thanks.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.