Classificação
0 %
Popularidade
Opine
Descrição:
EXTRA! Baixe GRATUITAMENTE dos pacotes para as aulas: …
😢😢😢não entendo nada, vc usa inline e depois block, como assim? Se vc quer dizer mesma linha e depois muda?
NOVIDADES:
O atributo id="" é semelhante ao atributo class="". Porém, com a diferença de que o id="" é utilizado para rotular UM elemento em específico para fins de configuração de estilo/formatação. Já o class="" serve para rotular VÁRIOS elementos de uma vez só. A sintaxe do Seletor de ID é semelhante ao Seletor de Classes também. A do atributo id="" é: tag#nome-do-id. Já a do atributo class="" é: tag.nome-da-classe. No caso desta da aula, a tag <nav> foi rotulada com id="menu". Neste caso, fica assim: nav#menu
A propriedade list-style: é uma propriedade shorthand (propriedade abreviada), ou seja, ela permite que você configure o valor de várias outras propriedades simultaneamente. Ex:
list-style-type:
list-style-image:
list-style-position:
Para saber mais sobre os valores possíveis para cada uma destas propriedades, jogue no Google: list-style MDN
No caso desta aula, foi inserido apenas o valor "none;". Isto alterou apenas a propriedade type: pois, dentre as propriedades citadas acima (type, image e position), a única que suporta valor "none;" é a propriedade type:. Então, caso fosse colocado "list-style-type: none;", daria na mesma.
A propriedade text-transform: serve para capitalizar um texto (maiúsculo ou minúsculo). Esta propriedade têm DIVERSOS valores possíveis. Alguns exemplos:
text-transform: uppercase; (todas letras ficam maiúsculas)
text-transform: lowercase; (todas as letras ficam minúsculas)
text-transform: capitalize; (apenas a 1° letra fica maiúscula)
———-
A propriedade display: serve para especificar o TIPO de *caixa de renderização usada por um elemento.
*Todo elemento têm um perímetro retangular em volta dele. Isto é a caixa de renderização. Abra um site qualquer, pressione CTRL+SHIFT+C e passe o cursor em cima de qualquer elemento da página e você verá as caixas de renderização.
Existem 3 tipos de caixas principais:
*ANTES DE TUDO: Abra o seu index.html, redimensione a janela do navegador (horizontalmente) para o menor tamanho possível e teste os valores a seguir:
display: inline; – dispõem os elementos em LINHA, como se fossem tags <span>. Faça esta alteração:
nav#menu li {
display: inline;
}
Isto fará com que as tags <li> fiquem AMONTOADAS.
As propriedades como margin:, width:, height: e padding: NÃO ESTÃO funcionando de maneira adequada.
O width: de cada tag <li> está limitado ao tamanho do CONTEÚDO.
Redimensione a janela do navegador (horizontalmente) aos poucos para MAIOR e você verá que as tags <li> ficarão dispostas em linha, ou seja, uma ao lado da outra.
display: block; – dispõem os elementos em BLOCO, como se fossem tags <div>. Faça esta alteração:
nav#menu li {
display: block;
}
Isto fará com que as tags <li> fiquem ORGANIZADAS.
As propriedades como margin:, width:, height: e padding: ESTÃO funcionando de maneira adequada.
O width: de cada tag <li> está ocupando TODA A LINHA.
Redimensione a janela do navegador (horizontalmente) aos poucos para MAIOR e você verá que as tags <li> ficarão dispostas em bloco, ou seja, uma acima da outra.
display: inline-block; – dispõem os elementos em LINHA e em BLOCO ao mesmo tempo. Faça esta alteração:
nav#menu li {
display: inline-block;
}
Isto fará com que as tags <li> fiquem ORGANIZADAS.
As propriedades como margin:, width:, height: e padding: ESTÃO funcionando de maneira adequada (COMPORTAMENTO BLOCK).
O width: de cada tag <li> está limitado ao tamanho do CONTEÚDO (COMPORTAMENTO INLINE).
Redimensione a janela do navegador (horizontalmente) aos poucos para MAIOR e você verá que as tags <li> ficarão dispostas em BLOCO (organizadas, com as propriedades supracitadas sendo aplicadas) e em LINHA (width: está limitado ao tamanho do CONTEÚDO e cada um dos BLOCOS estão dispostos em linha, um ao lado do outro).
**Recomendo assistir o vídeo com o título: "CSS: Entendendo o Display" do canal O Irmão mais Velho que ele explica e ilustra muito bem.
———-
Relembrando da aula 10: as propriedades padding: e margin: servem para determinar o valor da margem interna e externa, respectivamente.
Para quem ficou em dúvida do porquê ele retirou o "type="text/css" no 1:21 de vídeo:
A partir da versão HTML5, este atributo, pelo o que eu pesquisei, neste caso EM ESPECÍFICO (type="text/css"), não é obrigatório especificá-lo. Isto acontece porquê o atributo rel="stylesheet" já indica que a tag <link> fará uma relação com uma Folha de Estilo (um texto CSS). Isso torna o atributo type="text/css" redundante, não agregando absolutamente nada. Então, se você apagar este atributo do seu código, ele continuará rodando normalmente. Entretanto, para ser lido em versões mais antigas do HTML, é necessário especificá-lo.
o meu estilo para o parágrafo no css não está funcionando. p { text-align: justify:} o que pode ser?
Não sei se esse problema aconteceu com mais alguém, mas notei que entre os botões o link de cada um continua pra fora do bloco, tipo HOME_ESPECIFICAÇÕES_ ,pra resolver isso eu encontrei uma solução na parte de html que é colocar o > de fechar o </li> na linha seguinte, por exemplo:
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
2022 fazendo o curso de html5.
quem tiver problemas com o menu na hora de redimensionar a tela, meu código:
header#cabecalho img#icone{
z-index: 1;
left: 650px; ;
top:70px ;
position:absolute;
}
header#cabecalho{
border-bottom: 1px #6060605d solid;
height: 180px;
background: url("../_imagens/glass-logo-peq.jpg") no-repeat 0px 90px;
padding-bottom: 30px ;
}
header#cabecalho h1{
font-family: fontlogo, sans-serif;
font-size: 30pt;
color: #606060;
text-shadow: 1px 1px 1px gray;
padding: 0px;
margin-bottom: -10px;
}
header#cabecalho h2{
font-family: 'Titillium Web', sans-serif;
font-size: 15pt;
color:#888888;
padding: 0px;
}
Bom dia
Ele mencionou que agora poderia ser excluído type="text/css" (1:29 no vídeo). Na aula 10 ele disse para colocá-lo após rel="stylesheet" eu até entendi a criação desse primeiro parâmetro da tag <link> mas não entendi a importância da parte que ele disse nesse vídeo para apagar, e nem sobre a importância de deixá-lo até aqui. Alguém sabe dizer para o que este outro parâmetro serviu até este momento? Obrigado.
eu ja tava so no odio aqui , o dia inteiro assistindo essa aula e não conseguia descobir pq diabo o meu codigo não tava funcionando, na hora que descobri o erro era so por causa de uma letra maiuscula kkkkkkkkkkkkkkkkkkkkkkkkkk SO ODIOOOOOO
Quem estiver tendo problema de resolução (quando redimensiona o browser) e o menu sai fora é so deixar assim
nav#menu ul {
list-style: none;
text-transform: uppercase;
position: absolute;
top: -20px; /*sites por padrão deixam uma margem de 20 px em todas as extremidades*/
right: 0;
}
para quem não está conseguindo sumir com os discos, pode usar somente o html:
<ul style="list-style: none;">
<li></li>
</ul>
tentei as outras maneiras citadas nos comentários deste vídeo, no entanto, não foram eficazes, mas ao utilizar este comando do html, funcionou. <3
Obrigado. Bom demais.
Alguém aí ainda com problema pra colocar o Menu no canto direito superior? Se sim, eu consegui resolver com uns detalhes ainda pra solucionar.
/* Formatação do Menu */
nav#menu {
display: block;
}
nav#menu ul {
list-style: none;
text-transform: uppercase;
position: absolute;
top: 0; /*Aqui está a merda, não adianta eu colocar outro valor, se eu coloque o menu vai pro meio da página*/
right: 0; /* Sim right porque com left não vai nem que a vaca tussa*/
}
nav#menu li {
display: inline-block;
background-color: rgb(206, 206, 206);
padding: 10px;
margin: 2px;
}
nav#menu h1 {
display: none;
}
Olá pessoal. Os arquivos da pasta _css estão em branco para vocês também?
👍
Nada que eu coloco no css faz qualquer efeito…. acho que tem algo errado no index… mas não sei oq… 🙁
<nav id="menu">
<h1>Menu Principal</h1>
<ul type="circle">
<li><a href="index.html">Home</a></li>
<li><a href="specs.html">Especificações</a></li>
<li><a href="fotos.html">Fotos</a></li>
<li><a href="multimidia.html">Mídia</a></li>
<li><a href="fale-conosco.html">conosco</a></li>
</ul>
</nav>
Será que esse curso de SAP que ele faz propaganda no vídeo ainda tá valendo? kkkkkk
Particularmente não gosto de usar a margem negativa e existem outros parametros usados em flexbox q substituem tamto a margem negativa,o ajuste de espaçamento como o posicionamento a direita (que é o que está sendo executado) q são bem mais lógicos e automáticos que ficar fazendo coxa de retalhos
Se você está fazendo esse curso em 2021 e não está conseguindo transformar o menu em caixa alta (upper case), codifique o seguinte no arquivo estilo.css:
nav#menu li {
text-transform: none;
text-transform: uppercase;
display: inline-block;}
Nota: não esqueça de dar um Ctrl + s antes de voltar para o index.htlm 😉
nav#menu ul{
list-style: none;
text-transform: uppercase;
}
nav#menu li {
display: inline-block;
background-color: #dddd ;
}
Se formatar a parte do CSS no Menu e mesmo assim não alterar no site, pode ser que seja só cache armazenado que não atualiza os dados novos no navegador, pode tentar abrir com outro navegador, em guia anônima ou limpar os dados de navegação.
/* Formatação do Menu */
nav#menu {
display: block;
}
nav#menu ul{
list-style: none;
text-transform: uppercase;
position: absolute;
top: -20px;
left: 300px;
}
nav#menu li{
display: inline-block;
background-color: #dddd;
padding: 10px;
margin: 2px;
}
nav#menu h1 {
display: none;
}
Iae galera, estou acompanhando o curso e nessa aula tive um problema, se alguem conseguir me ajudar eu agradeço:
nav#menu ul {
list-style: none;
text-transform: uppercase;,
position: absolute;
padding-top: 20px;
(estou usando editor Visualstudio code e ele não reconhece esse código, tentei deixar apenas top, tmb nao deu certo)
padding-left: 100px; (estou usando editor Visualstudio code e ele não reconhece esse código, tentei deixar apenas left, tmb nao deu certo)
Bom demais, não sei como agradecer…
Comecei a assitir este vídeo e tenho uma dúvida. Um web master dos USA me disse que usar "id" é melhor quando formos utilizar o Javascript e que no caso do CSS é melhor usarmos o
"class". É verdade isso ?
Valeu ae pelas aulas seguirei aqui firme.
odeio quando eu odeio de um PONTO E VIRGULA no final da linha e perco 30 minutos tentando achar o erro! Fiz isso no background-color: #dddddd e esqueci do ;
Uma dúvida. Não deveriam as propriedades position , top e left ser atribuidas no CSS ao menu. Visualmente é a mesma coisa, mas poderá estar errado. Nesta aula o meu CSS ficou assim
/* Formatação do MENU*/
nav#menu {
position: absolute;
top: -20px;
left: 300px;
}
nav#menu ul{
list-style: none;
text-transform:uppercase;
}
nav#menu li{
display:inline-block;
background-color:#dddddd;
padding:10px;
margin:2px;
}
nav#menu h1{
display:none;
}
e visualmente fica igual.
Queria saber se existe algum problema em ter desta forma
aprendendo em 2020!!
Obrigado, professor!
Obrigado, professor!
OK HOMENS, VCS VENCERAM! achava que mulher era detalhista, mas percebi que vocês são mais…se esquecer uma vírgula, já era. Encontre o erro: nav #menu ul {
Pra quem ficou travado na parte do css em mudar a cor dos links [no meu eu só mudei a cor da fonte, não o fundo]
Basta tirar o "nav", ficando somente "#menu", além disso, ao invés de colocar o "li" muda para "ul", resultado:
#menu ul li{
display: inline-block;
color: #ebe9e9;
text-align: center;
padding: 10px 15px;
margin: 5px;
margin-left: 30px;
}
#menu ul a:link {color:#ebe9e9;}
#menu ul a:visited{
color:#ebe9e9;
}
#menu ul a:hover {
background-color:#ffffff;
color:#EA676E;
}
#menu ul a:active {
color:#EA676E;
}
#menu h1 {
display: none;
}
LEMBRANDO: As cores estão diferentes da do exercicio, assim como vai pintar a fonte, caso queira pintar o bg, troque o "color:" por "background-color:".
Também coloquei outras coisas, além do "hover", como a cor do "link", "active" e "visited".
Quando mexo no tamanho do browser, o menu fica todo fora de esquadro! Alguem sabe como consertar isso?
6:56 eu coloquei 02px porque so sem o 0 na frente ta dando erro..
Mano, programarão e foda, preste atenção quando o programa avisa onde tem o erro e a linha que ta esse erro. No meu caso faltou apenas esse simbolo > ai tudo funcionou…
Galera só vim deixar um comentário não sei se ja falaram aqui mas se você colocar menu com letra maiuscula tipo : Menu no id na pagina index.html você também terá que colocar Menu com letra maiúscula na pagina do estilo.css Exemplo : nav#Menu ul caso contrário não vai funcionar aconteceu comigo deixei com letra minúscula mesmo
As configuracoes css do nav#menu nao funciona nem fudendo… sera que e devido a alguma atualizacao?
Galera, pra quem quiser colocar o link dentro de todo o background-color, é só colocar o <a> antes do <li>. o código fica assim:
<a href="index.html"> <li>home</li> </a>
/*
talvez minha dúvida seja a dúvida de mais alguém
*/
Peguei a dica do S.D
Crie um novo arquivo css e coloque os comandos do nav#menu nele. Depois só criar uma outra tag link com esse novo arquivo dentro do head.
<head>
<meta charset="UTF-8">
<title>Tudo sobre Google Glass</title>
<link rel="stylesheet" type="text/css" href="_css/estilo.css">
<link rel="stylesheet" type="text/css" href="_css/seila.css">
</head>
O Guanabara, faz um curso de HTML5 atualizado porque eu estou fazendo no VScode e essa parte do CSS não está funcionando, então faz um atualizado para 2020 por favor!!
Que música chata no inicio ):
Uma forma de posicionar o menu no topo da página sem precisar colocar valor negativo para top:
Com o site aberto no Chrome e o menu posicionado como em 8:41 do vídeo, aperte F12 para abrir o devtools. Você vai ver que tanto ul e body têm uma margem de topo. Aí só definir o margin-top para 0px no CSS:
body, nav#menu ul {
margin-top: 0px;
}
/* Bug Do Menu*/
Errado: <nav id="Menu">
Certo: <nav id="menu">
O meu bug foi na letra maiúscula, fora ela: veja se vc fechou com > ou ; ou " olha o codigo acima de esta fechado tbm com > e tiro e queda.
ainda bem que inventaram bootstrap
os alguns comando dessa aula não funcionou no meu aplicativo, alguém poderia me ajudar, fiz e refiz e nada.
/* FORMATAÇAO DO MENU */
nav#menu{
display: block;
}
nav#menu ul {
list-style: none;
text-trasnform: uppercase;
position absolute;
}
nav#menu li{
display: inline-block;
background-color: green;
padding: 10px;
margin: 2px;
}
}parece que não reconhece eles, pois conforme escrevo não aparece como sugestão.
Ccara sensacional!!
pleno 2010, tirando varias duvidas com um Grande Professor
Nao tenho o arquivo CSS. Alguém pode me passar por favor.
Para você que está com dificuldade com o comando nav#menu,
Eu tentei inumeras maneiras de corrigir, ate eu perceber que na linha de codigo anterior eu tinha deletado o simbolo ">" assim a tag "<img src="_imagens/glass-oculos-preto-peq.png"" nao estava fechada e por isso nao deixava a tag NAV funcionar, eu fui e adicionei o simbulo > para fechar a tag image e agora esta funcionando! Espero que isso te ajuda tambem.