Ratchet: adding buttons in a list

Question

I have this mock up: www.guestinnation.com/mockup/list.html

As you can see it is a list of images, but I would like to have under each image a line of buttons like this: http://maker.github.io/ratchet/#buttons

Unfortunately the CSS of Ratchet it's quite complicate and it ends up aligning these buttons on the right and (vertically) in the middle of the image... Any guess how to do it?

(I can't really post here all the CSS because it's long... but it's the standard one you download from their website)

--> hotel Guestinnation Map

<ul class="list inset">
  <li class="hotelname">
    <img id="select" src="images/mufourseasons-b.png" align="center"/>
    <p class="hotelname">Four Seasons Hotel - 5*L - 20 m.</p>
    <!-- should I put the buttons here??? -->
  </li>
  <li class="hotelname">
    <img id="select" src="images/muarmani-b.png" align="center"/>
    <p class="hotelname">Armani Hotel - 5*L - 451 metres</p>
  </li>
  <li class="hotelname">
    <img id="select" src="images/muetdemilan-b.png" align="center"/>
    <p class="hotelname">Grand Hotel Et de Milan - 5*</p>
  </li>

</ul>

score 0 · Accepted Answer · answered Sep 26 '13 at 10:21

0

Always follow a neat markup, mae sure dont use overflow:hidden, though Im using it. instead use class clearfix on the DIV which I have added.

Here you go, I fixed it for you :)

jsfiddle.net/ajinkyax/kZbvw/

<li class="hotelname">
    <div>
            <img id="select" src="http://placehold.it/350x150" align="center">
            <p class="hotelname">Armani Hotel - 5*L - 451 metres</p>
    </div>
            <!-- put your buttons here -->
            <a class="button">Button</a>
            <a class="button">Button</a>
            <a class="button">Button</a>
            <a class="button">Button</a>
</li>

answered Sep 26 '13 at 10:21

STEEL

8,955
9
67
89

Thank you. In JSFiddle seems to work fine so I copy and pasted it in my files (both the css and the html, of course), but nothing, it does not work... So I tried to put the entire HTML and CSS in Jsfiddle, and, guess what, it doesn't work in there as well... so I guess the problem is in the ul style... – Giovanni Dominoni Sep 26 '13 at 15:02
dont use css like this : ul li.hotelname instead use .hotelname {styles...} – STEEL Sep 27 '13 at 05:20
thank you, it now works, I've put image and button in the same div, used absolute positioning for the button, and played around with the positioning :) thank you! – Giovanni Dominoni Sep 27 '13 at 10:02

score 0 · Answer 2 · answered Sep 26 '13 at 10:30

I try to play a bit with your code and woww! This Ratchet thing isn't the best at all. Quite difficult to modify elements as you want. The problem is that this button have a position: absolute. And than set top and right of it. Anyway i figured out two different solution.

Slightly better: create a div around your button, and than give to it a positioning relative and float: left. But you still need to adjust your top and left position.

<li class="hotelname">
    <img id="select" src="images/mufourseasons-b.png" align="center">
    <p class="hotelname">Four Seasons Hotel - 5*L - 20 m.</p>
    <div class="wrap-button"><a class="button">Button</a></div>
  </li>

  .wrap-button{
       position: relative;
       float: left;
       top: 31px;
       left: -75px; }

Or you can do modify directly your button giving manually the best coordinate for you. Something like:

   <li class="hotelname">
    <img id="select" src="images/muarmani-b.png" align="center">
    <p class="hotelname">Armani Hotel - 5*L - 451 metres</p>
    <a class="button">Button</a>
   </li>
   .button
     top: 100%;
     right: 63%;

Thank you, I tried both solutions, but it seems not to work. The button gets stuck in the middle left position on the image, and I can't move it using "top" or "left".I guess it's because in the stylesheet there are some [class*="button"] that make it difficult to change anything in the class button style without making a mess... It seems like they willingly made it impossible to use the buttons outside the topbar... — Giovanni Dominoni, Sep 26 '13 at 14:54

Ratchet: adding buttons in a list

2 Answers2