Ir para conteúdo

POWERED BY:

Arquivado

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

Micilini Roll

[CSS] colocaçao de divs!

Por , em Desenvolvimento frontend

Recommended Posts

Micilini Roll    49

Micilini Roll
Postado

pessoal um cliente meu me mandou um style meio complicado de se montar observem,ele desejou isso para o site dele

 

xxxda.png

 

ate ai tudo bem,sei fazer a div colocar o icone e um texto a unica coisa complicado ao meu ver e que nao sei fazer é esta parte aqui

 

aaaaaayap.png

 

isso é possivel de se fazer no css?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Micilini Roll    49

Micilini Roll
Postado

nao nao nao é um menu de abas! pareçe que é mais na verdade nao é... eu vi o link que voce me passou o que eu quero fazer é parecido com aquelas abas que estao apareçendo em cima mais no caso a duvida maior é reproduzir este efeito:

 

aaaaaayap.png



É vlw por ter me mandado aquele website,era isso mesmo,pesquizei na net e fiz o mesmo resultado exatamente como o cliente esperava! desta forma:

 

abasq.png

 

deixo aqui com voces o comando completo pra obter este efeito:

 

<!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>Untitled Document</title>
</head>

<body>
<style type="text/css">
/* Menu em Abas CSSTabs
--------------------------- */
#csstabs {
height: 280px; / * altura total da área * /
margin:0 auto;
position:relative;
width: 180px;
}
#csstabs h3 { /* títulos das abas */
color: #000;
cursor: pointer;
display: block;
font-size: 19px;
font-weight: bold;
height: 25px;
margin: 0;
padding: 5px 5px 5px 5px;
text-align: left;
border-top:2px solid #000;
border-left:2px solid #000;
border-right:2px solid #000;
}
.tabcontent { /* conteúdo das abas */
display: block;
height: auto;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
width:100%;
padding:15px 0 5px 0px;
border:2px solid #000;
}
#csstabs:hover h3, #tabs:focus h3, #tabs:active h3 {
z-index: 0;
background:none;
}
#csstabs:hover .tabcontent, #tabs:focus .tabcontent, #tabs:active .tabcontent {
opacity: 0;
z-index: 0;
}

#tab1 .tabcontent {
background-color: #ddd;
position:absolute;
left:0;
top:35px;
height: 200px; /* altura total do conteúdo da aba 1 */
z-index: 2;
}
#tab1 h3 {
left: 0;
position: absolute;
top: 0;
margin-left:20px;
z-index: 3;
background-color: #ddd; 
}

#tab1:hover h3, #tab1:focus h3, #tab1:active h3 {
background-color: #ddd;
color: #565A63;
z-index: 4;
}
#tab1:hover .tabcontent, #tab1:focus .tabcontent, #tab1:active .tabcontent {
opacity: 1;
z-index: 3;
}

#tab2 .tabcontent {
background-color: #E6EAF3;
height: 200px; /* altura total do conteúdo da aba 2 */
opacity: 0;
top:35px;
z-index: 1;
position:absolute;
}
#tab2 h3 {
left: 120px;
position: absolute;
top: 0;
}

#tab2:hover h3, #tab2:focus h3, #tab2:active h3 {
background-color: #E6EAF3;
color: #565A63;
z-index: 4;
}
#tab2:hover .tabcontent, #tab2:focus .tabcontent, #tab2:active .tabcontent {
opacity: 1;
z-index: 3;
}
</style>
<div id="csstabs">
<div id="tab1">
<h3>Icone</h3>
<div class="tabcontent">
TEXTO
</div>
</div>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Xavier    189

Marcos Xavier
Postado 




<style>



.icone {



    list-style: none;



    margin: 5px 0;



    padding: 0;


 



}


 



.icone li {



	border-top: #111 solid 1px;



	border-right: #111 solid 1px;



	border-left: #111 solid 1px;



    background: #fff;



	height:30px;



	width:100px;



    position:relative;



	z-index:10;



	top: 6px;


 



}



.conteudo{



    border: #111 solid 1px;



    clear: left;



    padding: 1em;



}


 



</style>



<ul class="icone">



    <li >Icone</li>



</ul>



<div class="conteudo">


 



    <p>Texto</p>



</div>



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
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