Ir ao conteúdo
  • Cadastre-se
Regras do Clube do Hardware

HTML Como esconder um texto ou frase de um site

RockMagicRevived

Por RockMagicRevived
em Web e banco de dados

 Compartilhar

Posts recomendados

RockMagicRevived
 

RockMagicRevived

Postado
  • Autor
Postado

@DiF Eu to com um problema... achei que tinha resolvido o problema com as imagens, mas pelo visto não, eu quero inserir uma bendita imagem, mas nao to conseguindo, tu usando o caminho: ../nomedapasta/nomedafoto, vou mandar o trecho do codigo, eu quero inserir pra editar ela no css, ai eu fiz isso aqui, nao sei se ta certo se liga:

 

TRECHO DO CODIGO NO HTML 

<body>
 
    <div class="topo-pagina">
        <div class="foto-menu"></div>
        <nav id="menu">
            <ul>
                <li><a>Home</a></li>
                <li><a>Empresa</a></li>
                <li><a>Investimentos</a></li>
                <li><a>Atuação</a></li>
                <li><a>Nossas Obras</a></li>
            </ul>
        </nav>
    </div>

 

TRECHO NO CSS 

.foto-menu{
    background-image: url("../foto/logoinvest");
}

 

Eu criei uma div com uma class, e no css inseri a foto dentro da class que criei, la dentro, usando o background, isso ta certo? 

Link para o comentário
Compartilhar em outros sites
  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@RockMagicRevived

1 hora atrás, RockMagicRevived disse:

isso ta certo? 

Em parte.  Só faltou colocar a extensão do arquivo da imagem ali no css. 

.foto-menu{
    background-image: url("../foto/logoinvest.jpg");
}

 

É ideal também você colocar um tamanho no elemento div e definir o background-size para cover, e sem repetição. Assim você garante que a imagem apareça uma vez e no tamanho total do elemento div.

Link para o comentário
Compartilhar em outros sites
RockMagicRevived
 

RockMagicRevived

Postado
  • Autor
Postado

@DiF eu coloquei a extensão, e de novo não foi, vale lembrar que eu estava fazendo um curso online na udemy, e peguei o codigo do cara, pra testar, peguei as fotos que ele utilizou, e pus em uma pasta minha, c outro nome, quando inseri o codigo css, so fiz alterar o nome da pasta que foi, só que eu estou utilizando a mesmo codigo, para outra imagem mas ela nao aparece...

Link para o comentário
Compartilhar em outros sites
  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@RockMagicRevived Tenta debugar com o F12. Isso abre o menu de console  e veja se ele não está encontrando o caminho.

Se for isso.. você precisa rever os caminhos na qual colocou.

 

Este caminho: ../foto/logoinvest.jpg

 

Significa que a estrutura do seu host é: 

/(root)
|
|-foto
|  |-logoinvest.jpg
|
|-index.html

 

Link para o comentário
Compartilhar em outros sites
  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@RockMagicRevived Então... acho que você ainda está preso na parte da estrutura e de como chamar os arquivos com caminho relativo.

 

Pelo que você descreve sua estrutura está assim: 

/(root)
|
|-index.html
|-CSS
|  |-estilo.css
|
|-foto
|  |-imagem.jpg
|

Certo?  O ROOT, é a raiz do seu servidor. No caso se for xampp é www,  se for EasyPHP é eds-www.

 

No root é onde você coloca os arquivos e pastas.

 

Quando uma imagem está no root o caminho dela é somente o nome desta forma: 

<img src="imagem.jpg"/>

e no CSS, você chama com:   ../imagem.jpg

Porque o seu CSS está dentro de uma pasta, chamada CSS, mas a imagem está na raiz.

 

Quando você tem uma pasta para o CSS,  uma pasta para a imagem  você deve chamar a imagem desta forma:

  

<img src="../foto/imagem.jpg"/>

Porque pasta foto, está contida dentro da raiz.  por isso usamos o ../  uma única vez. 

 

Se a foto estiver dentro de uma pasta, onde esta pasta está dentro de outra: 

/(root)
|
|-index.html
|-CSS
|  |-estilo.css
|
|-imagens
|  |-foto  
|     |-imagem.jpg
|

Você precisa chamar duas vezes o ../ 

Desta forma: 

<img src="../../foto/imagem.jpg"/>

Porque cada ../  volta uma pasta.  

Claro que você poderia colocar como  ../imagens/foto/imagem.jpg também.

No CSS, você tem que pensar que há mais uma pasta.

Porque  o arquivo css está dentro de uma pasta.

 

Então pense assim:  para carregar uma imagem no background no css, sai da pasta css, entra na pasta imagem,  entra na pasta fotos e pega a imagem.

 

O caminho sempre vai mudar se tiver mais pastas.... enfim.  Para eu compreender melhor, é melhor você postar prints da estrutura do seu "root". Sem olhar, fica difícil ajudar em uma coisa que é tecnicamente simples e fácil.

  • Obrigado 1
Link para o comentário
Compartilhar em outros sites
  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@RockMagicRevived Para você mesmo, quando mexer no servidor.  A organização é sempre muito importante.

Por isso sempre é indicado para criar uma pasta para o CSS,  uma pasta para imagens, uma pasta para script javascript..

 

Na verdade isso é mais questão de organização e bom senso.  Nada melhor do que você entrar no seu servidor e procurar o que você quer lá de forma simples.  
imagens estão dentro de uma pasta de imagens.  Dentro desta pasta de imagens pode conter outra pasta chamada miniaturas ou thumbnails.  

Enfim...  se você um dia ver um servidor com worpress.. verá a organização que menciono.

 

Eu já tive essa fase de " ah vou colocar tudo na mesma pasta para funcionar" quando estava na faculdade! Ao longo da experiência, aprendi que o melhor é manter tudo organizado e separado.

 

  • Obrigado 1
Link para o comentário
Compartilhar em outros sites
RockMagicRevived
 

RockMagicRevived

Postado
  • Autor
Postado

@DiF Entendi, por enquanto, como estou aprendendo mesmo, eu vou deixar como ta, mas claro, que procuro me aperfeiçoar, afinal não curso faculdade de web designer e tal, curso sistemas, a matéria de web designer é uma carga horária curta, então, eu prefiro aprender por fora, estou fazendo curso e tudo mais, para me aperfeiçoar, mas por enquanto como disse, para que tudo funcione, eu vou deixar as imagens deste jeito, apenas para funcionar, ai depois quebro a cabeça tentando consertar esse problema que tenho! Obrigado @DiF :D sempre que estiver com duvidas vou lhe consultar!!!!

Link para o comentário
Compartilhar em outros sites
RockMagicRevived
 

RockMagicRevived

Postado
  • Autor
Postado

@DiF Boa tarde, venho com outra duvida, dessa vez é um problema com relação a imagem, quero inserir uma imagem, dentro de um bloco, e eu quero centralizar ela em cima dos textos dentro do bloco, aqui vai o print, quero que os icones fiquem certinhos em cima de cada nome, mas ai que mora o problema, eu fiz isso, só que eu pus pra abrir no pc de meu tio, e ele saiu torto, ou seja, configurado no centro no meu, no dele nao, eu fiz isso manipulando top e left, e usando a position absolute, nao conseguir fazer isso sem.. pode me ajudar a centralizar?

PRINT.png

adicionado 1 minuto depois

@DiF Nao se procupe com o texto, é ficticio também

 

Link para o comentário
Compartilhar em outros sites
  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@RockMagicRevived A solução mais prática que eu uso nesse tipo de coisa é transformar esses "ícones" em icon-fonts. Assim você pode definir a regra css de  text-align center  para eles.

 

Para criar seus icon-fonts pode usar este site https://icomoon.io/

 

Basicamente, você pega suas imagens e envia neste site. Depois você pode configurar a tag dos ícones... 

Depois de tudo pronto, o site te deixa baixar o pacote dos seus ícones criados das suas imagens.

Aí você vai ter um arquivo de fonte aqueles " tff" ou algo parecido. Aí é só importar no seu projeto e adicionar no CSS. Já que os ícones agora serão "fontes", você poderá manipula-los como um texto, podendo trocar a cor, tamanho, centralização e etc.

 

Este é o jeito que EU gosto e acho mais prático. 

Porém, deveria funcionar com os position abolute,  mas para que eles funcionem de forma correta, seu bloco precisa ter position relative.

 

A regra de posicionamento com o absolute quando há um elemento dentro do outro é que o elemento "pai"  tem que estar relativo, para então o elemento " filho " usar o absolute.

 

Exemplo prático:

  

<div class="bloco">
  <img src="imagem.jpg"/>
</div>

O elemento class="bloco"  precisa estar como position relative,  e então seu elemento img, pode ser posicionado com o absolute posicionado a 50% do left. se não for a 50% é próximo. você precisa ficar testando..

 

Por isso que eu digo que a solução mais prática é usar icon-fonts  e manipular os ícones como se fossem textos.

Link para o comentário
Compartilhar em outros sites
  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@RockMagicRevived

Isso realmente é bem estranho. 

Experimenta trocar as imagens por textos e tenta centralizar com o text-align: center.

Se ficar centralizado, o problema está nas suas regras CSS para posicionamento de imagens.

 

Ademais,  eu recomendo fortemente que substitua as imagens por icon-fonts.   No caso você vai criar as imagens como se fossem textos e alinhar com o text-align: center. Desta forma, fica muito mais leve para o site carregar fontes do que imagens e tem possibilidade de manipular elas trocando cor, tamanho... e etc

 

Como criar estas icon-fonts? use o site que mencionei no post mais acima. o iconmoon

Em 31/08/2018 às 17:38, DiF disse:

Para criar seus icon-fonts pode usar este site https://icomoon.io/

 

  • Obrigado 1
Link para o comentário
Compartilhar em outros sites
  • 2 semanas depois...
  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@RockMagicRevived  você pode entrar no site dele por este endereço https://getbootstrap.com e baixar ele. 

Depois, é necessário importar para seu index da mesma forma que o jquery. Tanto a parte do javascript quanto o do css.

 

Quanto ao uso, o site ali em cima possui uma área de documentação e exemplos :thumbsup:

 

Link para o comentário
Compartilhar em outros sites
  • 2 semanas depois...
RockMagicRevived
 

RockMagicRevived

Postado
  • Autor
Postado

@DiF Olá mais uma vez DiF, eu to com uma duvida, eu pus as imagens e textos, alinhei, tal, e pus efeito de zoom nas imagens, tudo ocorrendo normal por enquanto, contudo, os textos, qualquer coisa eles saem do lugar, tipo, qualquer minima alteração no navegador no seu tamanho, ele sai do lugar e sobe, gostaria de saber como eu faço para travar o texto para nao sairem do lugar!

Link para o comentário
Compartilhar em outros sites
  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@RockMagicRevived Olá,

Não sei se entendi, mas parece que você deve estar usando a medida em percentagem o CSS. Se for isso, realmente os elementos podem sair do lugar.

 

Então certifique-se de que os elementos tenham medidas fixas em pixels. Além disso, nada melhor do que você postar o código html e CSS para análise.

 

Quanto ao zoom, você pode tentar fazer com que ele abra em um elemento que fique a cima dos outros de forma que ele não atrapalhe. 

Link para o comentário
Compartilhar em outros sites
RockMagicRevived
 

RockMagicRevived

Postado
  • Autor
Postado

@DiF Aqui vai o codigo:

 

CODIGO DA PARTE HTML: 

  

<div class="fotos">
             <p><img src="casa.jpg" width="400" height="200"/></p>
       </div>
    
     <div class="texto-0">
        <p>Apartamento Espelho d'água</p>
    </div>
 

  
  
     
         <div class="fotos1">
             <p><img src="casa.jpg" width="400" height="200"/></p>
         </div>
    <div class="texto-01">
        <p>Galpão El Dourado</p>
    </div>
 
 
    <div class="fotos2">
        <p><img src="CASA DUPLA 3.jpg" width="400" height="200"></p>
    </div>
    <div class="texto-02">
        <p>Jardim de Parmênides</p>
    </div>    
 
    <div class="fotos3">
  
        <p><img src="BANNER OFICIAL 4.jpg" width="400" height="200">
    </div>
    <div class="texto-03">
        <p>Escola Itálica</p>
    </div>    

    <div class="fotos4">
  
        <p><img src="BANNER OFICIAL 4.jpg" width="400" height="200">
    </div>
    <div class="texto-04">
        <p>Escola Jônica</p>
    </div>    
    <div class="fotos5">
  
        <p><img src="BANNER OFICIAL 4.jpg" width="400" height="200">
    </div> 
    <div class="texto-05">
        <p>Universidade Alexandria</p>
    </div>    



CODIGO DA PARTE CSS:

. 

fotos{
    overflow: hidden;
    position: relative;
}
.fotos img{
    max-width: 100%;
    transition: all 0.3s;
}
.fotos:hover img{
    transform: scale(1.2);
}

.fotos {
  position: relative;
  left: -941px;
  top: 300px;
  float: right;
  width: 30%;
  text-align: center;
  margin: 0.5em;
  padding: 0.5em;
}

.texto-0 p{
    font: 400 1em "Roboto";
    color: #00000;
    position: absolute;
    top: 88%;
    left: -60%;
    right: 5%;
    bottom: 20px;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    
}

.fotos1{
  position: relative;
  left: -30px;
  top: 300px;
  float: right;
  width: 30%;
  text-align: center;
  margin: 0.5em;
  padding: 0.5em;
}
.texto-01 p{
    font: 400 1em "Roboto";
    color: #00000;
    position: absolute;
    top: 88%;
    left: 4%;
    right: 5%;
    bottom: 20px;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}
.fotos1{
    overflow: hidden;
    
}

.fotos1 img{
    max-width: 100%;
    transition: all 0.3s;
}
.fotos1:hover img{
    transform: scale(1.2);
}
.fotos2{
  position: relative;
  left: 883px;
  top: 300px;
  float: right;
  width: 30%;
  margin: 0.5em;
  padding: 0.5em;
}
.texto-02 p{
    font: 400 1em "Roboto";
    color: #00000;
    position: absolute;
    top: 88%;
    left: 67%;
    right: 5%;
    bottom: 20px;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}
.fotos2{
    overflow: hidden;
    
}

.fotos2 img{
    max-width: 100%;
    transition: all 0.3s;
}
.fotos2:hover img{
    transform: scale(1.2);
}
.fotos3{
  position: relative;
  left: -486px;
  top: 400px;
  float: right;
  width: 30%;
  text-align: center;
  margin: 0.5em;
  padding: 0.5em;
}
.texto-03 p{
    font: 400 1em "Roboto";
    color: #00000;
    position: absolute;
    top: 130%;
    left: 5%;
    right: 5%;
    bottom: 20px;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}
.fotos3{
    overflow: hidden;
    
}

.fotos3 img{
    max-width: 100%;
    transition: all 0.3s;
}
.fotos3:hover img{
    transform: scale(1.2);
}

.fotos4{
  position: relative;
  left: -487px;
  top: 400px;
  float: right;
  width: 30%;
  margin: 0.5em;
  padding: 0.5em;
}
.texto-04 p{
    font: 400 1em "Roboto";
    color: #00000;
    position: absolute;
    top: 130%;
    left: -62%;
    right: 5%;
    bottom: 20px;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}
.fotos4{
    overflow: hidden;
    
}

.fotos4 img{
    max-width: 100%;
    transition: all 0.3s;
}
.fotos4:hover img{
    transform: scale(1.2);
}
.fotos5{
  position: relative;
  left: 882px;
  top: 400px;
  float: right;
  width: 30%;
  text-align: center;
  margin: 0.5em;
  padding: 0.5em;
  padding-bottom: 30px;
}
.texto-05 p{
    font: 400 1em "Roboto";
    color: #00000;
    position: absolute;
    top: 130%;
    left: 68%;
    right: 5%;
    bottom: 20px;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    overflow: hidden;
}

.fotos5 img{
    max-width: 100%;
    transition: all 0.3s;
}
.fotos5:hover img{
    transform: scale(1.2);
}
adicionado 6 minutos depois

@DiF Olha o problema como é, veja que eu fiz um download, e a barrinha dele, moveu o texto para cima, ao invés dele ficar abaixo das imagens! 

PROBLEMA COM TEXTO.png

Link para o comentário
Compartilhar em outros sites
  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado

@RockMagicRevived Seu código possui alguns erros de semântica, por exemplo imagens não podem ficar dentro de parágrafos.

 

Mas o principal problema é que você está dando um scale no elemento inteiro. 

O ideal é você ter um container com posição relativa e dentro dele, conter a imagem. com posição absoluta. Assim você pode usar o scale no hover que a imagem só dará zoom dentro daquele container sem  afetar o resto dos elementos.

 

Veja um exemplo: https://jsfiddle.net/wf7twxo1/embedded/result,html,css/

Clique na aba HTML e CSS para ver os respectivos códigos.

 

PS: como você está usando CLASS,  não precisa ser uma classe diferente para cada foto.  Podes criar apenas uma regra para todas. Assim você economiza na leitura do arquivo css do seu site.

 

 

 

  • Obrigado 1
Link para o comentário
Compartilhar em outros sites
RockMagicRevived
 

RockMagicRevived

Postado
  • Autor
Postado

@DiF Olá DiF, estou com uma dúvida, bom, eu havia lhe perguntado sobre o motivo do nome sair do lugar e tal, eu resolvi não utilizar isso, e ter uma segunda opção, ao invés de inserir as fotos em tamanhos pequenos e ao lado da outra, eu preferi por inserir um efeito de Slide, peguei do bootstrap, e utilizei, mas ai que tá, eu fiz tudo certo, ele ta legal, funcionando, inseri as fotos, mas são apenas 3, e eu queria pelo menos 6, tem como? Se sim, como eu faço?

Link para o comentário
Compartilhar em outros sites
  • Moderador
DiF
 

DiF

Postado
  • Moderador
Postado
5 minutos atrás, RockMagicRevived disse:

inseri as fotos, mas são apenas 3, e eu queria pelo menos 6, tem como? Se sim, como eu faço?

Você inseriu as fotos de forma estática certo?

Se sim.. e pretende ter apenas essas e não mudar, só acrescente mais 3.    Mas caso a sua ideia é ter muitas imagens, o ideal é fazer um loop de repetição com o PHP e trazer as imagens na estrutura.

 

 Geralmente se implementa assim quando usa um banco de dados, onde os arquivos de imagens são armazenados em pastas e o nome destas imagens ou URL sejam cadastradas no banco de dados.

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora
 Compartilhar
Ir à lista de tópicos

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

Mais

×
×
  • Criar novo...

Ebook grátis: Aprenda a ler resistores e capacitores!

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!