Jump to content
ggbelgamo

Como empurrar div com position absolute

Recommended Posts

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: ok.thumb.png.096f74fd833a0f52410de6aa086aeb79.pnghttps://imgur.com/a/FuYLB

 

Share this post


Link to post
Share on other sites

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

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

 

Spoiler

3.png.6d9d8ac1e7dd0520b6bdc81208ca6d26.png

 

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

1.png.d2e3a242250ee360105733373fd88095.png

 

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

 

Spoiler

2.png.5c7101d0487475cac2fe14a85ae19a63.png

 

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

  • Obrigado! 1

Share this post


Link to post
Share on other sites
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.

 

Share this post


Link to post
Share on other sites

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

3.png.6d9d8ac1e7dd0520b6bdc81208ca6d26.png

 

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

1.png.d2e3a242250ee360105733373fd88095.png

 

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

 

  Mostrar conteúdo oculto

2.png.5c7101d0487475cac2fe14a85ae19a63.png

 


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

  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By 4Unknow
      Boa noite comunidade da Imasters, como vocês estão?

      Pessoal peguei um botão responsivo com popup, mas não consigo adicionar mais dele um do lado do outro.
      Vou deixar o conteúdo dele aqui se alguém puder me dar uma luz. Só queria copiar ele para adicionar mais dois botões um ao lado do outro.

      Quem puder me ajudar, ficaria agradecido.

      segue código:

      index.html:
       
      <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Alterações Robô Everest</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'><link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <h1> Configurações Robô Everest </h1> <h2> Data: 14/04/2021</h2> <button type="button" class="main-btn-rect popup-btn" data-popup="popup-reg">Modo Agressivo</button> <div id="popup-reg" class="popup"> <div class="popup-content"> <div class="event-header"> <h6>Don't be shy, say hi!</h6> </div> Stop Loss: 255<br> Stop Gain: 30<br><br> Ou a seu gosto!<br><br> Desvio Envelope: 0.12<br><br> Pausas nas operações: 10:00,11:00,10:30,12:30<br> <span class="fade-out main-btn-circle">╳</span> </div> </div> <!-- partial --> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script><script src="./script.js"></script> </body> </html>
      script.js:
       
      $(document).ready(function(){ $('.popup-btn').click(function(){ var popupBlock = $('#'+$(this).data('popup')); popupBlock.addClass('active') .find('.fade-out').click(function(){ popupBlock.css('opacity','0').find('.popup-content').css('margin-top','350px'); setTimeout(function(){ $('.popup').removeClass('active'); popupBlock.css('opacity','').find('.popup-content').css('margin-top',''); }, 600); }); }); });
      style.css:
       
      @import url('https://fonts.googleapis.com/css?family=Lobster'); @import url('https://fonts.googleapis.com/css?family=Roboto'); body{ margin: 0; padding: 0; height: 100vh; font-family: 'RobotoLight', sans-serif; border-bottom: 1px solid #FFFFF0; background: #00c6ff; background: -webkit-linear-gradient(to right, #0072ff, #00c6ff); background: linear-gradient(to right, #0072ff, #00c6ff); overflow: hidden; } button { text-decoration: none; border: none; } h1 { position: absolute; display: inline-table; top: 20%; left: 50%; transform: translate(-50%, -50%); font-size: 30px; text-transform: uppercase; letter-spacing: 2px; color: #FFFFF0; } h2 { position: absolute; top: 35%; left: 50%; transform: translate(-50%, -50%); font-size: 25px; text-align: center; color: #FFFFF0; } .popup-btn{ position: absolute!important; top: 55%; left: 50%; transform: translate(-50%,-50%); } .main-btn-rect, .main-btn-circle{ position: relative; margin: 0; font-family: 'Roboto', sans-serif; color: #FFFFF0; background-color: rgb(252, 79, 79); text-transform: uppercase; font-size: 25px; letter-spacing: 1px; outline: none; cursor: pointer; z-index: 100; } .main-btn-rect { padding: 10px 80px; line-height: 30px; } .main-btn-rect:before, .main-btn-rect:after{ position: absolute; content: ''; top:0; width: 0%; height: 100%; background-color: rgba(255, 255, 240, 0.2); -webkit-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s; } .main-btn-rect:before { left: 0; } .main-btn-rect:after { right: 0; } .main-btn-rect:hover:before, .main-btn-rect:hover:after{ width: 50%; } .main-btn-circle{ height: 40px; width: 40px; -webkit-border-radius: 50%; border-radius: 100%; line-height: 40px; -webkit-transition: box-shadow 0.3s; -o-transition: box-shadow 0.3s; transition: box-shadow 0.3s; } .main-btn-circle:hover{ -webkit-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); -moz-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2); } .popup{ position: fixed; top: 100%; width: 100%; height: 100%; z-index: 10001; } .popup.active{ top:0; background-color: rgba(3, 3, 3, 0.98); transition: background-color .6s ,opacity .6s; } .popup .main-btn-rect{ padding: 10px 100px; } .popup .popup-content{ position: absolute; top: 50%; left: 50%; max-height: 568px; min-width: 320px; margin-top: 150px; padding: 25px; background-color: #FFFFF0; color: #070000; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transition: margin .6s; -webkit-transition: margin .6s; -moz-transition: margin .6s; -o-transition: margin .6s; } .popup.active .popup-content{ margin-top: 0px; } .popup-content h6{ display: table; font-size: 16px; text-align: center; margin: 10px auto; font-family: 'Roboto',sans-serif; text-transform: uppercase; font-weight: 100; } .form-group{ position: relative; width: 90%; margin: 0px auto; } form#send input, form#send textarea{ position: relative; margin-bottom: 32px; width: 100%; height: 29px; font-family: 'RobotoLight', sans-serif; text-indent: 20px; background-color: transparent; outline: 0; border: none; border-bottom: 1px solid #070000; -webkit-transition: border 0.6s; -o-transition: border 0.6s; transition: border 0.6s; } form#send input:focus, form#send textarea:focus{ border-bottom: 1px solid rgb(63, 173, 168); } form#send label{ position: absolute; top: 0; line-height: 28px; -webkit-transition: color .5s; -o-transition: color .5s; transition: color .5s; } form#send input:focus + label, form#send textarea:focus + label{ color: rgb(63, 173, 168); } form#send .txt{ line-height: 22px; left: 2px; } form#send .main-btn-rect { position: relative; display: block; padding: 12px 80px; margin: 0px auto; font-size: 14px; } form#send .main-btn-rect i { margin-right: 5px; } .popup .fade-out{ position: absolute; top: -20px; right: -20px; text-align: center; font-size: 15px; } .share-wrap{ position: absolute; display: inline-table; top: 67%; left: 50%; transform: translate(-50%, -50%); padding: 15px; text-align: center; } .share-btn{ color: #FFFFF0; padding: 7px 25px; text-decoration: none; cursor: pointer; font-weight: 100; font-size: 14px; font-family:'Lobster', sans-serif; background-color: rgba(63, 173, 168, .8); text-transform: uppercase; border-radius: 5px; transition: background-color .5s; -webkit-transition: background-color .5s; -moz-transition: background-color .5s; -o-transition: background-color .5s; } .share-btn:hover{ color: #FFFFF0; text-decoration: none; background-color: rgba(63, 173, 168, 1.0); } .resp-sharing-button__link, .resp-sharing-button__icon { display: inline-block } .resp-sharing-button__link { text-decoration: none; color: #fff; margin: 2px; } .resp-sharing-button { border-radius: 5px; transition: 25ms ease-out; padding: 6px 9px; transition: background-color .5s; -webkit-transition: background-color .5s; -moz-transition: background-color .5s; -o-transition: background-color .5s; } .resp-sharing-button__icon svg { width: 1em; height: 1em; margin-right: 0.4em; vertical-align: top } .resp-sharing-button--small svg { margin: 0; vertical-align: middle } .resp-sharing-button__icon, .resp-sharing-button__icon--solid, .resp-sharing-button__icon--solidcircle { fill: #fff; stroke: none } .resp-sharing-button--facebook { background-color: #3b5998; border-color: #3b5998; } .resp-sharing-button--facebook:hover, .resp-sharing-button--facebook:active { background-color: #2d4373; border-color: #2d4373; } .resp-sharing-button--twitter { background-color: #55acee; border-color: #55acee; } .resp-sharing-button--twitter:hover, .resp-sharing-button--twitter:active { background-color: #2795e9; border-color: #2795e9; } .resp-sharing-button--linkedin { background-color: #0077b5; border-color: #0077b5; } .resp-sharing-button--linkedin:hover, .resp-sharing-button--linkedin:active { background-color: #046293; border-color: #046293; } @media only screen and (max-width: 768px){ h1 {font-size: 25px;} h2 {font-size: 14px;} form#send .main-btn-rect {padding: 7px 60px; font-size: 14px;} .popup-btn{padding: 7px 60px; font-size: 14px;} } Tentei copiar o código do index.html mas não aparece os outros botões.
      Puderem me ajudar agradeço.

      Um abraço.
    • By kaionr
      Olá, estou com uma dificuldade para posicionar um elemento. 
      Se trata de um pop-up que aparece na tela ao clicar. Acontece que esse pop-up não fica centralizado em todas as telas dependendo da resolução.
      No momento estou usando o position absolute, a div é essa abaixo: 
      .form-structor { background-color: #222; border-radius: 15px; height: 550px; width: 450px; position: absolute; top: -100px; left: 170px; overflow: hidden; } Também já tentei:
      {position: relative; top: 50%; left: 50%;}
       
       
      Alguém pode me ajudar? 
      Qual propriedade eu utilizo para ficar centralizado tanto horizontal e quanto vertical em qualquer resolução?
    • By Sherlock02
      Olá!
       
      Eu estou tentando fazer um layout de postagem em que o primeiro ocupa a largura de 100%. Os demais são dispostos em grid, dois posts.
      (Vou anexar uma imagem para exemplificar o que desejo).
       
      Segue o código:
      .post:first-child{width:100%;position:relative;} .post{margin-bottom:60px;width:48.8%;float:left;background:#eee} .post:nth-child(2n+2){margin-right:30px;}  
      <div  id='mainwrapper'> <div class="post">   <div class="post-entry">        1 Post com width 100%. Here goes my post.   </div> </div> <div class="post">   <div class="post-entry">        2. Post com width 48%. Here goes my post.   </div> </div> <div class="post">   <div class="post-entry">        3. Post com width 48%. Here goes my post.   </div> </div>   </div><!-- mainwrapper--> Esse código que fiz não me satisfez por completo porque o post da direita não "gruda" no canto, então está ficando desigual o primeiro e os demais.
       
      Eu gostaria de saber se não existe uma forma mais prática de fazer esse código.
      Obrigada!

    • By opl12
      Olá Mestres,
       
      Pesquisei mas não encontrei...
       
      Tem como pegar o garo selecionado de um Input Range?
      <label class="mt-3" for="customRange3">DIA</label> <input type="range" class="custom-range" min="01" max="31" step="1" id="customRange3"> Neste exemplo, tem uma time line de 1 a 31 (dias)... gostaria que ao selecionar carregasse o valor numa variável em PHP.
       
      vlw
       
       
    • By BelleFisio
      Olá! Bom dia!
       
      Tenho uma imagem que fica responsiva na maioria dos navegadores, porém no internet explore ela não fica responsiva. No iexplore ela tbm sai da posição correta, então fiz um codigo especifico para o iexplore (o posicionamento ficou correto, porém a imagem não esta responsiva)
       
      Teria alguma forma de corrigir isso?
       
      O codigo esta assim:
      <div class="conteudo"> <div id="cabeçalho"> <div class="logotipo"> <img src="arquivo/img/logotipo.png"> </div> </div> </div>  O CSS:
      .cabeçalho{width:90%;margin-left:auto;margin-right:auto;} .logotipo {width:100%;max-width:1000px;}} .logotipo img{width:100%!important;height:auto;max-width:180px;}  
      Obrigada
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.