Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Worn

Alinhamento

Por , em Desenvolvimento frontend

Recommended Posts

Worn    1

Worn
Postado

Olá desenvolvendo site de filmes e a muito tempo que não programo as dificuldades com o css3 e html5 são poucas porém muitas dúvidas surgem

 

umas delas é o alinhamento em qualquer resolução de tela por exemplo estou programando seguindo a minha tela

 

http://probarmanshowbar.com/projeto/

 

porém quando testo em outro computador já fica desalinhado a parte do menu veja

 

 

 

 

ezimba11691131997304.jpg

 

 

 

veja agora como fica na minha tela

 

 

 

ezimba11691193807904.png

 

 

 

 

viu a diferencia? a barra do menu ficou em left posicionada, já na minha tela ficou normal ó código é esse

 

css - completo

 

 

 

 
*{
margin: 0px;
padding: 0px;
}
body {
background-image:url(../imagens/fundo.jpg);
background-repeat: no-repeat;
background-position: center;
width: 800px;
height: 870px;
background-color: #99B0A6;
}
header{
width: 100%;
height: 144px;
margin-left: 400px;
}
header #topo{
width: 800px;
height: 134px;
margin: 0 auto;
}
#logo{
width: 456px;
margin-left: -40px;
height:133px;
float: left;
margin-top: 0px;
}
#topo-right{
width:450px;
height:13px;
float: right;
}
#topo-right p{
width:450px;
margin-top: -123px;
margin-right: 25px;
margin-bottom: 10px;
font-family: tahoma;
color: #FFF;
font-size: 13px;
}
#topo-right p a{
color: #330000;
}
#topo-right #busca-organica{
width: 180px;
height: 28px;
border: none;
background: #fff;
float: right;
margin-right: 194px;
margin-top: 60px;
box-shadow: inset 0px 0px 2px 1px #000;
font-family: tahoma;
font-size: 15px;
color: #9e9e9e;
text-align: right;
padding: 0px 09px 0px 09px;
}
/* configuração do topo buscar e logo logo acima*/
/* configuração do menu logo abaixo*/
#box{
background-color: #FFF;
width: 757px;
height:645px;
margin-top: 50px;
float: left;
}
#menu{
width: 757px;
height: 53px;
float: left;
background-image:url(../imagens/barra.png);
margin-left: -150px;
margin-top: -13px;
}
#menu nav{
widht: 750px;
height: 53px;
margin: 0 auto;
margin-left: 50px;
}
nav ul#menu-screen{
list-style: none;
margin: 0;
padding: 0;
}
nav ul#menu-screen li{
width: auto;
height: auto;
display: inline;
padding: 15px 15px 15px 10px;
text-align: center;
float: left;
margin-right: 5px;
font-family: tahoma;
font-size: 15px;
color: #FFF;
}
nav ul#menu-screen li.submenu{
width: 90px;
}
nav ul#menu-screen li:hover{
color: #000;
cursor: pointer;
}
nav ul#menu-screen li ul{
display: none;
}
nav ul#menu-screen li:hover ul{
display: block;
margin: 0;
padding: 13px;
widht: 80px;
height:auto;
margin-left: -25px;
}
nav ul#menu-screen li:hover ul li{
background-image:url(../imagens/barra_complet.png);
width: 80px;
box-shadow: 0px 0px 1px 1px #ddd;
padding: 7px 15px 7px 7px;
}


 

 

 

 

 

 

Css- somente a parte do menu pra quem não entendeu acima

 

 

 



#menu{


    width: 757px;


    height: 53px;


    float: left;


    background-image:url(../imagens/barra.png);


    margin-left: -150px;    


    margin-top: -13px;


    


    


}


#menu nav{


    widht: 750px;


    height: 53px;


    margin: 0 auto;


    margin-left: 50px;


    


}


nav ul#menu-screen{


    list-style: none;


    margin: 0;


    padding: 0;


   


}


nav ul#menu-screen li{


    width: auto;


    height: auto;


    display: inline;


    padding: 15px 15px 15px 10px;


    text-align: center;


    float: left;


    margin-right: 5px;


    font-family: tahoma;


    font-size: 15px;


    color: #FFF;


}


nav ul#menu-screen li.submenu{


    


    width: 90px;


    


}


nav ul#menu-screen li:hover{


 


    color: #000;


    cursor: pointer;


    


}


nav ul#menu-screen li ul{


    display: none;


    


}


nav ul#menu-screen li:hover ul{


    display: block;


    margin: 0;


    padding: 13px;


    widht: 80px;


    height:auto;


   margin-left: -25px; 


 


   


 


}


nav ul#menu-screen li:hover ul li{


        background-image:url(../imagens/barra_complet.png);


width: 80px;


      box-shadow: 0px 0px 1px 1px #ddd;


      padding: 7px 15px 7px 7px;


 


}





 


 


}


 


 


 






 


 


código do meu header


 


 








 




<body>


        <header>


            <div id="topo">


                


                <div id="logo">


                    


                    <img src="imagens/logo.png" alt="Free Movies" />


                   


                    


                </div>


                <div id="topo-right">


                    


                    <p> Olá, Seja bem-vindo <a href="login.php">Faça login</a> ou


                        <a href="cadastrar.php">Cadastra-se</a>.</p>


                    <form action="busca.php" method="GET">


         <input type="text" name="busca-organica" id="busca-organica" required />


                        


                        


                    </form>


                    


                    


                </div>


 


            </div>


              


            


     


              <div id="menu">


            


            <nav>


                <ul id="menu-screen">


                    <li> Home</li>


                    <li> Filmes</li>


                    <li class="submenu"> Categorias


                    <ul>


                        <li>Ação</li>


                        <li>Terror</li>


                        <li>Comédia</li>


                         <li>Suspense</li>


                        <li>Animação</li>


                        <li>Aventura</li>


                        <li>Drama</li>


                        <li>Guerra</li>


                        <li>Crime</li>


                         <li>Documentário</li>


                        


                    </ul>


                    </li>


                    <li> Destaques</li>


                    <li> Equipe</li>


                    <li> Contato</li>


                        


                        


                    </li>


                    


                </ul>


                


            </nav>


            


            


        </div>


        


        </header>


 


 






 



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Daniela Ghidini
			  

	
		
	
			 0
	
		
	

		

		

			


	
		Daniela Ghidini
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Olá!


Worn, está diferente em outras resoluções porque você definiu larguras e alturas fixas. Tenta ai o seguinte:


 


No body troca o width por 100%:


 


body {


background: url(../imagens/fundo.jpg) no-repeat center;


width: 100%


background-color: #99B0A6;


 


}


 


Na tag header vc pode tirar tudo


 


no Topo:


 




header #topo {


width: 800px;


height: 134px;


margin: auto; ----------------> isso vai manter a div no centro


margin-top: 10px;


}




 


No logo só:




#logo {


float: left;


margin-left: 10px;


}




 


A div da direita:


 


#topo-right {


float: right;}


 




#topo-right p {


font-family: tahoma;


color: #FFF;


font-size: 13px;


padding-right: 20px;


}


 




#topo-right #busca-organica {


width: 180px;


height: 28px;


border: none;


background: #fff;


margin-top: 60px;


box-shadow: inset 0px 0px 2px 1px #000;


font-family: tahoma;


font-size: 15px;


color: #9e9e9e;


text-align: right;


}






 


Menu:


 


#menu {


width: 757px;


height: 53px;


background-image: url(../imagens/barra.png);


margin: 10px auto;


margin-top: 15px;


}


 


Na tag #menu Nav você pode tirar tudo


 


E pronto, acho que é isso... ah evita colocar margens negativas ;)


 



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Desenvolvimento frontend
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

				
Ao usar o fórum, você concorda com nossos Termos e condições.

			

			

				  Aceito