Cristiano Santos_12646 0 Denunciar post Postado Outubro 9, 2014 Olá, Estou desenvolvendo este site: www.palcco.com.br/ftp/bucker Na seção 'Quem somos', nas caixas Missão, Visão, etc., estuo usando Jquery Show/Hide para exibir o conteúdo relacionado. O problema é que ao exibir o conteúdo escondido, este aparece cobrindo a próxima seção do site (Onde atuamos). Estou tentando fazer com que o conteúdo escindido empurre as outras seções para baixo ao invés de cobri-las. Acredito que seja algo no CSS. Já tentei diversas soluções que encontrei pesquisando, e nenhuma delas funcionou, e como resultado estou ficando desesperado! Seque abaixo o código: HTML para as seções Quem Somos e Onde Atuamos: <section id="about"> <section class="container"> <a href="#home" class="smoothScroll voltar"> <img src="img/voltar1.fw.png" alt="voltar"> </a> <h2>Quem Somos</h2> <p>Institucional: Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p> <section class="content_box"><a class="show_hide" href="#" rel="#conteudo_about1"> <img src="img/icone_missao.fw.png" alt="Missão"> </a> <div id="conteudo_about1" class="toggleDiv"> <p>Institucional: Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p> </div> </section> <section class="content_box"><a class="show_hide" href="#" rel="#conteudo_about2"> <img src="img/icone_visao.fw.png" alt="Visão"> </a> <div id="conteudo_about2" class="toggleDiv"> <p>Institucional: Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p> </div> </section> <section class="content_box"><a class="show_hide" href="#" rel="#conteudo_about3"> <img src="img/icone_objetivo.fw.png" alt="Objetivo Empresarial"> </a> <div id="conteudo_about3" class="toggleDiv"> <p>Institucional: Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p> </div> </section> <section class="content_box"><a class="show_hide" href="#" rel="#conteudo_about4"> <img src="img/icone_equipe.fw.png" alt="Equipe"> </a> <div id="conteudo_about4" class="toggleDiv"> <p>Institucional: Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.</p> </div> </section><!--conteudo_about--> </section><!--container--> </section><!--about--> <section id="atuacao"> <section class="container"> <a href="#home" class="smoothScroll voltar"> <img src="img/voltar2.fw.png" alt="voltar"> </a> <h2>Onde Atuamos</h2> <article class="box_atuacao"> <a href="#"> <img src="img/atuacao1.jpg" alt="Direito empresarial"> <h3>Direito<br> Empresarial</h3> </a> </article> <article class="box_atuacao"> <a href="#"> <img src="img/atuacao2.jpg" alt="Direito Tributário"> <h3>Direito <br>Tributário</h3> </a> </article> <article class="box_atuacao"> <a href="#"> <img src="img/atuacao3.jpg" alt="Direito Aduaneiro"> <h3>Direito <br>Aduaneiro</h3> </a> </article> <article class="box_atuacao"> <a href="#"> <img src="img/atuacao4.jpg" alt="Direito Processual"> <h3>Direito <br>Processual</h3> </a> </article> </section> <section class="container"> <article class="box_atuacao2"> <a href="#"> <img src="img/atuacao5.jpg" alt="Direito Internacional"> <h3>Direito <br>Internacional</h3> </a> </article> <article class="box_atuacao2"> <a href="#"> <img src="img/atuacao6.jpg" alt="Propriedade Intelectual"> <h3>Propriedade <br>Intelectual</h3> </a> </article> <article class="box_atuacao2"> <a href="#"> <img src="img/atuacao7.jpg" alt="Direito Imobiliário"> <h3>Direito <br>Imobiliário</h3> </a> </article> <article class="box_atuacao2"> <a href="#"> <img src="img/atuacao8.jpg" alt="Direito Agrário e Agronegócio"> <h3>Direito Agrário <br>e Agronegócio</h3> </a> </article> </section><!--container--> </section><!--atuacao--> CSS correspondente: /*-------------------------------------------------------- QUEM SOMOS ----------------------------------------------------------*/ #about{ width:100%; min-height:300px; float:left; background:#E5E5E5; margin-top:0; } #about h2{ color:#004179; margin-bottom:20px; } #about p, #conteudo_about p, #conteudo_about2 p, #conteudo_about3 p, #conteudo_about4 p{ font-size:12px; color:#4C4C4C; text-align:justify; } .content_box{ width:200px; /*height:200px;*/ display:block; float:left; background:#E5E5E5; margin-right:53px; position:relative; } .content_box:active:after{ content:''; width:0; height:0; position:absolute; border:20px solid transparent; border-top-color:#fff; top:100%; left:40%; } .content_box:last-child{ margin-right:0 !important; } #conteudo_about1 p, #conteudo_about2 p, #conteudo_about3 p, #conteudo_about4 p{ font-size:12px; color:#FFF; text-align:justify; } /*-------------------------------------------------------- ONDE ATUAMOS ----------------------------------------------------------*/ #atuacao{ width:100%; height:685px; float:left; background:url(img/fundo_atuacao.fw.png) center no-repeat;; background-size:129.3% 100%; margin-bottom:0; } #atuacao h2{ color:#FFF; } .box_atuacao{ width:200px; height:200px; float:left; background:#FFF; display:block; margin-right:53px; margin-top:40px; position:relative; } .box_atuacao h3, .box_atuacao2 h3{ width:100%; font-size:18px; color:#FFF; text-transform:uppercase; font-weight:200; position:absolute; top:60px; background:url(img/box_atuacao.png) center no-repeat; -webkit-background:url(img/box_atuacao.png) center no-repeat; background-blend-mode: multiply; padding:20px 0; text-align:center; } .box_atuacao h3:hover, .box_atuacao2 h3:hover{ background:#FFF; color:#004179; } .box_atuacao:last-child{ margin-right:0 !important; } .box_atuacao2{ width:200px; height:200px; float:left; background:#FFF; /*display:block;*/ margin-right:53px; margin-top:40px; position:relative; } .box_atuacao2:last-child{ margin-right:0 !important; } Jquery: $(document).ready(function(){ $('.show_hide').showHide({ speed: 1000, // speed you want the toggle to happen easing: '', // the animation effect you want. Remove this line if you dont want an effect and if you haven't included jQuery UI changeText: 0, // if you dont want the button text to change, set this to 0 showText: 'Show',// the button text to show when a div is closed hideText: 'Hide' // the button text to show when a div is open }); }); Javascript: (function ($) { $.fn.showHide = function (options) { //default vars for the plugin var defaults = { speed: 1000, easing: '', changeText: 0, showText: 'Show', hideText: 'Hide' }; var options = $.extend(defaults, options); $(this).click(function () { $('.toggleDiv:hidden').slideUp(options.speed, options.easing); // this var stores which button you've clicked var toggleClick = $(this); // this reads the rel attribute of the button to determine which div id to toggle var toggleDiv = $(this).attr('rel'); // here we toggle show/hide the correct div at the right speed and using which easing effect //slide up any divs that are not the one to be toggled $('.toggleDiv').not(toggleDiv).slideUp(options.speed, options.easing); $(toggleDiv).is(":visible") ? $('.toggleDiv').slideUp(options.speed, options.easing) : $(toggleDiv).slideToggle(options.speed, options.easing, function() { // this only fires once the animation is completed if(options.changeText==1){ $(toggleDiv).is(":visible") ? toggleClick.text(options.hideText) : toggleClick.text(options.showText); } }); return false; }); }; })(jQuery); Desde já agradeço qualquer ajuda que será muito bem vinda! Um grande abraço a todos, Cristiano Compartilhar este post Link para o post Compartilhar em outros sites
Cleiton Gomes 10 Denunciar post Postado Outubro 10, 2014 Se você colocar sua div #atuacao com position: relative; e tirar o position:absolute; das suas divs que aparecem e somem você conseguirá começar a ter uma noção de como fazer o que você quer. Compartilhar este post Link para o post Compartilhar em outros sites
Cristiano Santos_12646 0 Denunciar post Postado Outubro 14, 2014 Cleiton, Brigadão pela dica! Resolveu o meu problema! Eu mexi tanto nas posições dos elementos, fiz várias combinações, devo ter esquecido essa! Aquele abraço! Compartilhar este post Link para o post Compartilhar em outros sites