CODEWITHSUNDEEP
htmlcssruby-on-railstwitter-bootstraplayout
David Geismar
David Geismar

Reputation: 3412

Footer doesnt display at the right place on homepage of railsapp

My footer displays nicely on my rails app except on my Home page.

Here's my application.html file :

<!DOCTYPE html>
<html>
<head>
  <title><%= yield(:title) || "Wagon Rails" %></title>
  <meta name="description" content="<%= (yield(:description) || "").squish %>">

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <%= stylesheet_link_tag :application, media: "all" %>
  <%= favicon_link_tag %>
  <%= yield(:stylesheets) %>
  <%= csrf_meta_tags %>
</head>
<body>
  <%= render "shared/navbar" %>
  <%= render "shared/flashes" %>

  <%= yield %>

  <%= render "shared/footer" %>

    <%= javascript_include_tag "https://maps.google.com/maps/api/js?sensor=false" %>
  <%= javascript_include_tag "https://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js" %>
  <%= javascript_include_tag :application %>

  <%= yield(:after_js) %>

</body>
</html>

In my layout, as you can see I put my footer after the yield. Everywhere in the app this works well but in my home page the footer tries to fit in the middle of the page. Here's a screenshot of the homepage :

footer in middle of page

and Here is the code of the homepage which I took from a bootstrap template

<header class="background-cover">
    <div class="header-content">
        <div class="header-content-inner">
            <h1>Vos inscriptions et vos convocations aux tournois de tennis en un Clic</h1>
            <hr>
            <p id="avectm"><strong>Avec TennisMatch le calvaire des inscriptions et des gestions de convocation est terminé. Vous pouvez vous concentrer sur la seule chose importante : donnez le maximum sur le court.</strong></p>
            <%= link_to t(".sign_up", default: "S'inscrire"), new_user_registration_path, class: "btn btn-success page-scroll pad", id: "inscr"%>
        </div>
    </div>
</header>


    <section class="bg-green" id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <h2 class="section-heading">Une plate-forme de gestion pour les juges arbitre</h2>
                    <hr class="light">
                    <p class="text-faded">Juge Arbitre ? TennisMatch est là pour vous aider ! Référencer votre tournoi puis Gérer vos inscriptions et convocations grace à la plate-forme</p>
                    <%= link_to "Juge Arbitre ?", judge_path, class: "btn btn-default btn-xl margetop" %>
                </div>
            </div>
        </div>
    </section>

    <section id="services">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <h2 class="section-heading">Un service optimum pour les juges arbitres</h2>
                    <hr class="primary">
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6 text-center">
                    <div class="service-box">
                        <i class="fa fa-4x fa-diamond wow bounceIn text-primary"></i>
                        <h3>Référencer son tournoi</h3>
                        <p class="text-muted">Vous êtes juge arbitre et vous organisez un tournoi ? Il vous suffit de le référencer sur le site pour bénéficier de tous les avantages de TennisMatch</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 text-center">
                    <div class="service-box">
                        <i class="fa fa-4x fa-paper-plane wow bounceIn text-primary" data-wow-delay=".1s"></i>
                        <h3>Gérer les inscriptions</h3>
                        <p class="text-muted">TennisMatch vous permet de gérer toutes les inscriptions au tournoi. Fini la petite boite en métal et la clé autour du coup. Tous les paiements se font en ligne et les joueurs ne sont pas débités si leur inscription n'est pas retenue.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 text-center">
                    <div class="service-box">
                        <i class="fa fa-4x fa-newspaper-o wow bounceIn text-primary" data-wow-delay=".2s"></i>
                        <h3>Convocations</h3>
                        <p class="text-muted text-center">Finit les coups de téléphone, les emails non lus ou messages jamais écoutés par les joueurs. Tennis Match vous permet d'envoyer plusieurs convocations simultanément. Pour chaque convocation envoyée, le joueur concerné est prévenu par email, sms et notification. Plus d'excuse !</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 text-center">
                    <div class="service-box">
                        <i class="fa fa-4x fa-heart wow bounceIn text-primary" data-wow-delay=".3s"></i>
                        <h3>Plus que du plaisir</h3>
                        <p class="text-muted">Avec TennisMatch vous n'avez plus qu'à vous asseoir et profiter du spectacle ! Jeu set et match !</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

and here's the footer's code which is in views/shared/_footer.html.erb

<section id="contact">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <h2 class="section-heading">Contactez nous!</h2>
                    <hr class="primary">
                    <p>Vous voulez nous aider à améliorer le site ? Nous faire une suggestion ? ou tout simplement parler tennis autour d'un café ? N'hésitez pas à nous contacter !</p>
                </div>
                <div class="col-lg-4 col-lg-offset-2 text-center">
                    <i class="fa fa-phone fa-3x wow bounceIn"></i>
                    <p>06 66 02 74 14</p>
                </div>
                <div class="col-lg-4 text-center">
                    <i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
                    <p><a href="mailto:[email protected]">[email protected]</a></p>
                </div>
            </div>
        </div>
    </section>

Upvotes: 1

Views: 373

Answers (1)

andreanne.wintheiser
andreanne.wintheiser

Reputation: 386

Seems like a problem with HTML markup (i.e. unclosed tag). Try to check your home page in HTML Validator. It should help to find such kind of problems.

Upvotes: 1

Related Questions