Minimize of screen leaves words of messy rodapedia html

Navigation
0

When I minimize the browser the sentences go to the corner are messed up. Follow the code:

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>
    
asked by anonymous 22.09.2018 / 03:08

1 answer

0

Your CSS has many problems, but as you said you are a beginner, these errors can be normal. But you do not need to put tag + id in the selectors, just the id, for example:

#fundo-cima{ instead of header#fundo-cima{

Since id is unique, you do not need to put the tag (in some cases it may be necessary, but in your case it is not necessary).

You're also using position: absolute on many elements unnecessarily. absolute is also used in specific cases, and using header this way compromises your layout .

See that you want to position everything with absolute , including the menu with a left huge. Most likely your screen is fullhd , but on a smaller screen, the menu will disappear from the screen. Without mentioning other elements you want to position arbitrarily, such as the menu.

You can also use the image as a background with the background-image property instead of using <img> for this purpose.

I reformulated your CSS by removing everything I saw unnecessary and incorrect. Compare with your code and see the differences you'll learn: 

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>
    
22.09.2018 / 04:51
Doubt with Insert and Select Remove payment installment payment