Problemas com CSS/HTML

KenshiYoung · 7 de maio de 2017

Primeiramente boa tarde pessoal, bom, estou desenvolvendo um site sobre sustentabilidade para um trabalho da faculdade, meu grupo me deixou com essa tarefa pois tenho algum conhecimento em Python e Java e acreditaram que seria fácil para eu desenvolver em html, porém HTML e CSS sem chance pra mim, mas vamos lá ... Peço que me ajudem a ver se há algum erro nesse código que digitei.

Bom, eu criei um " menu " para o site o mesmo é para ficar " grudado " (fixo) na parte superior da página, o menu são " botões " quando alguém clica por exemplo em " home " é direcionado para a página que linkei a esse botão, até ai beleza, tudo funciona os links funcionam , porém quando incluo algum parágrafo na página ele puxa a configuração do CSS até ai beleza, mas o meu menu que deveria estar fixado na parte superior da página " desce ", ou seja, ele sai da posição que deveria ficar, ele move-se aproximadamente " 1 dedo " para baixo, por favor alguém dê uma olhada se tem algum erro, ou se há algum jeito de incluir meus parágrafos sem dar esse problema, já tentei usar o <p class="paragrafo"> , <p id="paragrafo">., <p> , mas do mesmo jeito desconfigura o menu...

Segue o código dá página Home e do CSS. Obs: já tentei mudar o ' p ' de lugar também, ou incluir nome a ele, nada funciona, por favor ajudem estou desesperado :v

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset=utf-8">
    <title>Trabalho de APS</title>
 <link rel="stylesheet" type="text/css" href="CSS 1.css"/>
  </head>
 
  <body>
    
           <div id="menu">
            <ul>            
                   <li><a href="Home.html">Home</a></li>
                <li><a href="Cadastre-se.html">Cadastre-se</a></li>
                <li><a href="Agua.html">&Aacutegua</a></li>
                <li><a href="Lixo.html">Lixo</a></li>
                <li><a href="Palestras.html">Palestras</a></li>
                <li><a href="Fale.html">Fale conosco</a></li>
            </ul>
        </div>    
    
    
  </body>
</html>



@charset "utf-8";
/* CSS Document */
p {
            font-family:Arial, Helvetica, sans-serif;
            font-size: 1.6em;
            max-width: 480px;
            color:#000000
    }
                    
        
body {
            padding:0px;
            margin:0px;
            background-color:#FFFFFF                
}
    a:link {
            text-decoration: none;
            color:#009;
            }
            
    a:visited {
            text-decoration: none;
            color:#90F;
            }
        
    a:active {
            text-decoration: none;
            color:#090;    
        }
            
    #menu ul {
                padding:0px;
                margin:0px;
                float: left;
                width: 100%;
                background-color:#333333;
                list-style:none;
                font:125% Tahoma;
            }
    
    #menu ul li { display: inline; }
    #menu ul li a {
                background-color:#333333;
                color: #FFFFFF;
                text-decoration: none;
                border-bottom:3px solid #333333;
                padding: 2px 10px;
                float:left;
            }
    #menu ul li a:hover {
                background-color:#333333;
                color: #6D6D6D;
                border-bottom:3px solid #FFFF00;
            }

DiF · 8 de maio de 2017

@KenshiYoung Olá, seja bem vindo em nosso Clube do Hardware.

Talvez, possa resolver isso com um CSS Reset.

Adicione no seu css, no inicio de tudo: *{margin:0; padding: 0;}

Ou se quiser melhor, baixe o arquivo chamado normalize.css e chame ele antes do seu CSS.

Basicamente você zera as configurações iniciais que resolve a maioria desses casos.

Exemplo online: https://jsfiddle.net/vwksbxgd/

KenshiYoung · 10 de maio de 2017

Muito obrigado amigo, usei o comando " *{margin:0; padding: 0;} " e deu certo, o menu não está mais " caindo " quando coloco um parágrafo, muito obrigado mesmo ajudou bastante s2 .