slideshow is’nt coming under the borders above it?

  • Resolved johannes999

    (@johannes999)


    2 years ago

    hello,

    I am few hours busy to solve this problem,

    but I couldn’t and I don’t understand why?

    I have tried every possible situation but the problem is the same .

    this is the HTML code:( I have paste all the code to be clear for you)

    <body <?php body_class(); ?>> 
<?php wp_body_open(); ?>
	

<div id="page" class="site">
	<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'auto-repair' ); ?></a>

   <header id="masthead" class="site-header">
	
	<div class="container">
		
		

	<div id="info-container1">	
		<figure>
	
  <div class="menu">
	  
	<span></span> 
	  <span></span>
	  <span></span>  
	  
	 </div>
		
	 	
		
		<div class="menu-bar">

    <ul>
      <li><a  class="menu-link">Home</a></li>
		<li><a  class="menu-link">onderhoud</a></li>
		<li><a  class="menu-link">banden</a></li>
		<li><a  class="menu-link">apk</a></li>
      <li><a  class="menu-link">Contact</a></li>
    </ul>
		
  </div>
			
		</figure>
		
		
      
		
 
		<div class="tekst2">Vooraf prijs opgave</div>
		<div class="tekst3">Klanten Beoordeling 9.2/10</div>
		
		</div>	
		
		<div id="info-container2"> 
		<div class="menu-title">
			Menu
			</div>
		
		</div>
		
		 
		
		  <div id="info-container3">
      <div class="title">Daxxx BVN Stasnom</div>
		<div class="description">auto reparatie service</div>
		<div class="tekst">hello</div>
		</div>
		
		</div>
		
		
	
 
		
			
		
			<div class="slideshow">
			

      <div class="mySlides fade">
        
        <img
          src="https://webdesignleren.com/wp-content/uploads/2023/01/1920-1080.jpg" alt="Slide 2"  style="width: 100%"   height="auto"    />     
      </div>

      <div class="mySlides fade">
        
        <img
          src="https://webdesignleren.com/wp-content/uploads/2023/01/mini-cooper-image-for-Home-page-1920-1080.jpg" alt="Slide 3"  style="width: 100%"  height="auto"  />   
	  
	 </div>
	 	
			  <div class="mySlides fade">
        
        <img
          src="https://webdesignleren.com/wp-content/uploads/2023/01/mini-cooper-image-for-Home-page-1920-1080.jpg" alt="Slide 3"  style="width: 100%"  height="auto"  />
				  
	 </div>
			
		
	
			 <div id="figure" style="text-align:center"> 
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
		</div> 
		
			</div>	
	
	</header><!-- #masthead -->

    and this is CSS code;

    .container {
	
	width:100%;
	position:fixed;
}

#info-container1 {
	
	border:0.01 solid #45accb;
	background-color:#45accb;
	width:100%;
	height:50px;
	margin-top:0;
	display:flex;
	flex-direction:row;

}

figure {
	
	width:33.333%;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	margin-left:4%;
}

.menu {
position:fixed;
width:45px;
height:45px;
background:#4b5054; 
cursor:pointer;
box-sizing:border-box;
border:1px solid #4b5054;
border-radius:10px;	
display:flex;
justify-content:flex-start;
align-items:center;
z-index:1;

}





.tekst2{
	font-size:1.2rem;
	color:#ffd978; 
	width:33.333%;
	display:flex;
	justify-content:center;
	align-items:center;
 


}

.tekst3{
	font-size:1.2rem;
	color:#ffd978; 
  	width:33.333%;
	display:flex;
	justify-content:flex-end;
	align-items:center;
	margin-right:4%;

	
}


#info-container2 {
      width:100%;
	   height:20px;
	background:#45accb;	
	display:flex;
	flex-direction:row;
	
	
}

.menu-title {
	color:#ffd978; 
	font-size:1rem;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	margin-left:4%;
	
}



#info-container3 {
	
	border:0.01 solid #4b5054;
	 background-color:#4b5054; 
	width:100%;
	height:70px;
	margin-top:0;
	display:flex;
	flex-direction:row;
   
	
}
.title{
	font-size:1.2rem;
	color:white;
     width:33.333%;
	display:flex;
   	justify-content:flex-start;
	align-items:center;
	margin-left:4%;
	
}

.description{
	font-size:1.2rem;
	color:white;
	width:33.333%;
	display:flex;
	justify-content:center;
   align-items:center;


}

.tekst{
	font-size:1.2rem;
	color:white;	
  	width:33.333%;
	display:flex;
	justify-content:flex-end;
	align-items:center;
	margin-right:4%;

}  





}

.menu-bar{
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
background-color:#ffd978; 
object-fit: contain;
transition:0.5s;
transform: translatex(-100%);
background: url("https://webdesignleren.com/wp-content/uploads/2023/01/auto-image-for-Home-page-900-500.jpg") center center;
background-size: cover;
z-index:-1:

}

.menu-bar.active {
	
	transform: translatex(0);
}

.menu-bar ul {
display:flex;
justify-content:flex-end;
align-items:center;
margin-right:2.5%;
float:right;	
}

.menu-bar ul li{
list-style:none;

	
}

.menu-bar ul li a {

line-height:60px;
text-transform:uppercase;
font-weight:bold;
color:white;
text-decoration:none;
padding:0 20px;
display:block;



}


 /* Slideshow  */



      .slideshow { 
				 width:100%;
      		position:relative;
			  display:flex;
		  justify-content:center;
	
		 
		  
      }


 .mySlides {
        display:none;
	     
      }

      img {
        vertical-align: middle;		
		   
      } 
	 
	
	
	 #figure {
    	position: absolute;
    bottom: 0; 

 
	}    
    
      
      .dot {
        height: 15px;
        width: 15px;       
        background-color:red;
        border-radius: 50%;
		  display: inline-block;
  transition: background-color 0.6s ease; 

				 
      }
	
	
	
.dot.active {
  background-color: #333;
	
}  
 
.dot.active:after {
    content: "";
       transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
	transition-delay: 1s;    
    position:absolute;
    left:5px		
}   
    
      .fade {
        animation-name: fade;
        animation-duration: 6s;
      }

      @keyframes fade {
        from {
          opacity: 0.5;
        }
        to {
          opacity: 1;
        }
      }

    the problem is the slider taking all the top while it has to be under the

    info-container 1,2,3 .

    it has to be under the 3 borders on the top (info-container1,info-container2 and info-container3).

    when I use top margin for slideshow .

    all the 3 borders are moving with the slideshow.

    I have set my all code between <header> </header>

    I have tried to set the slideshow code outside the header but the problem is the same?

    how I can solve this problem.

    I had before only slideshow but I have changed the style to have borders to set the menu and some text in it (the borders has to be fixed).

    thanks

    I could not see my url to make sure if someone wants to response to my thread that he or she can see my webpage(url) to be clear to him or her to understand the problem I have exactly.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘slideshow is’nt coming under the borders above it?’ is closed to new replies.