CSS question.

[Joe Guerra]

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 <divs>.  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

[Walter Lee Davis]

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

Walter

> --
> You received this message because you are subscribed to the Google Groups "Ruby on Rails: Talk" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to rubyonrails-ta...@googlegroups.com.
> To post to this group, send email to rubyonra...@googlegroups.com.
> To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/89dfe7ab-50b8-432d-b8b6-ea0a99f449fd%40googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.

[Mugurel Chirica]

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.