Bootstrap carousel wont go above my next row

HTML & CSS
1

Hi - I am new to bootstrap and I’m trying to incorporate it into a website. It alll seemed to be going well but the carousel goes over the top of the main text (which are nested columns). Is anyone able to help me? If you are I can give you a link to my code if that is possible?

if there is an expert out there who can help me that would be great - I’m trying to add layout below minus the less and greater than signs and replacing / with close (sorry text below is a mess - if there is an easy way to add code let me know)

div class="container-fluid"
    div class="row"
         div class="col-lg-4 col-md-4 col-sm-3 col-xs-3"
            h1 id="logo"testclose h1
          close div 
          div class="col-lg-8 col-md-8 col-sm-9 col-xs-9 brownbg"
          div class="row"
           div class="sidebar-nav"
              div class="navbar navbar-default" role="navigation"
                div class="navbar-header"
                  button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse"
                    span class="sr-only"Toggle navigationclose span
                    span class="icon-bar"close span
                    span class="icon-bar"close span
                    span class="icon-bar"close span
                  close button
                  span class="visible-xs navbar-brand"close span
                close div
                    div class="navbar-collapse collapse sidebar-navbar-collapse"
                      ul class="nav navbar-nav"
                        li class="active"a id="welcome" href="close " class="selected"textclose aclose li
                        lia id="text" href="emotional-well-beingclose index.html"textclose aclose li
                        lia id="text" href="physical-well-beingclose index.html"textclose aclose li
                        
                      close ul
                    close div!--close .nav-collapse --
                  close div
                  close div
              close div    
                  
          div class="row"
                 div id="myCarousel" class="carousel slide" data-ride="carousel"
                      
                      div class="carousel-inner" role="listbox"
                        div class="item active"
                        img src="imagesclose photosclose 1.jpg" width="771" height="292" 
                        close div
                        div class="item"
                          img class="second-slide" src="imagesclose photosclose 2.jpg" alt="Homeopathy 2"
                        close div
                        
                      close div
                      
                close div!-- close .carousel --
        close div
    
        h2 id="logo2"textclose h2
   
        
    
        div id="menu-line"!-- --
        div class="clearfix"close div
        close div
        div class="clearfix" close div
        close div
      div class="clearfix" close div
        div class="col-lg-4 col-md-4 col-sm-3 col-xs-3"
            
            
          close div 
        
            div class="col-lg-5 col-md-5 col-sm-9-offset-0 col-xs-9 brownbg" id="C1"
          
            div id="lhc"

        p class="first"
textbr close 
close p


img src="imagesclose sig.png" width="163" height="55" alt=" " style="margin: 20px 0 0 0;" close     close div
            close div
        
            div class="hidden-lg hidden-md col-sm-3 col-xs-3"
            
            
          close div 
            div class="col-lg-3 col-md-3 col-sm-9 col-xs-9 brownbg" id="C2"
                div id="rhc"
      div style="border-bottom: 2px dashed #504640;margin-top:30px;padding:20px 10px;"
p class="cyan large"Newsclose p
ptextclose p
      close div
            close div
        close div
        close div
        div class="row"
             div class="col-lg-4 col-md-4 col-sm-3 col-xs-3"
              close div 
            div class="col-lg-5 col-md-5 col-sm-9-offset-0 col-xs-9 footerbg" id="C3"
                    text
                        close div
               close div
                 div class="hidden-lg hidden-md col-sm-3 col-xs-3"
                  close div 
        
                div class="col-lg-3 col-md-3 col-sm-9 col-xs-9 footerbg" id="C4"
                    pa href="https:close close uk.linkedin.comclose inclose leachsue" target="_blank"img src="imagesclose homeopathy-linkedin.gif" alt="Linkedin" width="100" height="28" border="0" close close abr close 
          close p
                    pa href="http:close close www.homeopathy-soh.orgclose " border=0img style="margin-top:10px;" src="close imagesclose soc-of-homeopaths.gif" close close a
close p
                close div
          
        close div
        close div
      close div
2

your probably better off leaving a link to your problem

3

You can highlight your code, then use the </> button in the editor window, which will format it.

Or you can place three backticks ``` (top left key on US/UK keyboards) on a line before your code, and three on a line after your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

4

Many thanks - the link is

no longer needed; removed as per request - TechnoBear

5

Which browser/OS are you using? I’m not seeing overlapping content in either Firefox or Chromium on Ubuntu Gnome.

(You do, however, have a few validation errors. Always a good idea to fix those first.)

6

Hi,

You are absolutely placing your carousel at the top of the page which means it no longer takes part in the flow of the page and will overlap when the height increases as you widen the page.

If you remove position:absolute form here:

#myCarousel {
  position: absolute;
  top: 0px;
  z-index: 1;
  width: 100%;
}

You will now see that the carousel drops into logical position in the page and does not overlap anything even when the page is opened wide.

However, I guess that you wanted the carousel at the top of the page and under your menu and header. If that is true then you would need to recode that section so that the side nav and elements on the top are absolutely placed on top of the carousel rather than the other way around because the carousel always has the greater height and will need to control the flow of the page.

7

Hi - Many thanks for your help - I have fixed validation errors. I am using Firefox on a MAC and Safari on Mac. It is when you enlarge or shrink the page so its viewable on all devices - the two columns go under the image as you enlarge and or shrink page.

8

Ah - my browser window must be the optimal size for it, because it looked fine. But @PaulOB has identified the issue for you.

9

Many thanks for this - I have removed the absolute - but do you know how I can keep the carousel under the menu at the top of the screen - if you have any ideas it would be so appreciated. Its not my design but I said I would try and make it mobile friendly for them. Its so great to get this help - thank you

10

Many thanks for all your help

11

Hi Sorry - just saw the second para. I will work on this - and thank you so much for idenfiying the problem

:smile:

12

A quick fix would be to drag it up with a negative top margin.

.carousel-inner{margin-top:-301px}

It’s a bit of a magic number as it relies on the header always being 301px tall. It may be good enough if you have fixed height elements only to cater for.

13

Hi - is it possible to remove my link now from the posting - it says it is too old to edit but I would like to remove it if possible. thanks

14

Done.

15

Many thanks - thats gr8 :smile:

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.