Adicionar texto em página HTML

Detalhes da questão

Endereço do fórum: http://online-winxclub.com
Versão do fórum: phpBB3

Descrição

Olá! Muito boa noite!

Gostaria que me ajudassem a centralizar e colocar um texto no sitio como estará exemplificado na imagem, com HTML.
https://1.bp.blogspot.com/-Wg2_ZcC_Ae4/XlMGGGpgmmI/AAAAAAAAMDA/ZXw_1bxpLfgdhBdAwsPF6QbQ8jTPtNCJwCLcBGAsYHQ/s1600/Fun%2BZone.png

Esta é a imagem que serve de base para o texto que queria adicionar.

"Fun Zone" - Arial Black
"Welcome to the Fun Zone! Click on the sections below to check out our exciting Winx Club exclusives!" - Arial
"Music" (com hiperligação para /pid=1)
"Videos" (com hiperligação para /pid=2)
"Comics" (com hiperligação para /pid=3)
"Wallpapers" (com hiperligação para /pid=4)

A ideia seria o resultado final ficar assim:
https://1.bp.blogspot.com/-sIbmmGNrOR4/XlMGGB4oEoI/AAAAAAAAMDE/R0i69c0MC-QmTNHXlpGvoFKalo1r1QxAwCLcBGAsYHQ/s1600/imagem%2Ba%2Bexemplificar.png

Planeio colocar numa página de HTML em branco. Eu realmente não sei como centralizar o texto nos locais pedidos com a página em branco em HTML então se pudessem ajudar, ficaria muito agradecido.

Olá @Juleic1123,

Vou precisar de saber qual o tamanho que deseja para o "widget" - imagem ( altura e largura ) para poder centralizar corretamente!


Aguardo uma resposta sua,
pedxz.

A ideia não era colocar num widget e num portal e sim deixar numa página HTML completamente em branco https://online--winxclub.forumotion.com/h12-fun-zone-html para que depois pudesse incorporar em iframe num blog que eu tenho.

up

Veja se ficou bom:

Código:

<style type="text/css">
#player_magic {
    background: #ffffff url(https://1.bp.blogspot.com/-Wg2_ZcC_Ae4/XlMGGGpgmmI/AAAAAAAAMDA/ZXw_1bxpLfgdhBdAwsPF6QbQ8jTPtNCJwCLcBGAsYHQ/s1600/Fun%2BZone.png);
    width: 450px;
    height: 570px;
    max-width: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}
 
#player_magic .player_title {
    color: #f21c88;
    height: 10px;
    font-size: 1.4em;
    font-family: sans-serif;
    line-height: 50px;
    margin-left: 20px;
}
 
#player_magic .player_status {
    line-height: 50px;
    position: absolute;
    float: left;
    margin: 17px 70px;
}
 
#player_magic .player_status a { 
    color: #d80051;
    font-weight: bolder;
    font-family: sans-serif;
    text-decoration: none;
}
 
#player_magic .player_desc {
    position: relative;
    float: right;
    width: 60%;
    margin-left: 50%;
    margin-top: 30px;
    color: #0396ca;
    font-weight: 300;
    font-family: sans-serif;
    font-size: 12px;
}
</style>
<div id="player_magic">
  <b class="player_title">Fun Zone</b>
  <div class="player_status">
    <p><a href="/pid=1">Music</a></p>
    <p><a href="/pid=2">Videos</a></p>
    <p><a href="/pid=3">Comics</a></p>
    <p><a href="/pid=4">Wallpapers</a></p>
  </div>
  <div class="player_desc">
    Welcome to the Fun Zone. Click on the sections below to check out exciting Winx Club exclusives.
  </div>
</div>

Editei levemente o código e ficou perfeito! https://online--winxclub.forumotion.com/h12-fun-zone-html
Tenho somente um ultimo pedido a fazer. Existe forma de aumentar a hiperligação para ir além de clicar no texto? Eu sei que dá mas não sei exatamente como. A ideia seria a pessoa poder passar o rato por estas áreas e conseguir clicar:


Aqui tem o novo HTML que atualizei para ajudar

Código:

<style type="text/css">
#player_magic {
    background: #ffffff url(https://1.bp.blogspot.com/-Wg2_ZcC_Ae4/XlMGGGpgmmI/AAAAAAAAMDA/ZXw_1bxpLfgdhBdAwsPF6QbQ8jTPtNCJwCLcBGAsYHQ/s1600/Fun%2BZone.png);
    width: 667px;
    height: 845px;
    max-width: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}
 
#player_magic .player_title {
    color: #ff0080;
    height: 22px;
    font-size: 1.59em;
    font-family: Arial Black;
    line-height: 70px;
    margin-left: 20px;
}
 
#player_magic .player_status {
    line-height: 47px;
    position: absolute;
    float: left;
    margin: 30px 100px;
font-size: 0.90em;
}
 
#player_magic .player_status a {
    color: #ff0080;
    line-height: 86px;
    font-weight: bolder;
    font-family: Arial Black;
    text-decoration: none;
}
 
#player_magic .player_desc {
    position: relative;
    float: right;
    width: 60%;
    margin-left: 50%;
    margin-top: 50px;
    color: #004c99;
    font-weight: 300;
    font-family: sans-serif;
    font-size: 12px;
}
</style>
<div id="player_magic">
    <strong class="player_title">Fun Zone</strong>    
 <div class="player_status">
        
 <p>
  <a href="/pid=1">Music</a>  
 </p>
        
 <p>
  <a href="/pid=2">Videos</a>  
 </p>
        
 <p>
  <a href="/pid=3">Comics</a>  
 </p>
        
 <p>
  <a href="/pid=4">Wallpapers</a>  
 </p>
      
 </div>
      
 <div class="player_desc">
      Welcome to the Fun Zone. Click on the sections below to check out exciting Winx Club exclusives.    
 </div>
</div>

Altere para:

Código:


<style type="text/css">
#player_magic {
    background: #ffffff url(https://1.bp.blogspot.com/-Wg2_ZcC_Ae4/XlMGGGpgmmI/AAAAAAAAMDA/ZXw_1bxpLfgdhBdAwsPF6QbQ8jTPtNCJwCLcBGAsYHQ/s1600/Fun%2BZone.png);
    width: 667px;
    height: 845px;
    max-width: 100%;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}
 
#player_magic .player_title {
    color: #ff0080;
    height: 22px;
    font-size: 1.59em;
    font-family: Arial Black;
    line-height: 70px;
    margin-left: 20px;
}
 
#player_magic .player_status {
    line-height: 47px;
    position: absolute;
    float: left;
    margin: 30px 40px;
font-size: 0.90em;
}
 
#player_magic .player_status a {
    color: #ff0080;
    line-height: 86px;
    font-weight: bolder;
    font-family: Arial Black;
    text-decoration: none;
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
#player_magic .player_desc {
    position: relative;
    float: right;
    width: 60%;
    margin-left: 50%;
    margin-top: 50px;
    color: #004c99;
    font-weight: 300;
    font-family: sans-serif;
    font-size: 12px;
}
</style><div id="player_magic">
    <strong class="player_title">Fun Zone</strong>   
 <div class="player_status">
       
 <p>
  <a href="/pid=1">Music</a> 
 </p>
       
 <p>
  <a href="/pid=2">Videos</a> 
 </p>
       
 <p>
  <a href="/pid=3">Comics</a> 
 </p>
       
 <p>
  <a href="/pid=4">Wallpapers</a> 
 </p>
     
 </div>
     
 <div class="player_desc">
      Welcome to the Fun Zone. Click on the sections below to check out exciting Winx Club exclusives.   
 </div>
</div>

Perfeito! Tudo na perfeição! Tenho somente um último pedido que me apareceu, desculpe >-<
A página é responsiva no telemóvel/celular no link original, mas quando coloco em iframe deixa de ficar. Sei que provavelmente é do iframe, visto que isto não ocorre na link de origem, existe forma de arrumar o código do iframe de forma a que fique direito, ou isto é causado por outro problema?

https://online--winxclub.forumotion.com/h28-games-es-html
https://codelyokoseason5.blogspot.com/2020/02/blog-post.html

Código:

<iframe style="width: 190%; height: 846px;" src="https://online--winxclub.forumotion.com/h28-games-es-html" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0"></iframe>

Edit: Reparei num pequeno problema. Por algum motivo o código não aceita palavras com acentos e caracteres especiais. Existe forma de arranjar?

juleic1123 escreveu:A página é responsiva no telemóvel/celular no link original, mas quando coloco em iframe deixa de ficar. Sei que provavelmente é do iframe, visto que isto não ocorre na link de origem, existe forma de arrumar o código do iframe de forma a que fique direito, ou isto é causado por outro problema?

https://online--winxclub.forumotion.com/h28-games-es-html
https://codelyokoseason5.blogspot.com/2020/02/blog-post.html

Código:

<iframe style="width: 190%; height: 846px;" src="https://online--winxclub.forumotion.com/h28-games-es-html" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0"></iframe>

O que você quer dizer com "responsivo"?

juleic1123 escreveu:Edit: Reparei num pequeno problema. Por algum motivo o código não aceita palavras com acentos e caracteres especiais. Existe forma de arranjar?

Falta na página HTML esse trecho de código: charset=UTF-8

Algo como este trecho tirado do meu site:

Código:

<meta content="text/html; charset=UTF-8" http-equiv="content-type" />

Esse UTF=8 é o que faz, por exemplo, um arquivo .txt aceitar/ler/salvar acentuações.

O código infelizmente não funcionou >-< Passa tudo a texto se colocar no meio e no inicio e simplesmente não funciona e permanece com as letras bugadas se colocar no final.

Com responsivo digo que no link original está tudo no sitio e os textos no lugar, porém em iframe ficam todos fora do sítio. Deduzo que isso seja resolvido com iframe e que seja uma questão de adicionar algo ao código, já que no link da página HTML está totalmente bem no meu celular. :S

Altere para:

Código:

<!doctype html>
<html lang="pt-br">
  <head>
      <!-- Required meta tags -->
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
      <style type="text/css">
        #player_magic {
        background: #ffffff url(https://1.bp.blogspot.com/-Wg2_ZcC_Ae4/XlMGGGpgmmI/AAAAAAAAMDA/ZXw_1bxpLfgdhBdAwsPF6QbQ8jTPtNCJwCLcBGAsYHQ/s1600/Fun%2BZone.png);
        width: 667px;
        height: 845px;
        max-width: 100%;
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;
        }
        #player_magic .player_title {
        color: #ff0080;
        height: 22px;
        font-size: 1.59em;
        font-family: Arial Black;
        line-height: 70px;
        margin-left: 20px;
        }
        #player_magic .player_status {
        line-height: 47px;
        position: absolute;
        float: left;
        margin: 30px 40px;
        font-size: 0.90em;
        }
        #player_magic .player_status a {
        color: #ff0080;
        line-height: 86px;
        font-weight: bolder;
        font-family: Arial Black;
        text-decoration: none;
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        }
        #player_magic .player_desc {
        position: relative;
        float: right;
        width: 60%;
        margin-left: 50%;
        margin-top: 50px;
        color: #004c99;
        font-weight: 300;
        font-family: sans-serif;
        font-size: 12px;
        }
        @media (max-width: 350px) {
        #player_magic .player_title {
        line-height: 28px;
        font-size: 1.2em;
        }
        #player_magic .player_status {
        margin: 0px -24px;
        }
        #player_magic .player_status a {
        line-height: 35px;
        font-size: .75rem;
        }
        }
        @media (width: 425px) {
        #player_magic .player_title {
        line-height: 48px;
        font-size: 1.2em;
        }
        #player_magic .player_status {
        margin: 0px -5px;
        }
        #player_magic .player_status a {
        line-height: 50px;
        font-size: .75rem;
        }
        }
        @media (width: 375px) {
        #player_magic .player_title {
        line-height: 48px;
        font-size: 1.2em;
        }
        #player_magic .player_status {
        margin: 0 -20px;
        }
        #player_magic .player_status a {
        line-height: 33px;
        font-size: .75rem;
        }
        }
        @media (width: 768px) {
        #player_magic .player_title {
        line-height: 48px;
        font-size: 1.2em;
        }
        #player_magic .player_status {
        margin: 0 40px;
        }
        #player_magic .player_status a {
        line-height: 95px;
        font-size: .75rem;
        }
        }
      </style>
  </head>
  <body>
      <div id="player_magic">
        <strong class="player_title">Fun Zone</strong>   
        <div class="player_status">
            <p>
              <a href="/pid=1">Music</a> 
            </p>
            <p>
              <a href="/pid=2">Videos</a> 
            </p>
            <p>
              <a href="/pid=3">Comics</a> 
            </p>
            <p>
              <a href="/pid=4">éallpapers</a> 
            </p>
        </div>
        <div class="player_desc">
            Welcome to the Fun Zone. Click on the sections below to check out exciting Winx Club exclusives.   
        </div>
      </div>
  </body>
</html>

E diga-me se falta "transformar" mais alguma coisa em "responsivo"

Perfeito, muito, mas muito obrigado pela ajuda!

Questão resolvida Esta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área.