InícioTexto em tabela
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1 • Compartilhe
Texto em tabela
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!
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.
A ideia era ficar assim:
- 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;"> </td>
</tr>
</tbody></table>
Link da página: https://online--winxclub.forumotion.com/h87-character-bloom
juleic1123- Membro
- Membro desde : 04/05/2011
Mensagens : 670
Pontos : 934 -
Re: Texto em tabela
por tikky 28.12.20 13:57
Olá @juleic1123,
Altere o seu código para:
Atenciosamente,
pedxz.
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;"> </td>
</tr-->
</tbody></table>
Atenciosamente,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7822
Pontos : 9063
Re: Texto em tabela
por juleic1123 28.12.20 16:06
Olá!
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?
Obrigado desde já!
Edit: as hiperligações deixaram de funcionar
"Back" e as outras categorias "Stella, Flora, Musa", nenhuma funciona, consegue arrumar?
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?
Obrigado desde já!
Edit: as hiperligações deixaram de funcionar
"Back" e as outras categorias "Stella, Flora, Musa", nenhuma funciona, consegue arrumar?
juleic1123- Membro
- Membro desde : 04/05/2011
Mensagens : 670
Pontos : 934 -
Re: Texto em tabela
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;"> </td>
</tr-->
</tbody></table>
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7822
Pontos : 9063
juleic1123- Membro
- Membro desde : 04/05/2011
Mensagens : 670
Pontos : 934 -
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7822
Pontos : 9063
Tópicos semelhantes» Tabela e texto ao lado
» Centralizar/alinhar o texto dentro das células da tabela.
» Tabela
» Criar uma tabela
» Tabela de staff
» Centralizar/alinhar o texto dentro das células da tabela.
» Tabela
» Criar uma tabela
» Tabela de staff
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
Facebook
Twitter
Youtube
