CSS question.

rubyonrails-talk
1

Sorry, not sure where to post this on google groups. I will move it if I find a CSS google group.

Anyways, I’m trying to overlay text onto an image (in my gallery) on upper and lower right corners.

I know my problem has to do with nesting the . I’m just using placeholders for text now… (I’ll sub in some database values eventually).

Here’s my css & bit of html.erb code…

/* categories css file… /* Container holding the image and the text */ .imageholder { position: relative; text-align: center; color: white; }

/* Bottom left text */ .bottom-left { position: absolute; bottom: 8px; left: 16px; }

/* Top left text */ .top-left { position: absolute; top: 8px; left: 16px; }

/* Top right text */ .top-right { position: absolute; top: 8px; right: 16px; }

/* Bottom right text */ .bottom-right { position: absolute; bottom: 8px; right: 16px; }

/* Centered text */ .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

div.img { margin: 5px; border: 0px solid #ccc; float: left; width: 180px; height: 400px; overflow: hidden; }

div.img2 { margin: 5px; border: 0px solid #ccc; float: left; width: 255px; height: 285px; overflow: hidden; }

div.img:hover { border: 0px solid #777; }

div.img img { width: 100%; height: auto;

}

div.desc { padding: 15px; text-align: center; }


<% @categories.each do |category| %>
    <div class="imageholder" >

      <div class="top-right">Top Right</div>
      <div class="bottom-right">Bottom Right</div>

     <div class="img2">

        <%= link_to category.name , category %>

        <%= link_to image_tag(category.picurl ), category %>

      </div>
    </div>

thanks,

Joe

2

This all looks correct. What are you seeing that you don't expect?

Walter

3

For HTML/CSS questions you can use https://jsfiddle.net/ (or something else that's similar in functionality), add your HTML and CSS in there and we can all have a look. If someone can solve the issue they can update the code from jsfiddle and give you the solution.

If that's too much then can you share some screenshots with how is the page looking right now with the above code, and how do you expect it to look (to achieve the result you can tweak the CSS from any browser inspector.