CSS question.

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

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

--
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 [hidden email].
To post to this group, send email to [hidden email].
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.
Reply | Threaded
Open this post in threaded view
|

Re: CSS question.

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

Walter

> On Nov 11, 2017, at 2:53 PM, Joe Guerra <[hidden email]> 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 [hidden email].
> To post to this group, send email to [hidden email].
> 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 [hidden email].
To post to this group, send email to [hidden email].
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.
Reply | Threaded
Open this post in threaded view
|

Re: CSS question.

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.

--
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 [hidden email].
To post to this group, send email to [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/rubyonrails-talk/CAL37D8GCQdAm0tK%3D2fP_MEct570r0ivnJ_GBJ_HTPoizv9wREQ%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.