Ruby on Rails Saturday, November 11, 2017

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

Walter

> On Nov 11, 2017, at 2:53 PM, Joe Guerra <jguerra@jginfosys.com> 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 rubyonrails-talk+unsubscribe@googlegroups.com.
> To post to this group, send email to rubyonrails-talk@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.

--
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-talk+unsubscribe@googlegroups.com.
To post to this group, send email to rubyonrails-talk@googlegroups.com.
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.

No comments:

Post a Comment