Filling the Div container does not complete everything

Asked

Viewed 46 times

-2

I’m starting and tals. I created div container as root for all content. Just when I changed the background color did not change everything, I can not understand, someone can explain to me where the error is?

body{
    margin: 0 auto;
    padding: 0;
}
.container{
    width: 100%;
    background-color: #d6d6d6;
    height: 100%;
}
/*TITULO INICIO*/
h2{
    text-align: left;
    font-family: 'Crimson Text', serif;
    font-size: 45px;
    margin: 0 auto;
    padding: 0%;
    margin-top: 1px;
    
}

/*INICIO MENU DE NAVEGACAO*/
.menu{
    display: inline;
    text-decoration: none;
    font-family: 'Crimson Text', serif;
    font-style: bold;
    font-size: 25px;
}
.menu ul{
    list-style-type: none;
    text-align: left;
    margin:3px;
    color: white;
    background-color: thistle;
    border: 1px solid #000;
    border-radius: 5px;
}
.menu ul li {
    color: black;
    margin: 3px;
    margin-left: 10px;
    
}
.menu ul li a{
    color: black;
    text-decoration: none;
    background-color: #ffffff;
    margin: 3px;
    border-radius: 2px;
    padding-left: 5px;
    padding-right: 5px;
    
   
}
.menu li a:hover{
    background-color: #1a1a1a;
    color: #fff;
}
/*FIM MENU*/

/*BOX DE CONTEUDO*/
.conteudo{
   
    border: 1px solid #000;
    background-color: blanchedalmond;
    border-radius: 6px;
    font-family: sans-serif;
    padding: 6px;
    width: 50%;
    padding-left: ;
}

/*RODAPE*/
.footer{

    position: absolute;
    bottom: 0;
    border: 1px solid #1a1a1a;
   display: inline;
   background-color: #d6d6d6;
   border-radius: 3px;
   
  
}
.footer ul{
    list-style-type: none;
    margin: 1px;
    font-family: 'Crimson Text', serif;
    
   
}
.footer ul li a {
    color: #000;
    
}
.strava{
    
    float: right;
    margin-top: 0px;
    
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Peterson Alves</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Crimson+Text&display=swap" rel="stylesheet">
</head>

<body>
    <div class=container>
        <div class="titulo">
            <h2>Peterson Alves</h2>
        </div>
        <div class="menu">
            <ul>
                <li>
                    <a href="">Facebook</a>
                    <a href="">Youtube</a>
                    <a href="">Instagram</a>
                    <a href="">Strava</a>
                    <a href="Sobre">Sobre</a>
                </li>
            </ul>
        </div>
        <div class="subititulo">
            <h3>Sobre mim</h3>
        </div>
        <div class="conteudo">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque vel justo quis volutpat.
                In ipsum libero, dapibus sit amet finibus eu, dapibus quis libero. Ut feugiat varius ligula, ut
                venenatis neque interdum sed. Mauris scelerisque eu tellus sagittis tempus. Quisque nibh arcu, tristique
                et ligula eu, volutpat blandit nibh. Mauris mattis augue quis imperdiet tincidunt. In commodo mi commodo
                dui vestibulum, et eleifend nunc consectetur. Cras ex lacus, porta in lacus at, tempor dapibus odio.
                Proin at metus lobortis, consequat tortor vel, elementum ligula. Nulla facilisi.
                <br>
                <br>
                Vivamus hendrerit cursus libero eu blandit. Cras id mauris lectus. Nunc vestibulum tristique porta. Cras
                vel lorem semper, maximus turpis nec, dignissim ante. Quisque vel dolor non ante accumsan tincidunt in
                quis tortor. Pellentesque et tellus ac augue interdum bibendum nec quis ante. Duis commodo vehicula
                lacinia. Pellentesque tincidunt augue vel metus efficitur viverra. Ut nec malesuada nisi. Suspendisse
                potenti.
            </p>

        </div>
       
            <!--Widget strava-->
            <div class="strava">
                <iframe allowtransparency frameborder='0' height='454' scrolling='no'
                    src='https://www.strava.com/clubs/561223/latest-rides/15ec9bc871378920f108d41f9072231279970cc0?show_rides=true'
                    width='300'></iframe>

            </div>
        

        <div class="footer">
            <ul>
                <li>
                    <a href="">Sobre</a>
                    <a href="">Termos</a>
                    <a href="">Licenças</a>
                    <a href="">Cookies</a>

                </li>
            </ul>
        </div>
    </div>
</body>

</html>

html css3 web-application webdesign

2 answers

0

If you want to change the background-color of the full page puts the property in your body

body{
    margin: 0 auto;
    padding: 0;
    background-color: #d6d6d6;
}

  • vlw by the tip, I ended up doing it.

0

First you have to work each "piece" of your page a hint take from div class= conteiner to div class=footer then go to work on css for example change the class. Path

  • vlw by tip, created this site nonsense there to train. I will follow your tip.

Browser other questions tagged html css3 web-application webdesign

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