Help with proper positioning

+1 Ryan Black · June 22, 2015
I am attempting to create vertically aligned Like, Reblog, and Notes counter on the side of each post. The second image shows a quick mockup I made in photo shop of roughly what it is that I'm trying to achieve. (Red circle will be note count possibly) 

The only way I think of vertically moving this is a negative margin; that will move every pair of buttons currently. Adding a specific value such as 
top: 20em;

 will only show a single pair of buttons. I thought of somehow adding javascript to the css directly, however that only seems to be a disgusting IE feature. I'm rather stuck on how to vertically move and center this bit for each post.
I am not against the use of Javascript to achieve this, JQuery or any other alternative I am not familiar with in the least, I plan get to Bucky's tutorials on them when I have time.

Note of referenced files in theme:
Normalize.css v3.0.2
Infinite Scrolling by Cody Sherman

Update: Bug #4 of this(https://docs.google.com/document/d/1_H7-wKnEtvuxuqpgR86ATeX4P4wrLsenLWgnFCWTtLI/edit?usp=sharing) might help although this is tumblr and not thenewboston, also I fixed the code where its all messy with lists instead of divs and I'm just too lazy to fix it.  Go figure ¯\_(?)_/¯

HTML section(Yes I know it should be divs instead of unordered lists, I managed to come up with the idea to change it to so when I was half asleep, changing it back as we speak):

           
           
           {block:Posts}
               {block:Text}
                   
                       
                           {block:Title}
                               {Title}
                           {/block:Title}
                           {body}
                           
                           
                               {LikeButton}
                               {ReblogButton}
                               {block:NoteCount}
                                       {NoteCountWithLabel}
                                   {/block:NoteCount}
                           
                       
                   
               {/block:Text}
               {block:Photo}
                   
                       
                           
                           {block:Caption}
                               {Caption}
                           {/block:Caption}
                           
                               {LikeButton}
                               {ReblogButton}
                               {block:NoteCount}
                                       {NoteCountWithLabel}
                                   {/block:NoteCount}
                           
                       
                   
               {/block:Photo}
               {block:Quote}
                   
                       
                           {Quote}
                           {block:Source}
                               —{Source}
                           {/block:Source}
                           
                               {LikeButton}
                               {ReblogButton}
                               {block:NoteCount}
                                       {NoteCountWithLabel}
                                   {/block:NoteCount}
                           
                       
                   
               {/block:Quote}
               {block:Link}
                   
                       
                           {Name}
                           {block:Description}
                               {Description}
                           {/block:Description}
                           
                               {LikeButton}
                               {ReblogButton}
                               {block:NoteCount}
                                       {NoteCountWithLabel}
                                   {/block:NoteCount}
                           
                       
                   
               {/block:Link}
               {block:Chat}
                   
                       
                           
                               {block:Lines}
                                   
                                       
                                           {block:Label}
                                               {Label}
                                           {/block:Label}
                                       
                                       {Line}
                                   
                               {/block:Lines}
                           
                           
                               {LikeButton}
                               {ReblogButton}
                               {block:NoteCount}
                                       {NoteCountWithLabel}
                                   {/block:NoteCount}
                           
                       
                   
               {/block:Chat}
               {block:Audio}
                   
                       
                           {AudioPlayer}
                           {block:Caption}
                               {Caption}
                           {/block:Caption}
                           
                               {LikeButton}
                               {ReblogButton}
                               {block:NoteCount}
                                       {NoteCountWithLabel}
                                   {/block:NoteCount}
                           
                       
                   
               {/block:Audio}
               {block:Video}
                   
                       
                           {Video-500}
                           {block:Caption}
                               {Caption}
                           {/block:Caption}
                           
                               {LikeButton}
                               {ReblogButton}
                               {block:NoteCount}
                                       {NoteCountWithLabel}
                                   {/block:NoteCount}
                           
                       
                   
               {/block:Video}
           {/block:Posts}
       


CSS section:
        .post   {
           background:rgba(255,255,255,.4);
           margin:0 auto;
           max-width:65%;
           padding:.5em;
           list-style:none;
       }
       .like-reblog    {
           border:0;
           position:absolute;
           margin-bottom:2.5em;
           display:block;
           left:80%;
           margin-top:-5em;
       }
       .like-reblog li {
           clear:both;
           list-style:none;
           padding:0 .25em;
       }
       #photo img  {
           border-radius:.25em;
       }


Images(current + crappy photoshopped demo):
/images/forum/upload/2015-06-22/f987e6fe7f1d2ee8e8d0d10470f4988c.PNG
/images/forum/upload/2015-06-22/e464dc56aa2bf82f8378c4f94ccbfd97.png

Post a Reply

Replies

Oldest  Newest  Rating
0 Ryan Black · July 2, 2015
/images/forum/upload/2015-07-02/e39214f633ad42ee594b7b648f2512dd.jpg
  • 1

HTML / CSS / Web Design

107,115 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators