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 ILR master
Fala pessoal, tudo bem?
Eu tenho o seguinte código:
<script>
$(function(){
var jElement = $('.fixar_banner');
$(window).scroll(function(){
if ( $(this).scrollTop() > 120 ){
jElement.css({
'position':'fixed',
'top':'10px'
});
}else{
jElement.css({
'position':'relative',
'top':'auto'
});
}
});
});
</script>
Porém, eu quero que a div fique fixa até que outro elemento apareça na tela, tipo o rodapé da página por exemplo. É mais ou menos como a página de notícia do uol.
https://noticias.uol.com.br/internacional/ultimas-noticias/2025/01/19/sonho-americano-brasileiros-moram-em-carro-e-buscam-comida-no-lixo-nos-eua.htm
Espero ter sido claro.
Obrigado :)
-
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
-