Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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](https://imgur.com/a/FuYLB)@ggbelgamo
Na marcação HTML coloque as duas "setinhas" ( <a class="arrowSlider" ...) dentro do container div.slider.
>
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.
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!
Não consigo emular o código, mas acho que consigo te ajudar.
Sendo assim, percebo que a estrutura do HTML está assim:
Spoiler
/monthly_2018_04/3.png.6d9d8ac1e7dd0520b6bdc81208ca6d26.png" style="width:250px;height:auto;" />
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
/monthly_2018_04/1.png.d2e3a242250ee360105733373fd88095.png" style="width:250px;height:auto;" />
Dessa maneira, as flechas seriam posicionadas em relação a div, ficariam juntas ao slider e não deslizariam.
Spoiler
/monthly_2018_04/2.png.5c7101d0487475cac2fe14a85ae19a63.png" style="width:250px;height:auto;" />