Ir para conteúdo

POWERED BY:

Arquivado

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

nanquim

Formatar item de lista separadamente

Por , em Desenvolvimento frontend

Recommended Posts

nanquim    0

nanquim
Postado

Olá, boa noite. Eu provavelmente estou fazendo uma besteira risível, mas...

 

Meu objetivo é colocar cada item de menu em uma posição diferente, mais ou menos assim:

 

ITEM 1 ITEM3

 

ITEM 2 ITEM 4

 

Já tentei como no código abaixo e com "id".

 

Também pensei em criar 2 menus, cada um em uma posição... Enfim.

 

Não sei nada, só fiz um cursinho no youtube e se alguém puder me ajudar, obrigada.

            <nav id="menu">
                <ul>
                    <li class="home">Home</li>
                    <li class="item2">Item2</li>
                    <li class="item3">Item3</li>
                    <li class="contato">Contato</li>
                    <li class="sobre">Sobre</li>
                </ul>
            </nav>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

leonardo de andrade baessa    16

leonardo de andrade baessa
Postado 




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html xmlns="http://www.w3.org/1999/xhtml">



<head>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



<title>Menu</title>



<style type="text/css">



#menu { margin: 0 auto;}



#menu ul li { text-decoration: none; list-style-type: none;}



.home { margin: 0 auto;  }



.item2 { padding: 20px 40px;}



.item3 {



	margin-left: 20px;



	position: absolute;



	left: 134px;



	top: 29px;



}



.contato { 



	position: absolute;



	left: 199px;



	top: 65px;



}



.sobre {



	margin-left: 20px;



	position: absolute;



	left: 242px;



	top: 30px;



}


 



</style>


 



</head>


 



<body>


 



   <nav id="menu">



                <ul>



                    <li class="home">Home</li>



                    <li class="item2">Item2</li>



                    <li class="item3">Item3</li>



                    <li class="contato">Contato</li>



                    <li class="sobre">Sobre</li>



                </ul>



</nav>


 



</body>



</html>


 







			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
am designer
			  

	
		
	
			 7
	
		
	

		

		

			


	
		am designer
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Ola ! 

Você pode usar o seletor de filhos :nth-child(). Da uma pesquisada, com ele você consegue manipular os filhos da tag ul. Exemplo:

#menu ul li:nth-child(1){ ... }


#menu ul li:nth-child(2){ ... }


#menu ul li:nth-child(3){ ... }


#menu ul li:nth-child(4){ ... }

Sacou ? Dessa forma você consegue manipular um por um do jeito que quiser. 



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Desenvolvimento frontend
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 

    Conteúdo Similar
    

    
	
      
	
		
    • 
			
      
				


	
		FabianoSouza
	

			
      
			
      
				
      Criar LI no topo da UL
      
				Por 
FabianoSouza
      
				
					
      
						Galera, por padrão, cada LI que se cria (via jscript), vai parar na parte inferior da UL, né?

      


	Há uma maneira de fazer a LI criada pela minha function ir para o topo da lista dentro da UL?

      


	 

      


	 

      

					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		FabianoSouza
	

			
      
			
      
				
      LI em coluna
      
				Por 
FabianoSouza
      
				
					
      
						Tenho essa lista

      


	 

      


<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>


	
      
	Preciso que ele fique assim:

      


	1    2

      


	3    4

      


	5

      


	 

      


	Como faço um CSS para isso?

      


	 

      


	Obrigado.

      

					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		Bruno Goedert Dalmolin
	

			
      
			
      
				
      Como Movimentar um Menu em HTML5 e CSS
      
				Por 
Bruno Goedert Dalmolin
      
				
					
      
						Fala devs Beleza? Estou com uma duvida em como eu movimento meu menu para o canto, pois ele fica travado no centro. Os dados são os seguintes: 

      


	do HTML:

      


	 

      


	<header>
      
	    <ul id="Menu">
      
	        <li><a href="SmartAce-Home.html">Home</a></li>
      
	        <li><a href="">Sobre</a></li>
      
	        <li><a href="">Contato</a></li>
      
	    </ul>
      
	</header>

      


	 

      


	do CSS:

      


	 

      


	@charset "UTF-8";

      


	body {
      
	    margin: 0;
      
	    padding: 0;
      
	    display: flex;
      
	    justify-content: center;
      
	    align-items: center;
      
	    height: 100vh;
      
	    background: #112c38;
      
	}
      
	ul#Menu {
      
	    
      
	    text-align: center;
      
	    margin: 0;
      
	    padding: 0;
      
	    display: flex;
      
	    top: -10;
      
	}
      
	ul#Menu li{
      
	    list-style: none;
      
	    margin: 0 20px;
      
	    transition: 0.5s;
      
	}
      
	ul#Menu li a{

      


	    position: relative;
      
	    text-decoration: none;
      
	    padding: 5px;
      
	    font-size: 18px;    
      
	    font-family: sans-serif;
      
	    color: #fff;
      
	    text-transform: uppercase;
      
	    transition: 0.5s;
      
	}
      
	ul#Menu:hover li a {
      
	    transform: scale(1.4);
      
	    opacity: .2;
      
	    filter: blur(5px);

      


	}
      
	ul#Menu li a:hover {
      
	    transform: scale(2);
      
	    opacity: 1;
      
	    filter: blur(0);

      


	}
      
	ul#Menu li a:before {
      
	    content: '';
      
	    position: absolute;
      
	    top: 0;
      
	    left: 0;
      
	    width: 100%;
      
	    height: 100%;
      
	    background: #ff497c;
      
	    transition: transform 0.5s;
      
	    transform-origin: right;
      
	    transform: scaleX(0);
      
	    z-index: -1;
      
	}
      
	ul#Menu li a:hover:before {
      
	    transition: transform 0.5s;
      
	    transform-origin: left;
      
	    transform: scaleX(1);
      
	}

      

					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		matheusdemelovieira
	

			
      
			
      
				
      Me ajudem Por favor HTML CSS LI?
      
				Por 
matheusdemelovieira
      
				
					
      
						Oi pessoal bom dia, minha duvida é:
      como eu deixo a li "pedidos de oração"
      em linha reta?
      me ajudem estou travado nisso a horas.
      apenas quero deixar o "pedidos de oração como se fosse numa linha só.

      

      

      

					
      
				
			
      
		
      • 
	
		
    • 
			
      
				


	
		paikoala
	

			
      
			
      
				
      menu com LI e Onclick abrindo em outra aba
      
				Por 
paikoala
      
				
					
      
						Bom dia galera, tenho no meu site um menu feito com <li> e precisava que um deles abrisse em uma nova aba

      


<li onclick="parent.location='<?php echo base_url(''); ?>''">SITE</li>


	procurei um monte na internet pra tentar achar e vi o pessoal falando pra colocar o targed _blank mas tentei de tudo quanto é forma e não consigo fazer funcionar, ou ele gera um erro no codigo e zoa o menu ou ele continua abrindo a devida pagina na mesma aba.

      

					
      
				
			
      
		
      • 
	
	
    

    • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

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

			

			

				  Aceito