0

Quando minimizo o navegador as frases vão para o canto ficam bagunçada. Segue o codigo:

css:

@charset "UTF-8";


body{
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: white;
}
li{
    color: white;
}
header#fundo-cima{
    width: 100%;
    position: absolute;

}
header#fundo-cima img{
    width: 100%;
    height: 100px;
    position: absolute;
    top: 0px;

}
nav#Rodape-cima li{
    display: inline;
    position: relative;
    top: 100px;
    margin: 19px;
}
nav#Rodape-cima ul{
    position: absolute;
    top: -75px;
    left: 1180px;
    text-transform: uppercase;
    font-family: "Bitstream Vera Sans";
    font-size: 14px;
}
nav#Rodape-cima li:hover{
    margin: 2px;
    padding: 10px;
    color: blue;
}

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <link rel="stylesheet" type="text/css" href="_css/cores.css">
    <link rel="stylesheet" type="text/css" href="_css/Cabeçalho.css">
    <link rel="stylesheet" type="text/css" href="_css/edição.css">
    <meta charset="UTF-8"/>
    <title>Kvasir</title>
</head>
<body>
    <header id="fundo-cima">
        <img src="-fotos/background-black.jpg">
            <nav id="Rodape-cima">
                <ul>
                    <li>Login</li>
                    <li>Cadastre-se</li>
                    <li>Sobre</li>
                    <li>Fotos</li>
                    <li>Contato</li>
                </ul>
            </nav>
    </header>
</body>
</html>
5
  • Cara, não se dedique ao sofrimento, utilize os frameworks existentes por aí, eles irãos facilitar a sua vida de tal forma que nçao vai mais querer outra coisa na vida. Semantic UI Bootstrap Nesse frameworks citados tem tudo e mais um pouco do que você vai precisar para montar um site bonito sem muito trabalho. Detalhe... São grátis!!! Commented 22/09/2018 às 1:26
  • 1
    Mas o código não tem nem rodapé. Tem um navcom uma classe chamada Rodape-cima, mas isso não é rodapé.
    – Sam
    Commented 22/09/2018 às 1:43
  • Então no caso é cabeçalho tinha modificado esse trecho tava testando Commented 22/09/2018 às 1:52
  • Esse left: 1180px; deixa o menu totalmente fora da tela.
    – Sam
    Commented 22/09/2018 às 1:59
  • Foi a unica alternativa que encontrei pois usei o text-align: right; mas nada contece! Acredito que seja bem fácil de resolver sou iniciante então complica kkkk Commented 22/09/2018 às 2:04

1 Resposta 1

0

Seu CSS tem muitos problemas, mas como você disse que é iniciante, pode ser normal tais erros. Mas não precisa colocar tag+id nos seletores, basta apenas o id, por exemplo:

#fundo-cima{ em vez de header#fundo-cima{

Como o id é único, não precisa colocar a tag (em alguns casos pode ser necessário, mas no seu é dispensável).

Você também está usando position: absolute em muitos elementos de forma desnecessária. O absolute é usado também em casos específicos, e usar num header desta forma compromete o seu layout.

Veja que você quer posicionar tudo com absolute, inclusive o menu com um left enorme. Provavelmente a sua tela é no mínimo fullhd, mas numa tela menor, o menu irá sumir da tela. Sem falar outros elementos que você quer posicionar de forma arbitrária, como o menu.

Pode usar também a imagem como plano de fundo com a propriedade background-image, em vez de usar <img> para esse propósito.

Reformulei o seu CSS retirando tudo que vi desnecessário e incorreto. Compare com o seu código e veja as diferenças que você vai aprendendo:

body{
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: white;
}
li{
    color: white;
}
#fundo-cima{
    background-image: url(https://images.unsplash.com/photo-1530482817083-29ae4b92ff15?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=44f4aebbd1e1371d5bf7dc22016c5d29&w=1000&q=80);
    background-size: cover;
    height: 100px;
}
#Rodape-cima{
   text-align: right;
}

#Rodape-cima li{
    display: inline-block;
    margin: 20px 8px 0;
}
#Rodape-cima ul{
    text-transform: uppercase;
    font-family: "Bitstream Vera Sans";
    font-size: 14px;
    padding: 0;
    margin: 0;
}
#Rodape-cima ul li:hover{
    color: blue;
}
<header id="fundo-cima">
   <nav id="Rodape-cima">
      <ul>
         <li>Login</li>
         <li>Cadastre-se</li>
         <li>Sobre</li>
         <li>Fotos</li>
         <li>Contato</li>
      </ul>
   </nav>
</header>

1
  • Show de mais você!!! Obrigado pela atenção ai! Commented 22/09/2018 às 3:08

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .