Texto em tabela Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o temaVoltar para a ficha do tema

Texto em tabela

2 participantes

Ir para baixo

Tópico resolvido Texto em tabela

Mensagem por juleic1123 26.12.20 21:15

Detalhes da questão


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

Descrição


Boa noite a todos! Muito feliz

Estou atualmente a trabalhar numa página HTML e estou tendo alguma dificuldade a colocar um texto alinhado numa tabela, se alguém me pudesse ajudar, ficaria agradecido. Louco

A ideia era ficar assim:
Texto em tabela Tabela10


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/-UBTNPF8Vgvc/X-eXs9DuFqI/AAAAAAAAMNA/xkd_CZyFWw83miUx0eFHXXb1B3jYgilHgCLcBGAsYHQ/s16000/bloom%2Bcat1.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: 82px;
                width: 100%;
                position: relative;
                background-color: #ff679a;
                background-clip: content-box;
                height: auto;
                min-height: 32px;
                line-height: 24px;
                }
                .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: -35px;
                margin-right: -50px;
                }
                .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;">Characters</a>
                    </div>
                    <nav class="section-history-nav">
                      <ul>
                          <li>
                            <a href="#" style="color: #333333;">Bloom</a>
                          </li>
                          <li>
                            <a href="#">Stella</a>
                          </li>
                          <li>
                            <a href="#">Flora</a>
                          </li>
                          <li>
                            <a href="#">Layla</a>
                          </li>
                    <li>
                            <a href="#">Tecna</a>
                          </li>
                        <li>
                            <a href="#">Musa</a>
                          </li>
                        <li>
                            <a href="#">Roxy</a>
                          </li>
                           
                      </ul>
                    </nav>
                    <div class="player_txt">
                            <iframe style="width: 840px; height: 700px;" src="https://winxclubmagazine.forumotion.com/h23-bloom" marginwidth="287" marginheight="115" scrolling="yes" frameborder="0"></iframe>       
              </div>
                 
                  <table width="259" border="0" cellspacing="0" cellpadding="0">
            <tbody><tr>
                CURIOSITIES
            </tr>
            <tr>
               <td height="18" align="left">
               <div class="characterCuriosityLight">
               <div>favourite food : pizza</div>
               </div><div class="characterCuriosityDark">
               <div>favourite colour : red</div>
               </div><div class="characterCuriosityLight">
               <div>favourite hobby : reading books about spells!</div>
               </div><div class="characterCuriosityDark">
               <div>favourite pet : my little Kiko</div>
               </div><div class="characterCuriosityLight">
               <div>ideal boyfriend : Sky!</div>
               </div><div class="characterCuriosityDark">
               <div>best friends : Stella and...Sky!</div>
               </div><div class="characterCuriosityLight">
               <div>favourite movies : Romantic comedies</div>
               </div><div class="characterCuriosityDark">
               <div>I love : playing with Kiko</div>
               </div><div class="characterCuriosityLight">
               <div>I hate : tidying my bedroom...</div>
               </div><div class="characterCuriosityDark">
               <div>favourite music : pop</div>
               </div><div class="characterCuriosityLight">
               <div>favourite shoes : comfortable, but stylish too!!</div>
               </div><div class="characterCuriosityDark">
               <div>favourite subject : potionology</div>
               </div><div class="characterCuriosityLight">
               <div>favourite spell : Dragon's Flame</div>
               </div>
               </td>
                                 
            </tr>
            <tr>
               <td height="18" style="background-image: url(https://1.bp.blogspot.com/-LM0CJVpSOQ0/X-arXM87RrI/AAAAAAAAMMM/VQn0PIcidPAhTx-NYS6l1eG4Q9MOeV_OACLcBGAsYHQ/s259/curiosities_list_bottom.png); background-repeat: no-repeat; background-position: center;">&nbsp;</td>
            </tr>
         </tbody></table>

Link da página: https://online--winxclub.forumotion.com/h87-character-bloom
juleic1123
juleic1123
Membro

Membro desde : 04/05/2011
Mensagens : 670
Pontos : 934

http://www.online-winxclub.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Texto em tabela

Mensagem por tikky 28.12.20 13:57

Olá @juleic1123,

Altere o seu código 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/-UBTNPF8Vgvc/X-eXs9DuFqI/AAAAAAAAMNA/xkd_CZyFWw83miUx0eFHXXb1B3jYgilHgCLcBGAsYHQ/s16000/bloom%2Bcat1.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: 82px;
                        width: 100%;
                        position: relative;
                        background-color: #ff679a;
                        background-clip: content-box;
                        height: auto;
                        min-height: 32px;
                        line-height: 24px;
                        }
                        .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: -35px;
                        margin-right: -50px;
                        }
                        .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;">Characters</a>
                            </div>
                            <nav class="section-history-nav">
                              <ul>
                                  <li>
                                    <a href="#" style="color: #333333;">Bloom</a>
                                  </li>
                                  <li>
                                    <a href="#">Stella</a>
                                  </li>
                                  <li>
                                    <a href="#">Flora</a>
                                  </li>
                                  <li>
                                    <a href="#">Layla</a>
                                  </li>
                            <li>
                                    <a href="#">Tecna</a>
                                  </li>
                                <li>
                                    <a href="#">Musa</a>
                                  </li>
                                <li>
                                    <a href="#">Roxy</a>
                                  </li>
                                 
                              </ul>
                            </nav>
                            <div class="player_txt" style="width: 49%;float: right;position: absolute;">
                                    <iframe style="width: 840px; height: 700px;" src="https://winxclubmagazine.forumotion.com/h23-bloom" marginwidth="287" marginheight="115" scrolling="yes" frameborder="0"></iframe>     
                      </div>
                       
                          <table width="259" border="0" cellspacing="0" cellpadding="0" style="position: absolute;top: 466px !important">
                    <tbody><tr style="display: block;padding-top: 20px;padding-bottom: 9px;">
                      <td style="font-size: 14px;font-weight: 700;color: #FE1489;">
                        CURIOSITIES
                      </td>
                    </tr>
                    <tr>
                      <td height="18" align="left">
                      <div class="characterCuriosityLight">
                      <div>favourite food : pizza</div>
                      </div><div class="characterCuriosityDark">
                      <div>favourite colour : red</div>
                      </div><div class="characterCuriosityLight">
                      <div>favourite hobby : reading books about spells!</div>
                      </div><div class="characterCuriosityDark">
                      <div>favourite pet : my little Kiko</div>
                      </div><div class="characterCuriosityLight">
                      <div>ideal boyfriend : Sky!</div>
                      </div><div class="characterCuriosityDark">
                      <div>best friends : Stella and...Sky!</div>
                      </div><div class="characterCuriosityLight">
                      <div>favourite movies : Romantic comedies</div>
                      </div><div class="characterCuriosityDark">
                      <div>I love : playing with Kiko</div>
                      </div><div class="characterCuriosityLight">
                      <div>I hate : tidying my bedroom...</div>
                      </div><div class="characterCuriosityDark">
                      <div>favourite music : pop</div>
                      </div><div class="characterCuriosityLight">
                      <div>favourite shoes : comfortable, but stylish too!!</div>
                      </div><div class="characterCuriosityDark">
                      <div>favourite subject : potionology</div>
                      </div><div class="characterCuriosityLight">
                      <div>favourite spell : Dragon's Flame</div>
                      </div>
                      </td>
                                       
                    </tr>
                    <!--tr>
                      <td height="18" style="background-image: url(https://1.bp.blogspot.com/-LM0CJVpSOQ0/X-arXM87RrI/AAAAAAAAMMM/VQn0PIcidPAhTx-NYS6l1eG4Q9MOeV_OACLcBGAsYHQ/s259/curiosities_list_bottom.png); background-repeat: no-repeat; background-position: center;">&nbsp;</td>
                    </tr-->
                </tbody></table>


Atenciosamente,
pedxz.
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217

Ir para o topo Ir para baixo

Tópico resolvido Re: Texto em tabela

Mensagem por juleic1123 28.12.20 16:06

Olá! Muito feliz

Ficou muito bom, porém algum do texto acabou por ficar fora do sítio. Existe forma de poder editar o "height" de cada um deles individualmente?

Texto em tabela Olhe10

Obrigado desde já!

Edit: as hiperligações deixaram de funcionar Em choque "Back" e as outras categorias "Stella, Flora, Musa", nenhuma funciona, consegue arrumar?
juleic1123
juleic1123
Membro

Membro desde : 04/05/2011
Mensagens : 670
Pontos : 934

http://www.online-winxclub.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Texto em tabela

Mensagem por tikky 29.12.20 14:09

Desculpe erro meu, altere 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/-UBTNPF8Vgvc/X-eXs9DuFqI/AAAAAAAAMNA/xkd_CZyFWw83miUx0eFHXXb1B3jYgilHgCLcBGAsYHQ/s16000/bloom%2Bcat1.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: 82px;
                                width: 100%;
                                position: relative;
                                background-color: #ff679a;
                                background-clip: content-box;
                                height: auto;
                                min-height: 32px;
                                line-height: 24px;
                                }
                                .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: -35px;
                                margin-right: -50px;
                                }
                                .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" style="z-index: 3;">
                                      <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;">Characters</a>
                                    </div>
                                    <nav class="section-history-nav" style="z-index: 3;">
                                      <ul>
                                          <li>
                                            <a href="#" style="color: #333333;">Bloom</a>
                                          </li>
                                          <li>
                                            <a href="#">Stella</a>
                                          </li>
                                          <li>
                                            <a href="#">Flora</a>
                                          </li>
                                          <li>
                                            <a href="#">Layla</a>
                                          </li>
                                    <li>
                                            <a href="#">Tecna</a>
                                          </li>
                                        <li>
                                            <a href="#">Musa</a>
                                          </li>
                                        <li>
                                            <a href="#">Roxy</a>
                                          </li>
                                       
                                      </ul>
                                    </nav>
                                    <div class="player_txt" style="width: 49%;float: right;position: absolute;">
                                            <iframe style="width: 840px; height: 700px;" src="https://winxclubmagazine.forumotion.com/h23-bloom" marginwidth="287" marginheight="115" scrolling="yes" frameborder="0"></iframe>   
                              </div>
                             
                                  <table width="259" border="0" cellspacing="0" cellpadding="0" style="position: absolute;top: 466px !important">
                            <tbody><tr style="display: block;padding-top: 20px;padding-bottom: 9px;">
                              <td style="font-size: 14px;font-weight: 700;color: #FE1489;">
                                CURIOSITIES
                              </td>
                            </tr>
                            <tr>
                              <td height="18" align="left">
                              <div class="characterCuriosityLight" style="height: 14px;">
                              <div>favourite food : pizza</div>
                              </div><div class="characterCuriosityDark" style="height: 14px;">
                              <div>favourite colour : red</div>
                              </div><div class="characterCuriosityLight" style="height: 14px;">
                              <div>favourite hobby : reading books about spells!</div>
                              </div><div class="characterCuriosityDark" style="height: 28px;">
                              <div>favourite pet : my little Kiko</div>
                              </div><div class="characterCuriosityLight" style="height: 14px;">
                              <div>ideal boyfriend : Sky!</div>
                              </div><div class="characterCuriosityDark" style="height: 14px;">
                              <div>best friends : Stella and...Sky!</div>
                              </div><div class="characterCuriosityLight" style="height: 14px;">
                              <div>favourite movies : Romantic comedies</div>
                              </div><div class="characterCuriosityDark" style="height: 14px;">
                              <div>I love : playing with Kiko</div>
                              </div><div class="characterCuriosityLight" style="height: 14px;">
                              <div>I hate : tidying my bedroom...</div>
                              </div><div class="characterCuriosityDark" style="height: 14px;">
                              <div>favourite music : pop</div>
                              </div><div class="characterCuriosityLight" style="height: 28px;">
                              <div>favourite shoes : comfortable, but stylish too!!</div>
                              </div><div class="characterCuriosityDark" style="height: 14px;">
                              <div>favourite subject : potionology</div>
                              </div><div class="characterCuriosityLight" style="height: 14px;">
                              <div>favourite spell : Dragon's Flame</div>
                              </div>
                              </td>
                                             
                            </tr>
                            <!--tr>
                              <td height="18" style="background-image: url(https://1.bp.blogspot.com/-LM0CJVpSOQ0/X-arXM87RrI/AAAAAAAAMMM/VQn0PIcidPAhTx-NYS6l1eG4Q9MOeV_OACLcBGAsYHQ/s259/curiosities_list_bottom.png); background-repeat: no-repeat; background-position: center;">&nbsp;</td>
                            </tr-->
                        </tbody></table>
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217

Ir para o topo Ir para baixo

Tópico resolvido Re: Texto em tabela

Mensagem por juleic1123 29.12.20 21:35

Muito obrigado, ficou perfeito! Muito feliz
juleic1123
juleic1123
Membro

Membro desde : 04/05/2011
Mensagens : 670
Pontos : 934

http://www.online-winxclub.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Texto em tabela

Mensagem por tikky 29.12.20 23:14

Contente

Tópico resolvido


Movido para "Questões resolvidas".
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos