Como empurrar div com position absolute

[ggbelgamo 1]

Estou com um problema na hora de deixa o site responsivo, preciso que quando o meu menu for clicado e a div header descer, as setas do slider que estão definidas com position absolute devem descer junto com o slider, não invadindo o espaço do menu. Se elas estivesse dentro do meu container slider funcionaria, porém estou utilizando o plugin jquery cycle e tudo que ponho dentro da container-slider se torna um elemento de slide.

 

		<div class="topoResponsive">
			<div class="header">
				<div class="container-logo">
					<a href="index.php"><div class="logo"></div></a>	
				</div>
				<div class="container-menu">
					<img class="menuToogle" src="assets/img/menu-toogle.png" alt="">
					<ul class="nav">
						<li><a href="sobre-nos.php">Quem somos</a></li>
						<li><a href="pecas-agricolas.php">Peças agrícolas</a></li>
						<li><a href="pecas-inox.php">Peças Inox</a></li>
						<li class="mostrarMenu"><a href="contato.php">Contato</a></li>
						<li><a target="_blank" href="https://www.google.com.br/search?biw=1280&bih=566&tbm=nws&ei=AhK8WpKCAsiJwgSV3bPQBQ&q=agroneg%C3%B3cio&oq=agroneg%C3%B3cio&gs_l=psy-ab.3..0l10.3154.5498.0.5666.11.7.0.4.4.0.137.722.0j6.6.0....0...1c.1.64.psy-ab..1.10.737....0.HM95MZwK05g">Notícias</a></li>
					</ul>
	            </div>		
			</div>
		</div>


		<div class="slider">
	    	<figure>
	          	<img src="assets/img/slide2.png" />
	            <figcaption>
	                <p>Indústria e comércio de peças</p>
	                <div class="btn-slider"><a href="pecas-inox.php">Clique e conheça</a></div>
	            </figcaption>
	        </figure>
	        <figure>
	    		<img src="assets/img/slide1.png" />
	            <figcaption>
	                <p>Solicite agora um orçamento!</p>
	                <div class="btn-slider"><a href="contato.php">Entrar em contato</a></div>
	            </figcaption>    		
	        </figure>
		</div>
    
    <a class="arrowsSlider" id="prevSlider" href=""><img width="60px" src="assets/img/LeftArrow.png"/></a>
    <a class="arrowsSlider" id="nextSlider" href=""><img width="60px" src="assets/img/rightArrow.png"/></a>

/* CONTAINER SLIDER */


.slider{
	position: relative;
	height:  auto;  
    width:   100%;  
	z-index: 1;
	margin: 0 auto;
}

.slider img {  
    width:  100%; 
	height: auto;
} 

.arrowsSlider{
	position: absolute;
	height: 100px;
	top: 50%;
	margin-top: -50px;
	z-index: 2;
	opacity: 0.5;
	transition: 0.5s;
}

.arrowsSlider:hover{
	opacity: 1;	
}

#nextSlider{
	right: 0;	
}

.slider figcaption{
	position: absolute;
	text-align: center;
	color: #FFF;
	top: 50%;
	left: 50%;
	width: 400px;
	height: 150px;
	margin-left: -200px;
	margin-top: -75px;
	z-index: 2;	
}

.slider figcaption p{
	font-family: Myriad;	
	font-size: 40px;
	font-weight: bold;	
}

.btn-slider{
	position: absolute;
	width: 210px;
	height: 40px;
	left: 50%;
	margin-left: -105px;
	border: 2px solid #FFF;
	transition: 0.5s;
	text-align: center;
	cursor: pointer;
}

.btn-slider a {
	font-family: Helvetica;
	font-weight: bold;
	color: #FFF;
	line-height: 40px;
	text-decoration: none;
}

.btn-slider:hover{
	background: #FFF;
}

.btn-slider:hover a{
	color: #4F4F4F;
}

PRINT DO PROBLEMA: https://imgur.com/a/FuYLB

 

[snowstormdelivery 19]

Não consigo emular o código, mas acho que consigo te ajudar.

Sendo assim, percebo que a estrutura do HTML está assim:

 

Spoiler

 

Além disso, você diz que as flechas ficam em cima do header (visualmente), quando ele é expandido. Também, fala que você não pode colocá-las dentro do elemento de slider, pois, irão deslizar com o conteúdo.

 

Assim, eu queria sugerir que você crie uma nova div e coloque o slider e flechas dentro.

 

Spoiler

 

Dessa maneira, as flechas seriam posicionadas em relação a div, ficariam juntas ao slider e não deslizariam.

 

Spoiler

 

<div class="topoResponsive">
    <div class="header">
        <div class="container-logo">
            <a href="index.php"><div class="logo"></div></a>	
        </div>

        <div class="container-menu">
            <img class="menuToogle" src="assets/img/menu-toogle.png" alt="">

            <ul class="nav">
                <li><a href="sobre-nos.php">Quem somos</a></li>
                <li><a href="pecas-agricolas.php">Peças agrícolas</a></li>
                <li><a href="pecas-inox.php">Peças Inox</a></li>
                <li class="mostrarMenu"><a href="contato.php">Contato</a></li>
                <li><a target="_blank" href="https://www.google.com.br/search?biw=1280&bih=566&tbm=nws&ei=AhK8WpKCAsiJwgSV3bPQBQ&q=agroneg%C3%B3cio&oq=agroneg%C3%B3cio&gs_l=psy-ab.3..0l10.3154.5498.0.5666.11.7.0.4.4.0.137.722.0j6.6.0....0...1c.1.64.psy-ab..1.10.737....0.HM95MZwK05g">Notícias</a></li>
            </ul>
        </div>		
    </div>
</div>

<div class="nova-div">
    <div class="slider">

        <figure>
            <img src="assets/img/slide2.png" />

            <figcaption>
                <p>Indústria e comércio de peças</p>
                <div class="btn-slider"><a href="pecas-inox.php">Clique e conheça</a></div>
            </figcaption>
        </figure>

        <figure>
            <img src="assets/img/slide1.png" />

            <figcaption>
                <p>Solicite agora um orçamento!</p>
                <div class="btn-slider"><a href="contato.php">Entrar em contato</a></div>
            </figcaption>    		
        </figure>

    </div>

    <a class="arrowsSlider" id="prevSlider" href=""><img width="60px" src="assets/img/LeftArrow.png"/></a>
    <a class="arrowsSlider" id="nextSlider" href=""><img width="60px" src="assets/img/rightArrow.png"/></a>
</div>

 

Também, não esqueça de declarar position: relative, na nova div.

[Maujor 144]

@ggbelgamo
Na marcação HTML coloque as duas "setinhas" ( <a class="arrowSlider"  ...) dentro do container div.slider.
 

[snowstormdelivery 19]

1 hora atrás, Maujor disse:

@ggbelgamo
Na marcação HTML coloque as duas "setinhas" ( <a class="arrowSlider"  ...) dentro do container div.slider.
 

 

Ele diz que não consegue:

 

21 horas atrás, ggbelgamo disse:

Se elas estivesse dentro do meu container slider funcionaria, porém estou utilizando o plugin jquery cycle e tudo que ponho dentro da container-slider se torna um elemento de slide.

 

[ggbelgamo 1]

Pessoal, consegui resolver criando um div-container que engloba o slide e as setinhas e delimitei o height e a width desse container como auto! Obrigado!

Em 01/04/2018 at 16:58, Joao_Lucaas disse:

Não consigo emular o código, mas acho que consigo te ajudar.

Sendo assim, percebo que a estrutura do HTML está assim:

 

  Mostrar conteúdo oculto

 

Além disso, você diz que as flechas ficam em cima do header (visualmente), quando ele é expandido. Também, fala que você não pode colocá-las dentro do elemento de slider, pois, irão deslizar com o conteúdo.

 

Assim, eu queria sugerir que você crie uma nova div e coloque o slider e flechas dentro.

 

  Mostrar conteúdo oculto

 

Dessa maneira, as flechas seriam posicionadas em relação a div, ficariam juntas ao slider e não deslizariam.

 

  Mostrar conteúdo oculto

 

<div class="topoResponsive">
    <div class="header">
        <div class="container-logo">
            <a href="index.php"><div class="logo"></div></a>	
        </div>

        <div class="container-menu">
            <img class="menuToogle" src="assets/img/menu-toogle.png" alt="">

            <ul class="nav">
                <li><a href="sobre-nos.php">Quem somos</a></li>
                <li><a href="pecas-agricolas.php">Peças agrícolas</a></li>
                <li><a href="pecas-inox.php">Peças Inox</a></li>
                <li class="mostrarMenu"><a href="contato.php">Contato</a></li>
                <li><a target="_blank" href="https://www.google.com.br/search?biw=1280&bih=566&tbm=nws&ei=AhK8WpKCAsiJwgSV3bPQBQ&q=agroneg%C3%B3cio&oq=agroneg%C3%B3cio&gs_l=psy-ab.3..0l10.3154.5498.0.5666.11.7.0.4.4.0.137.722.0j6.6.0....0...1c.1.64.psy-ab..1.10.737....0.HM95MZwK05g">Notícias</a></li>
            </ul>
        </div>		
    </div>
</div>

<div class="nova-div">
    <div class="slider">

        <figure>
            <img src="assets/img/slide2.png" />

            <figcaption>
                <p>Indústria e comércio de peças</p>
                <div class="btn-slider"><a href="pecas-inox.php">Clique e conheça</a></div>
            </figcaption>
        </figure>

        <figure>
            <img src="assets/img/slide1.png" />

            <figcaption>
                <p>Solicite agora um orçamento!</p>
                <div class="btn-slider"><a href="contato.php">Entrar em contato</a></div>
            </figcaption>    		
        </figure>

    </div>

    <a class="arrowsSlider" id="prevSlider" href=""><img width="60px" src="assets/img/LeftArrow.png"/></a>
    <a class="arrowsSlider" id="nextSlider" href=""><img width="60px" src="assets/img/rightArrow.png"/></a>
</div>

 

Também, não esqueça de declarar position: relative, na nova div.

Foi isso mesmo que fiz, muito obrigado! RESOLVIDO!