Página HTML

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Página HTML

Mensagem por Uatyla em 12/06/14, 04:35 pm


  • Descrição:

Olá senhores!

Eu preciso muito da ajuda dos senhores, preciso melhorar uma página em html que uso na calculadora de litragem
Queria criar as colunas laterais por uma imagem de fundo, e uma opção login, Registra e volta ao fórum!

Minha página seria essa!
http://vidadeaquarista.forumeiros.com/h3-calculadora-para-calcular-o-volume-de-agua



  • Informações:




Fórum:http://vidadeaquarista.forumeiros.com/Versão:PHPBB3
Tipo:Pedido de códigoTags:Página



Última edição por uatyla em 13/06/14, 08:24 pm, editado 1 vez(es)
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: Página HTML

Mensagem por Alex Habilidade em 12/06/14, 05:39 pm

Olá,

- Qual seria a imagem de fundo?
- O botão voltar ao fórum, pode ser criado com puro CSS ou o senhor quer adicionar uma imagem como botão?
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Página HTML

Mensagem por Uatyla em 12/06/14, 06:58 pm

Quemo a imagem de fundo do fórum que é : http://i.imgur.com/RTXnstU.jpg
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Resolvido Re: Página HTML

Mensagem por Alex Habilidade em 12/06/14, 10:31 pm

Olá,

Veja minha tentativa, através dessa primeira, vamos inovar ok?
Adicione este código:
Código:

<!doctype>
<html lang="pt-br">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <style type="text/css">
        body {
            background: url('http://i.imgur.com/RTXnstU.jpg');
        }
        div {
            border-radius: 20px;
        }
        marquee {
            margin-top: 20px;
            display: block;
        }
        #login_widget {
            background-color: #D2DACD;
            width: 350px;
            height: 350px;
            float: right;
            border-radius: 10px;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div style="float:left;overflow:hidden;border:1px #D2DACD solid;width:900px;margin-left:auto;margin-right:auto;">
        <iframe style="width:926px;height:831px;overflow: hidden;margin:-274px -13px 0px;" scrolling="no" src="http://www.aquaflux.com.br/ferramentas/calculadora-montagem-aquario.php" frameborder="0"></iframe>
    </div>
    <div id="login_widget">

        <form method="post" action="/login">

            <p>
                <label for="username"><strong>Nome de usuário:</strong>
                </label>
            </p>

            <p style="height:2em;valign:top;">
                <input id="username" class="inputbox autowidth" value="" maxlength="40" size="15" name="username" type="text" />
            </p>

            <p>
                <label for="password"><strong>Senha:</strong>
                </label>
            </p>

            <p style="height:2em;valign:top;">
                <input id="password" class="inputbox autowidth" maxlength="25" size="15" name="password" type="password" />
            </p>

            <p>
                <a rel="nofollow" href="/profile?mode=sendpassword">Esqueci minha senha</a>
            </p>
            <br />
            <p>
                <input id="autologin" class="checkbox" checked="checked" tabindex="4" name="autologin" type="checkbox" />
                <label for="autologin">Conexão automática</label>
            </p>
            <br />
            <p align="center">
                <input class="button1" value="Login" tabindex="6" name="login" type="submit" />
            </p>

        </form>
    </div>

    <div id="slidecblogger">

        <div class="slidecblogger">

            <marquee scrollamount="6" onmouseout="this.start();" onmouseover="this.stop();" direction="right">
                <a href="http://clan-xtremocaos.forumeiros.com/forum" target="_blank"><img style="width: 350px; height: 140px;" src="https://lh4.googleusercontent.com/-PqDkaORyOFU/UAMoKtEuofI/AAAAAAAAJDk/liVAoB9wU2s/s236/banner%2520xc.gif" "="" border="0" /> </a><a href="http://vidadeaquarista.forumeiros.com/t481-anuncie-aqui-e-confira-os-beneficios#3849" target="_blank"><img style="width: 350px; height: 140px;" src="http://i48.servimg.com/u/f48/17/08/41/16/public12.png" "="" border="0" /> </a>
            </marquee>

        </div>

    </div>
</body>

</html>
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Página HTML

Mensagem por Uatyla em 12/06/14, 11:04 pm

Está quase lá!
Olha gostaria que fosse um pouco semelhante a esse. http://vidadeaquarista.forumeiros.com/h4
porém ao lado de registra a opção volta ao fórum porque não será um painel de login.
Queria que tivesse os botões Login Registrar & Voltar ao Fórum. Ai cada um na sua função.

Ao clicar em login direciona para essa parte: http://vidadeaquarista.forumeiros.com/h4
Ao clicar em registrar: http://vidadeaquarista.forumeiros.com/register 
Ao clicar em volta ao fórum: http://vidadeaquarista.forumeiros.com/

E si possível o mesmo efeito que a imagem de fundo não repita, si possível gostaria que a calculadora ficasse centralizada.
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista
  • 0

Resolvido Re: Página HTML

Mensagem por Alex Habilidade em 13/06/14, 07:30 pm

Olá,

Veja se lhe agrada:
Código:

<!doctype>
<html lang="pt-br">

<head>

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <style type="text/css">
        .calculadora {
            margin-left: 150px !important;
        }
        .button_return a:hover {
            color: #00AACC;
            font-size: 20px;
            text-shadow: 0px 1px 0px #000;
        }
        .button_return:hover {
            background-color: #ccc;
            border: 2px solid #000;
        }
        .button_return {
            border: 1px solid #000;
            border-radius: 4px;
            padding: 10px;
            background-color: #ddd;
            color: black;
        }
        .button_return a {
            text-decoration: none;
            font-size: 18px;
            font-weight: bold;
        }
        body {
            background: url('http://i.imgur.com/RTXnstU.jpg');
            background-repeat: no-repeat;
        }
        div {
            border-radius: 20px;
        }
        marquee {
            margin-top: 20px;
            display: block;
        }
        #login_widget {
            background-color: #D2DACD;
            width: 200px;
            height: 200px;
            float: right;
            border-radius: 10px;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="calculadora" style="float:left;overflow:hidden;border:1px #D2DACD solid;width:900px;margin-left:auto;margin-right:auto;">
        <iframe style="width:926px;height:831px;overflow: hidden;margin:-274px -13px 0px;" scrolling="no" src="http://www.aquaflux.com.br/ferramentas/calculadora-montagem-aquario.php" frameborder="0"></iframe>
    </div>

    <div id="login_widget">

        <p class="button_return">
            <a href="http://vidadeaquarista.forumeiros.com/h4">Login</a>
        </p>

        <p class="button_return">
            <a href="http://vidadeaquarista.forumeiros.com/register">Registrar</a>
        </p>

        <p class="button_return">
            <a href="http://vidadeaquarista.forumeiros.com/">Voltar ao fórum</a>
        </p>

    </div>

    <div id="slidecblogger">

        <div class="slidecblogger">

            <marquee scrollamount="6" onmouseout="this.start();" onmouseover="this.stop();" direction="right">
                <a href="http://clan-xtremocaos.forumeiros.com/forum" target="_blank"><img style="width: 350px; height: 140px;" src="https://lh4.googleusercontent.com/-PqDkaORyOFU/UAMoKtEuofI/AAAAAAAAJDk/liVAoB9wU2s/s236/banner%2520xc.gif" "="" border="0" /> </a><a href="http://vidadeaquarista.forumeiros.com/t481-anuncie-aqui-e-confira-os-beneficios#3849" target="_blank"><img style="width: 350px; height: 140px;" src="http://i48.servimg.com/u/f48/17/08/41/16/public12.png" "="" border="0" /> </a>
            </marquee>

        </div>


    </div>
</body>

</html>
avatar

Alex Habilidade
Usuário experiente

Masculino
Inscrito dia : 10/01/2011
Mensagens : 2795
Pontos Ativos : 3774

Ver perfil do usuário http://www.gzhabilidade.com/

Resolvido Re: Página HTML

Mensagem por Uatyla em 13/06/14, 08:23 pm

Perfeito! ficou bem melhor. Obrigado!
avatar

Uatyla
Usuário experiente

Masculino
Inscrito dia : 15/05/2012
Mensagens : 2425
Pontos Ativos : 3433

Ver perfil do usuário http://www.vidadeaquarista.com https://www.facebook.com/MinhaVidadeAquarista?ref=hl https://twitter.com/VidadeAquarista

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum