2

Passei aqui a algum tempo com problemas no background-image e hoje estou aqui novamente com problemas nessas duas semânticas... Sempre que minimizo a janela ou inspeciono o meu código, o conteúdo em ASIDE pula pra baixo e o problema não é só esse. Ao tentar colocar bordas nas tag's citadas, elas não se adequam a formatação. Preciso que as tag's fiquem uma ao lado da outra e elas já estão com display:block

(Mil desculpas se estou postando algum erro estúpido ou se falei besteira, sou completamente leigo).

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville);
@import url(https://fonts.googleapis.com/css?family=PT+Serif);}
/* Comportamento */
p {
    text-indent: 30px;
    text-align: justify;
    font-family: Tahoma;
    font-size: 20px;
}

div#interface {
    background-image: url("_imgs/background4.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;
}

div#fundo {
    background-color: white;
    box-shadow: 1px 1px 1px #606060;
}

section#corpo {
    display: block;
    float: left;
    padding-bottom: 10px;
    width: 700px;
}

aside#lateral {
    display: block;
    float: right;
    height: 150px;
    margin: -20px 0px 0px -10px;
    position: relative;
}
/* Fim do Comportamento */

/*Formatação do menu */

header#cabecalho {
    background: url(_imgs/logo-menor.png) no-repeat 1px 0px ;
    height: 100px;
    box-shadow: ;
}

header#cabecalho h1 {
    font-family: 'Libre Baskerville', serif;
    font-size: 30pt;
    text-shadow: 2px 2px 2px rgba(255,255,255,.5);
    margin-bottom: 0px;
    padding: 0px;
    text-indent: 110px;
}

header#cabecalho h2 {
    font-family: 'PT Serif', serif;
    font-size: 20pt;
    color:#606060;
    text-shadow: 2px 2px 2px white;
    margin-top: 5px;
    margin-bottom: 15px;
    padding: 0px;
    text-indent: 110px;
}

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


}

div.position-menu {
    position: relative;
    right: 350px;
    float: right;
    width: 100%;
    height: auto;
}

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;
    font-family: Tahoma;
}

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

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

nav#menu h1 {
    display: none;
}

/* Conteúdo */

div#introducao {
    background-color: rgba(240,240,240,.9);
    padding: 10px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.6);
    margin: 0 auto;
    width: 100%;
}

div#introducao iframe {
    margin: 0px;
    margin-left: auto;
}

div#irmaos {
    background-color: rgba(240,240,240,.9);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.6);
}

div#irmaos img {
    padding: 18px;
}

/* Rodapé  */

#rodape {
    clear: both;
    border-top: 1px solid #606060;
}

div.rodape p {
    font-size: 26px;
    color: black;
    text-shadow: 2px 1px 1px white;

}

div.rodape a:hover {
    color: orange;
    text-decoration: underline;
    transition: .5s;
}

div.rodape a {
    color: #000000;
    text-decoration: none;
}
<!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">
        <hgroup>
        <h1>The Rockstar Games</h1>
        <h2>Fan Page</h2>
        </hgroup>

        <div class="position-menu">
            <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>
        </div>
    </header>
    <hr>
<section id="corpo">
        <div id="introducao">

        <h1>Uma pequena introdução</h1>

    <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>
            <iframe width="700" height="315" src="https://www.youtube.com/embed/N-xHcvug3WI" frameborder="0" allowfullscreen></iframe>
    <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>
</section>

<aside id="lateral">
    <div id="irmaos">
        <h1>Os grandiosos da grandiosa Rockstar</h1>

        <img src="_imgs/dan-houser.jpg" width="217" height="330">
        <img src="_imgs/sam-houser.jpg" width="217" height="330">


    </div>
</aside>

<!--Rodapé -->
    <footer id="rodape">
        <div class="rodape">
        <p> Copyright &copy;<a href="http://www.rockstargames.com/" target="_blank"> Rockstar Games</a></p>
        </div>
    </footer>
</div>
</body>
</html>

1 Resposta 1

0

Fiz algumas pequenas alterações, a principal definir um width para a div interface.

Te aconselho a revisar essa estrutura, e desenvolver um esqueleto basicão, só com as formas básicas e depois colocar o conteúdo.

Fico assim, vê se é isso?

    <head>
     
        <title>The Rockstar Page</title>
    </head>

<body>

<div id="interface">

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

        <div class="position-menu">
            <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>
        </div>
    </header>
    <hr>
<section id="corpo">
        <div id="introducao">

        <h1>Uma pequena introdução</h1>

    <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>
            <iframe width="700" height="315" src="https://www.youtube.com/embed/N-xHcvug3WI" frameborder="0" allowfullscreen></iframe>
    <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>
</section>

<aside id="lateral">
    <div id="irmaos">
        <h1>Os grandiosos da grandiosa Rockstar</h1>

        <img src="_imgs/dan-houser.jpg" width="217" height="330">
        <img src="_imgs/sam-houser.jpg" width="217" height="330">


    </div>
</aside>

<!--Rodapé -->
    <footer id="rodape">
        <div class="rodape">
        <p> Copyright &copy;<a href="http://www.rockstargames.com/" target="_blank"> Rockstar Games</a></p>
        </div>
    </footer>
</div>
</body>
<style>
	p {
    text-indent: 30px;
    text-align: justify;
    font-family: Tahoma;
    font-size: 20px;
}

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

div#fundo {
    background-color: white;
    box-shadow: 1px 1px 1px #606060;
}

section#corpo {
    float: left;
    padding-bottom: 10px;
    width: 700px;
}

aside#lateral {
	float:right;
    height: 150px;
    margin: 0;
    
}
/* Fim do Comportamento */

/*Formatação do menu */

header#cabecalho {
    background: url(_imgs/logo-menor.png) no-repeat 1px 0px ;
    height: 100px;
    box-shadow: ;
}

header#cabecalho h1 {
    font-family: 'Libre Baskerville', serif;
    font-size: 30pt;
    text-shadow: 2px 2px 2px rgba(255,255,255,.5);
    margin-bottom: 0px;
    padding: 0px;
    text-indent: 110px;
}

header#cabecalho h2 {
    font-family: 'PT Serif', serif;
    font-size: 20pt;
    color:#606060;
    text-shadow: 2px 2px 2px white;
    margin-top: 5px;
    margin-bottom: 15px;
    padding: 0px;
    text-indent: 110px;
}

#menu {
	float:right;
	margin-right:350px;
}

.position-menu {
    
    float: left;
    width: 100%;
    height: auto;
}

#menu ul {
	width:auto;
    list-style: none;
    text-transform: uppercase;
}

nav#menu li {
    background-color: #dddddd;
    display: inline;
    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;
    font-family: Tahoma;
}

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

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

nav#menu h1 {
    display: none;
}

/* Conteúdo */

div#introducao {
    background-color: rgba(240,240,240,.9);
    padding: 10px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.6);
    margin: 0 auto;
    width: 100%;
}

div#introducao iframe {
    margin: 0px;
    margin-left: auto;
}

div#irmaos {
    background-color: rgba(240,240,240,.9);
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.6);
}

div#irmaos img {
    padding: 18px;
}

/* Rodapé  */

#rodape {
    clear: both;
    border-top: 1px solid #606060;
}

div.rodape p {
    font-size: 26px;
    color: black;
    text-shadow: 2px 1px 1px white;

}

div.rodape a:hover {
    color: orange;
    text-decoration: underline;
    transition: .5s;
}

div.rodape a {
    color: #000000;
    text-decoration: none;
}
</style>

3
  • Não é isso, cara. A minha interface já está definida, o meu problema é com estas duas tag's :/ Commented 14/07/2016 às 20:43
  • Não brother, sua interface, não tem width definido... ou seja a medida que o browser for redimensionado, ela está assumindo o valor auto, e vai jogar o bloco que não couber para baixo... Vc pode ao invés de definir o width para a interface, criar uma div que englobe as 2 tags, e definir nela o width...
    – MagicHat
    Commented 14/07/2016 às 20:52
  • É, era isso mesmo, cara. Me enganei feio ao dizer que minha interface estava definida haha Os valores não foram esses mas o problema era com a largura mesmo :D Commented 19/07/2016 às 0:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .