CODEWITHSUNDEEP
htmlruby-on-railscsserb
Nerdysyntax
Nerdysyntax

Reputation: 365

rails styling a loop

New to rails. Trying to add a background with css to the loop area of my code but it seems to not read in the area. Any css applied before or after the rails loop function is shown but the background stops right before everything in the museum.each do loop. Any help?

scaffold.css.css:

#museums {
    background: #ccc;
}

index:

<div id="museums">
<h1> Museums </h1>
<% @museums.each do |museum| %>
    <div class="museumAdd">
        <div class="name"><%= museum.name %></div>
        <div class="description"><%= museum.description %></div>
        <div class="location"><%= museum.city %>, 
        <%= museum.state %></div><br />

        <div class="edit">
            <%= link_to 'View', museum %><br />
            <%= link_to 'Edit', edit_museum_path(museum) %><br />
            <%= link_to 'Delete', museum, :confirm => 'Are you sure?', :method => :delete %>
        </div>
    </div>
<% end %>
</div>

Upvotes: 0

Views: 458

Answers (2)

stommepoes
stommepoes

Reputation: 150

You have not provided enough information to answer the question with certainty, and I don't have enough karma/circus points/whatever to ask questions as a comment yet.

Oh well, I do have a pretty good guess though. This is not a Rails problem. You could be using anything back there. This is a CSS problem. From the comments under your question, it sure sounds like a classic "container not enclosing its floats" issue, even though I cannot ask you if the things inside #museum are floated. Are they? Adding a set height fits the classic symptoms.

There are about a gazillion different float-clearing and -enclosing techniques out there. Assuming you do NOT have a height set on your div now, a quick way to check is, does the problem go away if you give #museums overflow: hidden?

Overflow:hidden is not always the best float-enclosing method but it's good 90+% of the time. Try it and report back.

Upvotes: 2

miked
miked

Reputation: 4499

Sounds like you've got some other css messing with this. Also, looks like there's a bit of classitis here and I'm assuming you don't want everything with the 'description' or 'name' class to have the same style through the app. If that's the case, try:

#museums {
    background: #ccc;
}
.museumAdd .name, .museumAdd .description, .museumAdd .location, .museumAdd .edit{
background-color:transparent;
}

or simply:

#museums div{background-color:transparent;}

Upvotes: 0

Related Questions