I am facing an issue with my Ruby on Rails app where the body content is not displaying at the top of the page. Here is a screenshot of the problem:
I have double-checked all the properties and everything seems to be set correctly. If you want to take a look at the complete source code of the application, you can find it here. Let me share how my view looks like:
<div id="header-wrap">
<div id="header">
<h1>Blog</h1>
</div>
</div>
<div id="wrapper">
<div id="posts">
<% @posts.each do |post| %>
<div id="post">
<h2><%= post.title %></h2>
<%= simple_format post.body %>
<small>
<%= link_to 'Edit', edit_post_path(post) %> |
<%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %>
</small>
</div>
<% end %>
</div>
<br>
<%= link_to 'New Post', new_post_path %>
</div>
I have also included my CSS code below (the commented out section is a temporary fix I implemented by adjusting the positioning of the header-wrap and wrapper elements):
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope.
*
*= require_self
*= require_tree .
*= require twitter/bootstrap
*/
html, body, {
background-image:url('bg.png');
background-color:#cccccc;
padding: 0;
margin: 0;
}
#header-wrap {
background-color: #424242;
/* position: absolute;*/
height: 100px;
width: 100%;
top: 0;
}
#header {
margin: 0 auto;
color: #FFFFFF;
width: 588px;
}
#wrapper {
/* position: relative;
top: 100px;*/
padding: 0 6px;
margin: 0 auto;
width: 588px;
}
#posts {
}
#notice {
color: green;
}
.field_with_errors {
padding: 2px;
background-color: red;
display: table;
}
#error_explanation {
width: 450px;
border: 2px solid red;
padding: 7px;
padding-bottom: 0;
margin-bottom: 20px;
background-color: #f0f0f0;
h2 {
text-align: left;
font-weight: bold;
padding: 5px 5px 5px 15px;
font-size: 12px;
margin: -7px;
margin-bottom: 0px;
background-color: #c00;
color: #fff;
}
ul li {
font-size: 12px;
list-style: square;
}
}