HTML Como esconder um texto ou frase de um site

RockMagicRevived · 12 de julho de 2018

olá! estou com um problema para esconder uma frase no meio site, estou utilizando o seguinte codigo:

nav#menu h1 {
 display: none;

}

e não esconde, gostaria de saber se há outros códigos para eu esconder pois não esta dando certo este...

Leonardo0308 · 12 de julho de 2018

Boa tarde @RockMagicRevived

poderia colocar o trecho do código HTML que você está tentando esconder?

navegantenarede · 17 de julho de 2018

Essa regra deveria remover o elemento da página, certifique-se de que está usando o seletor correto. Se você quer apenas esconder, pode usar a propriedade visibility.

RockMagicRevived · 17 de julho de 2018

@navegantenarede Olá, ja resolvi o problema, agora estou com um novo e.e. tipo, eu quero que a imagem apareça dentro de uma caixa, uma do lado da outra, como um album de fotos, soq na hora de inserir a imagem nao consigo, eu estou usando o caminho do disco local, que pelo q vi nao é valido caso eu queira pagar o dominio, que também n é o caso, jaq isso é apenas treino

adicionado 2 minutos depois

@navegantenarede Eu fiz assim, vou copiar e colar os codigos aq, a primeira etapa e a segunda q fiz:

1°

 <ul id="album-fotos">
     <li id="foto01"><span>casa 1</span></li>
     <li id="foto02"><span>casa 2</span></li>
     <li id="foto03"><span>casa 3</span></li>
     <li id="foto04"><span>casa 4</span></li>
     <li id="foto05"><span>casa 5</span></li>
     <li id="foto06"><span>casa 6</span></li>

2°

ul#album-fotos{
widht: 700px;
margin: 0 auto;
padding: 50px;
overflow: hidden;
list-style: none;
}
ul#album-fotos li {
float: left;
width: 200px;
height: 200px;
margin: 10px;
border: 5px solid #ffffff;
background-color: #ffffff;
box-shadow: 1px 1px 3px rgba(0,0,0,.4);
}
ul#album-fotos li#foto01{
background: url("C:\Users\armamentano\Desktop\SITE EM HTML5\casa de meu tio asdsdsds.jpg") no-repeat;
}

adicionado 9 minutos depois

@navegantenarede Há algum topico ou pub falando apenas sobre imagens em HTML? isso ta me quebrando...

DiF · 17 de julho de 2018

22 minutos atrás, RockMagicRevived disse:

Olá, ja resolvi o problema, agora estou com um novo

Olá, por gentileza, informe o que fez para resolver, qual foi a resolução. Assim você ajuda outros como mesmo problema.

22 minutos atrás, RockMagicRevived disse:

Há algum topico ou pub falando apenas sobre imagens em HTML? isso ta me quebrando...

Você pode usar este mesmo aqui. Não crie outro tópico.

Que mal te pergunte, porque você não coloca as imagens em um diretório no seu ROOT e usa o caminho relativo? Perceba que no seu código o caminho das imagens possuem espaços.

Agora sobre a imagem, o que você precisa é somente definir elas como display: inline-block e depois ajusta os espaçamentos.

Além disso, você está fazendo "errado", não coloque a imagem como background se ela é um grid de imagens.

O ideal é você inserir a imagem com <img> dentro do elemento <li>

Isso porque a ideia é fazer uma galeria de fotos, e estas fotos podem mudar se for um site com várias casas e estas cadas cada uma tem várias fotos.

@RockMagicRevived

RockMagicRevived · 17 de julho de 2018

@DiF É isso cara.... eu não sei fazer isso, eu sou iniciante em HTML, e tipo o cara do tuto ele deu uma pasta pronta pra gente com as imagens e tudo mais, eu quero saber como eu devo preparar a pasta para começar a editar meu site e tudo mais, porque as imagens eu insiro na pasta onde vou alocar todos os arquivos que utilizarei na produção do site, mas mesmo assim não vai, e o que é ROOT? eu vejo você falando isso em alguns posts mas n entendo o que é

adicionado 1 minuto depois

@DiF e com relação a resolução do meu problema, não foi bem uma resolução... na realidade eu não entendi, eu não mexi em nada e fui inserindo outros codigos a respeito de outras coisas e quando fui ver '-' tinha sido resolvido

DiF · 17 de julho de 2018

@RockMagicRevived Então,

Root é chamado de Raiz. Ou seja é o diretório raiz do servidor na qual o site vai ser hospedado.

Se quiser brincar testar no ROOT, basta instalar um programa chamado EasyPHP DEV-server 17.

Ele simula um servidor HTTP(apache) e o servidor Mysql(banco de dados)

O ROOT desse EasyPHP, fica na pasta eds-www, que é onde você vai colocar os arquivos e pastas do seu site.

Então a estrutura ficaria assim com o easyPHP:

eds-www(raiz ou root ou simplesmente " / ")
  |
  |-nomeDoSite
  |    |-imagens  
  |    |   |-foto.png
  |    |
  |    |-CSS
  |    |  |-estilo.css
  |    |
  |    |-JS
  |    |  |-algumJavascript.js
  |    |
  |    |-index.php

Veja esta estrutura. O eds-www é o root, onde você vai colocar todos os sites que você for testar off-line

Ali onde diz "nomeDoSite" é uma pasta contendo um nome qualquer, este nome vai ser o endereço "offline" do site para testes

Ou seja, você vai acessar pelo localhost assim:

localhost/nomeDoSite

Dentro desta pasta nomeDoSite, contem mais 3 pastas, imagens, css e js, onde cada uma delas você colocará o tipo de arquivo.

Repare que o arquivo index,php é o arquivo que vai ser aberto ao abrir o site. então para chamar as coisas nele você faz da seguinte forma:

Como as imagens estão em uma pasta no root, busque pelo caminho relativo:

../imagens/foto.png

esse "dois pontos barra" indica que para que o index acesse ela, precisa ir a partir do root, entrar na pasta imagens.

Se a imagem estivesse dentro de uma pasta e esta pasta estaria dentro desta pasta imagens, você acrescenta mais um "dois pontos barra" ficando ../../imagens/foto.png e por ai vai.

Eu recomendo você estudar novamente os princípios básicos, antes de partir para um projeto maior. Devo pedir desculpas pelo que falarei, mas o autor desse tutorial que você pegou não sabe nada sobre como ensinar e/ou criar um material didático.

Recomendo também ver vários videos no youtube, de preferência nos estrangeiros que ensinam melhor, falam melhor do que os videos feitos por brasileiros.

RockMagicRevived · 18 de julho de 2018

@DiF vou tirar um tempo jaja pra ler, agora eu to com outra duvida, com relação a fazer link com outro arquivo, porque tipo, eu quero que o meu menu, com a opção multimidia por exemplo, quando eu clicar, vá para uma pagina desse mesmo site soq tenha apenas conteudo de imagens e videos e nao textos, c me entendeu eu acho... é porque no video o cara ensina a fazer um link com um doc html c outro, mas eu n entendi direito o motivo...

adicionado 2 minutos depois

@DiF Eu vi você comentando que ele n era um bom professor em outros posts, mas meio que ele ta suprindo minha necessidade por enquanto, o problema dele é que ensina apenas o jeito que ele quer, e não os outros jeitos que tem, porque as vezes quero por um efeito diferente, e tal, e não consigo porque ele não explicou outros jeitos, apenas o que ele ta querendo mostrar

DiF · 18 de julho de 2018

@RockMagicRevived Então, sugiro que não prossiga com estas aulas... que você mais ganha perguntas do que respostas.

O ideal é sempre buscar conhecimento em mais de uma fonte.

No caso, temos youtube com videos em português e/ou em inglês, temos o site W3school que tem muito material didático. tem centenas de sites com materiais bons também.

Devo lembrar que nenhum tutorial ou video aula é 100% correto ou melhor dizendo, a voz da verdade.

Portanto meu amigo, estudar com outras fontes é essencial para seu crescimento neste ramo!

Voltando ao assunto do tópico, pelo que eu entendi, no vídeo que você viu ele menciona só o uso de documentos html para ser um exemplo simples.

Basicamente, você cria seu HTML, contendo as imagens e videos, onde as imagens você insere com o <img> e os videos você insere com o <video> que é um elemento do HTML5.

Quanto a outros tipos de "link com outros arquivos" você pode futuramente usar a linguagem de programação PHP, para fazer páginas dinamicas com uso de banco de dados, ajax(técnica javascript para requisição assíncrona, vulgo: Famosa operação abrir páginas sem refresh ou seja, sem atualizar)

Minha recomendação para você é ir com calma e aprender as partes básicas primeiro.

RockMagicRevived · 20 de julho de 2018

@DiF Olá Dif, bom, eu to seguindo o que você falou to começando do zero no HTML e Css, mas tipo, como eu to fazendo umas coisas para meu tio, eu to avançando em algumas coisas, e to na questão de imagem, mas n é nenhum problema e tal, é duvida, eu quero saber como eu ponho alinhado essas 6 fotos, o que eu quero é o seguinte: 3 em cima e 3 embaixo, ambos simetricas, como faço?

adicionado 0 minutos depois

@DiF todo esse conteudo é ficticio, é apenas para aprendizado, então n se preocupe com divulgação e tal

DiF · 20 de julho de 2018

@RockMagicRevived Então, você pode fazer isso de várias formas.

Usar listas não ordenadas, elementos DIV... podes criar um grid de imagens estilo google... enfim..

https://www.w3schools.com/howto/howto_js_tab_img_gallery.asp

https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp

Eu costumo criar os elementos DIV, deixo eles do jeito que eu quero, depois insiro as imagens.

RockMagicRevived · 24 de julho de 2018

@DiF Eae :v, eu de novo, dessa vez com uma nova duvida, é o seguinte, eu to acompanhando outro curso agora, do 0, e to seguindo os passos q ele fez, porém, nao saiu 100% o que eu fiz, porque tem uma box com mensagem, que eu preciso centralizar, mas nao consigo, segue a img, e o codigo é este aqui:

adicionado 0 minutos depois

@DiF

*{margin: 0px; padding: 0px; outline: 0px; list-style: none;}
a{text-decoration: none;}

.container{
    float: left;
    width: 100%;
}
.content{
    float: left;
    width: 90%;
    margin: 0px 5%;
}
.header-top{
    float: left;
    width: 100%;
    height: auto;
    padding: 20px 0px;
    background: url('../imgs/header.jpg') no-repeat center top #1c1f30;
}
.logo{
    background: url('../imgs/logo_workshop_maior.png') no-repeat center top, url('../imgs/logo_menor.png') no-repeat left 18% top 5px;
    float: left;
    width: 100%;
    height: 80px;
    text-align: center;
    margin: 20px 0 0 0
}
.header-top p{
    float: left;
    text-align: center;
    color: #bababa;
    width: 80%;
    margin: 30px 10px;
    font: 400 1.1em "Roboto";
}
.header-top h1{
    float: left;
    width: 72%;
    margin: 0 14% 20px 14%;
    color: #FFF;
    text-align: center;
    font: 800 3.2em "Open Sans";
    text-transform: uppercase;
}
.header-top h2{
    float: left;
    width: 90%;
    margin: 10px 5%;
    text-align: center;
    font: 400 1.3em "Roboto";
    color: #FFF;
    text-transform: uppercase;
}
.header-top span{
    color: #76d9a9;
}
.btn-partitipar{
    float: left;
    width: 100%;
    text-align: center;
    margin: 35px 0 55px 0;
}
.btn-participar a{
   text-transform: uppercase;
   color: #FFF;
   background: #63d89f;
   padding: 10px 20px;
   border-radius: 20px;
   font: 400 1.2em "Roboto";
   text-shadow: 1px 1px 1px #44946d;
   transition: all 0.3s ease-out 0s;
}

DiF · 24 de julho de 2018

@RockMagicRevived Falta informações.... qual elemento você quer centralizar?

Cade a parte HTML?

Eu vejo quase todos elementos ali no CSS com float left....

Experimente usar um margin: 0 auto para centralizar o elemento. Posterior um text-align center para alinhar centralizado o texto

RockMagicRevived · 13 de agosto de 2018

@DiF Olá Dif... foi mal lhe deixar no vacuo esse periodo, foi porque eu consegui sanar minha duvida, porém A DUVIDA AGORA É OUTRA HAHAHAHA, '-', bom veja este site http://www.tourportugal360.com/ quando você clica nos menus nele, os que tem escrito "novotel" "intercontinental" que são os nomes de hoteis, e locais, a foto abaixo muda conforme você clica nessas opções, eu gostaria de saber se tem como eu fazer isso no meu site, deixando a parte da foto ser 360° graus de lado, apenas trocando de foto mesmo na pagina, sem precisar ir para outra!

DiF · 13 de agosto de 2018

@RockMagicRevived

14 minutos atrás, RockMagicRevived disse:

foi mal lhe deixar no vacuo esse periodo, foi porque eu consegui sanar minha duvida, porém A DUVIDA AGORA É OUTRA HAHAHAHA, '-'

Seria interessante, antes de iniciar outra dúvida, você postar como sanou a sua dúvida passada.

Assim fica o registro para outras pessoas poderem sanar a dúvida também.

Quanto a sua nova dúvida... sim, só usar o ajax ao clicar na imagem para carregar sem sair do lugar.

RockMagicRevived · 13 de agosto de 2018

@DiF Ok, vou procurar postar o que eu fiz, o que é ajax?

DiF · 13 de agosto de 2018

4 minutos atrás, RockMagicRevived disse:

o que é ajax?

É uma técnica javascript para fazer requisições assíncronas. Em outras palavras, carregar coisas sem a necessidade de sair da página ou dar "refresh"

PS: recomendo fazer uma busca aqui no fórum sobre o ajax e jQuery. Tem milhares de tópicos com exemplos de uso.

@RockMagicRevived

RockMagicRevived · 13 de agosto de 2018

@DiF Sem o Java Script não tem como? Porque atualmente eu só sei o HTML e CSS

DiF · 13 de agosto de 2018

@RockMagicRevived

4 horas atrás, RockMagicRevived disse:

Sem o Java Script não tem como?

Não tem como fazer requisições assíncronas sem o javascript.

E mesmo que você colocasse todos os elementos ali e tentasse esconder com display none e depois alterar para block, precisaria do javascript para controlar quem vai ser mostrado no momento.

Como você não sabe nada sobre javascript ainda, vai ficar limitado em fazer links de menu sendo carregados em outra página.

RockMagicRevived · 14 de agosto de 2018

@DiF Entendi, vou procurar aprender sobre java script entao

RockMagicRevived · 23 de agosto de 2018

@DiF Cara, em que eu vou inserir o JAVASCRIPT em um texto HTML? Eu to começando a estudar pelo canal RBtech, e tipo, ele ta ensinando o que cada coisa faz, mas ele não aplicou isso ainda em páginas HTML, como eu faria isso??

DiF · 23 de agosto de 2018

@RockMagicRevived Não entendi a pergunta direito.. mas vou tentar responder.

O javascript vai ser usado para dinamismo no site. Você pode ter a interação do usuário com o site. por exemplo responder formulários e ter um retorno quase imediato sem carregar outra página, poderá fazer efeitos visuais, por exemplo, o jQuery é um framework que possui centenas de plugins que fazem diversas coisas... desde de galerias de imagens, efeitos de transição e coisas do tipo..

Antes de entrar no javascript/jQuery recomendo você já tentar aprender o máximo do HTML e CSS. Pois é importante sabe-los para manipular-los com o javascript.

RockMagicRevived · 23 de agosto de 2018

@DiF Eu to fazendo um curso presencial que o colégiado do meu curso na universidade disponibiliza de HTML e CSS, mas eu comprendi o que quis dizer, obrigado mais uma vez

RockMagicRevived · 24 de agosto de 2018

@DiF Acho que posso especificar essa pergunta minha!

23 horas atrás, RockMagicRevived disse:

@DiF Cara, em que eu vou inserir o JAVASCRIPT em um texto HTML? Eu to começando a estudar pelo canal RBtech, e tipo, ele ta ensinando o que cada coisa faz, mas ele não aplicou isso ainda em páginas HTML, como eu faria isso??

O q eu quis dizer é: como vou inserir e para que eu vou inserir, por exemplo no curso que eu to vendo aqui ele ta apresentando Objetos e Arrays, mas ele n ta demonstrando um exemplo numa pagina HTML, é isso que quero saber, quando eu vou utilizar um Objeto no meu site html? Um Array, uma função e por ai vai!

adicionado 0 minutos depois

DiF · 24 de agosto de 2018

@RockMagicRevived Então,

O que você tá vendo é o básico do básico. É necessário você aprender bem essa parte.

Não quero por a carroça na frente dos bois. Mas respondendo sua pergunta de forma objetiva, o javascript vai permitir fazer diversas coisas.

Seja manipulando um array, populando um elemento select. Criar funções etc.

Um exemplo prático:

<input type="text" id="num" name="num"/>
<input type="text" id="num2" name="num2"/>
<input type="text" id="resultado"name="resultado"/>
<input type="button" value="calcular" onclick="calcular()"/>

function calcular(){
  var num1 = document.getElementById("num").value;
  var num2 = document.getElementById("num2").value; 
  var resultado = parseInt(num1) + parseInt(num2);
  
  document.getElementById("resultado").value = resultado;
   
}