Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
RockMagicRevived

HTML Como esconder um texto ou frase de um site

Recommended Posts

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...

Editado por DiF
Botão CODE <>

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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:

 <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...

Editado por DiF
Botão code <>

Compartilhar este post


Link para o post
Compartilhar em outros sites
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

Editado por DiF

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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. :thumbsup:

  • Obrigado 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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?

DIF.png

adicionado 0 minutos depois

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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:

duvidas.png

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;
}

 

Editado por DiF
USE o botão CODE <>

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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!

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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

Editado por DiF

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações 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

×