Background misaligned with the page (exceeding the limit)

Navigation
0

IstartedprogrammingafewdaysagoandIdonotknowiftheproblemisinthecodeorifitistheimagethatistoobig.

Theimageexceedsthepagecontentandgeneratesahorizontalscrollbar.

SeetheCSS:

@charset "UTF-8";

p {
    text-indent: 30px;
    text-align: justify;
    font-family: Tahoma;
}


/*Formatação do menu */

div#cabecalho {
    background-color: white;
}

div#interface {
    background-image: url("_imgs/background.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-size: cover;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    padding: 3em;
}

nav#menu {
    display: block;
    position: relative;
    left: 350px;
}

nav#menu ul {
    list-style: none;
    text-transform: uppercase;
}
nav#menu li {
    background-color: #dddddd;
    display: inline-block;
    padding: 8px;
    margin: 4px;
    transition: 0.7s;
    border-radius: 2px;
    box-shadow: 0.5px 0.5px 1px #202020;

}

nav#menu a {
    text-decoration: none;
    color: black;
}

nav#menu a:hover {
    color: white;
}

nav#menu li:hover {
    background-color: #606060;

}

nav#menu h1 {
    display: none;
}

/* Conteúdo */

div#conteudo {
    background-color: white;
    padding: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.7);

}

div.rodape a {
    color: #000000;
    text-decoration: none;
}

**

<!-- begin snippet: js hide: false console: true babel: false -->
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <meta charset="utf-8">
        <title>The Rockstar Page</title>
    </head>

<body>

<div id="interface">

    <header id="cabecalho">
        <img id="logo"  src="_imgs/rockstar-logo.png" width="100" height="100">

        <hgroup id="">
        <h1>The Rockstar Games</h1>
        <h2>Fan Page</h2>
        </hgroup>

    <nav id="menu">
     <h1>Menu</h1>
        <ul>
            <li><a href="index.html">Rockstar</a></li>
            <li><a href="">Galeria de jogos</a></li>
            <li><a href="">Vídeos</a></li>
            <li><a href="">Download</a></li>
        </ul>
    </nav>
    </header>
        <hr/>
    <div id="conteudo">
        <h2>Uma pequena introdução</h2>

    <p>A <em>Rockstar Games</em> é uma produtora de jogos eletrônicos fundada em 1998 por dois irmãos britânicos: San Houser e Dan Houser, em NY, nos Estados Unidos. Essa ilustre e maravilhosa produtora ganhou fama por criar a série "Grand Theft Auto" (vulgo "GTA"), tal série que gerou grande polêmica e alvoroço por ser um game em mundo aberto. Sendo assim, era quase que inevitável que o jogo não contesse violência explícita, roubos, assassinatos e qualquer outro tipo de atividade ilegal.</p>
    <p>A Rockstar é diferente das outras produtoras de jogos por um simples motivo: ela faz aquilo que nós (jogadores de jogos) queremos jogar. Mas não são só "aqueles joguinhos com história clichê" não. Eles priorisam a experiência e jogabilidade tanto quanto uma empresa por aí (não farei menções, desculpe) priorisa a experiência de um umboxing.
    <p>Em Outubro de 2011, Dan Houser disse o seguinte à uma revista japonesa de videogames: "[...]Pode-se dizer que o objetivo da Rockstar é fazer com que os jogadores realmente sintam o que estamos tentando fazer."[...]Eu acho que nós justamente conseguimos porque nos não concentramos no lucro… Se nós fizermos o tipo os jogos que quer jogar, então acreditamos que as pessoas vão comprá-los."</p>

    </div>

        <hr/>
<h1>Sucessos e uma breve sinopse</h1>

<!--Tabela pra teste-->
    <div id="clicaveis">
        <table border="2px solid">

            <thead>
            <th colspan="2">Jogos</th>
            </thead>

            <tbody>
                <tr>
                    <td><a href="" target="_blank"><img src="_imgs/gta5.jpg" width="280" height="280"/></a></td>
                    <td><a href="" target="_blank"><img src="_imgs/maxpayne3.jpg" width="280" height="280"/></a></td>
                </tr>

                <tr>
                    <td><a href="" target="_blank"><img src="_imgs/reddead.jpg" width="280" height="280"/></a></td>
                    <td><a href="" target="_blank"><img src="_imgs/manhunt2.jpg" width="280" height="280"/></a></td>
                </tr>
            </tbody>

        </table>
    </div>

    <hr/>

<!--Rodapé (teste)-->     
    <p class="rodape" style="font-size: 20px; color: black">Copyright &copy; <a href="http://www.rockstargames.com/" target="_blank"> Rockstar Games</a></p>
    
</div>

</body>
</html>

**

    
asked by anonymous 02.07.2016 / 01:26

1 answer

1

Response Update:

Viewing your code I was able to identify the error, it was in nav#menu where you put the left: 350px; property this line was the main cause of the error, because it was indicating to be 350px to the right of the left border. Read more about here .

To fix the error I updated your css that looked like this: 

nav#menu {
    display: block;
    position: relative;
    left: 350px;
}

For this: 

nav#menu {
    display: block;
    position: relative;
    float:right;
}

And I created a new css class: 

.posicao-menu{
    float:right;
    width:100%;
    height:auto;
}

In your html I updated the line that looked like this: 

<nav id="menu">

For these new lines: 

<div class="posicao-menu">
        <nav id="menu">

And I also updated the line that looked like this: 

</nav>

For these new lines: 

</nav>
    </div>

In short, I created a div to put its menu and set the float property so that it floats to the right, likewise set the property to its nav that has the menu id. >

And I put in your html that nav#menu is the child of div posicao-menu .

Take the tests!

    
02.07.2016 / 04:41
Centralized responsive menu Filling input masked with zeros