闪现消息的CSS样式

Question

闪现消息的CSS样式

6

我应该使用什么样的CSS样式来设计我的flash消息？我似乎无法更改其样式。这里是我的应用程序布局中<body>内相关代码：

    <div class="container">
      <%= render 'layouts/header' %>
      <section class="round">
        <div id= "notice">
          <% flash.each do |key, value| %>
            <div class="flash <%= key %>">
              <%= value %>
            </div>
          <% end %>
        </div>
        <%= yield %>
      </section>
      <%= render 'layouts/footer' %>
      <%= debug(params) if Rails.env.development? %>
    </div>

相关的原始CSS大致如下，但目前无法正常工作。

.error, .alert, .notice, .success, .info {padding:0.8em;margin-bottom:1em;border:2px solid #ddd;}
.success {background:#e6efc2;color:#264409;border-color:#c6d880;}

- Justin Meltzer

CSS是什么样子的？生成的HTML输出又是什么呢？ - NullUserException

你使用的 HTML 和 CSS 应该是没问题的。你确定在头文件中引入了 CSS 文件吗？如果你是在跟着 Rails 教程做的话，那么你的布局文件应该有 render 'layouts/stylesheets' 的代码，并且这段代码应该嵌套在 app/views/layouts/_stylesheets.html.erb 文件里面的 stylesheet_link_tag 'blueprint/screen', :media => 'screen' 这段代码后面（我使用的是 Haml）。你可以参考这里和这里。 - Michelle Tilley

1

检查HTML并确保设置了您期望的类名。 - Andrew Marshall

这与我添加的<div id="notice"></div>是否有关，以便ajax可以通过id获取元素getElementbyId吗？ - Justin Meltzer

1

使用FireBug（或IE 8开发人员工具）检查浏览器认为应该应用哪个CSS（以及为什么）。 - Christopher Creutzig

显示剩余6条评论

3个回答

0

在你的 CSS 文件中输入：

.alert-success {
    dosomestyling;
}

.alert-danger {
    dosomestyling;
}

- Rasool

0

看起来CSS调用了一个类.notice，但是div却有一个ID。

编辑

CSS没有响应flash或<%= key %>类，但是它响应notice id。不幸的是，如果我使用notice id进行样式设置，一些样式会出现问题，这些样式应该取决于是否有flash消息。我该如何解决这个问题？

您可以在div周围添加条件测试：

<% unless flash.empty? %>
  <div id="notice">
    <% flash.each do |key, value| %>
      <div class="flash <%= key %>">
        <%= value %>
      </div>
    <% end %>
  </div>
<% end %>

- zetetic

问题中的代码是：<div class="flash <%= key %>"><%= value %></div>，而不是它上面的那一行。 - Michelle Tilley

好的，好的！我现在必须要读问题了吗？唉。 - zetetic

请问您能否删除这个回答，以便更多人能够看到问题？谢谢。 - apneadiving

@Brandon Tilley - 那个 div 的根元素具有 ID 通知。 - Nikita Barsukov

我不确定您所说的根元素是什么意思，但这是问题所在：CSS 没有响应 flash 或 <%= key %> 类，但它对 notice id 有反应。不幸的是，如果我使用 notice id 进行样式设置，则会出现一些应该取决于是否存在 flash 消息而显示的样式。我该怎么解决这个问题？ - Justin Meltzer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nikita Barsukov · Accepted Answer

要么为具有ID通知的父级div添加规则：

#notice {
  css_formatting_here
}

或者为子div添加规则：

.flash {
  css_formatting_here
}

错误容器的子 div 具有由空格分隔的多个类。其中之一是 flash。因此，您可以为该类添加 CSS 规则，并且它将起作用。

在这里查看更多类似的示例：CSS 的隐藏功能