I want that my "New post" and "Log out" buttons from my blog website to be in the right side of the header. But they are in left, under the "All posts"...print screen of my project
"application.html.erb" file:
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'application' , 'http://ift.tt/1mkHRpY' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div id="sidebar">
<div id="logo">
<%= link_to root_path do%>
<%= image_tag "logo.svg" %>
<% end %>
</div>
<ul>
<li class="category">Website</li>
<li><%= link_to "Blog", root_path %></li>
<li>About</li>
</ul>
<ul>
<li class="category">Social</li>
<li><a href="">Facebook</a></li>
<li><a href="">GitHub</a></li>
<li><a href="">Gmail</a></li>
</ul>
<p class="sign_in">Admin Login</p>
</div>
</div>
<div id="main_content">
<div id="header">
<p>All posts</p>
<div class="bottons">
<button class="button"><%= link_to "New Post", new_post_path %>
</button>
<button class="button">Log Out</button>
</div>
</div>
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert") %>
<% end %>
<%= yield %>
</div>
</body>
</html>
"application.css.scss" file:
@import 'normalize';
html, body {
font-family: 'Raleway', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
}
a {
text-decoration: none;
color: inherit;
}
#sidebar {
width: 250px;
position: fixed;
left: 0;
top: 0;
height: 100%;
background: #f5f7f9;
padding: 7em 0 0 0;
border-right: 1px solid #d6dce0;
#logo {
width: 40px;
position: absolute;
right: 3em;
top: 3em;
}
ul {
list-style: none;
text-align: right;
padding-right: 3em;
.category {
font-weight: 700;
font-size: 0.7em;
text-transform: uppercase;
color: #33acb7;
}
li {
padding: .5em 0;
a {
color: #9eafba;
text-decoration: none;
transition: all .4s ease;
&:hover {
color: #33acb7;
}
}
}
.active {
a {
color: #33acb7;
}
}
}
.sign_in {
position: absolute;
right: 3em;
top: 80%;
font-size: .8em;
color: #9eafba;
}
}
.button {
outline: none;
background: transparent;
border: 1px solid #d6dce0;
padding: .5em 1.5em;
border-radius: 1.5em;
&:hover {
border: 1px solid #33acb7;
color: #33acb7;
a {
color: #33acb7 !important;
}
}
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
#main_content {
margin-left: 250px;
#header {
padding: 1em 3em;
border-bottom: 1px solid #d6dce0;
background: #f5f7f9;
color: #9eafba;
p {
display: inline;
}
a {
color: #9eafba;
text-decoration: none;
}
.buttons {
float: right;
margin-top: -6px;
.button {
font-size: .8em;
margin-left: .5em;
}
}
}
.post_wrapper {
padding: 3em;
border-bottom: 1px solid #d6dce0;
.title {
margin: 0;
a {
font-weight: 500;
text-decoration: none;
color: #2a2f35;
font-size: 1.5em;
&:hover {
color: #33acb7;
}
}
}
.date_and_author {
color: #9eafba;
margin: .5em 0 0 0;
}
}
#post_content {
padding: 1em 3em;
.title {
font-weight: 500;
text-decoration: none;
color: #2a2f35;
font-size: 2.5em;
margin-bottom: 0;
}
.body {
font-size: 1.1em;
line-height: 1.75;
}
.date_and_author {
color: #9eafba;
margin: .5em 0 2em 0;
}
#comments {
h2 {
margin: 3em 0 1em 0;
border-bottom: 1px solid #d6dce0;
padding-bottom: 0.5em;
}
h3 {
margin-top: 2em;
}
.comment {
border-bottom: 1px solid #d6dce0;
padding: 1.5em 2em;
.clear_both {
clear: both;
}
&:after {
clear: both;
}
.comment_content {
float: left;
.comment_name {
margin: 1em 0 0 0;
font-size: 0.7em;
text-transform: uppercase;
}
.comment_body {
font-size: 1.2em;
margin: 0.2em 0 0 0;
}
.comment_time {
margin-top: 1.2em;
font-size: .8em;
}
}
.button {
float: right;
}
}
input[type="text"], textarea {
width: 50%;
}
}
}
#page_wrapper {
padding: 3em;
#profile_image {
width: 300px;
float: left;
margin-right: 2em;
img {
width: 100%;
border-radius: 0.35em;
}
}
#content {
h1 {
font-weight: 500;
}
p {
font-size: 1.1em;
line-height: 1.75;
}
a {
color: #33acb7;
font-weight: 700;
text-decoration: none;
}
}
}
.links {
margin: 2em 0;
}
input[type="text"], input[type="email"], input[type="password"], textarea {
width: 90%;
border: 1px solid #d6dce0;
border-radius: .35em;
margin-top: 10px;
padding: .5em 1em;
line-height: 1.75;
}
input[type="text"] {
height: 35px;
}
textarea {
min-height: 180px;
}
input[type="submit"] {
outline: none;
background: transparent;
border: 1px solid #d6dce0;
padding: .5em 1.5em;
font-size: 1.1em;
border-radius: 1.5em;
margin-left: .5em;
&:hover {
border: 1px solid #33acb7;
color: #33acb7;
}
}
}
Please help me to move these buttons on right. Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!Thank you!
Aucun commentaire:
Enregistrer un commentaire