Curso de HTML5 – 16 – Cabeçalho em CSS3 – by Gustavo Guanabara

Curso de HTML5 – 16 – Cabeçalho em CSS3 – by Gustavo Guanabara


♫ ♫ opening theme Hello, welcome to another class of your HTML 5 course, my name is Gustavo Guanabara, I am your teacher. And now, we will continue the CSS study for us format our header. So, we will now learn some new settings in CSS, mainly for us to leave the top of our site tidy Let’s take a look to see where we stopped last class Come on. Here I will open my PHPStorm, you download the JetBrains site, which is one of the supporting companies of the project. So there you access “www.jetbrains.com” and lower your PHP Storm or WebStorm, who is an editor similar to PHP, but returned to the area of ​​HTML also. But PHPStorm does the job Likewise. So this here is our code. We will now open in our browser, just up here, click on the icon of which browser you want to open. I will choose Google Chrome, which is what we are using from the beginning. I’ll play here, Google Chrome on my other table so we can see straight. And that was the point where we stopped last class. So we’ve created the interface, put it line, we put the image with absolute position, the menu also with absolute position, as did the menu and everything. If you are here and stopped in this class, for some reason, not attended previous classes. Click here. You will see all classes in order, you will see a list, actually. You will be able to choose at which point you want to start, but I recommend that you go from the beginning. But let’s come back here to code for us to format our header. Turning pro code there, you realize that we have an area “header” that goes from here … until here. So this is my header area, which visually It is located here, but there is still a division needs so we can see is “Google Glass, Google Glass revolution is coming” and the main menu which ended up there. So, there is a division here. On here. That’s my session already news. We will create a division in the first place, to separate these two areas. Let’s go back to the code, the CSS and will, as we left the last class here in the open, setting to the “header header.” As I said, the first thing I want to create is a line, then there are the edge parameters So you have, “border”, “border-bottom” which is the lower edge of “border-left” that is the left edge “Border-right” which is the right edge, and finally, “top border”, which is the top edge. And you can set up, as you may have seen here, many things, for example, the top border color. Let’s set the border-bottom, from my header, and we will indicate three parameters. The first is the width the border in pixels. Then I’ll put a very thin edge of a pixel. Secondly, the border color. I can use my very dark gray, which I set for this interface which is the “# 606060” just to not get too strong. Then, we will indicate the format of this edge. In my case, here, I’ll want it to be “solid” but I can use “dashed”, which is dotted, “outset” or “inset”. Let’s put “solid” Let’s save and update Google Chrome. Note that we now have a solid line. Just to illustrate, let’s set the parameter “dashed” It is dashed. If you want, you can use the “dotted”. which is dotted, to be more discreet. You can also use “Double”, if you want more emphasis and so on. Let’s return to solid. And now we have the division. With this division, he formed a header that is just writing content. I must have to say what is the height of this header. In my case here, I set the header to 150 pixels So let the parameter that we have seen, that is the point, which is the “height”. 150 pixels. Updating. Now we have the header defined size. My glasses got a little higher than I I wanted. I’m going down it a little. For that, I come here on the image icon and will lower this value, increasing the top. 80, for example … A little less. 70. Ready. Another thing we have in our example is the logo mark of Google Glass, which is here, located next door. And then, there are two ways to put that image. One way is that I have taught to you, using thetag of the HTML itself. The other way, which is a trick and still uses very site is using CSS within an object. A

in our case here, the

. Let’s see how you do. So the tip I will give here is to make the Google Glass logo appears directly in the header. We have a picture, which is located in the images that you downloaded in the package folder. Let the area of ​​the “header # header” and we set a background. My background will be composed of an image. To upload an image, or any other type of CSS file, we will use the reference “url”. “Url” is the address that the object will have. In my case here, it is within the images folder, which is located in the previous folder style folder, as we have seen before we are in the CSS folder I show here for you … in my project I have the CSS folder where I have estilo.css file, and I have the pictures folder where I have multiple images, including my file “logo small glass” which is the file I want. So if I’m in the CSS folder stirring in estilo.css file, I have to go back a folder pro design glass and into the images folder. So I have to put here, within the parameter “URL”, “..” to go back one folder, “underline (_), slash (/) images, slash (/)” glass-logo-peq.jpg, which is the filename Let’s leave that way, save. And we will update. now we have the logo as a background object “header” and it was exactly what I ordered he put an image as Background and he did as the image is small, he said this image around inside the object, since the object “header” is very large we will now learn how to make disappear with all these repetitions and to just have an instance of the selected image as I said, that here was ugly ‘hell’, but we will use a feature that allows me to CSS We return here and soon after the first parameter, which is the “url” than we load file we will put a parameter “NO-REPEAT” so it does not repeat the object let’s see how it works it Now we have just one time only then you ask me
 “-pow Guanabara, but then you have generated another problem” because we have the “Google Glass” and the logo below then the position of the object is also important CSS also allows you to position an object placed as “Background” to do this, we put two more parameters after the “NO-REPEAT” the first is the lateral displacement we will not have any then “0px” and the second is the vertical displacement as I have “150px” height of my head, I will put a slightly smaller value, such as “100px” this will be my vertical displacement we will update and now we have the logo placed as “Background” without replication, any and positioned in the location that I want in fact, I think this was just a little below normal I will climb it a little decreasing the size of the “TOP” to “80px” now it is already in a pleasant position. Also because I will work these two titles, now You saw how simple it is? seen how practical? and I will show you one more very simple thing, very practical and you can do for your life I have spoken here several times during this course on the TRAINNING which is a center of specialized training in various technologies such as SAP, IT GOVERNANCE, ITIL, COBIT, ANT, PMP, JAVA development for IPHONE, and more and then I’ll give a very valuable tip for you time for you to choose a course I will choose any of, for example, the course CCNA what you do and automatically get an ITIL V3 course to choose the page of the specific course, note that you have all the information but I do not know if you noticed, down here there is a little button preregistration I just move the mouse over it and fill data such as full name, e-mail, a landline, a cell and the state where you are, for example here, I’m in Rio de Janeiro, fill my data and click on submit and then coming practicality A trainning consultant will contact you It is clear all the doubts that you happen to have It is from here You will be able to do your subscription automatically You will already have the day of the beginning of their course Pratico right? Very important this tip Go there in the trainning site Tá address here www.trainning.com.br Choose your course Does your application Or does your pre-registration With the hint that I used to you now Returning here our class As I said before Let’s set These two titles here The title It is the subtitle First thing we’ll do It is set Each one of them As they are objects inside the header So let’s put there object header What has the id header Every object that is h1 It’s my main title To this header Let’s set For example My font-family To source arial sans-serif The size To 30 pixels It is the color to dark gray So I’ll save You update Now we have the google more discreet glass With a sans-serif font Let’s continue Place a text-shadow To become more stylish we’ll use a very discreet shadow 1 pxiel displacement Mias a vertical displacement 1pixel 1 pxiel scattering her to stay well clarinha Is it going to be black using rGBA 0,0,0 defines black and paragraph 6 of transparency For he has 60% in the alpha channel saving It is updating Note that now he has a slight shadow Let’s now do the h2 id header with header Every object that is h2 You will have the following format Once again We will use the font-family arial We will modify these sources in the next class Also sans-serif The color It will be clearer, will be 888888 It is the font size Via be 15 points I used pixels here, forgiveness are 30 points And now we have the darkest title It’s a little clearer subtitle This is where you may have noticed something, dammit Yeah weird These titles they are very separated This because We do not work Neither the margin Neither the padding each let’s do it now as I explained earlier every object has a PADDING, which is an internal space and MARGIN, which is an external space we will set each we put both pro “h1” and pro “h2” a ‘padding’ “0” just put “padding” “0px” and here too updating. no significant change but now we have defined, as made explicit that the “padding” will be “0” the first thing we will reduce is the margin under the title and then I’ve shown to you, the parameter “MARGIN” you have those parameters to place “margin” and will put the value of the margin up, right margin, margin and below the left margin however, this title is already with the edges of the left, top and right perfect I just want to work with low margin so I do not need to be setting the parameter “margin” I can use the “MARGIN-BOTTOM” to set the bottom margin and “MARGIN-TOP” on the other object, to set the margin up let’s see how it works then as I explained earlier. In the “h1” I only want to set the margin’re below it I want to put to “0px” for example I have to come here. So let’s set the header margin “h1” using the “MARGIN”. But I just want the bottom edge I can use the “MARGIN-BOTTOM” we put the “margin-bottom” to “0px” saving and updating now we have the subtitle up a bit but he still has a difference this difference is the margin above the “h2” we set it. For that we are here under the “h2” let’s put The “margin-top” which is the top margin, also for “0px” and we see the result now he joined a title on the other, because, my “h1” has “margin-bottom” “0px” has no margin below and my “h2” has no margin on it was clear? So when you want to work with all the banks, you can use the parameter “margin” but if you want a specific margin use the “MARGIN” “-TOP”, “-left”, “-right” or “-BOTTOM” so now, you realize that we have a well-defined header area with a dividing line, I can use it a little more discreet or a little more specific this will your taste we have a logo that is not an image if I click the right button will not show the option to save image as here, I have the option to “save image” here I do not have this option because it is not an image, it is a “background” and now, we can better configure the sources for each of the titles but this is a mission only to the next class we’ll have next week continue to follow our course. Sharing the lessons, shown to your friends enjoying, favoritando, signing the channel and that is how you will help build the HTML course Then again, when the two buttons one for registration. Forms part of the channel, it helps a lot, so there’s me as to you It helps me, because the amount of subscribers is very cool then, help. We are preparing some things for entries in the channel then sign up if you have not already, OK button here to signup and, in all classes button. You will see all classes that have been seen so far the whole course that’s being prepared and released gradually if you come now and do not know me … my name is Gustavo Guanabara, I’m your teacher and we’ll see you next class. A hug

Comments

  1. Post
    Author
  2. Post
    Author
  3. Post
    Author
  4. Post
    Author
    André Dias

    isso é normal? meu menu fica além da interface e quando diminuo a tela a imagem do óculos não se move, ela fica fixa

  5. Post
    Author
  6. Post
    Author
    COMPUCELL CELULARES E INFORMATICA

    Olá tentei varias vezes mas quando coloco c comando no css a borda ou vai para o final da pagina ou para cima, quando eu tento alterar algo, também altera a <div>, será que alguém poderia me ajudar se possível?, ficarei grato obrigado!

  7. Post
    Author
    Douglas Pinto do Nascimento

    Desculpa ai pessoal! Mas não consegui colocar a imagem no background. A unica coisa que esta diferente e o endereçamento eu coloquei o endereço completo da imagem.
    E nem colocando background-img vai!!

    Me ajudem!!!

    Obrigado

    header#cabecalho {
    border-bottom: 2px #606060 solid;
    height: 150px;
    background: url:("E:DOUGLASCURSO_HTMLprojeto-glass-html5_imagensglass-logo-peq.jpg") no-repeat 0px 100px;

  8. Post
    Author
    After Render Studio

    a posição do icone do óculos eu tive que pôr relativa, pois ao mudar as dimensões do navegador o óculos mudava de posição…

  9. Post
    Author
  10. Post
    Author
    Wendel Soares

    Galera que não apareceu a linha do comando "border-bottom" é porque lá no index.html a tag header não está fechada, falta o </header> (pelo menos no meu), então procurem e corrigam esse erro que vai dar certo!

  11. Post
    Author
    João Victor

    Pra jogar a logo marca pro canto inferior esquerdo eu fiz assim:

    background-position: bottom left;

    funcionou mas não sei se é o certo.

  12. Post
    Author
  13. Post
    Author
    Henrique Leao

    Gustavo parabéns cara tu explica muito bem estou ingressando no mercado agora com 25 anos, e esses curso disponíveis em seu canal são muito bons, você deveria fazer um curso pago mais complexo tenho certeza que iria fazer sucesso e mais uma vez parabéns e muito obrigado pelo conhecimento.

  14. Post
    Author
    Pierry Rodrigues

    Aqui o problema com o non-repeat, era que a imagem estava aparecendo fora da margem do cabeçalho, certifique-se que a altura "height" esteja de bom tamanho, e tente passar o parâmetro esquerda-direita da imagem como 30px e pelo menos metade da altura do cabeçalho para o parâmetro cima-baixo, ex: height: 150 url("….") non-repeat 10px 75px , depois é só ir regulando até chegar ao local certo.

  15. Post
    Author
  16. Post
    Author
    Kaua Alves

    recomendo colocarem 90 px, e tb pra quem teve o mesmo erro q eu aqui o código

    header#cabecalho{
    border-bottom: 1px #606060 solid;
    height: 150px;
    background: url("../_imagens/glass-logo-peq.jpg") no-repeat 0px 90px;
    }

  17. Post
    Author
    Junior Damasceno

    Gente, se você chegou nessa aula e não está aparecendo a linha divisória, repare que no seu código pode estar sem o fechamento, "</header>", o meu estava assim e a linha não aparecia de jeito nenhum, espero que eu tenha resolvido seu problema.

  18. Post
    Author
  19. Post
    Author
    Troonz

    Para quem está vendo em 2018 e o background não funcionou no css faça isso:
    Primeiro vá na index.html e adicione a logo do glass peq, com o hqgroup e dps adicione um id, ae va para seu css e coloque o codigo:
    img#logodoglass {
    position: absolute;
    top: 100px;
    left: 100px;
    }
    Lembrando que vc ira colocar img# O ID QUE COLOCOU NA IMG

  20. Post
    Author
    Jackson Araújo

    Eu tentei colocar colocar o padding e as margens de cima e de baixo em 0px, mas não aconteceu nada. Apesar de ter seguido todas as instruções.

  21. Post
    Author
  22. Post
    Author
    Daniel Francisco

    resolvi dessa forma a questão do cabeçalho dessa forma, fui em

    <header id="cabecalho"style="background:url('_imagens/glass-logo-peq.jpg')">
    na parte do Html no Header esse código assima pra quem ta fazendo esta aula em 2018.

  23. Post
    Author
  24. Post
    Author
    Thiago Justino dos Santos

    Quem está com problema em aparecer a linha do cabecalho é simples, basta digitar ocdigo retirando o #cabecalho

  25. Post
    Author
    Thiago Justino dos Santos

    Adicionar imagem do cabecalho pra quem não está conseguindo
    background: url("../_imagens/glass-logo-peq.jpg") no-repeat 0px 100px;

  26. Post
    Author
  27. Post
    Author
    Fernando Bueno

    Não consegui configurar o heigth.. então criei outra solução através da position: relative;

    header#cabecalho {
    border-bottom: 1px #606060 solid;
    heigth: 150px; /*NAO FUNCIONOU!*/ solução a baixo.
    background: url("../_imagens/glass-logo-peq.jpg") no-repeat 0px 62px;
    }

    header#cabecalho h1 {
    font-family: Arial, sans-serif;
    font-size: 30pt;
    color: #606060;
    text-shadow: 1px 1px 1px rgba(0, 0, 0,.6);
    position: relative;
    top: -15px
    }

    header#cabecalho h2 {
    font-family: Arial, sans-serif;
    font-size: 15pt;
    color: #888888;
    position: relative;
    top: -40px
    }

  28. Post
    Author
    Bruno Suarez

    Desde quando abriu a parte de CSS meu site não pega as configurações, já voltei e revi aulas, mas continua não pegando as configurações. Alguém que o código tenha dado certo poderia compartilhar o código CSS para eu corrigir o meu caso necessário.

  29. Post
    Author
  30. Post
    Author
  31. Post
    Author
  32. Post
    Author
    Davi Alves

    Logo problem solved.

    header#cabecalho
    {
    border-bottom: 1px #606060 solid;
    height: 150px;
    background-image: url("../_imagens/glass-logo-peq.jpg");
    background-repeat: no-repeat;
    background-position: 0px 100px;
    }

  33. Post
    Author
    MyWorld By

    Depois que fiz a aula das tags section, aside e footer, o código de border-bottom por mais que esteja no cabeçalho não funciona, não sei como corrigir isso 🙁 deu piti

  34. Post
    Author
  35. Post
    Author
    MDigital Up

    Olá gente!

    Alguém aí teve problema no posicionamento do header quando colocou o border-bottom: 1px #606060 solid; ?

    Quando eu coloquei essa linha meu header ficou assim: http://prntscr.com/jcj8eu

    Agradeço se alguém puder me ajudar nisto!

  36. Post
    Author
    MDigital Up

    As características do header#cabecalho h1 e header#cabecalho h2 se aplicaram a todo o site, sabem dizer onde errei? Valeuu

  37. Post
    Author
  38. Post
    Author
  39. Post
    Author
  40. Post
    Author
    MrZMasara

    para quem ta em 2018 e não ta conseguindo monta ta aqui o codigo:

    border-bottom: 1px #606060 solid;
    height: 150px;
    background-image: url("../_imagens/glass-logo-peq.jpg");
    background-repeat: no-repeat;
    background-position: 0px 80px;

  41. Post
    Author
    Yuri Cordeiro

    Pra quem estiver colocando no-repeat e o logo some, PROVAVELMENTE no início desta linha você colocou background-image ao invés de só background: url(…)…;

  42. Post
    Author
    Andre Silva

    para quem ta em 2018 e nao ta conseguindo colocar a linha do interface. é simpes volte no seu codigo do index e va em cabecalho e olhe onde esta o erro. porque no meu codigo esqueci so uma letra, e por causa dessa letra nao tava conseguindo colocar a linha.

  43. Post
    Author
    Flavio M Lombardi

    Guanabara, boa tarde. Cheguei até a aula 16. Até a aula 15 estava tudo OK, porém quando cheguei nessa aula, meu site ficou desformatado. Como faço para conseguir tirar dúvidas sobre as aulas?

  44. Post
    Author
    Karoline Goiana

    pra quem não está conseguindo por a linha é sor ir lá no arquivo index.html em header botar um id, vai funcionar tanto a imagem da aula anterior como a linha, vai ficar assim
    <header id="cabecalho">
    não esquecem de salvar

  45. Post
    Author
  46. Post
    Author
    Kamui

    cara nao consegui fazer essa linha do cabeçalho, tentei outras soluçoes abaixo e nao deu certo. alguem tem uma soluçao pra isso??? vlw!!

  47. Post
    Author
  48. Post
    Author
    Um Meliante Comum

    Meu logo ficou namoralzinha desse jeito

    header#cabecalho{
    border-bottom: 1px #606060 solid;
    height: 150px;
    background-image: url("../_imagens/glass-logo-peq.jpg");
    background-position: 0px 95px;
    background-repeat: no-repeat;
    }

  49. Post
    Author
    Mateus Sousa

    Galera para quem esta em 2018, é esta tendo dificuldades em colocar a border-bottom e só retira header#cabecalho substituindo somente por a tag: header, fiz aqui no meu código e funcionou! abraço espero ter ajudado.

  50. Post
    Author
  51. Post
    Author
  52. Post
    Author
    NINO CRAFT

    PARA OS INICIANTES DO CURSO…
    CRIAMOS UM NO WHATSAPP PRA INICIANTES LINK DO GRUPO ABAIXO:
    https://chat.whatsapp.com/2rrRIROFt7uB8G4xlQGWa4

  53. Post
    Author
    Anderson Nieto

    Quando eu diminuo a janela, o óculos fica fora do div mas, quando eu maximizo-a, ele fica normal… alguém sabe o que fazer ?

  54. Post
    Author
  55. Post
    Author
  56. Post
    Author
    John Martins

    por que será que sempre tenho que colocar valores diferentes para ficar melhor posicionado no meu, sendo que o do professor sempre fica bom com os valores que ele coloca ?

  57. Post
    Author
  58. Post
    Author
  59. Post
    Author
  60. Post
    Author
  61. Post
    Author
  62. Post
    Author
  63. Post
    Author
    Luana Kelly

    Essa parte do código não está funcionando. Por favor, me ajude:
    header#cabecalho img#icone{
    position: absolute;
    left:780px;
    top:70px;
    }
    /*configuracao do header cabecalho*/
    header#cabecalho{
    border-bottom: 1px 606060 solid;/*borda(largura,cor,formato*/
    height:150px;/*altura*/
    background:url("../_imagens/glass-logo-peq.jpg");
    }

  64. Post
    Author
  65. Post
    Author
    Leidenschaft

    Hey Guys, eu não consegui fazer como o método do guanas, sempre que tentava posicionar a logomarca, ela nunca acompanha meus comandos, sempre ficava torta ou num local cujo eu não conseguia manipular, então fiz o seguinte: Fui no index.html, abaixo do comando da primeira imagem( a do óculos – <img id="icone" src="_imagens/glass-oculos-preto-peq.png">
    ), e criei um img com o ID = "logo", em seguida especifiquei o endereço com : <img id="logo" src="_imagens/glass-logo-peq.jpg"> . Após isso, fui no estilo.css, abaixo do : header#cabecalho img#icone {

    position: relative;

    left: 1030px;

    top: -60px;

    }
    e criei um : header#cabecalho img#logo {

    position: relative;

    left: -200px;

    top: -90px;

    }
    Estas configurações são com base na minha resolução de tela, desse modo que especifiquei, consegui por a imagem acima do traço cinza que ele criou, e abaixo do nome google glass.. Pelo menos pra mim funcionou dessa maneira, espero que mais alguém quando ver isto, se estiver com os mesmos problemas, também consiga.

  66. Post
    Author
  67. Post
    Author
  68. Post
    Author
    Adramane Bari

    Gustavo eu  sou da guine-Bissau, costa ocidental da Africa gosto das suas aulas especialmente HTML, mysql etc estou especializando na base de dados aqui na nossa capital Bissau. este é o meu ultimo ano da faculdade tenho que criar um programa e apresentar a monografia gostaria que fosse o meu orientador. espero a resposta satisfatório do seu lado. obrigado.

  69. Post
    Author
  70. Post
    Author
  71. Post
    Author
  72. Post
    Author
    Rafael Aires

    Quem esta com dificudade em 2019

    header#cabecalho img#icone {
    position: absolute;
    left: 750px;
    top: 50px;
    }

    header#cabecalho {
    border-bottom: 1px #606060 solid;
    height: 175px;
    background: url("../_imagens/glass-logo-peq.jpg") no-repeat 0px 100px;
    }

    header#cabecalho h1 {
    font-family: Arial. sans-serif;
    font-size: 20pt;
    color: #606060;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    padding: 0px;
    margin-top: 0px;
    }

    header#cabecalho h2 {
    font-family: Arial, sans-serif;
    color: #888888;
    font-size: 15pt;
    padding: 0px;
    margin-bottom: 0px;

  73. Post
    Author
  74. Post
    Author
  75. Post
    Author
    Thiago Escobar

    Porque a seção de notícias está " invadindo" o header id= cabecalho, se esse está delimitado pela tag no html?

  76. Post
    Author
    LOCS Channel

    quero fazer a sugestão a vocês de ensinarem a fazer o uso do bootstrap, pois facilita o trabalho de um web designer

  77. Post
    Author
    Esdras Santos

    Fala galera, tudo certo, estou com dificuldade de colocar a imagem de background.
    O código ficou assim:
    header#cabecalho {

    border-bottom: 1px #606060 solid;

    height: 142px;

    background: url("C:/Users/Positivo/Desktop/projetos-de-programacao/curso-html5/curso-html5-pacote01/projeto-glass-html5/_imagens/glass-logo-peq.jpg") no-repeat 0px 80px;

    não sei mais o que fazer.
    PS: Estou usando o Notepad + +

  78. Post
    Author
    Adriano Tercio

    Não consegui fazer essa aula, minha imagem ficou toda desconfigurada… só aparece o inicio dela e corpo fica escondindo sob a divisória rs

  79. Post
    Author
    Gustavo Biscaro

    Usei o mozilla e aqui ficou perfeito assim:

    header#cabecalho img#icone{
    position: absolute;
    left: 80%;
    top: 80px;
    }

  80. Post
    Author
    Vinícius Amâncio

    Atenção quem ta com problemas no posicionamento da logo
    Assim que nós criamos o <header> (NO INDEX.HTML) ele automaticamente cria o </header> na mesma linha e isso impossibilita fazer o código igual ao que o Guanabara usa.
    Pra resolver esse problema, no index.html vcs devem usar o código abaixo.
    Entenda onde começa o header e fecha.

    <header id="cabecalho">
    <hgroup>
    <h1>Google Glass</h1>
    <h2>A revolução do Google está chegando</h2>
    </hgroup>
    <img id="icone" src="_imagens/glass-oculos-preto-peq.png">

    <nav id="menu">
    <h1>Menu Principal</h1>
    <ul>
    <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">Multimídia</a></li>
    <li><a href="fale-conosco.html">Fale conosco</a></li>
    </ul>
    </nav>
    </header>

  81. Post
    Author
  82. Post
    Author
  83. Post
    Author
    Felipe Barreto

    border-bottom: 1px #606060 solid; no lugar de solid poderia ser mais o que? E como eu conseguiria obter essa informação por conta própria?

  84. Post
    Author
  85. Post
    Author
  86. Post
    Author
  87. Post
    Author
  88. Post
    Author
  89. Post
    Author
  90. Post
    Author
    Leandro Martins

    Quando eu abdo o chrome em tela cheia ele muda a posição do site e o logo sempre fica fora do lugar? Pode me ajudar

  91. Post
    Author
    H. Santos

    Problemas com o logo?
    tentem esse formato:

    header#cabecalho{

    height: 750px;

    border-bottom: 3px rgb(126, 144, 223) solid;

    background-image: url("campo.png");

    background-repeat: no-repeat;

    background-position: 20px 50px

    }

    não estou seguindo o projeto original entao os numeros sao diferentes mas esse esquema está funcionando, o outro não deu muito certo.

  92. Post
    Author
  93. Post
    Author
  94. Post
    Author
    Jr' S

    Quem está vendo em 2019
    O meu o header#cabecalho não estava respondendo, troquei para hgroup e deu certo
    exemplo a baixo:

    hgroup#cabecalho{
    border-bottom: 1px solid;
    height: 175px;
    background: url("../_imagens/glass-logo-peq.jpg") no-repeat 0px 100px;
    }

    hgroup#cabecalho h1{
    font-family: Arial, sans-serif;
    font-size: 30px;
    color: #606060;
    text-shadow: 1px 1px 1px rgba("0,0,0,0.6");
    padding: 0px;
    margin-bottom: 0px;
    }

    hgroup#cabecalho h2{
    font-family: Arial, sans-serif;
    color: #888888;
    font-size: 15pt;
    padding: 0px;
    margin-top: 0px;
    }

  95. Post
    Author
    Daniel Horodenko

    Gente, quando eu vou redimensionar a pagina quando eu diminuo a janela, os textos não se comprimem ou se alinham (no início do curso estava tudo normal), e o menu e imagem do óculos nem saem do lugar, o que pode ser?

  96. Post
    Author
    Otávio Gabriel Silva Moreira

    Pra quem ficou c o menu e o ícone na posição errada quando muda o tamanho da janela do navegador, adiciona o parâmetro "position: relative;" na div. Assim tudo dentro vai ser relativo a div, e mesmo que mude o tamanho da janela do navegador, como é relativo a div tanto o menu quanto o ícone se mantém na posição correta

  97. Post
    Author
  98. Post
    Author
    Julio Tenorio

    aqui 2019 , não estava conseguindo colocar o back glass por css , quando eu dava o comando no repeat a img desaparecia , então fiz por html , se alguém precisar saber como … msg no zap (14)98134-9969.

  99. Post
    Author
  100. Post
    Author
    Michael Marocco

    Estou fazendo o curso usando o sublime 3 e toda vez que erro uma marcação e tento corrigir é como se tivesse a função insert do teclado ativado e sai apagando o que está depois alguém. Sabe como corrigir isso ( obs: a função insert do teclado está desabilitado)

Leave a Reply

Your email address will not be published. Required fields are marked *