CODEWITHSUNDEEP
htmlcss
Nick
Nick

Reputation: 3090

HTML positioning: overlap between navigation bar and text

It's so basic but I don't seem to be able to get it right. Part of the body text that follows after the navigation bar gets positioned underneath the navigation bar. Also when there's an alert message (e.g. wrong credentials) it gets positioned underneath the navigation bar so that it can't be read. What am I doing wrong? (I'm using Rails 3.2 and Ruby 4).

In application.html.erb I have:

  <%= render "layouts/header" %>
  <% flash.each do |name,msg| %>
    <p class="alert"><%= content_tag :div, msg, :id => name %></p>
  <% end %>
  <p class="notice"><%= notice %></p>
  <%= yield %>
  <%= render "layouts/footer" %>

Part of the html code that this renders:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
...etc...
    </div><!--/.nav-collapse -->
  </div>
</nav>

  <p class="notice"></p>

  <h2>Log in</h2>

<form accept-charset="UTF-8" action="/users/sign_in" class="new_user" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="GRy...00Z1w=" /></div>
  <div class="field">
    <label for="user_email">Email</label><br />
...etc...

With regard to the CSS I use bootstrap in addition to:

-CSS for the navigation:

.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav li {
  display: inline;
}

.loginnaam {
    font-size: 11px;
    padding: 16px 10px;
}

-CSS for the text:

/* JUMBOTRON ON HOME
================================================== */
.jumbotron {
  background-image: url('http://www.....com/....jpg');
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
}

.jumbotron h1 {
  color: #fff;
  font-size: 48px;  
  font-family: 'Shift', sans-serif;
  font-weight: bold;
}

.jumbotron p {
  font-size: 20px;
  color: #fff;
}


/* CUSTOMIZE THE CAROUSEL
================================================== */
/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}


/* ILLUSTRATIES
================================================== */
.illustraties{
    background-color: #efefef;
    border-bottom: 1px solid #dbdbdb;
}

.learn-more {
  background-color: #f7f7f7;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}

Upvotes: 0

Views: 12634

Answers (2)

Faiz Hameed
Faiz Hameed

Reputation: 544

if you are setting it to absolute. you may need to give width as 100% I basically moved the entire nav to header tag and defined like this

header{
    position: absolute;
    z-index:2;
    width: 100%;
}

Upvotes: 0

Fuzzyma
Fuzzyma

Reputation: 8474

Your navbar is fixed, means that it stays above all content except there is content with a higher z - index which has absolute or fixed position.

Just add a margin-top to your body as much as the navbar has heigh. All your content should stay below the navbar then.

Upvotes: 4

Related Questions