Ir ao conteúdo
  • Cadastre-se
WilliamNascimento

CSS div de acordo com a tela

Posts recomendados

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

 

F5EC9003-BC3D-4226-AE29-C18F15E50630.jpeg

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

print_normal.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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 ?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
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 ?

btnbuscccca.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.. 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
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 !!

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@WilliamNascimento Não sei como é o curso, mas há muita informação no google sobre CSS.

 

Apesar de eu ter feito faculdade, mais aprendi vendo youtube e lendo sites do que lá. Até livros me ajudaram muito.

Basicamente o que você quer fazer é simples,  basta entender como definir as regras CSS e fazer a estrutura correta.

 

Você pode até usar frameworks como bootstrap: button-addons

 

Enfim... boa sorte

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Aprenda_a_Ler_Resistores_e_Capacitores-capa-3d-newsletter.jpg

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!