Problems with SECTION and ASIDE (HTML5)

Asked

Viewed 643 times

2

I spent some time here with problems in the background-image and today I’m here again with problems in these two semantics... Whenever I minimize the window or inspect my code, the content in ASIDE It jumps down and the problem is not only this. When trying to put borders in the mentioned tags, they do not fit the formatting. I need the tags to be next to each other and they’re already with display:block

(A thousand excuses if I’m posting some stupid mistake or if I’m talking nonsense, I’m completely layman).

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

css html5 css3

1 answer

0


I made a few minor changes, the main one defining a width for the div interface.

I advise you to review this structure, and develop a basic skeleton, only with the basic forms and then put the content.

I get like this, see if that’s it?

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

  • Not that, man. My interface is already set, my problem is with these two tags :/

  • No brother, its interface, has no width set... or as long as the browser is resized, it is assuming the auto value, and will play the block that does not fit down... You can instead of setting the width for the interface, create a div that encompasses the 2 tags, and set the width on it...

  • Yeah, that’s right, man. I was wrong to say that my interface was defined haha

Browser other questions tagged css html5 css3

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