0

Soy nuevo en rails y tengo un problema con la vista login, he tratado de colocar un menu en la parte de arriba de la pagina con los atributos CSS pero cuando corro el servidor rails el menu aparece en el medio de la pagina y no arriba como yo quiero. espero no sea una pregunta estupida pero no encuentro solucion he tratado de todo, espero puedas ayudarme por favor

este es el codigo html:

<body id="login">
  <nav>
    <div id="realmenu">

        <% if current_user %>
            <div class="menu"><%= link_to "Inicio", 'flights', class: "textomenu" %></div>
            <div><%= current_user.email %></div>
            <div class="menu"><%= link_to "Cerrar Sesion", logout_path, method: "delete", class: "textomenu" %></div>
        <% else %>
            <div class="menu"><%= link_to "Inicio", 'flights', class: "textoinicio" %></div>
            <div class="menu2"><%= link_to "Ingresar", 'login', class: "textomenu" %></div>
            <div class="menu3"><%= link_to "Registrarse", 'signup', class: "textomenu" %></div>
            <div class="menu4"><%= link_to "Contactanos", 'contact', class: "textomenu" %></div>
        <% end %>
    </div>
  </nav>
<div id="forma1">
    <%= form_for(:session, url: login_path) do |f| %>
        <div style="padding-bottom: 10px;padding-left: 40px;">
            <%= f.email_field :email, :placeholder => "Correo Electronico" %>
        </div>
        <div  style="padding-bottom: 10px;padding-left: 40px;">
            <%= f.password_field :password, :placeholder => "Contraseña" %>
        </div>
        <div  style="padding-bottom: 10px;padding-left: 60px;">
            <%= f.submit "Ingresar", class: "btn-submit" %>
        </div>
    <% end %>
</div> 

este es el codigo CSS:

#login{background-image:url("https://k43.kn3.net/5204B5D9D.jpg");
       background-repeat:no-repeat;
       background-size:100%;
       background-attachment:fixed;
       padding-top:0px;
       width:100%;}

#forma1{width: 300px;
        height: 150px;
        background-color:#212121;
        margin-left:440px;
        margin-top:240px;
        padding-left:50px;
        padding-top:50px;
        opacity: 0.8;}


#realmenu{height: 63px;
          width: 1000px; 
          background-color: #212121;
          background:linear-gradient(to bottom, #2D2D2D 10%, #000000 100%);
          background: -moz-linear-gradient(to bottom, #2D2D2D 10%, #000000 100%);
          background: -webkit-linear-gradient(to bottom, #2D2D2D 10%, #000000 100%);
          position: fixed;
          border-radius: 10px;
          margin-top: 0px;
          padding-top: 0px;
          left: 10%; }

nav{position: fixed;
    margin-top: 0px;
    padding-top: 0px;}
3
  • Sería necesario que añadieras algo de código a tu pregunta ya que si no es imposible que te puedan ayudar. el 22 nov. 2016 a las 19:45
  • listo edite el post @Error404
    – erickson
    el 22 nov. 2016 a las 20:19
  • 1
    Si es un problema css, es mejor que pongas el html ya generado (ctrl+U o cmd+alt+U en tu navegador), no tu código erb, que es lo que pusiste arriba. Con lo que pusiste no pude reproducir tu error, ya que los tags erb dificultan replicar el estado final de tu página el 23 nov. 2016 a las 14:26

3 respuestas 3

1

Creo que lo que esta pasando es que todo lo que tienes esta en tu archivo de tu vista y el menu deberia ir en el application.html.erb el cual esta en la carpeta views/layouts/application.html.erb. veo que estas repitiendo la etiqueta de body y en el application.html.erb ya esta defino. el menu lo debes de pasar al aplication.html.erb y dejar en la vista que muestras solo lo que necesites.

0

si has generado algun scaffold o usas devise para la autent revisa en app\assets\stylesheets si tienes un archivo llamado scaffolds.scss o algunos con el nombre de un modelo que hallas generado ej. producto.scss. Eliminalos pues su contenido puede alterarte tu css definido. saludos

0

Intenta esto crea un archivo app/views/shared/_navigation.html.erb

Toggle navigation POST-WEB

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
  <% if user_signed_in? %>
    <li><%= link_to "Home", root_path %></li>
   <% end %>
  </ul>
  <ul class="nav navbar-nav navbar-right">
     <% if user_signed_in? %>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
           <%= current_user.alias %>
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu" role="menu">
          <li><%= link_to 'Profile', edit_user_path(current_user)%></li>
          <li><%= link_to 'Log out', destroy_user_session_path, method: :delete %></li>
        </ul>
      </li>
    <% end %>
  </ul>
</div><!-- /.navbar-collapse -->

Y en el archivo app/views/layouts/application.html.erb Agrega la vista parcial dentro del body, espero te sirva.

<body>
<%= render 'shared/navigation' %>

<div class="row">
    <% if notice.present? %>
        <aside class="alert alert-info">
            <%= notice %>
        </aside>
        <% end %>
        <% if alert.present? %>
            <aside class="alert alert-danger">
        <%= alert %>
        </aside>
    <% end %>
</div>
<%= yield %>
</body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.