Pesquisar na Comunidade

Ola boa tarde, estou fazendo um curso e to no modulo intermediario de css. Pra praticar, to fazendo um sitezinho com algumas funcoes vistas ate agora e não to conseguindo posicionar uma div (que é uma faixa com algumas imagens, etc..) no fim da página, a unica forma que consigo fazer é com position: fixed, mas atrapalha a visualização, teria que ser absolute.. por mais que eu coloque position: absolute; bottom: 0; ele fica mais pro inicio da tela do que pro fim.. o que pode estar acontecendo? <div class="faixadad"> <div id="faixainferior"> <a href="https://www.siteblindado.com" target="_blank"> <img class="sitebli" src="./assets/sitebli.png"> </a> <a href="https://transparencyreport.google.com/?hl=pt-PT" target="_blank"> <img class="googleseg" src="./assets/selo-google-site-seguro.png"> </a> <a href="https://www.ebit.com.br" target="_blank"> <img class="ebit" src="./assets/selo_ebit_kabum_horizontal.png"> </a> <a href="https://www.reclameaqui.com.br" target="_blank"> <img class="selora" src="./assets/selo-ra.png"> </a> </div> </div> #faixainferior{ width: 90%; height: 60px; background-color: white; position: absolute; overflow: hidden; left: 50%; transform: translate(-50%); border-radius: 8px; bottom: 0; }

Boa noite pessoal tudo bem. Estou com o seguinte problema, q na verdade dei um jeitinho rs'. não estou conseguindo posicionar 3 divis lado a lado, para resolver isso tive q colocar float left em todas as 3 divs ai resolveu mas sei q essa não é a maneira correta. E na terceira div possuo um conjunto de links q são img , e elas não ficam posicionadas no centro vertical da div. Segue o codigo html: <article class="post"> <div class="category"> <a href="#">Categoria do Post</a> </div> <!--Category--> <div class="agrupapost"> <div class="ptitulo"><h1>Titulo do post</h1></div> <!--Titulo do post--> <div class="infoautor"> Por: <span>Daniele</span> | <span class="cinzamedio">Data: 06/05/15</span> <hr /> </div> <!--Info autor--> <div class="contentpost"> <div class="thumbpost"> <img src="images/imgpostt.jpg" height="281" width="440" alt=""> </div> <!--Tumb Post--> <div class="pfooter"> <div class="pcomment"> <a href="#"><span>12</span> Comentarios</a> </div> <div class="leiamais"> <a href="#">Continue Lendo &gt</a> </div> <div class="psocial"> <a href="#"><img src="images/social/facebook.png" height="20" width="20" alt="Facebook"></a> <a href="#"><img src="images/social/pinterest.png" height="20" width="21" alt="Pinterest"></a> <a href="#"><img src="images/social/twitter.png" height="20" width="20" alt="Twitter"></a> <a href="#"><img src="images/social/rss.png" height="20" width="20" alt="RSS"></a> </div> <!--Leia Mais--> </div> <!--Footer Post--> </div> <!--Content Post--> </div> <!--Agrupa Post--> </article> <!--Article Post--> E aqui o CSS: /*---------------POST BLOG--------------------------*/ .post{width: 620px;float: left;} .agrupapost{width: 100%;border: 1px solid #CFD1D9;margin-bottom: 20px;padding-bottom: 10px;} /* Titulo do Post */ .ptitulo{margin-top: 25px;text-align: center;} /* Informações do Post */ .infoautor{text-align: center;font-size: 12px;} .infoautor hr{width: 500px;margin:auto;margin-top: 5px;} /* Imagem do Post */ .thumbpost{margin-top: 15px;text-align: center;} /* Descrição / Conteudo Post */ .txpost{margin-top: 15px;margin-left: 20px;color: #232323;font: 14px;} /*Footer Post*/ .pfooter{ width: 100%;height: 35px; text-align: center; display: inline-block;line-height: 35px;margin-top: 20px;} /*Comentarios*/ .pcomment{font-size: 12px;float: left;width: 150px;} /* Continue Lendo */ .leiamais{margin-left: 85px;width:150px;font-size: 12px;float: left;} .leiamais a{color: #FF5B00;} .leiamais a:hover{color: #FF5B00; font: 16px;text-shadow:1px 0px 2px gray;} /*Social*/ .psocial{margin-left: 85px;width: 150px;float: left;} .psocial a {} /*Category*/ .category{position:relative;top: 15px;width: 150px;height: 30px;line-height: 30px; text-align: center;background: #FF5B00;margin:auto;} .category a{color: #fff;}

Iae galera, criei uma conta aqui no fórum para ver se alguém pode me ajudar. É o seguinte: http://www.dotazoneapp.com/site/pt/ este site, tem um efeito bem interessante de scroll, que quando desce o scroll o background-image do elemento muda de poisção e desce também numa velocidade maior. E com isso gostaria de saber como fazer um efeito desse ou semelhante, pois não faço ideia de como seja feito. E também como o efeito de transição para cima do botão pode ser feito. Bem, é isso, desculpem-me por ter criado um tópico somente para isso. Obrigado desde já

Estou tendo um problema quanto a inserção de conteúdo dentro de um bloco. Criei um documento chamado index.html e um outro estilo.css. Separei todos por blocos, tentando seguir o padrão do html5. Porém, nos blocos: id="menu-esquerdo" e id="bloco-slider", quando eu os deixo sem conteúdo escrito(qualquer letra ou número), eles se comportam adequadamente. Quando eu insiro qualquer letra ou número, no bloco com id="bloco-slider", ele simplesmente se reposiciona para a parte de baixo do bloco com id="menu-esquerdo". Eu poderia usar position: absolute; no bloco id="bloco-slider" que resolveria o problema, porém, por motivo de conhecimento, gostaria de uma explicação ou uma solução usando position: relative;, para este problema. Obrigado e aguardo ajuda. Segue abaixo o código em HTML5 e CSS. HTML5:(idex.html) ___________________________ <!DOCTYPE html> <html lang="pt-br"> <head> <title>Testando blocos relativos e absolutos</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <div id="pagina"> <header id="cabecalho"> </header> <nav id="menu-topo"> </nav> <nav id="menu-esquerdo"> </nav> <div id="bloco-slider"> </div> <footer id="rodape"> </footer> </div> </body> </html> ___________________________ CSS(estilo.css) ___________________________ #pagina{ width: 1280px; height: 720px; background-color: pink; } #cabecalho{ height: 120px; background-color: blue; } #menu-topo{ height: 100px; background-color: green; } #menu-esquerdo{ position: relative; display: inline-block; height: 450px; width: 279px; background-color: orange; } #bloco-slider{ position: relative; display: inline-block; height: 450px; width: 995px; background-color: purple; } ___________________________