1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How do I add 3 horizontal buttons in wordpress post?

Discussion in 'Web Design' started by coolsheet, Nov 16, 2014.

  1. coolsheet

    coolsheet Jr. VIP Jr. VIP

    Joined:
    Mar 28, 2014
    Messages:
    319
    Likes Received:
    130
    Occupation:
    Being me
    Location:
    The Pleiades
    EDIT: Same question but should have titled this thread: "How do I add 3 Horizontal images to a wordpress post?"

    I usually do this with a widget or some sort of page builder. If there is no page builder and all you get is the regular visual/text editor section, what coding would I add to the text or what would it look like?

    So I basically need to have three images in a horizontal line, and formatted neat and centered, equivalent padding and such, so that I can just copy and paste it in posts. I have scoured the web for days, went to the wordpress.org forums and no answers there. Been trying to tackle this for about a week.

    Really appreciate any help and BIG THANKS sent your way in advance.

    Cheers
     
    Last edited: Nov 17, 2014
  2. R4Z0rA07

    R4Z0rA07 Junior Member

    Joined:
    Apr 17, 2012
    Messages:
    167
    Likes Received:
    150
  3. coolsheet

    coolsheet Jr. VIP Jr. VIP

    Joined:
    Mar 28, 2014
    Messages:
    319
    Likes Received:
    130
    Occupation:
    Being me
    Location:
    The Pleiades
  4. nandugan

    nandugan Jr. VIP Jr. VIP Premium Member

    Joined:
    May 24, 2009
    Messages:
    248
    Likes Received:
    36
    Occupation:
    Wordpress/PHP/Mobile APP
    Copy and paste the code in your post and adjust them accordingly.

    #rowp{ width:100%;}
    #rowp .c1 {
    float: left;
    height:100%;
    width: 22%;
    padding: 15px;
    }


    img{width:71.66%;height: auto;}




    </style>
    <div id="rowp">
    <div class="c1">
    <div class="ic"><img src="Emotes-face-smile-icon.png" width="256" height="256" /></div>
    </div>
    <div class="c1">
    <div class="ic"><img src="Emotes-face-smile-icon.png" width="129" height="130" /></div>
    </div>
    <div class="c1">
    <div class="ic"><img src="Emotes-face-smile-icon.png" width="129" height="130" /></div>
    </div>
    </div>
     
    • Thanks Thanks x 2
  5. coolsheet

    coolsheet Jr. VIP Jr. VIP

    Joined:
    Mar 28, 2014
    Messages:
    319
    Likes Received:
    130
    Occupation:
    Being me
    Location:
    The Pleiades
    This worked. Awesome and much appreciated!

    Cheers
     
    Last edited: Nov 17, 2014
  6. coolsheet

    coolsheet Jr. VIP Jr. VIP

    Joined:
    Mar 28, 2014
    Messages:
    319
    Likes Received:
    130
    Occupation:
    Being me
    Location:
    The Pleiades
    So everything seemed to be alright but then I tested some text around it. The text underneath the buttons, shows up to the right like this

    [​IMG]

    Any way to fix this?
     
  7. IslandCat

    IslandCat Jr. VIP Jr. VIP Premium Member

    Joined:
    Mar 17, 2014
    Messages:
    129
    Likes Received:
    24
    is all that text before the image divs?
     
  8. coolsheet

    coolsheet Jr. VIP Jr. VIP

    Joined:
    Mar 28, 2014
    Messages:
    319
    Likes Received:
    130
    Occupation:
    Being me
    Location:
    The Pleiades
    No the text to the right of the buttons is after. The text above is before.
     
  9. yalokin

    yalokin Junior Member

    Joined:
    Apr 4, 2014
    Messages:
    119
    Likes Received:
    38
    You should clear the floats.

    One way to do this:

    Code:
    CSS:
    
    .clear {
      clear: both;
    }
    
    
    HTML:
    
    <div id="rowp">
        <div class="c1">
        <div class="ic"><img src="Emotes-face-smile-icon.png" width="256" height="256" /></div>
        </div>
        <div class="c1">
        <div class="ic"><img src="Emotes-face-smile-icon.png" width="129" height="130" /></div>
        </div>
        <div class="c1">
        <div class="ic"><img src="Emotes-face-smile-icon.png" width="129" height="130" /></div>
        </div>
        <div class="clear"></div>
    </div>
    
    
    
     
    • Thanks Thanks x 1
    Last edited: Nov 17, 2014
  10. coolsheet

    coolsheet Jr. VIP Jr. VIP

    Joined:
    Mar 28, 2014
    Messages:
    319
    Likes Received:
    130
    Occupation:
    Being me
    Location:
    The Pleiades
    This definitely worked! Cheers.