InícioEditar código HTML
4 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
Editar código HTML
por EDU2010 02.04.19 0:47
Detalhes da questão
Endereço do fórum: https://www.criadoresdepassaros.com
Versão do fórum: phpBB3
Descrição
- Código:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 80px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Increase the font size of the heading */
.header h1 {
font-size: 40px;
}
/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.navbar {
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
}
/* Style the navigation bar links */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Active/current link */
.navbar a.active {
background-color: #666;
color: white;
}
/* Column container */
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>Criadores de Pássaros</h1>
<p> <b></b></p>
</div>
<div class="navbar">
<a href="#" class="active">Home</a>
<a href="#">Fórum</a>
<a href="#">Alimentaçao Pássaros</a>
<a href="#" class="right">Contato</a>
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;"></div>image<br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
Quero editar esta pagina HTMl pra inicio do meu Fórum ,
Segue exemplo que como ficaria
EDU2010- Hiper Membro
- Membro desde : 09/12/2010
Mensagens : 2308
Pontos : 3631 -
EDU2010- Hiper Membro
- Membro desde : 09/12/2010
Mensagens : 2308
Pontos : 3631 -
Re: Editar código HTML
por xDominiC_. 03.04.19 15:52
Olá mano para colocar uma pagina html para incio de seu fórum basta ir em
Vá em
Painel de Controle>Módulos>Gestão das paginas HTML
Escolha a pagina html que você quer escolher como principal click no modo avançado
e Embaixo do título estará
Você deseja utilizar o início e o final da página do seu fórum ? SIM NÃO
So marcar como sim
Vá em
Painel de Controle>Módulos>Gestão das paginas HTML
Escolha a pagina html que você quer escolher como principal click no modo avançado
e Embaixo do título estará
Você deseja utilizar o início e o final da página do seu fórum ? SIM NÃO
So marcar como sim
xDominiC_.- *****
- Membro desde : 06/10/2017
Mensagens : 400
Pontos : 613 -
Re: Editar código HTML
por EDU2010 03.04.19 15:59
Amigo isso eu sei , eu quero editar o codigo ai que irei usar 
EDU2010- Hiper Membro
- Membro desde : 09/12/2010
Mensagens : 2308
Pontos : 3631 -
xDominiC_.- *****
- Membro desde : 06/10/2017
Mensagens : 400
Pontos : 613 -
Re: Editar código HTML
por tikky 03.04.19 17:45
Olá @EDU2010,
Poderia passar as imagens, que o senhor quer usar -
(Captura de ecrã)?
Aguardo uma resposta sua,
pedxz.
Poderia passar as imagens, que o senhor quer usar -
(Captura de ecrã)?
Aguardo uma resposta sua,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7983
Pontos : 9247
Re: Editar código HTML
por Roevs 03.04.19 18:06
Olá,
Veja se ficou da forma que deseja
Até mais!
Veja se ficou da forma que deseja
- Código:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
/* Header/logo Title */
.header {
padding: 1px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Increase the font size of the heading */
.header h1 {
font-size: 40px;
}
/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */
.navbar {
overflow: hidden;
background-color: #333;
position: sticky;
position: -webkit-sticky;
top: 0;
margin-top: -21px;
}
/* Style the navigation bar links */
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Active/current link */
.navbar a.active {
background-color: #666;
color: white;
}
/* Column container */
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
-ms-flex: 30%; /* IE10 */
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
-ms-flex: 70%; /* IE10 */
flex: 70%;
background-color: white;
padding: 20px;
}
/* Fake image, just for this example */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
background-image: url(https://www.parmais.com.br/wp-content/uploads/img-investir-em-acoes-ou-fundo-de-acoes-texto.png);
background-size: cover;
}
.text1 {
margin-top: 146px;
text-align: center;
background: #000000b3;
color: white;
padding: 8px;
width: auto;
}
.fakeimg2 {
background-color: #aaa;
width: 100%;
padding: 20px;
background-image: url(https://www.parmais.com.br/wp-content/uploads/img-investir-em-acoes-ou-fundo-de-acoes-texto.png);
background-size: cover;
}
.text2 {
margin-top: 146px;
text-align: center;
background: #000000b3;
color: white;
padding: 8px;
width: auto;
}
.fakeimg3 {
background-color: #aaa;
width: 100%;
padding: 20px;
background-image: url(https://www.parmais.com.br/wp-content/uploads/img-investir-em-acoes-ou-fundo-de-acoes-texto.png);
background-size: cover;
}
.text3 {
margin-top: 146px;
text-align: center;
background: #000000b3;
color: white;
padding: 8px;
width: auto;
}
.fakeimg4 {
background-color: #aaa;
width: 100%;
padding: 20px;
background-image: url(https://www.parmais.com.br/wp-content/uploads/img-investir-em-acoes-ou-fundo-de-acoes-texto.png);
background-size: cover;
}
.text4 {
text-align: center;
background: #000000b3;
color: white;
padding: 8px;
width: auto;
}
.fakeimg5 {
background-color: #aaa;
width: 100%;
padding: 20px;
background-image: url(https://www.parmais.com.br/wp-content/uploads/img-investir-em-acoes-ou-fundo-de-acoes-texto.png);
background-size: cover;
}
.text5 {
text-align: center;
background: #000000b3;
color: white;
padding: 8px;
width: auto;
}
.fakeimg6 {
background-color: #aaa;
width: 100%;
padding: 20px;
background-image: url(https://www.parmais.com.br/wp-content/uploads/img-investir-em-acoes-ou-fundo-de-acoes-texto.png);
background-size: cover;
}
.text6 {
text-align: center;
background: #000000b3;
color: white;
padding: 8px;
width: auto;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<img src="https://i.imgur.com/22TYmue.png" style="text-align: center;"></img>
<p> <b></b></p>
</div>
<div class="navbar">
<a href="#" class="active">Home</a>
<a href="#">Fórum</a>
<a href="#">Alimentaçao Pássaros</a>
<a href="#" class="right">Contato</a>
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;"><div class="text1">Image</div></div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg4" style="height:60px;"></div><div class="text4">Image</div><br>
<div class="fakeimg5" style="height:60px;"></div><div class="text5">Image</div><br>
<div class="fakeimg6" style="height:60px;"></div><div class="text6">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg2" style="height:200px;"><div class="text2">Image</div></div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg3" style="height:200px;"><div class="text3">Image</div></div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
Até mais!
Roevs- Membro Entusiasta
- Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343 -
Re: Editar código HTML
por tikky 08.04.19 21:50
Questão abandonadaEsta questão foi abandonada pelo seu autor, mas foi considerada resolvida pela equipa de suporte. |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7983
Pontos : 9247
Tópicos semelhantes» Editar o codigo html da pagina forum
» Editar html
» Código HTML do Editor BBCODE ou Html
» Editar pagina html
» Editar código
» Editar html
» Código HTML do Editor BBCODE ou Html
» Editar pagina html
» Editar código
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
