HTML Fazer a borda ficar ao redor da área de postagem

Jefferson Denzer · 27 de junho de 2022

Pessoal, estou dando uma estuda no HTML por conta própria em casa, por hora nível básico do básico.

Meu objetivo é fazer a "#conteudo" sobrepor a área de postagem que é vista por "#bordaconteudo" no código, ou seja, fazer a imagem do Forza Horizone ficar com uma borda!

tentei diversas maneiras que achei na net, mas nenhuma funcionou aqui.

provavelmente estou fazendo do jeito mais difícil que tem, mas gostaria de solucionar esse problema só pra ter uma noção de como fazer mesmo.

Vou anexar a pasta de arquivos aqui, está bem bagunçado e simples, mas acho q vai dar pra entender a hora que abrir.

<!DOCTYPE html>
<html>
    <head>

<!--AQUI FICA O TÍTULO E O META, META É USADO PELOS BUSCADORES PARA ENCONTRAR SEU SITE-->

        <meta charset="utf-8">
        <title>O melhor site de todos</title>
        <link type="text/css" rel="stylesheet" media="screen" href="estilos.css" />
    </head>
    <body>
        
<!--AQUI FICA O ESTILO DO SITE-->

<div id="site"></div>

<!--AQUI FICA O CABEÇALHO DO SITE-->

<div id="header">

        <img src="img/header.gif" height="100%" width="100%">
</div>


<!--AQUI FICA A ÁREA DE POSTAGENS DO SITE-->

<div id="titulonoticia">
  
    <img src="img/titulonoticia.png" height="100%" width="100%">

</div>

<div id="conteudo">

    <img src="img/FORZA.png" height="450px" width="650px">
  

</div>
<div id="bordaconteudo">

    <img src="img/bordaconteudo.png" height="470px" width="670px">
</div>


<!--AQUI FICA O RODAPÉ DO SITE-->

<div id="footer">

    <img src="img/footer.jpg" width="100%">

</div>
   
<!--
        
        <footer>
        <article class="footer">
           <img src="img/footer.jpg" align="bottom" alt="Footer" title="Rodapé da página" height="100%" width="100%">
        </article>
    </footer>
    
    -->

    </body>

</html>

AQUI É A PARTE DO CSS --------------------------------------------------------



* {

  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {

  font-size: 16px;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  color: black;
}

body {

  width: 100%;
  min-height: 100vh;
  border: 5px black;

}


/*AQUI É O CABEÇALHO*/

#header{
  /* Definimos a largura da página */
  width:100%;
  /* Definirmos a altura da página*/
  height:220px;
  /* Aqui definiremos a posição que a página ocupará na tela*/
  /*top : posição de cima */
  margin-top:0;
  /* left: posição de esquerda*/
  margin-left:auto;
  /* bottom : posição de baixo */
  margin-bottom:0;
  /* right : posição de direita */
  margin-right:auto;
  /* Aqui definiremos a cor de fundo da página */
  background-color:RGB(0, 231, 89);
}


/* AQUI É O LAYOUT DO titulo noticia */

#titulonoticia{
  /* Definimos a largura da página */
  width:650px;
  /* Definirmos a altura da página*/
  height:60px;
  /* Aqui definiremos a posição que a página ocupará na tela*/
  /*top : posição de cima */
  margin-top:100px;
  /* left: posição de esquerda*/
  margin-left:650px;
  /* bottom : posição de baixo */
  margin-bottom:0;
  /* right : posição de direita */
  margin-right:0;
  /* Aqui definiremos a cor de fundo da página */
}


/* AQUI É O LAYOUT DO CONTEÚDO */

#bordaconteudo{
  /* Definimos a largura da página */
  width:670px;
  /* Definirmos a altura da página*/
  height:460px;
  /* Aqui definiremos a posição que a página ocupará na tela*/
  /*top : posição de cima */
  margin-top:0;
  /* left: posição de esquerda*/
  margin-left:640px;
  /* bottom : posição de baixo */
  margin-bottom:0;
  /* right : posição de direita */
  margin-right:0;
  /* Aqui definiremos a cor de fundo da página */
  background-color:RGB(46, 0, 212);

}

#conteudo{
  /* Definimos a largura da página */
  width:650px;
  /* Definirmos a altura da página*/
  height:450px;
  /* Aqui definiremos a posição que a página ocupará na tela*/
  /*top : posição de cima */
  margin-top:0;
  /* left: posição de esquerda*/
  margin-left:650px;
  /* bottom : posição de baixo */
  margin-bottom:0;
  /* right : posição de direita */
  margin-right:0;
  /* Aqui definiremos a cor de fundo da página */
  background-color:RGB(46, 0, 212);

}


/*AQUI É O RODAPÉ*/

#footer{
  /* Definimos a largura da página */
  width:100%;
  /* Definirmos a altura da página*/
  height:120px;

  /* Aqui definiremos a posição que a página ocupará na tela*/
  /*top : posição de cima */
  margin-top:auto;
  /* left: posição de esquerda*/
  margin-left:auto;
  /* bottom : posição de baixo */
  margin-bottom:-0px;
  /* right : posição de direita */
  margin-right:auto;
  /* Aqui definiremos a cor de fundo da página */
  background-color:RGB(46, 0, 212);
  /*aqui colocaremos imagem*/

}

HTMLclubehardware.rar

washalbano · 27 de junho de 2022

Sugestão:
Coloque as duas imagens dentro duma única div, assim:

<div id="conteudo">
  <img src="img/FORZA.png" height="450px" width="650px" />
  <img src="img/bordaconteudo.png" height="470px" width="670px" />
</div>

Acrescente essas regras css à div#conteúdo

position: relative;
display: flex;
align-items: center;
justify-content: center;

E acrescente essa

div#conteudo img:last-child {
  position: absolute;
}

Resultado:

Jefferson Denzer · 28 de junho de 2022

@washalbano show de bola mano, muito obrigado pela ajuda.

a única parte que eu já tinha tentado era as duas imagens na mesma div, imaginei que era o caminho certo mesmo, mas a parte do css tentei de tudo que eu tinha achado.

agora vou dar uma pesquisada em seus códigos e ver o que cada um significa/funcionalidade.

@washalbanoMe diz outra coisa, se eu quiser adicionar por exemplo:

Rodapé IMAGEM> COPRIGHT/LINK

eu consegui fazer o rodapé com imagem utilizando o método que você me passou ali <p texto...>

div#footer p:last-child {
  position: absolute;
  margin-right: 1735px;
  margin-top: 180px;
  
}

porém, na hora que adiciono o link, o texto e o link saem de cima da imagem do rodapé <a href...>

div#footer a:last-child {
  position: absolute;
  margin-right: 1735px;
  margin-top: 180px;
  
}

Html da inicial ficou assim

<div id="footer">

    <img src="img/footer.jpg" width="100%">
    <p style="color:red">Jefferson Denzer</p>
    <a href="http://www.facebook.com/jefferson.denzer" target="_blank">Meu Facebook para contato</a>

</div>