2012-02-29 5 views
0

Новые для рельсов. Попытка добавить фон с css в область цикла моего кода, но, похоже, он не читается в этой области. Любой css, примененный до или после функции цикла рельсов, показывается, но фон останавливается прямо перед всем в музее. Любая помощь?рельсы styling петля

scaffold.css.css:

#museums { 
    background: #ccc; 
} 

индекс:

<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> 
+0

Вы пытались использовать Firebug, чтобы увидеть фоновое значение элементов с классами museumAdd, имя, описание, местоположение и изменить? –

+0

Да, проверять его в google-разработчике, если я добавляю высоту: 500px ater background: #ccc, он распространяется по контуру снизу, а только по фону: #ccc останавливается. – Nerdysyntax

+0

Я не хочу добавлять высоту, потому что содержимое изменится. Кто-нибудь замечает проблему? – Nerdysyntax

ответ

2

Вы не предоставили достаточно информации, чтобы ответить на этот вопрос с уверенностью, и у меня нет достаточно кармы/цирковые точек/все задавать вопросы как комментарий.

Хорошо, у меня есть довольно хорошее предположение. Это не проблема с Rails. Вы могли бы использовать что-нибудь там. Это проблема CSS. Из комментариев по вашему вопросу это наверняка звучит как классический вопрос «контейнер, не включающий его поплавки», хотя я не могу спросить вас, перемещаются ли вещи в #museum. Они? Добавление высоты набора соответствует классическим симптомам.

Существует около gazillion различных меток очистки и закрытия. Предполагая, что у вас нет высоты, установленной на вашем div сейчас, быстрый способ проверить это, проблема исчезнет, ​​если вы дадите #museums overflow: hidden?

Переполнение: скрытый не всегда лучший метод размещения с плавающей точкой, но он хорош 90 +% времени. Попробуйте и отчитайтесь.

+0

Вы абсолютно правы в отношении плавающих. Я не думал об этом. Мне легче понять это только из html/css, но, как рельсы структурированы, я не думал, что это так. благодаря – Nerdysyntax

0

Похоже, у вас есть какой-то другой CSS баловаться с этим. Кроме того, похоже, что здесь немного классиков, и я предполагаю, что вы не хотите, чтобы все с классом «описание» или «имя» имели одинаковый стиль в приложении. Если это так, попробуйте:

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

или просто:

#museums div{background-color:transparent;}