how to target individual elements in grails g:render


Tags: html,css,grails

Problem :

I have created a grails g:render tag that references images representing the favorite movies, books, music, etc of a user in my project. The problem I am having is in styling the collections. I cannot seem to target the individual images of a specific collection, say music. Can someone help me find a way to target the images within the g:render for a SPECIFIC COLLECTION? I have provided the code for my gsp file and the template file. My goal is to style these images so that each category is shown as rows of its respective images, but when I try using float:left on the "like_content" divs, the entire collection is floated, not its individual images. Any help would be greatly appreciated.

EDIT: I have tried changing the id's into classes for the template images, and I also tried the ".like_content1 img" approach as well, but neither is working for me. My ultimate goal is to create 3 rows of the 3 different collections (movies, music, books), with the 5 images that are in each collections aligned in their respective row. I've included a mock-up image of how I want this to look like. this is how i want it to look like

GSP:

<div class="like_content1">

    <g:render template="favorites" collection="${movies}" var="fav"/>

</div>

<div class="like_content2">

    <g:render template="favorites" collection="${music}" var="fav"/>

</div>

<div class="like_content3">

    <g:render template="favorites" collection="${books}" var="fav"/>

</div>

TEMPLATE:

<div id="favdiv">
<g:if test="${fav != null }">
    <img id="favimg" src="${fav.picture}">
    <p id="favname">${fav.name}</p>
</g:if>
</div>

CSS:

#favimg{
            width:150px;
            height: 150px;
            }               

            .like_content1{
            position: relative;
            left: 100px;
            bottom: 75px;
            }

            .like_content2{
            position: relative;
            left: 110px;
            bottom: 75px;

            }

            .like_content3{
            position: relative;
            left: 425px;
            }


Solution :

You need to float your images:

.like_content1 img {
    float:left;
}

And then you need to clear your float to start the next line:

<div class="like_content1">
    <g:render template="favorites" collection="${movies}" var="fav"/>
    <br clear="all"/>
</div>

<div class="like_content2">
    <g:render template="favorites" collection="${music}" var="fav"/>
    <br clear="all"/>
</div>

<div class="like_content3">
    <g:render template="favorites" collection="${books}" var="fav"/>
    <br clear="all"/>
</div>

    CSS Howto..

    How to set ASP dropdownlist to read only with css or javascript?

    How to remove default chrome style for select Input?

    How to make input+label in a form appear one by one?

    How to create a slanting border with css

    How to change background [closed]

    How to maintain an icon font from SVG files

    How can I change GWT's widget CSS values?

    How to scroll the fixed content in CSS and HTML

    How to modify one element of a class without bothering the rest with the same CSS class?

    how to center UL in my page?

    How to manage two different size of textarea box in css

    How does css position impact element width/height?

    How can I show hidden element when it has focus?

    How to insert variables in inline CSS rules with pure JavaScript?

    How to combine two css3 gradients ?

    How to prevent a span from breaking into the next line - responsive webdesign?

    How to make css-menu independent of the number of menu items?

    what is jquery CSS frame work and how to use the frame work for giving look and feel to the website? [closed]

    How to debug CSS/Javascript hover issues

    How to hide a parent div if an inner div has a certain class, with javascript

    HTML & CSS: How to create four equal size tabs that fill 100% width?

    How to eliminate the padding in the nav menu from Refinery CMS?

    Node/Grunt - Autoprefixer - How to add configuration to my Gruntfile.js & how to check supported browsers?

    Jquery Ui Sortable showing broken image in IE8

    How to wrap a DIV around a DIV with CSS

    How to create dropdown menu that appears based on answer from another dropdown menu

    How to modify CSS when requirements change?

    How do you apply a fading overlay to an image in CSS?

    CSS Flex Box: How to vertically align “flex items” to middle without losing flex item height?

    JSP/HTML / JS / CSS - How to create a cancel button in form