This all looks correct. What are you seeing that you don't expect? Walter
> On Nov 11, 2017, at 2:53 PM, Joe Guerra <[email protected]> wrote: > > 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. -- 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/000A47C0-363A-4627-A8BE-E251B88345C7%40wdstudio.com. For more options, visit https://groups.google.com/d/optout.
