Arquivado
Este tópico foi arquivado e está fechado para novas respostas.
Como centralizar uma IMG na horizontal no interior de DIV contêiner?
Recommended Posts
-
Conteúdo Similar
-
Por Alessandro Bodão
Fala galerinha,
Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
-
Por Giovanird
Olá a todos!
tenho varias divs com o mesmo ID e nome de classe. Preciso que a cor da div seja conforme uma escala de valores.
Estou tentando pegar o valor pelo nome da classe, pois as divs possuem o mesmo id e não tive sucesso. Segue script:
<div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="29">29</div> <div class="planos" id="1" value="55">55</div> <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="63">63</div> <div class="planos" id="1" value="55">55</div> <script type="text/javascript"> var valueElement = document.getElementsByClassName('.planos').getAttribute('value'); console.log(valueElement); if (valueElement >= "70") { document.getElementsByClassName('.planos').style.backgroundColor == '#4caf50'; } else if (valueElement >= "50" && valueElement <= "69") { document.getElementsByClassName('.planos').style.backgroundColor == '#ffbc00'; } else { document.getElementsByClassName('.planos').style.backgroundColor == '#f44336'; } </script>
-
Por Sapinn
Opa galera. Fiz um preview de imagens através de um input e ele está funcionado bem agora como eu faço para fazer uma mesmo preview em inputs diferentes. Quando coloco mais de um input e seleciona arquivos ele sempre mostra no primeiro input.
Meu codigo:
CSS:
*{ padding: 0; margin: 0; box-sizing: border-box; font-family: "Rubik",sans-serif; } body{ background-color: #f5f8ff; } .container{ background-color: #ffffff; width: 60%; min-width: 450px; position: relative; margin: 50px auto; padding: 50px 20px; border-radius: 7px; box-shadow: 0 20px 35px rgba(0,0,0,0.05); } input[type="file"]{ display: none; } label{ display: block; position: relative; background-color: #025bee; color: #ffffff; font-size: 18px; text-align: center; width: 300px; padding: 18px 0; margin: auto; border-radius: 5px; cursor: pointer; } .container p{ text-align: center; margin: 20px 0 30px 0; } #images{ width: 80%; position: relative; margin: auto; display: flex; justify-content: space-evenly; gap: 20px; flex-wrap: wrap; } figure{ width: 45%; } img{ width: 100%; } figcaption{ text-align: center; font-size: 2.4vmin; margin-top: 0.5vmin; }
HTML:
<div class="container"> <input type="file" id="file-input" accept=".png, .jpeg, .jpg, .pdf" onchange="preview(this)" multiple> <label for="file-input"> <i class="fas fa-upload"></i> Escolha seus arquivos </label> <p id="num-of-files">Nenhum arquivo escolhido</p> <div id="images"></div> </div> <div class="container"> <input type="file" id="file-input" title="2" accept=".png, .jpeg, .jpg, .pdf" onchange="preview(this)" multiple> <label for="file-input"> <i class="fas fa-upload"></i> Escolha seus arquivos </label> <p id="num-of-files">Nenhum arquivo escolhido</p> <div id="images"></div> </div>
JAVASCRIPT:
let fileInput = document.getElementById("file-input"); let inputFile = document.querySelectorAll("#file-input"); let imageContainer = document.getElementById("images"); let numOfFiles = document.getElementById("num-of-files"); function preview(input){ imageContainer.innerHTML = ""; numOfFiles.textContent = `${fileInput.files.length} Arquivos selecionados`; for(i of fileInput.files){ let reader = new FileReader(); let figure = document.createElement("figure"); let figCap = document.createElement("figcaption"); figCap.innerText = i.name; figure.appendChild(figCap); reader.onload=()=>{ let img = document.createElement("img"); if(figCap.innerText.split('.').pop() == 'pdf'){ img.setAttribute("src","pdf.png"); }else{ img.setAttribute("src",reader.result); } figure.insertBefore(img,figCap); } imageContainer.appendChild(figure); reader.readAsDataURL(i); } }
-
Por GOD
Quero um código div ou qualquer outra forma, para atingi esse resultado do link
https://drive.google.com/file/d/0B8Ssi9zuKdQWMExWeVpGUXN0MlRsUzdmdGRuTFl2eU1yejB3/viewocal
Para ficar nesse local.
https://drive.google.com/file/d/0B8Ssi9zuKdQWeGZSSnVBaFBxM1FUN1hEeWdrRzhTNWI0Q01Z/view
Meu objetivo é que em cada quadro da div, fique uma noticia de um site especifico, que pretendo colocar através de plugin rss.
Enfim espero uma ajuda sobre como posso fazer isso
-
Por clovis.sardinha
Pessoal, não tenho certeza se coloco a dúvida aqui ou no html. Envolve os dois.
Eu tenho um site muito antigo, php 5.2, e resolvi mudar a página principal colocando um efeito parallax.
No servidor local o site roda normalmente, mas no servidor da localweb as imagens do parallax não aparecem.
a página mostrada é esta:
<div class="container-fluid"> <!-- começo do parallax --> <div class="caixa1"> <div class="conteudo-titulo"> <!-- <span class="titulo">TECNOCLEAN - SEGURANÇA E EFICIÊNCIA</span> --> </div> </div> <div class="conteudo"> <h3>A EMPRESA</h3> <p style="width: 80%; margin: auto; text-align: justify;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida dolor sed mattis mollis. Morbi sodales euismod rhoncus. Suspendisse potenti. Integer hendrerit vitae lectus at feugiat. Quisque libero neque, imperdiet a est congue, elementum ultrices diam. Sed ut felis scelerisque, volutpat justo ut, congue quam. Ut non vestibulum erat, vel semper dolor. Nulla facilisi. Sed convallis at lacus quis venenatis..<br> </p> </div> <div class="caixa2"> <div class="conteudo-titulo" > <!-- <span class="titulo">NOSSO DIFERENCIAL</span> --> </div> </div> <div > <div> <ul class="list-group list-group-flush text-center font-weight-bold"> <li class="list-group-item"><h3>Tradição</h3> 26 anos de experiência</li> <li class="list-group-item"><h3>Confiabilidade</h3> mais de mil clientes</li> <li class="list-group-item"><h3>Segurança</h3> técnica e equipamentos</li> <li class="list-group-item"><h3>Garantia</h3> produtos de qualidade</li> <li class="list-group-item"><h3>Rapidez</h3> equipe especializada</li> </ul> </div> </div> <div class="caixa3"> <div class="conteudo-titulo"> <!-- <span class="titulo">CLIENTES</span> --> </div> </div> <div class="caixa4"> <div class="conteudo-titulo"> <!-- <span class="titulo">EQUIPAMENTOS</span> --> </div> </div> </div> </div> </div> O Css é este:
/* Efeito Parallax -------------------------------*/ .caixa1, .caixa2, .caixa3, .caixa4 { position: relative; height: 100%; opacity: 0.9; background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; } .caixa1 { background-image:url(../imagens/principal.png); } .caixa2 { background-image: url(../imagens/insetos.png); } .caixa3 { background-image: url(../imagens/logos/clientes.png); } .caixa4 { background-image: url(../imagens/equipamentos.png); } .conteudo-titulo { position: absolute; left: 0; top: 45%; width: 100%; text-align: center; } .conteudo-titulo span.titulo { color: #fff; background-color: #111; padding: 18px; font-size: 25px; letter-spacing: 5px; text-transform: uppercase; }
Coloquei o arquivo com a estrutura do site e o erro que aparece na url. (um css que não deveria aparecer e dá página não encontrada)
Coisa interessante: tanto faz colocar ../imagens/foto.png ou imagens/foto.png e funciona no local e não no servidor.
Se alguém tiver alguma dica para eu resolver ou testar este erro, agradeço.
-