CSS Erro para ver bem

[Eduardo de Quadros]

Meu HTML:

 

<div id="redes_sociais">
    <h2>Redes Sociais</h2><br><br>
    <h3>
        <div class="redes"><a target="_blank" href=""><img src="img/Mail.png" width="60"></a></div>
        <div class="redes"><a target="_blank" href="https://www.facebook.com/paulinhodasilva65500"><img src="img/Facebook.png" width="60"></a>     </div>
        <div class="redes"><a target="_blank" href="https://www.instagram.com/paulinhodasilvaadvogado/"><img src="img/Instagram.png" width="60"></a></div>
    </h3><br>
</div>

 

Meu CSS:

 

*{
  margin: 0px;
  font-size: 12pt;
}

h3{
  text-align: center;
  font-size: 24pt;
}

h2{
  text-align: center;
  font-size: 32pt;
}

img{
  vertical-align: middle;
}

#propostas{
  display: block;
  border: solid red 5px;
  padding: 15px;
}

#projetos{
  display: none;
  border: solid red 5px;
  padding: 15px;
}

.botões, .redes{
  padding: 20px;
  float: left;
}

#redes_sociais{
  display: none;
  border: solid red 5px;
  padding: 15px;
}

 

Meu Javascript:

 

            function propostasSel(){
            var propostas = document.getElementById("propostas");
            var projetos = document.getElementById("projetos");
            var redesSociais = document.getElementById("redes_sociais");

            propostas.style.display = "block";
            projetos.style.display = "none";
            redesSociais.style.display = "none";
            }

            function projetosSel(){
            var propostas = document.getElementById("propostas");
            var projetos = document.getElementById("projetos");
            var redesSociais = document.getElementById("redes_sociais");

            propostas.style.display = "none";
            projetos.style.display = "block";
            redesSociais.style.display = "none";
            }

            function redesSociaisSel(){
            var propostas = document.getElementById("propostas");
            var projetos = document.getElementById("projetos");
            var redesSociais = document.getElementById("redes_sociais");

            propostas.style.display = "none";
            projetos.style.display = "none";
            redesSociais.style.display = "block";
            }

 

Meu visual:

 

[Fazzioni]

@Eduardo de Quadros

 

Não é recomendável utilizar alguns caractéres especiais no ID, tais como:

- 
_
.

 

Provável que alguns navegadores enfrentariam problema nessa linha

#redes_sociais

 

<div id="redes_sociais">

 

 

 

... aproveitando seu código javascript, uma sugestão:

function Selection( sel ){ 
	var ids = ["propostas","projetos","redesSociais"];
	for (var i =0;i < ids.length; i++)
		document.getElementById(ids[i]).style.display = ((sel ==  ids[i]) ? 'block' : 'none');
}

 

Ao invés de usar 3 funções para fazer a mesma coisa, use um parâmetro:

Selection("propostas");
Selection("projetos");
Selection("redesSociais");

 

 

Não compreendi qual seu problema, mas restando dúvidas sugiro ser mais claro.