Issue with positioning content

Question

Issue with positioning content

Hey everyone, I'm currently developing a website and encountered an issue with placing content inside the body tag within a div element.

I attempted to place the div inside the body tag, but the outcome was unexpected:

https://i.sstatic.net/2zjqf.jpg

The content seems to be appearing inside the slider. My intention is to have it displayed after the slider section.

Bootstrap is being utilized for this project.

Below is the code snippet:

header {} .carousel {
  position: absolute;
  top: 0;
  height: 50%;
}
... (CSS code continues)

... (HTML code starts)

After experiencing this issue, I decided to test the code in a fiddle. Strangely enough, when using jsfiddle, the result looks as expected without any modifications made to the original code.

Check out the working demo on JSFiddle here

html css twitter-bootstrap

Answer 1

Answer №1

Adjust the carousel position to be relative:

.header {} .carousel {
  position: relative;
  top: 0;
  height: 50%;
}

Answer 2

Adjust the carousel position to be relative:

.header {} .carousel {
  position: relative;
  top: 0;
  height: 50%;
}

Answer 3

Answer №2

Give this a try, it should do the trick:

header {} .carousel {
  position: absolute;
  top: 0;
  height: 50%;
}
a.navbar-brand {
  font-family: 'Pacifico', cursive;
  text-align: center;
}
nav.navbar.navbar-inverse {
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  margin-bottom: 0;
  z-index: 100;
  top: 0;
}
nav.navbar.navbar-inverse a {
  color: rgb(232, 192, 163);
}
nav.navbar.navbar-inverse a:hover {
  background-color: rgb(232, 192, 163);
  transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  -webkit-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
  background-color: rgb(232, 192, 163);
}
.footer-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: ;
  text-align: center;
  color: black;
  background-color: white;
  z-index: 100;
}
.footer-bottom a {
  color: rgb(232, 192, 163);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="resources/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">



<header>

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href="#">Beauty Salon Lisa</a>
        <br/>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#">Page 1</a>
          </li>
          <li><a href="#">Pryge 2</a>
          </li>
          <li><a href="#">Prgdfge 3</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
          </li>
          <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <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>

    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="https://cdn.spafinder.com/2016/01/spa-treatments-to-try.jpg" alt="Chania">
        <div class="carousel-caption">
          <h2>
        Heading
      </h2>
          <p>
            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          </p>
        </div>
      </div>

      <div class="item">
        <img src="https://cdn.spafinder.com/2016/01/spa-treatments-to-try.jpg" alt="Chania">
        <div class="carousel-caption">
          <h2>
        Heading
      </h2>
          <p>
            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          </p>
        </div>
      </div>


    </div>

    <!-- Left and right controls -->
    <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>

</header>

<div class="footer-bottom">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="copyright">
          Copyright Beeldmateriaal: Maria Galland©, Neoderma ©
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

        <div class="design">

          <a href="#">Neem contact op </a> | <a target="_blank" href="#">Maak direct een afspraak</a>

        </div>

      </div>

    </div>

  </div>

</div>

Answer 4

Give this a try, it should do the trick:

header {} .carousel {
  position: absolute;
  top: 0;
  height: 50%;
}
a.navbar-brand {
  font-family: 'Pacifico', cursive;
  text-align: center;
}
nav.navbar.navbar-inverse {
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  margin-bottom: 0;
  z-index: 100;
  top: 0;
}
nav.navbar.navbar-inverse a {
  color: rgb(232, 192, 163);
}
nav.navbar.navbar-inverse a:hover {
  background-color: rgb(232, 192, 163);
  transition: all 0.5s ease-in-out 0s;
  -moz-transition: all 0.5s ease-in-out 0s;
  -webkit-transition: all 0.5s ease-in-out 0s;
  -o-transition: all 0.5s ease-in-out 0s;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
  background-color: rgb(232, 192, 163);
}
.footer-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: ;
  text-align: center;
  color: black;
  background-color: white;
  z-index: 100;
}
.footer-bottom a {
  color: rgb(232, 192, 163);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="resources/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">



<header>

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href="#">Beauty Salon Lisa</a>
        <br/>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#">Page 1</a>
          </li>
          <li><a href="#">Pryge 2</a>
          </li>
          <li><a href="#">Prgdfge 3</a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
          </li>
          <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <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>

    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

      <div class="item active">
        <img src="https://cdn.spafinder.com/2016/01/spa-treatments-to-try.jpg" alt="Chania">
        <div class="carousel-caption">
          <h2>
        Heading
      </h2>
          <p>
            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          </p>
        </div>
      </div>

      <div class="item">
        <img src="https://cdn.spafinder.com/2016/01/spa-treatments-to-try.jpg" alt="Chania">
        <div class="carousel-caption">
          <h2>
        Heading
      </h2>
          <p>
            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.
          </p>
        </div>
      </div>


    </div>

    <!-- Left and right controls -->
    <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>

</header>

<div class="footer-bottom">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="copyright">
          Copyright Beeldmateriaal: Maria Galland©, Neoderma ©
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">

        <div class="design">

          <a href="#">Neem contact op </a> | <a target="_blank" href="#">Maak direct een afspraak</a>

        </div>

      </div>

    </div>

  </div>

</div>

Issue with positioning content

Answer №1

Answer №2

Similar questions

Is there a way to have a button function as a submit button for a form even when it is located in a separate component within a react application?

Is there a way to retrieve a singular value from various select options sharing the same name within a single form?

I'm struggling to retrieve and display data from my Flask application using console log. It seems to be a challenge when combining it with

Avoid having individual words centered on a single line of text

Troubleshooting Problems with CSS Media Queries on Various 1280 screens

Using just one "nav.php" file for both the homepage and subdirectories

Is Ionic capable of storing data similar to sharedpreferences?

Swap Text/Characters When Hovered Over

I'm trying to position this div within a table so that it lines up with one of the cells. Can you help me figure out

The ng-View feature appears to be malfunctioning within AngularJS

Passing data from Bootstrap 4 to a modal on a different server

Having trouble with CSS and javascript files not resolving after moving app to a new Windows 7 development machine

Adjusting nearby parts when hovering in CSS

Creating equal height for two element children using CSS

Querying the height of an image element using jQuery and dynamically adding padding if necessary

Struggling with getting the tabbed slider carousel to function properly in Bootstrap 4?

Is it possible to retrieve the current CSS value set by a media query using JavaScript?

There is a mismatch in the host name: please consider using a domain name (e.g., https://myname.myorg.com) instead of https://localhost

What could be causing Prettier code formatter to suddenly stop formatting in VS Code?

Generating HTML tables with charts using FireFox