Screen minimizing leaves html messy footer words

Asked

Viewed 118 times

0

When I minimize the browser the phrases go into the corner get messy. 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>
html5 css3

  • Dude, don’t devote yourself to suffering, use the existing frameworks out there, they’ll make your life so easy that you’ll want something else in life. Semantic UI Bootstrap In that frameworks cited has everything and more of what you will need to set up a beautiful website without much work. Detail... Are free!!!

  • 1

    But the code doesn’t even have a footnote. It has a navwith a class called Rodape-cima, but that’s not a footnote.

  • So in case the header had modified this section was testing

  • That one left: 1180px; leaves the menu totally off the screen.

  • It was the only alternative I could find because I used text-align: right; but nothing contains! I believe it’s quite easy to solve I’m beginner so complica kkkk

1 answer

0


Your CSS has many problems, but as you said you are a beginner, such mistakes can be normal. But you don’t need to tag+id the selectors, just the id, for example:

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

Like the id is unique, does not need to tag (in some cases may be necessary, but in yours is expendable).

You are also using position: absolute in many ways unnecessarily. The absolute is also used in specific cases, and use in a header thus compromises its layout.

See that you want to position everything with absolute, including the menu with a left huge. Probably your screen is at least fullhd, but on a smaller screen, the menu will disappear screen. Not to mention other elements that you want to arbitrary position, such as the menu.

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

I reworked your CSS by removing everything I saw unnecessary and incorrect. Compare your code and see the differences you 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>

  • Show more you!!! Thanks for the attention there!

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.