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
--
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 [email protected].
To post to this group, send email to [email protected].
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.
