Simplificação de código HTML

Detalhes da questão

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

Descrição

Boa tarde a todos,
Queria saber se era possível simplificar este código HTML de forma a que tudo fique igual visualmente, mas que eu possa manualmente mexer no local de cada texto, colocar mais para o lado, para cima, etc...

Código:

<!--                   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/-efOIKXqcVLE/XlyJFUwzAFI/AAAAAAAAMEk/aOob1e2VymEAK9Z-vYfShoZuogcSCkbqgCLcBGAsYHQ/s1600/Boarder%2Bsynopsis.png);
        width: 667px;
        height: 845px;
        max-width: 100%;
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;
        }
body {
    text-align: justify!important;
}
        #player_magic .player_title {
        color: #ff0080;
        height: 22px;
        font-size: 1.59em;
        font-family: Arial;
        line-height: 70px;
        margin-left: 20px;
        }
 
        #player_magic .player_status {
        line-height: 47px;
        position: absolute;
        float: left;
        margin: 27px 2px;
        font-size: 0.90em;
        }
.player_desc a strong {
    color: black!important;
}
#player_magic .player_status a {
    color: #ff1c7f;
    line-height: 10px;
    font-weight: bolder;
    font-family: Arial;
    text-decoration: none;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#player_magic .player_desc {
    width: 10%;
    margin-left: 505px;
    margin-top: -23px;
    color: #1a222a;
    font-weight: 300;
    font-family: sans-serif;
    font-size: 12px;
}
        #player_magic .player_txt {
        padding: 0 1.2rem;
        display: block;
        position: relative;
        }
        #player_magic .player_tabs ul {
        line-height: 55px;
        }
        #player_magic .player_tabs ul li, #player_magic .player_tabs ul li a {
        display: inline!important;
        }
        #player_magic .player_tabs ul li a {
        color: white!important;
        }
        @media (max-width: 350px) {
        #player_magic .player_title {
        line-height: 28px;
        font-size: 1.2em;
        }
        #player_magic .player_status {
        margin: 15px -20px;
        }
        #player_magic .player_status a {
        line-height: 36px;
        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: 70px;
        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: 40px;
        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: 100px;
        font-size: .75rem;
        }
        }
      </style>  
<div id="player_magic">
    <strong class="player_title">HISTÓRIA</strong>      
 <div class="player_status">
          
 <p>
                   <a href="https://online--winxclub.forumotion.com/h21-story-pt-html">  Sumário   </a>  
 </p>
            
 <div class="player_desc">
            
 <p>
              <a href="https://online--winxclub.forumotion.com/h21-story-pt-html"><strong>VOLTAR</strong></a>          
 </p>
          
 </div>
            
 <div class="player_tabs">
            
 <ul>
  
 <li>
  <a href="#"><span style="color: #000000;">Temporada 1</span></a>  
 </li>
   <span style="color: #ffffff;">★</span>  
 <li>
  <a href="#">Temporada 2</a>  
 </li>
   <span style="color: #ffffff;">★</span>  
 <li>
  <a href="#">Temporada 3</a>  
 </li>
   <span style="color: #ffffff;">★</span>  
 <li>
  <a href="#">Temporada 4</a>  
 </li>
  
 </ul>
          
 </div>
            
 <div class="player_txt">
          <iframe style="width: 610px; height: 900px;" src="https://winxclubmagazine.forumotion.com/h1-story-s1-pt" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0"></iframe>        
 </div>
      
 </div>
</div>

Originalmente, iria colocar a página do código em iframe, por isso a necessidade de tentar deixar tudo responsívo a dispositivos móveis como telemóvel e tablet, mas já não irei fazer isso e metade do código é inoperável agora e sem sentido.

Se puderem arranjar uma forma de o deixar o mais simples porém visualmente intacto, agradecia <3

Olá @juleic1123,

Fórum inexistente O seu fórum encontra-se inativo ou não existe. Para prosseguirmos com este tópico, pedimos que atualize o link com o de um fórum existente. Caso não o faça em 2 dias, o tópico será movido para a lixeira. Tópico pendente.

Atenciosamente,
pedxz.

Quando criei o tópico, não me deixaram meter o endereço da forumeiros, dava erro, tive que utilizar o antigo domínio. Atualizado

Originalmente, iria colocar a página do código em iframe, por isso a necessidade de tentar deixar tudo responsívo a dispositivos móveis como telemóvel e tablet, mas já não irei fazer isso e metade do código é inoperável agora e sem sentido.

Então, o senhor já não quer que seja responsivo?! Se não use este código:

Código:

<!doctype html>
<html lang="pt">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
      <title>Nossas Histórias</title>
      <style type="text/css">
         .section-history {
         background-image: url(https://1.bp.blogspot.com/-efOIKXqcVLE/XlyJFUwzAFI/AAAAAAAAMEk/aOob1e2VymEAK9Z-vYfShoZuogcSCkbqgCLcBGAsYHQ/s1600/Boarder%2Bsynopsis.png);
         background-repeat: no-repeat;
         position: relative;
         width: 667px;
         height: 845px;
         }
         .section-history a {
         text-decoration: none;
         color: #444;
         }
         .section-history * {
         font-family: arial;
         font-size: 14px;
         }
         .section-history .section-history-header {
         height: 55px;
         line-height: 63px;
         color: #ff0080;
         font-weight: 700;
         text-indent: 17px;
         display: block;
         text-transform: uppercase;
         }
         .section-history .section-history-container{
         margin-left: auto;
         margin-right: auto;
         width: 80%;
         position: relative;
         }
         .section-history .section-history-info {
         top: 51px;
         position: relative;
         }
         .section-history .section-history-info  a[role] {
         float: right;
         margin-right: -28px;
         font-size: 15px;
         }
         .section-history .section-history-nav {
         top: 70px;
         position: relative;
         }
         .section-history .section-history-nav ul {
         list-style: none;
         display: inline-flex;
         }
      </style>
   </head>
   <body>
      <section class="section-history">
         <header class="section-history-header">
            <h2 style="font-size: 22px;">HISTÓRIA</h2>
         </header>
         <div class="section-history-container">
            <div class="section-history-info">
               <a href="https://online--winxclub.forumotion.com/h21-story-pt-html" role="button">Voltar</a>
               <a href="https://online--winxclub.forumotion.com/h21-story-pt-html" style="font-weight: 700;color: #ff1c7f;font-size: 15px;">Sumário</a>
            </div>
            <nav class="section-history-nav">
               <ul>
                  <li>
                     <a href="#"><span style="color: #000000;">Temporada 1</span></a>  
                  </li>
                  <span style="color: #ffffff;padding-left: .75rem;padding-right: .75rem;">★</span>  
                  <li>
                     <a href="#">Temporada 2</a>  
                  </li>
                  <span style="color: #ffffff;padding-left: .75rem;padding-right: .75rem;">★</span>  
                  <li>
                     <a href="#">Temporada 3</a>  
                  </li>
                  <span style="color: #ffffff;padding-left: .75rem;padding-right: .75rem;">★</span>  
                  <li>
                     <a href="#">Temporada 4</a>  
                  </li>
               </ul>
            </nav>
            <div style="position: absolute;top: 150px;width: 100%;"><iframe style="width: 610px; height: 900px;max-width: 100%;" src="https://winxclubmagazine.forumotion.com/h1-story-s1-pt" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0"></iframe></div>
         </div>
      </section>
   </body>
</html>

Olá!

O código resultou, porém existem algumas coisas que não parecem estar a funcionar. Se pudesse arranjar, ficaria agradecido

1. Não consigo mudar o tamanho da letra que diz "Série 1; série 2; série 3; série 4" nem a que diz "Voltar". Fica preso no tamanho atual e queria que ficasse a 11px. :S

2. Queria saber se existe uma forma de caso o texto ocupe a linha toda onde está, supondo que eu crio a "série 5, 6, 7, 8"; se pode haver uma quebra de linha e ir para baixo.

Ex:

3. O iframe está preso perto do centro e não consigo colocar mais para o lado esquerdo, se conseguir agradecia

Trabalhei no que pude com o código e tenho tudo pronto para estas alterações:

Código:

<!doctype html>
<html lang="pt">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
      <title>História</title>
      <style type="text/css">
         .section-history {
         background-image: url(https://1.bp.blogspot.com/-efOIKXqcVLE/XlyJFUwzAFI/AAAAAAAAMEk/aOob1e2VymEAK9Z-vYfShoZuogcSCkbqgCLcBGAsYHQ/s1600/Boarder%2Bsynopsis.png);
         background-repeat: no-repeat;
         position: relative;
         width: 667px;
         height: 845px;
         }
         .section-history a {
         text-decoration: none;
         color: #444;
         }
         .section-history * {
         font-family: arial;
         font-size: 14px;
         }
         .section-history .section-history-header {
         height: 55px;
         line-height: 63px;
         color: #ff0080;
         font-weight: 700;
         text-indent: 17px;
         display: block;
         text-transform: uppercase;
         }
         .section-history .section-history-container{
         margin-left: auto;
         margin-right: auto;
         width: 80%;
         position: relative;
         }
         .section-history .section-history-info {
         top: 52px;
         position: relative;
         }
         .section-history .section-history-info  a[role] {
         float: right;
         margin-right: -28px;
         font-size: 10px;
         }
         .section-history .section-history-nav {
         top: 70px;
         margin-left: -60px;
         position: relative;
         }
         .section-history .section-history-nav ul {
         list-style: none;
         display: inline-flex;
         }
      </style>
   </head>
   <body>
      <section class="section-history">
         <header class="section-history-header">
            <h2 style="font-size: 22px;">HISTÓRIA</h2>
         </header>
         <div class="section-history-container">
            <div class="section-history-info">
               <a href="https://online--winxclub.forumotion.com/h21-story-pt-html" role="button"><span
                    style="color:#0D479D;">Voltar</span></a>

               <a href="https://online--winxclub.forumotion.com/h21-story-pt-html" style="font-weight: 700;color: #ff1c7f;font-size: 15px;">Sumário</a>
            </div>
            <nav class="section-history-nav">
               <ul>
                  <li>
                     <a href="#"><span style="color: #333333;"><span style="font-family: Arial Black;">SÉRIE 1</span></span></a>  
                  </li>
                  <span style="color: #ffffff;padding-left: .75rem;padding-right: .75rem;">★</span>  
                  <li>
                     <a href="#"><span style="color: #ffffff;"><span style="font-family: Arial Black;">SÉRIE 2</span></span></a>  
                  </li>
                  <span style="color: #ffffff;padding-left: .75rem;padding-right: .75rem;">★</span>  
                  <li>
                     <a href="#"><span style="color: #ffffff;"><span style="font-family: Arial Black;">SÉRIE 3</span></span></a>  
                  </li>
                  <span style="color: #ffffff;padding-left: .75rem;padding-right: .75rem;">★</span>  
                  <li>
                     <a href="#"><span style="color: #ffffff;"><span style="font-family: Arial Black;">SÉRIE 4</span></span></a>  
                  </li>
               </ul>
            </nav>
            <div style="position: absolute;top: 150px;width: 170%;"><iframe style="width: 650px; height: 900px;max-width: 100%;" src="https://winxclubmagazine.forumotion.com/h1-story-s1-pt" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0"></iframe></div>
         </div>
      </section>
   </body>
</html>

Página: https://online--winxclub.forumotion.com/h70-summary-pt-html

Altere para:

Código:

<!doctype html>
<html lang="pt">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
      <title>História</title>
      <style type="text/css">
         .section-history {
         background-image: url(https://1.bp.blogspot.com/-efOIKXqcVLE/XlyJFUwzAFI/AAAAAAAAMEk/aOob1e2VymEAK9Z-vYfShoZuogcSCkbqgCLcBGAsYHQ/s1600/Boarder%2Bsynopsis.png);
         background-repeat: no-repeat;
         position: relative;
         width: 667px;
         height: 845px;
         }
         .section-history a {
         text-decoration: none;
         color: #444;
         }
         .section-history * {
         font-family: arial;
         font-size: 11px;
         }
         .section-history .section-history-header {
         height: 55px;
         line-height: 63px;
         color: #ff0080;
         font-weight: 700;
         text-indent: 17px;
         display: block;
         text-transform: uppercase;
         }
         .section-history .section-history-container {
         margin-left: auto;
         margin-right: auto;
         width: 80%;
         position: relative;
         }
         .section-history .section-history-info {
         top: 52px;
         position: relative;
         }
         .section-history .section-history-info  a[role] {
         float: right;
         margin-right: -25px;
         margin-top: 3px;
         }
         .section-history .section-history-nav {
         top: 77px;
         width: 100%;
         position: relative;
         background-color: #ff679a;
         background-clip: content-box;
         height: auto;
         min-height: 28px;
         line-height: 28px;
         }
         .section-history-nav::before {
         content: '';
         display: block;
         position: absolute;
         left: -46px;
         background-color: #ff679a;
         width: 46px;
         bottom: 0;
         border-top-left-radius: 11px;
         border-bottom-left-radius: 11px;
         top: 0;
         }
         .section-history-nav::after {
         content: '';
         display: block;
         position: absolute;
         right: -46px;
         background-color: #ff679a;
         width: 46px;
         bottom: 0;
         border-top-right-radius: 11px;
         border-bottom-right-radius: 11px;
         top: 0;
         }
         .section-history .section-history-nav ul {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         -webkit-box-orient: horizontal;
         -webkit-box-direction: normal;
         -ms-flex-flow: row wrap;
         flex-flow: row wrap;
         -ms-flex-pack: distribute;
         justify-content: space-around;
         padding: 0;
         margin: 0;
         list-style: none;
         }
         .section-history .section-history-nav ul li a {
         font-family: Arial Black;
         color: #ffffff;
         }
         .section-history .section-history-nav ul li {
         width: 13%;
         text-align: center;
         padding: 4px;
         }
      </style>
   </head>
   <body>
      <section class="section-history">
         <header class="section-history-header">
            <h2 style="font-size: 22px;">HISTÓRIA</h2>
         </header>
         <div class="section-history-container">
            <div class="section-history-info">
               <a href="https://online--winxclub.forumotion.com/h21-story-pt-html" role="button"><span
                  style="color:#0D479D;">Voltar</span></a>
               <a href="https://online--winxclub.forumotion.com/h21-story-pt-html" style="font-weight: 700;color: #ff1c7f;font-size: 15px;">Sumário</a>
            </div>
            <nav class="section-history-nav">
               <ul>
                  <li>
                     <a href="#" style="color: #333333;">SÉRIE 1</a>  
                  </li>
                  <li>
                     <a href="#">SÉRIE 2</a>  
                  </li>
                  <li>
                     <a href="#">SÉRIE 3</a>  
                  </li>
                  <li>
                     <a href="#">SÉRIE 4</a>  
                  </li>
               </ul>
            </nav>
            <div style="position: relative; top: 85px;width: 100%;"><iframe style="width: 650px; height: 900px;max-width: 100%;" src="https://winxclubmagazine.forumotion.com/h1-story-s1-pt" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0"></iframe></div>
         </div>
      </section>
   </body>
</html>

Quase perfeito, só duas coisinhas
As estrelas que estão em falta e o espaço gigantesco entre as séries, a ideia é ficar juntinho.

Tentei ver se conseguia mexer no código e arranjar eu para não chatear mais mas estou deixando tudo desordenado então acho melhor pedir ajuda kkk

EDIT:


E reparei agora que o iframe contínua estagnado no mesmo sítio no lado esquerdo, eu queria puder mexer mais para o lado, ficando mais ao menos assim:

Altere para:

Código:


<!doctype html>
<html lang="pt">
  <head>
      <!-- Required meta tags -->
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
      <title>História</title>
      <style type="text/css">
        .section-history {
        background-image: url(https://1.bp.blogspot.com/-efOIKXqcVLE/XlyJFUwzAFI/AAAAAAAAMEk/aOob1e2VymEAK9Z-vYfShoZuogcSCkbqgCLcBGAsYHQ/s1600/Boarder%2Bsynopsis.png);
        background-repeat: no-repeat;
        position: relative;
        width: 667px;
        height: 845px;
        }
        .section-history a {
        text-decoration: none;
        color: #444;
        }
        .section-history * {
        font-family: arial;
        font-size: 11px;
        }
        .section-history .section-history-header {
        height: 55px;
        line-height: 63px;
        color: #ff0080;
        font-weight: 700;
        text-indent: 17px;
        display: block;
        text-transform: uppercase;
        }
        .section-history .section-history-container {
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        position: relative;
        }
        .section-history .section-history-info {
        top: 52px;
        position: relative;
        }
        .section-history .section-history-info  a[role] {
        float: right;
        margin-right: -25px;
        margin-top: 3px;
        }
        .section-history .section-history-nav {
        top: 77px;
        width: 100%;
        position: relative;
        background-color: #ff679a;
        background-clip: content-box;
        height: auto;
        min-height: 28px;
        line-height: 28px;
        }
        .section-history-nav::before {
        content: '';
        display: block;
        position: absolute;
        left: -46px;
        background-color: #ff679a;
        width: 46px;
        bottom: 0;
        border-top-left-radius: 11px;
        border-bottom-left-radius: 11px;
        top: 0;
        }
        .section-history-nav::after {
        content: '';
        display: block;
        position: absolute;
        right: -46px;
        background-color: #ff679a;
        width: 46px;
        bottom: 0;
        border-top-right-radius: 11px;
        border-bottom-right-radius: 11px;
        top: 0;
        }
        .section-history .section-history-nav ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -ms-flex-pack: distribute;
        justify-content: flex-start;
        padding: 0;
        margin: 0;
        list-style: none;
        }
        .section-history .section-history-nav ul li a {
        font-family: Arial Black;
        color: #ffffff;
        }
        .section-history .section-history-nav ul li {
        width: 13%;
        text-align: center;
        padding: 4px;
        }
        .section-history .section-history-nav ul li:not(:last-child)::after {
        content: '★';
        color: #fff;
        margin-left: 12px;
        }
      </style>
  </head>
  <body>
      <section class="section-history">
        <header class="section-history-header">
            <h2 style="font-size: 22px;">HISTÓRIA</h2>
        </header>
        <div class="section-history-container">
            <div class="section-history-info">
              <a href="https://online--winxclub.forumotion.com/h21-story-pt-html" role="button"><span
                  style="color:#0D479D;">Voltar</span></a>
              <a href="https://online--winxclub.forumotion.com/h21-story-pt-html" style="font-weight: 700;color: #ff1c7f;font-size: 15px;">Sumário</a>
            </div>
            <nav class="section-history-nav">
              <ul>
                  <li>
                    <a href="#" style="color: #333333;">SÉRIE 1</a> 
                  </li>
                  <li>
                    <a href="#">SÉRIE 2</a> 
                  </li>
                  <li>
                    <a href="#">SÉRIE 3</a> 
                  </li>
                  <li>
                    <a href="#">SÉRIE 4</a> 
                  </li>
              </ul>
            </nav>
            <div style="position: relative; top: 85px;width: 100%; margin-left: -45px;"><iframe style="width: 650px; height: 900px;max-width: 100%;" src="https://winxclubmagazine.forumotion.com/h1-story-s1-pt" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0"></iframe></div>
        </div>
      </section>
  </body>
</html>

Olá!

Quase, QUASE perfeito! Tinha ainda uns errinhos no código que me deu que eu consegui arrumar sozinho e está quase tudo perfeito, porém, quando tentei mover o texto "série 1", "série 2" etc mais para o lado, um pouco do texto foi comido pela barrinha cor de rosa, há como arrumar? Tirando isso, fica perfeito!

Coloco aqui o novo código:

Código:

         
 
<!doctype html>
<html lang="pt">
  <head>
      <!-- Required meta tags -->
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
      <title>História</title>
      <style type="text/css">
        .section-history {
        background-image: url(https://1.bp.blogspot.com/-efOIKXqcVLE/XlyJFUwzAFI/AAAAAAAAMEk/aOob1e2VymEAK9Z-vYfShoZuogcSCkbqgCLcBGAsYHQ/s1600/Boarder%2Bsynopsis.png);
        background-repeat: no-repeat;
        position: relative;
        width: 667px;
        height: 845px;
        }
        .section-history a {
        text-decoration: none;
        color: #444;
        }
        .section-history * {
        font-family: arial;
        font-size: 11px;
        }
        .section-history .section-history-header {
        height: 55px;
        line-height: 63px;
        color: #ff0080;
        font-weight: 700;
        text-indent: 17px;
        display: block;
        text-transform: uppercase;
        }
        .section-history .section-history-container {
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        position: relative;
        }
        .section-history .section-history-info {
        top: 52px;
        position: relative;
        }
        .section-history .section-history-info  a[role] {
        float: right;
        margin-right: -25px;
        margin-top: 3px;
        }
        .section-history .section-history-nav {
        top: 77px;
        width: 100%;
        position: relative;
        background-color: #ff679a;
        background-clip: content-box;
        height: auto;
        min-height: 28px;
        line-height: 28px;
        }
        .section-history-nav::before {
        content: '';
        display: block;
        position: absolute;
        left: -46px;
        background-color: #ff679a;
        width: 46px;
        bottom: 0;
        border-top-left-radius: 11px;
        border-bottom-left-radius: 11px;
        top: 0;
        }
        .section-history-nav::after {
        content: '';
        display: block;
        position: absolute;
        right: -46px;
        background-color: #ff679a;
        width: 46px;
        bottom: 0;
        border-top-right-radius: 11px;
        border-bottom-right-radius: 11px;
        top: 0;
        }
        .section-history .section-history-nav ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -ms-flex-pack: distribute;
        justify-content: flex-start;
        padding: 0;
        margin: 0;
        list-style: none;
        }
        .section-history .section-history-nav ul li a {
        font-family: Arial Black;
        color: #ffffff;
        }
        .section-history .section-history-nav ul li {
        width: 15%;
        text-align: center;
        margin-left: -10px;
        padding: 0px;
        }
        .section-history .section-history-nav ul li:not(:last-child)::after {
        content: '★';
        color: #fff;
        margin-left: 12px;
        }
      </style>
  </head>
  <body>
      <section class="section-history">
        <header class="section-history-header">
            <h2 style="font-size: 22px;">HISTÓRIA</h2>
        </header>
        <div class="section-history-container">
            <div class="section-history-info">
              <a href="https://online--winxclub.forumotion.com/h21-story-pt-html" role="button"><span
                  style="color:#0D479D;">Voltar</span></a>
              <a href="https://online--winxclub.forumotion.com/h21-story-pt-html" style="font-weight: 700;color: #ff1c7f;font-size: 15px;">Sumário</a>
            </div>
            <nav class="section-history-nav">
              <ul>
                  <li>
                    <a href="#" style="color: #333333;">SÉRIE 1</a>
                  </li>
                  <li>
                    <a href="#">SÉRIE 2</a>
                  </li>
                  <li>
                    <a href="#">SÉRIE 3</a>
                  </li>
                  <li>
                    <a href="#">SÉRIE 4</a>
                  </li>
              </ul>
            </nav>
            <div style="position: relative; top: 95px;width: 100%; margin-left: -35px;"><iframe style="width: 850px; height: 900px;max-width: 110%;" src="https://winxclubmagazine.forumotion.com/h1-story-s1-pt" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0"></iframe></div>
        </div>
      </section>
  </body>
</html>

EDIT: Quando tento mudar mais alguma coisa, tudo desaparece, só fica a imagem png que serve de base, sabe porquê?

@juleic1123: Uma dica importante! Ao editar uma página HTML não use o modo simples (), use sempre o modo avançado (). O primeiro modo vai desformatar a página e criar "problemas". Recomendo que o senhor volte a alterar o código da página usando nesta vez o modo avançado

pedxz escreveu:

pedxz escreveu:@juleic1123: Uma dica importante! Ao editar uma página HTML não use o modo simples (), use sempre o modo avançado (). O primeiro modo vai desformatar a página e criar "problemas". Recomendo que o senhor volte a alterar o código da página usando nesta vez o modo avançado

Já está! Assim resulta na perfeição! Infelizmente, ainda não consegui arrumar o problema da primeira "série" ficar com a letra comida quando tento colocar mais para a esquerda, consegue arrumar rapidinho? É a última coisa que me falta

Como provavelmente o senhor já editou a sua página, vou dar alguns passos a seguir para arrumar esse problema

Encontre:

Código:

height: 845px;

e altere para

Código:

height: 845px;
z-index: 1;

Encontre (são dois):

Código:

top: 0;

altere para

Código:

top: 0;
z-index: -1;

Perfeito!

Muito obrigado pelo tempo perdido comigo que foi muito

Continuação de um ótimo trabalho!

Feliz Natal e Próspero Ano de 2021!

Tópico resolvido Movido para "Questões resolvidas".

Detalhes da questão

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

Descrição

Muito boa noite,

Este tópico é da mesma temática que o anterior que eu fiz, em que o usuário @pedxz me ajudou bastante!

Estava a criar uma segunda página agora usando o código dele, quando me deparei com um erro na linhagem do texto. O texto, invés de ficar alinhado, fica assim:


Quando o que eu pretendia era que ficasse assim:


Existe uma forma de corrigir?
Aqui está o código HTML:

Código:

<!doctype html>
<html lang="en">
  <head>
      <!-- Required meta tags -->
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
      <title>História</title>
      <style type="text/css">
        .section-history {
        background-image: url(https://1.bp.blogspot.com/-BdXDMDOPbGI/X95pd1kMUXI/AAAAAAAAMI4/T0REBGCOXdIPdfVOc60KR4KIkS3uAGmJACLcBGAsYHQ/s845/gardenia%2Bok1.png);
        background-repeat: no-repeat;
        position: relative;
        width: 667px;
        height: 845px;
           z-index: 1;
        }
        .section-history a {
        text-decoration: none;
        color: #444;
        }
        .section-history * {
        font-family: arial;
        font-size: 11px;
        }
        .section-history .section-history-header {
        height: 55px;
        line-height: 63px;
        color: #ff0080;
        font-weight: 700;
        text-indent: 17px;
        display: block;
        text-transform: uppercase;
        }
        .section-history .section-history-container {
        margin-left: auto;
        margin-right: auto;
        width: 80%;
        position: relative;
        }
        .section-history .section-history-info {
        top: 52px;
        position: relative;
        }
        .section-history .section-history-info  a[role] {
        float: right;
        margin-right: -22px;
        margin-top: 3px;
        }
        .section-history .section-history-nav {
        top: 77px;
        width: 100%;
        position: relative;
        background-color: #ff679a;
        background-clip: content-box;
        height: auto;
        min-height: 28px;
        line-height: 28px;
        }
        .section-history-nav::before {
        content: '';
        display: block;
        position: absolute;
        left: -46px;
        background-color: #ff679a;
        width: 46px;
        bottom: 0;
        border-top-left-radius: 11px;
        border-bottom-left-radius: 11px;
        top: 0;
          z-index: -1;
        }
        .section-history-nav::after {
        content: '';
        display: block;
        position: absolute;
        right: -46px;
        background-color: #ff679a;
        width: 46px;
        bottom: 0;
        border-top-right-radius: 11px;
        border-bottom-right-radius: 11px;
        top: 0;
          z-index: -1;
        }
        .section-history .section-history-nav ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -ms-flex-pack: distribute;
        justify-content: flex-start;
        padding: 0;
        margin: 0;
        list-style: none;
        }
        .section-history .section-history-nav ul li a {
        font-family: Arial Black;
        color: #ffffff;
        }
        .section-history .section-history-nav ul li {
        width: 50%;
        text-align: left;
        margin-left: -30px;
        padding: 0px;
        }
        .section-history .section-history-nav ul li:not(:last-child)::after {
        content: '★';
        color: #FFC7E2;
        margin-left: 2px;
        }
      </style>
  </head>
  <body>
      <section class="section-history">
        <header class="section-history-header">
            <h2 style="font-size: 22px;">Story</h2>
        </header>
        <div class="section-history-container">
            <div class="section-history-info">
              <a href="https://online--winxclub.forumotion.com/h16-story-html" role="button"><span
                style="color:#333333;"><b>Back</b></span></a>
              <a href="https://online--winxclub.forumotion.com/h21-story-pt-html" style="font-weight: 700;color: #ff1c7f;font-size: 15px;">World Locations</a>
            </div>
            <nav class="section-history-nav">
              <ul>
                  <li>
                    <a href="#" style="color: #333333;">Gardenia</a>
                  </li>
                  <li>
                    <a href="#">Alfea</a>
                  </li>
                  <li>
                    <a href="#" >Red Fountain</a>
                  </li>
                  <li>
                    <a href="#">Cloud Tower</a>
                  </li>
                 <li>
                    <a href="#">Lake of the Fortress of Light</a>
                  </li>
                 <li>
                    <a href="#">Black Mud Swamp</a>
                  </li>
                <li>
                    <a href="#">Downland</a>
                  </li>
                  <li>
                    <a href="#">Pixie's Village</a>
                  </li>
                  <li>
                    <a href="#">Domino</a>
                  </li>
                  <li>
                    <a href="#">Frutti Music Bar</a>
                  </li>
              </ul>
            </nav>
            <div class="player_txt">
                     <iframe style="width: 820px; height: 700px;" src="https://winxclubmagazine.forumotion.com/h10-gardenia" marginwidth="290" marginheight="135" scrolling="yes" frameborder="0"></iframe>          
      </div>

Muito obrigado desde já!  

(Tópicos unidos)

Altere a página para:

Código:

        <!doctype html>
        <html lang="en">
          <head>
              <!-- Required meta tags -->
              <meta charset="utf-8" />
              <meta name="viewport" content="width=device-width, initial-scale=1" />
              <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
              <title>História</title>
              <style type="text/css">
                .section-history {
                background-image: url(https://1.bp.blogspot.com/-BdXDMDOPbGI/X95pd1kMUXI/AAAAAAAAMI4/T0REBGCOXdIPdfVOc60KR4KIkS3uAGmJACLcBGAsYHQ/s845/gardenia%2Bok1.png);
                background-repeat: no-repeat;
                position: relative;
                width: 667px;
                height: 845px;
                  z-index: 1;
                }
                .section-history a {
                text-decoration: none;
                color: #444;
                }
                .section-history * {
                font-family: arial;
                font-size: 11px;
                }
                .section-history .section-history-header {
                height: 55px;
                line-height: 63px;
                color: #ff0080;
                font-weight: 700;
                text-indent: 17px;
                display: block;
                text-transform: uppercase;
                }
                .section-history .section-history-container {
                margin-left: auto;
                margin-right: auto;
                width: 80%;
                position: relative;
                }
                .section-history .section-history-info {
                top: 52px;
                position: relative;
                }
                .section-history .section-history-info  a[role] {
                float: right;
                margin-right: -22px;
                margin-top: 3px;
                }
                .section-history .section-history-nav {
                top: 77px;
                width: 100%;
                position: relative;
                background-color: #ff679a;
                background-clip: content-box;
                height: auto;
                min-height: 28px;
                line-height: 28px;
                }
                .section-history-nav::before {
                content: '';
                display: block;
                position: absolute;
                left: -46px;
                background-color: #ff679a;
                width: 46px;
                bottom: 0;
                border-top-left-radius: 11px;
                border-bottom-left-radius: 11px;
                top: 0;
                  z-index: -1;
                }
                .section-history-nav::after {
                content: '';
                display: block;
                position: absolute;
                right: -46px;
                background-color: #ff679a;
                width: 46px;
                bottom: 0;
                border-top-right-radius: 11px;
                border-bottom-right-radius: 11px;
                top: 0;
                  z-index: -1;
                }
                .section-history .section-history-nav ul {
                padding: 0;
                margin: 0;
                list-style: none;
                margin-left: -30px;
                margin-right: -30px;
                }
                .section-history .section-history-nav ul li a {
                font-family: Arial Black;
                color: #ffffff;
                word-break: break-word;
                }
                .section-history .section-history-nav ul li {
                display: inline-flex;
                width: auto;
                text-align: left;
                padding: 0;
                }
                .section-history .section-history-nav ul li:not(:last-child)::after {
                content: '★';
                color: #FFC7E2;
                margin-left: 2px;
                }
              </style>
          </head>
          <body>
              <section class="section-history">
                <header class="section-history-header">
                    <h2 style="font-size: 22px;">Story</h2>
                </header>
                <div class="section-history-container">
                    <div class="section-history-info">
                      <a href="https://online--winxclub.forumotion.com/h16-story-html" role="button"><span
                        style="color:#333333;"><b>Back</b></span></a>
                      <a href="https://online--winxclub.forumotion.com/h21-story-pt-html" style="font-weight: 700;color: #ff1c7f;font-size: 15px;">World Locations</a>
                    </div>
                    <nav class="section-history-nav">
                      <ul>
                          <li>
                            <a href="#" style="color: #333333;">Gardenia</a>
                          </li>
                          <li>
                            <a href="#">Alfea</a>
                          </li>
                          <li>
                            <a href="#" >Red Fountain</a>
                          </li>
                          <li>
                            <a href="#">Cloud Tower</a>
                          </li>
                        <li>
                            <a href="#">Lake of the Fortress of Light</a>
                          </li>
                        <li>
                            <a href="#">Black Mud Swamp</a>
                          </li>
                        <li>
                            <a href="#">Downland</a>
                          </li>
                          <li>
                            <a href="#">Pixie's Village</a>
                          </li>
                          <li>
                            <a href="#">Domino</a>
                          </li>
                          <li>
                            <a href="#">Frutti Music Bar</a>
                          </li>
                      </ul>
                    </nav>
                    <div class="player_txt">
                            <iframe style="width: 820px; height: 700px;" src="https://winxclubmagazine.forumotion.com/h10-gardenia" marginwidth="290" marginheight="135" scrolling="yes" frameborder="0"></iframe>         
              </div>

Olá!

Está muito bom! Mas existe uma forma de deixar um pouco mais junto? De forma a que a barra cor-de-rosa não ocupe tanto espaço? Obrigado <3

Mas existe uma forma de deixar um pouco mais junto?

A única forma que eu vejo para diminuir o menu (barra cor-de-rosa) é criar uma barra de rolagem horizontal (scroll)

pedxz escreveu:

Mas existe uma forma de deixar um pouco mais junto?

A única forma que eu vejo para diminuir o menu (barra cor-de-rosa) é criar uma barra de rolagem horizontal (scroll)

Não existe mesmo outra forma? No código que eu entreguei dava mexendo no

Código:

width: 50%;
        text-align: left;
        margin-left: -30px;
        padding: 0px;[quote][/quote]

Só que pronto, bugava. É que a barrinha cor de rosa é idealmente feita para ficar pequenina, a ideia é a pessoa poder escolher mas não ocupar demasiado espaço. Se desse para o texto na parte de baixo ficar mais para cima de alguma forma que não scroll, ficaria muito agradecido

Caso contrário, acho que o tópico fica resolvido, porque a solução apresentada já arrumou o maior problema

Dá para aumentar um pouquinho mais, localize:

Código:

margin-left: -30px;
margin-right: -30px;

e altere para

Código:

margin-left: -40px;
margin-right: -40px;

Mas é o máximo

Funcionou, está absolutamente perfeito! Muito obrigado!