CSS div de acordo com a tela

WilliamNascimento · 21 de maio de 2020

Criei um menu , porém quando conecto na tv a div fica com os objetos em locais diferenter por causa do tamanho da tela suponho , como resolvo isso ?

<!<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Izanimes</title>
	<link rel="stylesheet" type="text/css" href="menuiz.css">
	<style>
		body {
		margin:0;
		background-image: url(c.jpg);
		background-attachment: fixed;
		background-size: 100%;
		background-repeat:no-repeat;
		background-color: #000;	
		}

		#menu ul {
			background-color: #000000;
		}
		#menu ul li {
		margin:0;
			display: inline;
		}
		#menu ul li a 
		{
			padding: 5px 35px;
			display: inline-block;
			color: white;
			text-decoration: none;
		}
		#menu ul li a:hover
		{
			color: #FF0000;
			background-color: #0000FF;
		}
		#menu img{
			padding-left: 100px;
			padding-right: 50px ;
			vertical-align: middle;
		}

		#menusocial 
		{
			display: inline;
			vertical-align: middle;

		}

		#menusocial li img{
		padding: 10px 15px;	
		}
		#logo{
			display: inline;
			vertical-align: middle;
		}

		#p{
			display: inline;
			vertical-align: middle;
			border: 5px solid blue;
		}
			#pdentro{
			display: inline;
			vertical-align: middle;
			border: 5px solid blue;
		}
		.caixa {
    background-color:black;
    border: 5px solid white;
    margin: 5px;
}
	#itemanime li
	{
		padding: 5px 25px;
		display: inline;
		color: white;
	}	
	#itemanime li:hover
	{
		background-color: #0000FF;
	}
		#itemanime button
	{
		vertical-align: 
	}
	#pesquisar{	
		height : 18px;
	};
	#a {
		display: inline;
	}
</style>
</head>
<body>
<div id = "menu">
	<ul>
	<div id = "logo">
	<li><img src="C:\Users\William\Pictures\testeimagemm.png"></li>
	</div>
	<li><a href="Contato.html">CONTATO</a></li>
	<li> <a id =href="#">ANIMES</a> </li>
	<li> <a href="#">PEDIDOS</a> </li>
	<li> <a href="#">ADMINISTRACAO</a> </li>
	<li><a href="#"> CALENDARIO</a></li>
	<div id = "menusocial">	
		<li><a href="#"><img src="fb.png"></a></li>
		<li><a href="#"><img src="tt.png"></a></li>
		<li><a href="#"><img src="it.png"></a></li>
	</ul>
	</div>
	</div>

	<div class="caixa"Eu sou uma caixa!>
	<div id = "itemanime"> 
		<ul>
			<a href="#"><li>HAREM</li></a>
			<a href="#"><li>ROMANCE</li></a>
			<a href="#"><li>ECHHI</li></a>
			<a href="#"><li>MECHA</li></a>
			<a href="#"><li>SCIF-LIFE</li></a>
			<a href="#"><li>COMEDIA</li></a>
			<a href="#"><li>SHOUJO</li></a>
			<a href="#"><li>SHOWNEM</li></a>
			<a href="#"><li>ESCOLAR</li></a>
			<a href="#"><li>MAGIA</li></a>
		</ul>
	</div>
	</div>

</body>
</html>

Esta meio baguncado porque estou aprendendo agora e tem algumas coisas a mais porque esqueci de tirar pois estava testando , mas queria saber como faco para menu ficar do mesmo tamanho igual o browser em todas as telas

os icones alteraram suas posições e nao estão como no browser ,tirei foto da tv

ja o outro print e o normal pelo pc ( e como deveria ficar em todas as telas )

DiF · 21 de maio de 2020

@WilliamNascimento Olá,

Você resolve isso com media queries.

Vai criar regras, onde elas respeitam a resolução determinada.

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Exemplo:

@media only screen and (max-width: 300px) {
  #box {
    width: 100px
    height: 50px  
    background-color: red;
  }
}

@media only screen and (max-width: 960px) {
  #box {
    width: 400px
    height: 200px  
    background-color: blue;
  }
}

Repare que existem regras "iguais" porém com informações diferentes para resoluções distintas.

No caso o elemento #box em celulares ficaria pequeno e de cor vermelha, mas quando abrir a página em um notebook, pc ou tv, o elemento vai ficar maior e de cor azul.

Isso se chama responsividade.

WilliamNascimento · 21 de maio de 2020

11 horas atrás, DiF disse:
@WilliamNascimento Olá,

Você resolve isso com media queries.

Vai criar regras, onde elas respeitam a resolução determinada.
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}
Exemplo:
@media only screen and (max-width: 300px) {
  #box {
    width: 100px
    height: 50px  
    background-color: red;
  }
}

@media only screen and (max-width: 960px) {
  #box {
    width: 400px
    height: 200px  
    background-color: blue;
  }
}
Repare que existem regras "iguais" porém com informações diferentes para resoluções distintas.

No caso o elemento #box em celulares ficaria pequeno e de cor vermelha, mas quando abrir a página em um notebook, pc ou tv, o elemento vai ficar maior e de cor azul.

Isso se chama responsividade.

Meio que entendi e tenho apenas esta forma ?

DiF · 21 de maio de 2020

@WilliamNascimento Sim, se quiser adaptar de forma certa para "todas" as resoluções.

Esse é o método mais indicado. Se usar proporções com % pode não sair do jeito que você espera.

Então é melhor garantir a mesma posição dos elemento usando o media queries.

Experimente reduzir o tamanho da janela aqui no fórum.. o resultado é a responsividade.

Ele se adapta a janela.

WilliamNascimento · 21 de maio de 2020

8 minutos atrás, DiF disse:

@WilliamNascimento Sim, se quiser adaptar de forma certa para "todas" as resoluções.

Esse é o método mais indicado. Se usar proporções com % pode não sair do jeito que você espera.

Então é melhor garantir a mesma posição dos elemento usando o media queries.

Experimente reduzir o tamanho da janela aqui no fórum.. o resultado é a responsividade.

Ele se adapta a janela.

Dif , me ajuda aqui

<div class="caixa"Eu sou uma caixa!>
	<div id = "itemanime"> 
		<ul>
			<a href="#"><li>HAREM</li></a>
			<a href="#"><li>ROMANCE</li></a>
			<a href="#"><li>ECHHI</li></a>
			<a href="#"><li>MECHA</li></a>
			<a href="#"><li>SCIF-LIFE</li></a>
			<a href="#"><li>COMEDIA</li></a>
			<a href="#"><li>SHOUJO</li></a>
			<a href="#"><li>SHOWNEM</li></a>
			<a href="#"><li>ESCOLAR</li></a>
			<a href="#"><li>MAGIA</li></a>
		<div id = "divbusca"> 
		<input id = "inputpes" type="text" name="pesquisar">
		<button id="btnBusca">Buscar</button>
		</div>
	</div>
		</ul>
	</div>

#btnBusca{
  border:none;
  height:32px;
  border-radius:0 7px 7px 0;
  width:70px;
  font-weight:bold;
  background:#5F9EA0;
}
	#inputpes {
  background-color:white;
  padding-left:5px; 
  font-size:18px;
  border:solid 2px #5F9EA0;
  border-radius:10px;
  height:32px;
  width:191px;
}
	#divbusca
	{
		padding: 5px;
		display: inline;
		color: white;
	}

Peguei essa pesquisa pronta mas nao estou conseguindo por do jeito que eu quero , modifiquei algumas coisas , porém nao consigo deixar o button dentro do input . o que devo fazer ?

DiF · 21 de maio de 2020

@WilliamNascimento Você não pode por um button dentro do input.

No caso, você vai ter que juntar o final do input, com o inicio do button... retirar aquela borda a aredondada da parte direita do input..

Mas se você quiser o "efeito" de que o botão esteja dentro do input, você precisa criar o elemento div com o width maior, fundo branco e deixar o botão e input lado a lado.

Não recomendo ficar pegando esses códigos prontos.

Melhor estudar e entender como funciona..

WilliamNascimento · 22 de maio de 2020

Em 21/05/2020 às 17:04, DiF disse:

@WilliamNascimento Você não pode por um button dentro do input.

No caso, você vai ter que juntar o final do input, com o inicio do button... retirar aquela borda a aredondada da parte direita do input..

Mas se você quiser o "efeito" de que o botão esteja dentro do input, você precisa criar o elemento div com o width maior, fundo branco e deixar o botão e input lado a lado.

Não recomendo ficar pegando esses códigos prontos.

Melhor estudar e entender como funciona..

Obrigado dif , comprei um curso na udemy e nao ficar estudando partes cortadas como estava pelo youtube , agora tem todo um passo a passo do que aprender obrigado !!