Ir para conteúdo

POWERED BY:

Arquivado

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

Kaíque Luan

Método correto?

Por , em Desenvolvimento frontend

Recommended Posts

Kaíque Luan    0

Kaíque Luan
Postado

Bom dia pessoal, muito obrigado por me darem atenção na dúvida passada.

 

Gostaria de saber se estou utilizando a forma correta para posicionar meus ícones de redes socias.

Eu deixei a Position em FIXED, em breve a página maior e eles vão rolar juntos com ela. Existe outra maneira mais fácil de de posicionar um objeto ? Agradeço desde já.

 

segue código:

 

 

 

.iconfacebook{
position:fixed;
width:60px;
height:60px;
margin-left:1245px;
margin-top:5px;
}
.iconfacebook:hover {
width:65px;
height:65px;
}
.icontwitter{
position:fixed;
width:60px;
height:60px;
margin-left:1040px;
margin-top:5px;
}
.icontwitter:hover {
width:65px;
height:65px;
}

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

reebr    94

reebr
Postado

Acho que esse negócio de trabalhar com valores em pixels no "margin-left" não vai dar muito certo, você pode utilizar porcentagem. Ex: "margin-left: 10%".

 

Na minha opinião, o ideal é que você crie um componente com posição fixa e coloque esses ícones dentro dele usando float:left. Assim eles vão se ajustar automaticamente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabriel-costa    1

gabriel-costa
Postado

Fala Kaíque, Tranquilo?

 

Esse método que você está utilizando não está errado, mas não é o correto a ser fazer.

Você deve estar posicionando os elementos com base na tag <body>, não é mesmo? ou colocando a position:fixed direto no elemento que vai ficar flutuando.

Seu margin-left está muito grande...

Imagine se um usuário com tela menor abrir seu site! Seus ícones vão simplesmente sumir.

 

Então vamos imaginar uma outra forma..

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>

	<style type="text/css">

		#wrapper {
			position: relative;
			width: 960px;
			margin: 0 auto;
		}
		.icones-social {
			position: absolute;
			left: -10%;
			top: 50px;
		}
		.icones-social ul {
			position: fixed;
			padding: 0;
			list-style: none;
		}

	</style>
</head>
<body>
    <div id="wrapper">

      	<div id="content"> 
           <!-- Aqui vai o conteúdo do site -->
      	</div>

      	<div class="icones-social">
      	    <ul>
      		<li><a href="#">Facebook</a></li>
      		<li><a href="#">Google+</a></li>
      		<li><a href="#">Twitter</a></li>
      	    </ul>
      	</div> 
         
     </div>
</body>
</html>

Percebeu o que fiz?

 

Coloquei primeiramente o elemento pai dos ícones com position:absolute, posicionei ele onde eu quiz, e posteriormente peguei o elemento filho "UL" e coloquei com position:fixed..

 

Sem falar que não podemos esquecer do position:relative no elemento que engloba todas os demais o .wrapper.

 

Espero que tenha ficado de fácil entendimento.

 

Valeu!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kaíque Luan    0

Kaíque Luan
Postado

ótimas explicações muito obrigado mesmo, percebi meu grande erro agora montei outro computador com monitor melhor minhas imagens ficou todas desajustadas.

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