Page misaligned background (exceeding the limit)

Question

Page misaligned background (exceeding the limit)

Asked 8 years ago

Viewed 214 times

0

I started programming a few days ago and I don’t know if the problem is in the code or if it’s the image that’s too big.

Image exceeds page content and generates a horizontal scroll bar.

See the CSS:

@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>

**

Brendom, welcome, I think a Printscreen for viewing at least part of the problem would help a lot. You can add images to the text, start by editing your question.

– Leo

2016/07/01 at 23:38
div#interface { background-image: url("_imgs/background.jpg"); background-repeat: no-repeat; background-size: 100%; background-size: cover; position: Absolute; width:100%; height:100%; left: 0; right: 0; top: 0; bottom: 0; overflow: Hidden; padding: 0; }

– Vítor André

2016/07/02 at 00:52

1 answer

Browser other questions tagged html css background

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

by Wendell • **1,312** points · Answer 1 · 2016-07-02T02:41:55+00:00

Update of the Response:

Visualizing your code I was able to identify the error, the same was found in nav#menu where you put the property left: 350px; this line was the main cause of the error, as it was indicating to stay 350px to the right of the left edge. Read more about the property here.

To fix the bug I updated your css that was 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 were like this:

<nav id="menu">

For these new lines:

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

And I also updated the line that was like this:

</nav>

For these new lines:

</nav>
    </div>

In short, I created a div to place your menu and set the property float so that it floats to the right, in the same way defined the property for its nav that has the ID menu.

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

Run the tests!