Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Ruby

Lee Carter
Lee Carter
278 Points
Posted by Lee Carter
Lee Carter
278 Points

"Updating the Index Page" CSS file and HTML not linking correctly?

Hey,

Everything was going great in the tutorial until I started the CSS portion. For some reason the CSS wont style the page. Can someone tell me what I am doing wrong?

<div class="page-header">
<h1>All of the Statuses</h1>
</div>

<% @statuses.each do |status| %>
<div class="status">
 <strong><%= status.name %></strong>
 <p><%= status.content %></p>
 <div class="meta">
  <%= link_to time_ago_in_words(status.created_at) + " ago", status %> 
  <span class="admin">
    | <%= link_to "Edit", edit_status_path(status) %> | 
    <%= link_to "Delete", status, method: :delete, data: { confirm: "Are you sure your want to delete this     status?"} %>
   </span>
 </div>
</div>
<% end %>

and statuses.css.scss

.status {
  border-bottom: solid 1px black;
  padding: 5px 0;
}

.status p {
  margin: 4px 0;
}

Does anyone see what I am doing wrong?

3 Answers

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

hmm the code looks good to me. Are you sure you saved the css after editing?

Chris Beyer
Chris Beyer
425 Points
Chris Beyer
Chris Beyer
425 Points

I have the same problem. Please see my post. We have to insert the tag "status.hove" as a div class after status. The CSS file itself seems fine.

According to the video we edit the page using developer. I am using Firefox and not familiar with this. My questions is if we could just add <div class = "status hover"> to the index.html.erb page . This would be just below the <div class ="status" class. Please correct on errors. I just want to ,move on.

Anyway doing the above will definitely allow proper functioning.

Thanks,

Chris

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

He only edits the code in the browser developer mode to show you how it works. Any changes you make here don't actually get saved. The CSS and java script are what make this section work. Go back and make sure you have added the CSS and make sure you have a class of status in your div

Chris Beyer
Chris Beyer
425 Points

Sorry for the code but: I think it is more clear than explaining. Thanks for all of your help with this, Chris. Basically does not show edit and delete. <div class="page-header"> <h1> All of the Statuses</h1> </div>

<% @statuses.each do |status|%> <div class ="status"> <div class = "status hover">
<strong><%=status.name %></strong> <p><%=status.content %></p> <div class="meta"> <%=link_to time_ago_in_words(status.created_at)+ " ago ",status %> <span class="admin"> | <%= link_to "Edit", edit_status_path(status) %> | <%=link_to "Delete", status,method: :delete,data: {confirm: "Are you sure you want to delete this status?"} %> </span> </div> </div> </div> <% end %>

Also: CSS // Place all the styles related to the statuses controller here. // They will automatically be included in application.css. // You can use Sass (SCSS) here: http://sass-lang.com/

.status { border-bottom: solid 1px #CCC; padding: 5px 0; }

.status p { margin: 4px 0; }

.status.hover { background: #CCCCCC; }

.status .admin { display: none;
}

.status.hover .admin { display: inline; }

Also added status hover. I am not sure it is correct syntax

Coffeescript

Place all the behaviors and hooks related to the matching controller here.

All this logic will automatically be available in application.js.

You can use CoffeeScript in this file: http://coffeescript.org/

$ -> $('.status').hover (event) -> $(this).toggleClass("hover")

Thanks for the help, That is only real problem now is the edit and delete do no change state when hovering.

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

You dont have the <span class="admin> wrapped around your edit and delete links, which is why they do not change on hover. See the original posters above code to see where to add that span

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

you dont have the span wrapped around your edit and delete links* Dont know my html isnt showing in the comment

Chris Beyer
Chris Beyer
425 Points

Hello! I presume you mean "status hover" tag around the following--->

<span class="admin"> | <%= link_to "Edit", edit_status_path(status) %> | <%=link_to "Delete", status,method: :delete,data: {confirm: "Are you sure you want to delete this status?"} %> </span> </div> </div> </div> I know just one closing tag. This is what I would think.

Thankk you!

Chris

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

I mean the span with the class of admin

Chris Beyer
Chris Beyer
425 Points

Hello Stone: I have to repost this code,

This is what I now have for Index.html.erb

<div class="page-header"> <h1> All of the Statuses</h1> </div>

<% @statuses.each do |status|%> <div class ="status"> <strong><%=status.name %></strong> <p><%=status.content %></p> <div class="meta"> <%=link_to time_ago_in_words(status.created_at)+ " ago ",status %> <span class="admin"> | <%= link_to "Edit", edit_status_path(status) %> | <%=link_to "Delete", status,method: :delete,data: {confirm: "Are you sure you want to delete this status?"} %> </span> </div> </div>

<% end %>
I'll recheck video

Thanks,

Chris

Chris Beyer
Chris Beyer
425 Points

Actually this code is not posting right - sorry

Jonathan Loiacono
Jonathan Loiacono
1,078 Points
Jonathan Loiacono
Jonathan Loiacono
1,078 Points

So I am having a similar problem with my CSS file not being read by my html....any ideas? here is my index.html.erb:

<div class="page-header"> <h1> All of the Statuses </h1> </div>

<% @statuses.each do |status| %> <div class="Status"> <strong><%= status.name %></strong> <p><%= status.content %></p> <div class="meta"> <%= link_to time_ago_in_words(status.created_at) + " ago", status %> <span class="admin"> | <%= link_to "edit" , edit_status_path(status) %> | <%= link_to "Delete" , status, method: :delete, data: { confirm: "Are you sure want to delete?!"} %> | </span> </div> </div> <% end %>

Here is my statuses.css.css file:

.status { border-bottom: solid 1 px #ccc; padding: 5px 0;} .status p { margin: 4px 0;} .status .admin { display: none;} .status.hover .admin { display: inline; }

Jonathan Loiacono
Jonathan Loiacono
1,078 Points
Jonathan Loiacono
Jonathan Loiacono
1,078 Points

I am also aware that for some reason the "span class admin" part is for some reason not showing up when I post it...however it is there in my index page!