Publicado em 1 de set.

tentando criar site responsivel

#javascript #css #desenvolvimento-frontend #html #responsivo

Site:http://platformwar.epizy.com Estou tentando fazer um site responsivo, mas estou tendo problemas com o (height:) o height: da galeira nao quer funcionar com a " % " não funciona, ja procurei de tudo na net e nao achei resposta. Eu peguei o código da galeira na internet, e comecei a modificar... só que tem esse código: Ta no Hmtl:

 <script> $('#games').coinslider({ width: "100%", height: 500, navigation: false, delay: 5000, navigation: true, effect: 'rain' } ). </script> Aqui to tentando colocar 50% mais não funciona... eu queria que ele diminui-se confirme diminui a tela. (não sei nada de javascript). Se precisarem de algum Código eu mando CSS: #games {position: relative. margin-top: 70px. z-index: 0. margin-left: auto. margin-right: auto. }.coin-slider {float: none. top:50%. left:50%. text-align: center. }.coin-slider { overflow: hidden. zoom: 0. position: static. }.coin-slider a{ text-decoration: none. outline: none. border: none. }.cs-buttons {font-size: 0%. padding: 1%. float: left. position: relative. }.cs-buttons a {margin-left:5px. background:url(../cores-roleta/contadorcompleto.png). height: 29px. width: 29px. float: left. text-indent: -1000px. }.cs-active { background:url(../cores-roleta/contador10.png). height: 29px. width: 29px. float: left. }.cs-title { width: 100%. padding: 2%. background-color:#000000. color: #FFFFFF. }.cs-prev,.cs-next { background-color: Transparent. color: #000. padding: 0px 10px. }

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Omar~· 1 de set.

Não precisa e nem é o ideal que manipule isso com javascript piorou ainda usando jQuery...

<html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 </head>
 <style>
 * {
 box-sizing: border-box
 }
 body {
 margin: 0;
 padding: 0
 }
 .imagem-ajustavel {
 min-height: 200px; /* A imagem nunca terá menos de 200px */
 max-height: 500px; /* A imagem nunca terá mais de 500px, sendo ela maior a isso ou igual */
 width: 100% /* A imagem terá total extensão do seu elemento pai */
 }
 </style>
 <body>
 <img src="sua_imagem.formato" class="imagem-ajustavel"/>
 </body>
</html>

guirufino· 1 de set.

21 minutos atrás, Omar~ disse:

Não precisa e nem é o ideal que manipule isso com javascript piorou ainda usando jQuery...

<html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 </head>
 <style>
 * {
 box-sizing: border-box
 }
 body {
 margin: 0;
 padding: 0
 }
 .imagem-ajustavel {
 min-height: 200px; /* A imagem nunca terá menos de 200px */
 max-height: 500px; /* A imagem nunca terá mais de 500px, sendo ela maior a isso ou igual */
 width: 100% /* A imagem terá total extensão do seu elemento pai */
 }
 </style>
 <body>
 <img src="sua_imagem.formato" class="imagem-ajustavel"/>
 </body>
</html>

  

	Tentei coloca o codigo e nao funciono.

	O codigo e meio complicado entao vo explica tudo!

	<script>

	        $('#games').coinslider({ width : "100%" , height: 500 , navigation : false , delay : 5000 , navigation: true , effect: 'rain' } ) ;

	   </script>

	esse código aqui e pra chama a galeria, se eu muda o "height:50%" buga tudo e não aparece imagem.

	Então eu deixei "height:500", ai eu queria um solução pra contorna isso e pode criar a galeira responsiva.

	 

	E o codigo CSS eu consigo manipula um pouco a galeria mais tbm nao consigo muda o "height".

	Se quiser o codigo do js se quiserem da uma olhada.

	Agradeço!

	 

	A nao sei se muda alguma coisa:

	<!--Codigo da Galeria de Imagens ate /script-->

	    <div id="games">

	<!--Link para Imaguem-->

	    <a href="">

	<!--Aqui colocar a imaguem 900x500-->

	<img src="img/Imaguemsparadownload/nogame.jpg" width="900" height="500" no-repat/>

	<!--Colocar o Texto!-->

	    <span>

	      <b><font face="Arial">NO GAME NO LIFE</font></b><br />

	          <i>Sem Jogo Sem Vida!!!</i>

	    </span>

	    </a>

	 

	Se eu conseguir colocar a imagem responsiva a galeria n estaria responsiva acho...

	 

	E assim q eu coloco a imagem na galeria não sei se ajuda..

ViniciusRamoa· 7 de set.

Olá amigo, sou novo no desenvolvimento web, então não sei lhe dar uma resposta exata para seu problema, mas, já tentou usar o bootstrap 4? Eu fiz uns testes nele e ele deixar seu site responsivo "automaticamente", acho que você pode conseguir integrar essa característica do bootstrap no seu site, fazendo assim algo que demoraria horas em alguns minutos. É bem fácil de criar páginas front-end e com ele, seus códigos já se adaptam para qualquer monitor sem escrever várias linhas de comando. Sei que é importante passar por alguns problemas e aprender a resolver para agregar conhecimento e experiência, mas tente usar o bootstrap para agilizar seu serviço, pode ser uma grande ajuda.