Issues with content overlapping within Bootstrap can arise when elements are

Struggling with my band website development using Bootstrap. Inexperienced in web design, I'm facing difficulties getting elements to align properly without slipping under each other. Looking for insights and suggestions on how to avoid manual CSS adjustments like "top: 32px;".

Your feedback is valuable! GitHub Repo: https://github.com/Ominix/coldclockknockout

Feel free to review the raw code below if GitHub isn't accessible:

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
  </head>
  <body>

  ...

  <div class="container-fluid mainContent">
    <div class="row">
      <div class="col-md-4">
        <h1>THIS IS CONTENT NOW</h1>
      </div>
    </div>
  </div>

  ...

  <footer>
      <div class="container">
          <div class="row">
              ...
          </div>
      </div>
  </footer>

  ...

</html>

Find the CSS styles used below:

html {
    height: 100%;
}
...

/*================================================================================================

NAVIGATION  

================================================================================================*/
...

/*================================================================================================

JUMBOTRON

================================================================================================*/
...

/*================================================================================================

Main content on home page

================================================================================================*/
...

/*================================================================================================

FOOTER

================================================================================================*/

Acknowledging that there might be excess and redundant code, any guidance or constructive criticism is welcomed. Your expertise will make a significant difference. Thank you!

jqueryhtmlcsstwitter-bootstrapfrontend

Answer №1

It appears that the main issue lies in the top: 32px setting. When using a fixed navbar, it is recommended to apply padding to the body tag to avoid overlapping content with the navigation bar. For more information, refer to the official documentation.

Here is an example of a solution:

html {
  height: 100%;
}
body {
  background-color: black;
  height: 100%;
  padding-top: 50px;
}
.navbar-inverse .navbar-nav > .active > a {
  font-size: 1.25em;
  border-bottom: 1px solid red;
}
#navigation {
  border-radius: none;
}
#myCarousel img {
  max-height: 500px;
}
div.jumbotron {
  padding: 0;
}
div.jumbotron img {
  width: 100%;
}
#mobleJumbotron {
  display: none;
}
@media screen and (min-width: 0px) and (max-width: 800px) {
  #myCarousel {
    display: none;
  }
  #mobleJumbotron {
    display: block;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fixed-top" id="navigation">
  <div class="container-fluid">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="index.html">Coldclock Knockout</a>
    </div>

    <div class="collapse navbar-collapse" id="navbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">News<span class="sr-only">(current)</span></a>
        </li>
        <li><a href="MUSIC.html">Music</a>
        </li>
        <li><a href="store.html">Store</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

<div id="mobleJumbotron" class="jumbotron">
  <img src="http://placehold.it/3000x750/54AEC7/fff?text=BANNER" alt="cd release promo">
</div>

<div id="myCarousel" class="carousel slide" data-ride="carousel">

  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
    <li data-target="#myCarousel" data-slide-to="4"></li>
    <li data-target="#myCarousel" data-slide-to="5"></li>
    <li data-target="#myCarousel" data-slide-to="6"></li>
  </ol>

  <div class="carousel-inner" role="listbox">

    <div class="item active">
      <img src="http://placehold.it/3000x750/397082/fff?text=SLIDE" alt="cd release promo">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/D63147/fff?text=SLIDE" alt="Crowd Shot1">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/348535/fff?text=SLIDE" alt="Robby and Ryan in blue">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/4F74C4/fff?text=SLIDE" alt="Ryan 1">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/9E4639/fff?text=SLIDE" alt="Bryan 1">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/CF70C3/fff?text=SLIDE" alt="Robby 1">
    </div>

    <div class="item">
      <img src="http://placehold.it/3000x750/857B30/fff?text=SLIDE" alt="Crowd Shot2">
    </div>

  </div>

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

<div class="container-fluid text-center">
  <div class="row">
    <div class="col-md-12">
      <h1>THIS IS CONTENT NOW</h1>
    </div>
  </div>
</div>

<footer>
  <div class="container">
    <div class="row text-center">
      <div class="col-lg-12">
        <ul class="list-inline">
          <li>
            <a href="#">Home</a>
          </li>
          <li class="footer-menu-divider">&sdot;</li>
          <li>
            <a href="#about">About</a>
          </li>
          <li class="footer-menu-divider">&sdot;</li>
          <li>
            <a href="#services">Services</a>
          </li>
          <li class="footer-menu-divider">&sdot;</li>
          <li>
            <a href="#contact">Contact</a>
          </li>
        </ul>
        <p class="copyright text-muted small">Copyright &copy; Your Company 2016. All Rights Reserved</p>
      </div>
    </div>
  </div>
</footer>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble displaying images in Express JS

Here are the lines of code that I wrote in Express: res.write("The current temperature is "+temp+". "); res.write("Weather is currently "+weatherDes); res.write("<img src=" +imageURL+ ">"); res.send() ...

javascripthtmlnode.jsexpress

Is there a way to deactivate a full HTML page during an event, similar to when using a JavaScript alert?

I'm currently working on a JSP/HTML web page where I need to disable or "gray out" the entire page when a button is clicked. This will prevent the user from accessing any other elements on the page until it's disabled. Any ideas on how to achiev ...

jquerycss

Ways to prevent a number input from deleting the initial 0 in a number

When making card payments, please note that we require a 3-digit security code. In certain cases, especially on older versions of Internet Explorer, there have been instances where codes starting with a 0 (e.g. 012) had the first 0 removed, resulting in o ...

html

Guide on loading a div with a flash object without showing it on the screen (element is loaded but remains hidden)

Is there a way to achieve an effect that is somewhere between using display: none and visibility: hidden? Specifically, I am trying to have a div element (containing flash content) loaded but not displayed on the page. Just for clarification: I have embed ...

javascripthtmlcssflashswfobject

JSP generates unconventional HTML output

I'm encountering a strange issue with one of my JSP pages. It seems like the HTML is not being fully rendered. The output looks like this: <html> ... <table> ... </table> <div id= So, the last line is exactly what ...

javahtmljsprendering

Has CSS3 been recognized as an official standard?

Can you confirm whether CSS3 has been officially recognized as a W3C standard or is it currently in the status of "CR" (Candidate Recommendation)? ...

cssw3c

Feeling uncertain about Node, NPM, Bower, and how to set them up for Bootstrap?

Looking to expand my knowledge in web development, I have a solid understanding of HTML, JS, CSS, and server-side programming. However, the concepts of Nodejs, npm, and Bower are still unclear to me. In order to begin a new project, I created a designated ...

javascriptnode.jstwitter-bootstrapnpmbower

Leveraging JavaScript Functionality with ASP.NET Identity Roles

I'm currently working on an application that utilizes JQuery DataTables. The goal is to have these tables visible to all users, but restrict the click functionality to a specific user role. One way I can achieve this is by setting up authorization on ...

javascriptc#jqueryasp.net-mvcasp.net-identity

What could be the reason for my CSS animation with :hover @keyframes not functioning?

As a newcomer, I am struggling to understand why this code isn't functioning correctly. My goal is to create the illusion of a flying bird. This is my HTML: <img src="http://dl.dropboxusercontent.com/u/105046436/tw.png" /> <br> <div c ...

htmlcsscross-browsercss-animations

Prevent additional clicks on the image

Currently, I am dealing with a situation where I have a list containing a jQuery handler for mouse clicks. The dilemma is that I need to insert an image into the list, but I want clicking on the image to trigger a different function than clicking elsewhere ...

javascriptjqueryhtml-lists

Is there a way to invoke a jQuery function from an ASP.NET environment?

I'm having trouble figuring out how to properly invoke a jQuery function. ScriptManager.RegisterStartupScript(GetType(), "Javascript", "countdown(); ", true); The issue is that it attempts to call the method inline, preventing it from executing the ...

javascriptc#jqueryasp.net

Block Button styles not displaying in IE when set to Full Width

I can't figure out why, but it seems to be functioning properly on every other internet platform except this one. The first picture shows the button in IE, the second contains the code, and the third displays the button in Chrome. Visit webpage ...

htmlcssinternet-explorerbuttonblock

magnificPopup experiencing difficulties when attempting to invoke a class that is dynamically generated within the HTML document

Currently, I am encountering an issue with the magnificPopup. Whenever I try to trigger the popup using the class 'popup-with-zoom-anim', it doesn't seem to work as expected. Has anyone else faced a similar problem before? <body> < ...

javascriptjqueryhtmlajaxmagnific-popup

Step-by-step guide on creating a clickable button that triggers the appearance of a block showcasing a dimmed photo upon activation

Is there a way to create a button that triggers a pop-up block featuring a darkened photo when clicked? ...

javascripthtmlcssbootstrap-5

Obtain the controller name from the current scope

I am trying to assign a controller named in the scope of another controller JavaScript file: .controller('PageCtrl', [ '$http', '$scope', '$routeParams', '$location', function($http, $scope, $ro ...

javascripthtmlangularjsangularjs-scope

Sas: The outcome matches the viewer results exactly

I am reaching out because I am experiencing an issue with my results viewer in Sas 9.4. When the results load, they appear similar to the output format. Instead of displaying a table with cells, it appears as a table drawn with -+|. The layout options do ...

htmlsastabulate

Determining the total number of current connections using JavaScript, jQuery, and Selenium WebDriver

I need your assistance as I've encountered a roadblock. In my automated tests using Selenium WebDriver + Java, I rely on the following code snippet to check for active background AJAX connections: private boolean hasNoActiveConnections() { retur ...

javascriptjqueryselenium

What methods are recommended for expanding the size of a select/dropdown menu?

Managing a long list of values can be challenging, especially when it continues to grow. Consider the following example: <select> <option value="1">1, some test</option> <option value="2">2, some text</option> <optio ...

javascriptjqueryhtml

Converting counterup2 to pure vanilla JavaScript: step-by-step guide

Is there a way to convert the counterUp2 jQuery code to vanilla JavaScript? const counters = document.querySelectorAll('.counter'); function count(element) { let currentValue = 0; const targetValue = parseInt(element.innerText); let interv ...

javascripthtml

Is there a way to retrieve a label's text using their class name within a loop?

I have multiple labels sharing the same classname, each with different text. My goal is to iterate through them and extract the text they contain. Here is the example markup: <label class="mylabel pull-left"> Hello </label> <label class="m ...

javascriptjquery