Jump to content

jonathanrn

Members
  • Content count

    41
  • Joined

  • Last visited

  • Days Won

    1

Posts posted by jonathanrn


  1. Boa noite galera, blz?

     

     

    Então, estou tentando aprender sobre posicionamento, decidi fazer algo para testar meu conhecimento e tomei no c# kkkk.

     

    Queria que as imagens vermelhas fossem alinhadas relativamente à imagem azul com (Right, Left, Bottom e Top): http://imgur.com/m13i2ss (link do exemplo, não consegui subir imagem por aqui o.O).

     

    Eu consegui fazendo as imagens vermelhas usando position: absolute; mas elas se alinham relativamente a div container, e não a imagem, fico com a sensação de errado.

     

    Qualquer ajuda é bem vinda, desde já agradeço :)

     

     


  2. Show, estou usando bastante

     

    ja até adicionei essa parte na primeira imagem:

    $(function(){
        $(".logo").fadeIn(2000, function(){
            window.setTimeout(function(){
                $('.logo').fadeOut(2000);
            }, 3000);				
        });
    });
    

    Agora como eu faço para a segunda imagem começar a ser executada so após o fim desta?


  3.  

    Fala galera, blz?

    Estou começando a estudar jquery para fazer uma basica animação no site que estou criando para o meu pai.

    A animação envolve fade de imagens (fadeIn, fadeOut) e uma movimentação básica. segue um exemplo do que eu quero fazer:
    1 - primeiraParte entra com fade e sai com fade;
    2 - segundaParte entra primeiro a imagem central, depois imageEsquerda e imagem direita (nessa ordem, ambas em fade);
    3 - imagemEsquerda e imagemDireita se movem para baixo da imagem central;
    4 - Saide em fade da segundaParte;
    Então, quais as funções tenho que estudar primeiro já que eu quero entregar isso para o meu pai? Ajuda também me passando assuntos de outros tópicos sobre o que irei ter que utilizar para tal feito.
    Obs.: Tenho experiencia apenas em html e css.
    Desde já agradeço!
    <div id="primeiraParte"> 
    	<img src="../Imagens/logo.png">
    </div>
    
    
    <div id="segundaParte">
    
        <div class="imagemEsquerda">
            <img src="../Icons/esquerda.png">
        </div>
        
        <div class="imagemCentral">
            <img src="../Imagens/project.png">
        </div>
        
        <div class="imagemDireita">
            <img src="../Icons/direita.png">
        </div>
    
    </div> 

  4. Boa tarde gente boa!

     

    Então, fiz login no phpmyadmin e usei o SQL para apagar todos os comentários de um site wordpress utlizando o seguinte comando: "DELETE FROM wp_comments WHERE comment_approved = 0" mas agora o site mostra o seguinte erro:

     

    "PHP Warning: mysql_connect() [<a href='function.mysql-connect'>function.mysql-connect</a>]: Access denied for user 'realfm'@'186.202.149.23' (using password: YES) in E:\Home\realfm\Web\wp-includes\wp-db.php on line 1147"

     

    Alguém já passou por isso e pode me ajudar por favor?

     

    desde já agradeço :)

     

     


  5. E ai galera, beleza?

    venho humildemente aprimorar meus conhecimentos em html, css.. haha

    bom, estou com dificuldade em aprender o que algumas pessoas chamam de full size ou full screen, algo assim o.O

    Enfim, de maneira q o exemplo q vou dar logo abaixo se adapte ao tamanho de tela (o campo de formulario, as palavras e a imagem) juntas, porque abrir esse exemplo na tela de 14 polegadas fica legal mas na de 22 não (o formulario e a imagem ficam distante um do outro e eles não crescem junto com a tela de 22 polegadas)

    Bom é isso galera, conto com o conhecimento de vocês! :)

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento sem título</title>
    
    <style type="text/css">
    
    
    
    * img{
    max-width:100% !important;
    height:auto !important;
    }
    
    .coluna-esquerda {
    float:left;
    margin-left:5% ;
    max-width:100%;
    height:auto;
    width: ;
    
    }
    
    .coluna-direita {
    float:right;
    display:block;
    width: ;
    
    }
    
    
    
    .um {
    background-color:#002f70 ;
    border:1px solid #CCC ;
    padding:5px;
    font-family:eurofurence;
    color:#f19800;
    text-align:center;
    
    }
    
    .dois {
    font-family:eurofurence;
    padding: ;
    color:#f19800;
    font-size:20px;
    text-align:center;
    }
    
    .treis {
    text-align:center;
    background-color:#f19800;
    color:white;
    padding:5px;
    font-size:36px;
    }
    
    .quatro {
    text-align:center;
    background-color:#002f70 ;
    color:white;
    font-size:24px;
    }
    
    .junta {
    background-color:#002f70 ;
    height:10px;
    }
    
    .cinco {
    text-align:center;
    background-color:#002f70 ;
    color:#f19800;
    }
    
    
    button {
    display:block;
    width:227px;
    height:35px;
    color:white ;
    text-align:center;
    background-color:#f19800;
    
    }
    
    fieldset {
    border-color:#f19800;
    border-style:solid;
    border-top:none;
    
    }
    
    </style>
    </head>
    
    <body >
    
    <div class="coluna-esquerda">
    
    <div class="treis">LINGUIÇA ,</div>
    
    <div class="quatro">LINGUIÇAS ,</div>
    
    <div class="junta"></div>
    <div class="cinco">FAÇA AQUI SEU PEDIDO <br>
    DE LINGUIÇAS, </div>
    
    
    
    <fieldset>
    <div style="margin-top:30px"></div>
    <form action="" method="post" name="contato" />
    Nome*<br>
    <input id="nome" type="text" size="28" /><br>
    
    <div style="margin-top:5px"></div>
    
    Email*<br>
    <input id="email" type="email" size="28" /><br>
    
    <div style="margin-top:5px"></div>
    
    LINGUIÇA, *<br>
    <input id="vidraçaria" type="text" size="28" /><br>
    
    <div style="margin-top:5px"></div>
    
    Telefone*<br>
    <input id="telefone" type="tel" size="28" /><br>
    
    <div style="margin-top:5px"></div>
    
    Endereço*<br>
    <input id="endereço" type="text" size="28" /><br>
    
    <div style="margin-top:5px"></div>
    
    Cep*<br>
    <input id="cep" type="text" size="28" /><br>
    
    <div style="margin-top:5px"></div>
    
    LINGUIÇA, *<br>
    <input id="cnpj" type="text" size="28" /><br>
    
    <div style="margin-top:5px"></div>
    
    Principal fornecedor de LINGUIÇA, <br>
    <input id="principal fornecedor de vidros" type="text" size="28" /><br>
    <br>
    
    <button type="submit">Envie seu pedido<br> de amostras </button>
    
    </form>
    </fieldset>
    <br>
    </div>
    
    
    
    
    <div class="coluna-direita">
    
    <div class="um">
    
    
    <b>LINGUIÇAS, </b>LINGUIÇA, LINGUIÇA, <b>LINGUIÇA, LINGUIÇA</b>
    
    </div>
    
    <div class="dois">
     LINGUIÇA, LINGUIÇA, LINGUIÇA, LINGUIÇA
    </div>
    
    <img src="[url=http://i.imgur.com/HCvpuRN.png]http://i.imgur.com/HCvpuRN.png[/url]" alt="" />
    </div>
    
    </body>
    </html>

  6.  

    Eu acho que a melhor propriedade para sua situação é a background: url() ou background-image: url().

     

    De acordo com o que você disse, você deve adicionar essa propriedade (código) não em <table>, mas sim em <td>, que adiciona o plano de fundo só em um certo espaço da tabela.

     

    Se você não quiser CSS, pode usar com HTML mesmo: background="banner.png".

     

    Espero ter ajudado!

    Qualquer dúvida é só perguntar! :thumbsup:

     

    Atenciosamente,

    Pedro HSB :)

     

     

    Dá um position: relative no elemento pai da imagem

     

    se não, o absolute vai procurar o body, e ai acontece o que você descreveu.

    Não consegui galera, vou colocar o codigo pra ajudar, esse texto q esta na parte fosca da imagem tem q ficar centralizada "dentro da parte fosca"

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Documento sem título</title>
    
    
    
    </head>
    
    <body>
    
    <table cellpadding="0" align="center" width="600" border="1" bgcolor="grey" cellspacing="0"  >
    	<tr> 
        	<td> sdfasdfadfsdDSdsfDSasdas sdfasdfadfsdDSdsfDSasdas sdfasdfadfsdDSdsfDSasdas sdfasdfadfsdDSdsfDSasdas</td>
        </tr>
        
        <tr> 
        	<td c align="right" background="http://i.imgur.com/axwMjlv.png" height="445">
            
            	<div >PRIVACIDADE<br /> NA HORA MAIS<br /> GOSTOSA DO<br /> DIA: O SEU<br /> BANHO.</div>
            </div>
            </div>
            <br /><br />
            
            <li>Padrão já consagrado</li> 
              
              <li>Privacidade</li>
              
              <li>Beleza</li>
              <li>Fácil Limpeza</li>
          </td>
      </tr>
        
        <tr> 
        	<td width="600"> asdaasdaasdaasdaasdaasdaasdaasdaasdaasdaasdasdaasdaasdaa</td>
        </tr>
            
    </table>
    
    
    </body>
    </html>
    
    

  7. .


    já tentou display:block no elemento do texto

     

     

    Olá jonathanrn, blza!

     

    Não sei se é a melhor solução...

     

    Mas veja se é isso que deseja.

     

     

    CSS

    <style>
    #imagem {
    width: 338px;
    height 450px;
    }
    
    #texto {
    position: absolute;
    margin-top: -100px;
    color:#FFF;
    font-size:20px;
    }
    </style>
    

    HTML

    <img id="imagem" src="http://thumbs.dreamstime.com/z/woman-embrancing-her-puppy-dog-pets-people-pet-adoption-playing-little-pet-outdoor-hugging-lovingly-embraces-47488697.jpg"/>
    <div id="texto">Texto que fica sobre a imagem</div>
    

    Espero ter ajudado,

     

    vlw

     

     

    Olá jonathanrn,

     

    Você pode usar position: fixed, que deixa o texto fixo em um lugar da página.

     

    Não sei se poderá adiantar, mas ao invés de usar img para imagens, tente usar background: url(), a imagem fica atrás do texto, como plano de fundo.

     

    Qualquer dúvida é só perguntar! :thumbsup:

     

    Atenciosamente,

    Pedro HSB

    Desculpa Galera não expliquei direito,

    então criei uma tabela com 3 linhas e 1 coluna centralizada e a 2º linha (do meio) tem uma imagem dentro dela, qual o melhor codigo pra escrever em cima dessa imagem sem desconfigurar sua posiçao em outro tamanho de monitor?

    Desde ja agradeço galera :)


  8. 
    

    como assim?

    essas 4 imagens tem q ficar uma embaixo da outra no centro da pagina, e tem q parecer ser uma só.

    <!doctype html>
    <html>
    <head>
    <title>teste</title>
    </head>
    
    <body>
    
    <img src="https://lh4.googleusercontent.com/-UzYqjj6Ispg/VJBRD70cabI/AAAAAAAAAAw/2j96EVKPJsM/w600-h300-no/01.png" alt="background"  />
    
    
    
    <img src="https://lh3.googleusercontent.com/-sc2NzCzPsuA/VJBT31UrOgI/AAAAAAAAABY/h076CMXU0YE/s600/02.png" alt="background"  />
    
    
    
    <img src="https://lh3.googleusercontent.com/-4zXjrY8kZhA/VJBT2T6ZVOI/AAAAAAAAABM/Tm56lUBDbWc/s600/03.png" alt="background" />
    
    
    
    <img src="https://lh3.googleusercontent.com/-GFBe38rk4l0/VJBT2ZDRClI/AAAAAAAAABQ/obLczQC8ClQ/s600/04.png" alt="background"  />
    
    </body>
    </html>
    

  9. <!doctype html>

    <html>

    <head>

    <title>teste</title>

     

    <style type="text/css">

     

    #foto1{

    margin:-4px 25% 0% 25%; position:relative;

    }

     

    #foto2{

    margin:-4px 25% 0% 25%;

     

    position:relative;

    }

     

     

     

    #foto3{

    margin:-4px 25% 0% 25%;

    position:relative;

    }

     

    #foto4{

    margin:-4px 25% 0% 25%;

    position:relative;

    }

     

     

     

    </style>

     

    </head>

     

    <body bgcolor="white">

     

    <DIV id="foto1">

    <img src="https://lh4.googleusercontent.com/-UzYqjj6Ispg/VJBRD70cabI/AAAAAAAAAAw/2j96EVKPJsM/w600-h300-no/01.png" alt="background" />

     

    </DIV>

     

    <DIV id="foto2">

    <img src="https://lh3.googleusercontent.com/-sc2NzCzPsuA/VJBT31UrOgI/AAAAAAAAABY/h076CMXU0YE/s600/02.png" alt="background" />

    <div style="position: absolute; top: 23px; left: 246px; color: black; width: 340px; font-size: 16px;">        nova Faria Lima, na capital paulista, traz         peculiaridades que atraem tanto os olhares leigos quanto os mais apurados. Nos últimos anos,<br />a região viu erguerem-se ali marcos da arquitetura, como o Pátio Malzoni e o Infinity Tower, entre outros empreendimentos corporativos. </div>

     

     

    <div style="position: absolute; top: 20px; left: 249px; color: #f5bb00; width: 28px; font-size: 38px;">A</div>

     

     

     

     

     

     

     

    <div style="position: absolute; top: 136px; left: 246px; color: black; width: 341px; font-size: 16px;">

            Neste último semestre de 2014, mais um edifício comercial de alto padrão veio integrar-se à tão disputada paisagem urbana prometendo atrair

    </div>

     

     

    <div style="position: absolute; top: 191px; left: 302px; color: black; width: 286px; font-size: 16px;">

    atenções — o Vera Cruz II, o primeiro da região a obter a pré-certificação LEED Platinum.

    </div>

     

     

    <div style="position: absolute; top: 248px; left: 302px; color: black; width: 286px; font-size: 16px;">

         O projeto leva a assinatura de Roberto Collaço, do escritório Collaço e Monteiro Arquitetos Associados, para quem a obra </div>

     

     

     

     

     

     

     

     

     

     

     

    </DIV>

     

    <DIV id="foto3">

    <img src="https://lh3.googleusercontent.com/-4zXjrY8kZhA/VJBT2T6ZVOI/AAAAAAAAABM/Tm56lUBDbWc/s600/03.png" alt="background" />

    <div style="position: absolute; top: 2px; left: 302px; color: black; width: 271px; font-size: 16px;">

    “cria espaços visuais com esculturas, jardins e fontes, onde a vegetação e a água estão ligadas à avenida Faria Lima e às ruas Atílio Inocentti e Elvira Ferraz, </div>

     

     

    <div style="position: absolute; top: 73px; left: 34px; color: black; width: 542px; font-size: 16px;">

    permitindo ao usuário e ao transeunte utilizar os espaços e se beneficiar da amplitude visual e da paisagem”. </div>

     

     

    <div style="position: absolute; top: 115px; left: 33px; color: black; width: 542px; font-size: 16px;">

        Segundo o arquiteto, o Vera Cruz II “teve uma concepção diferenciada em relação aos edifícios vizinhos, com sua fachada composta de vidro e cobre patinado — materiais nobres que conferem uma composição dinâmica”. </div>

     

     

    <div style="position: absolute; top: 174px; left: 33px; color: black; width: 534px; font-size: 16px;">

        A GlassecViracon processou e forneceu quase 12 mil metros quadrados de insulados low-e neutros e laminados low-e prata para o empreendimento. Sobre o papel dos vidros especificados, Collaço afirma que teve “extrema importância” para o resultado final. </div>

     

     

    <div style="position: absolute; top: 248px; left: 34px; color: black; width: 534px; font-size: 16px;">

        A GlassecViracon processou e forneceu quase 12 mil metros quadrados de insulados low-e neutros e laminados low-e prata para o empreendimento. Sobre o papel dos vidros especificados, Collaço afirma que teve “extrema importância” para o resultado final. </div>

    </DIV>

     

    <DIV id="foto4">

    <img src="https://lh3.googleusercontent.com/-GFBe38rk4l0/VJBT2ZDRClI/AAAAAAAAABQ/obLczQC8ClQ/s600/04.png" alt="background" />

    <div style="position: absolute; top: 1px; left: 34px; color: black;">para o resultado final.

     

    </div>

     

     

    <div style="position: absolute; top: 24px; left: 34px; color: black; width: 496px;">  “A qualidade e a composição do vidro utilizado atenderam ao LEED e as condições de conforto ambiental das unidades. O caixilho, composto com vidro insulado e CCM em cobre patinado, traduz uma concepção com linguagem moderna”, conclui Collaço.

     

    </div>

     

     

    <div style="position: absolute; top: 100px; left: 34px; color: black; width: 496px;">    Com onze pavimentos corporativos e quatro destinados à garagem no subsolo, o Vera Cruz II tem pouco

    mais de 38 mil metros quadrados de área construída. O empreendimento contou com a consultoria de

    Igor Alvim, da QMD, e a RFM respondeu pela construção.

     

    </div>

    </DIV>

     

     

     

    </body>

    </html>

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.