HTML Problema com codigo HTML

Gabriel Hijazi · 24 de janeiro de 2019

Olá programadores boa noite!

Estou fazendo um site portifólio pela primeira vez aprendendo a linguagem HTML e estou com um problema no site !

o site por enquanto possui 3 menus ( Home, Contato, Mapas)... sendo assim a home ja está pronta então eu parti para a parte de contato ao finalizar percebi que quando eu atualizo o site as informações que era para estar na aba contato aparece na home ! somente após eu clicar nos menus contato e home as informações se organizam! gostaria de saber como arrumo isso estarei publicando os codigos html e css aquiem baixo !

Codigo HTML

<!DOCTYPE html>
<html>
<head>
    <title>RC Radiadores</title>
    <link rel= "stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="background">
    <div class="nav">
            <a class="a active" = href="#">HOME</a>
            <a class="b" = href="##">CONTATO</a>
            <a class="c" = href="###">MAPAS</a>

          <div class="content">

              <div class="home">
                  <h1>RC</h1>
                  <h3>Radiadores/Ar condicionado</h3>
              </div>

           <div class="contato">
                <h1>RC CONTATO</h1>
                <h2>Nome: Rogério<br>Telefone:(xx)xxxx-xxxx<br>Celular:(xx) xxxxx-xxxx<br>E-mail:[email protected]</h2>
              </div>

        </div>

<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function(){
                $('a').click(function(){
                        var selected = $(this);
                        $('a').removeClass('active');
                        $(selected).addClass('active');
                });
            var $a = $('.a'),
                $b = $('.b'),
                $c = $('.c'),
                $home = $('.home'),
                $contato = $('.contato');

            $a.click(function(){
                $home.fadeIn();
                $contato.fadeOut();
                   });
                   
            $b.click(function(){              
                $home.fadeOut();
                $contato.fadeIn();
                 
             });
        });
        
</script>

</body>
</html>

*{
    margin: 0;
    padding: 0;
}
html, body{
    width: 100%;
    height: 100%;
    font-size: 14px;
    font-weight: normal;
}
.background{
    width: 100%;
    height: 100%;
    background-image: url(./images/4k.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow-y: auto;
}
.nav{
    width: 350px;
    height: auto;
    position: absolute;
    top: 20%;
    left: 0;
}
.nav a{
    text-decoration: none;
    height: auto;
    font-size: 25px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    height: 90px;
    margin: 5px 0;
    float: left;
    background-color: black;
    color: white;
    display: inline-block;
    line-height: 90px;
    text-align: center;
    transition: 400ms;
}

a.active,.nav a:hover{
    background-color: white;
    color:black;
    width: 100%;
}
.a{
    width: 95%;
}
.b{
    width: 75%;
}
.c{
    width: 55%;
}
.content{
  position: fixed;
  width: 1250px;
  min-height: 300px;
  height: auto;
  right: 0%;
  top: 10%;
}
.home{
    position: absolute;
    right: 0%;
    bottom: 25px;
    color: white;
    font-family: 'Times New Roman', Times, serif;

}
.home h1{
    font-size: 180px;
    text-transform: uppercase;
    padding-right: 50px;
    border-bottom: 2px solid white;
}
.home h3{
    font-size: 15px;
    text-transform: uppercase;
    padding-right: 50px;
}
.contato{
    position: absolute;
    right: 30%;
    top: 100px;
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding: 0 60px;
}
.contato h1{
    font-size: 70px;
    line-height: 25px;
    margin-bottom: 15px;
    color:white;
}
.contato h2{
    font-size: 30px;
    line-height: 25px;
    color:white;  
}

DiF · 24 de janeiro de 2019

@Gabriel Hijazi Olá, provável que aconteça isso porque pelo que eu vi no código, está tudo junto e não tem espaçamento.

Por exemplo se a ideia era fazer "one-page" onde tudo está em um arquivo só e os links rolam até o setor destinado, você tem que separar os setores pelo menos dar o espaço para que haja um rolamento.

Também vejo o uso errado das posições. Veja bem quando se usa fixed, você trava a posição indicada, quando se usa absolute, você sobrescreve a posição, ou seja, se tiver um elemento em um eixo X e Y, se colocar outro elemento com absolute acima desse, vai ficar embolado.

Por exemplo, se quiser usar a posição absoluta de forma certa, crie um elemento que seja posição relativa antes.

Se quiser fazer de forma mais comum, você cria outro arquivo HTML para o contato, e aí inserir o conteúdo do arquivo em algum elemento com o load()