Erros de iniciante parte 1 kkkkkkk
30/01/2018
0
Fala Galera estou começando agora a colocar em pratica oque aprendi e estou montando meu site, estou com uma duvida, queria colocar um fundo transparente na frente de uma imagem mas não quero que isso afete o texto vocês pode me ajudar segue o código abaixo obs:(Estou começando o site), e quero que me digam oque acharam ate agora se estou usando boas praticas de programação.
HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<link href="css/estilo.css" rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="">Inicio</a></li>
<li><a href="">Empresa</a></li>
<li><a href="">Portífolio</a></li>
<li><a href="">Contato</a></li>
</ul>
<div class="apresentacao">
<h1>Olá Seja Bem vindo</h1>
<p> Vamosa lá Oque você dprecisa no temos bem aqui</p>
</div>
</nav>
</header>
</body>
<footer>
</footer>
</html>
CSS:
header {
background-image: url(imagens/imagem_4.jpg);
background-repeat: no-repeat;
overflow: hidden;
height: 800px;
}
nav {
background-color:black;
opacity: 0.60;
padding: 1px;
position: fixed;
width: 98.5%;
}
nav ul {
margin-top: 50px;
display: block;
text-align: right;
z-index: 1000px;
position:relative;
color: aliceblue;
}
nav ul li {
list-style-type: none;
display: inline;
}
nav ul li a {
padding: 10px 30px;
text-decoration: none;
color: #FFF;
display: inline-block;
margin: -3px;
}
nav ul li a:hover{
background-color: #6E6E6E;
border-radius: 10px;
}
body{
background-color: #C0C0C0;
z-index: 1000px;
position: relative;
Considero toda ajuda e critica bem vinda, apesar sou iniciante então vou errar muito para aprender obrigado.
HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<link href="css/estilo.css" rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="">Inicio</a></li>
<li><a href="">Empresa</a></li>
<li><a href="">Portífolio</a></li>
<li><a href="">Contato</a></li>
</ul>
<div class="apresentacao">
<h1>Olá Seja Bem vindo</h1>
<p> Vamosa lá Oque você dprecisa no temos bem aqui</p>
</div>
</nav>
</header>
</body>
<footer>
</footer>
</html>
CSS:
header {
background-image: url(imagens/imagem_4.jpg);
background-repeat: no-repeat;
overflow: hidden;
height: 800px;
}
nav {
background-color:black;
opacity: 0.60;
padding: 1px;
position: fixed;
width: 98.5%;
}
nav ul {
margin-top: 50px;
display: block;
text-align: right;
z-index: 1000px;
position:relative;
color: aliceblue;
}
nav ul li {
list-style-type: none;
display: inline;
}
nav ul li a {
padding: 10px 30px;
text-decoration: none;
color: #FFF;
display: inline-block;
margin: -3px;
}
nav ul li a:hover{
background-color: #6E6E6E;
border-radius: 10px;
}
body{
background-color: #C0C0C0;
z-index: 1000px;
position: relative;
Considero toda ajuda e critica bem vinda, apesar sou iniciante então vou errar muito para aprender obrigado.
Yuri Cirillo
Curtir tópico
+ 0
Responder
Post mais votado
31/01/2018
Boa tarde, Yurydev
Notei que o z-index está em pixel. O valor do z-index não tem unidade. O certo seria z-index: 1000;
Talvez ajustando isso já resolva teu problema.
Notei que o z-index está em pixel. O valor do z-index não tem unidade. O certo seria z-index: 1000;
Talvez ajustando isso já resolva teu problema.
Andrehj
Responder
Mais Posts
09/03/2018
Higor Rocha
Como pediu sugestões, eu acrescentaria o uso da
A estrutura semântica do código HTML está boa. :)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
A estrutura semântica do código HTML está boa. :)
Responder
09/07/2018
Aparecida Gonçalves
Olá Yurydev,
tudo bem?
Eu costumo deixar todo o conteúdo visível ao usuário dentro da tag <body>, inclusive o <footer>.
O seu menu <nav> está correto, mas eu fecharia ele logo após fechar a tag </ul>.
A sua <div> apresentacao eu colocaria depois do </header>. Porque eu acho legal manter no topo do site do lado esquerdo o logo do ciente.
O restante acho que está bem bacana. O caminho é esse! Utilizar as cores predominantes da empresa, pensar em estruturar as categorias, posicionar bem o conteúdo e se possível tentar adotar o Bootstrap no desenvolvimento para facilitar na hora de abrir esse conteúdo em telas menores, como tablets e celulares.
Eu gosto muito de usar este site: https://www.w3schools.com/css/css_image_gallery.asp
Porque ele permite que a gente possa rodar o conteúdo desejado (HTML,CSS, JavaScript, etc) e dá para aprender muitas coisas.
Espero ter colaborado!
Cida Luna.
tudo bem?
Eu costumo deixar todo o conteúdo visível ao usuário dentro da tag <body>, inclusive o <footer>.
O seu menu <nav> está correto, mas eu fecharia ele logo após fechar a tag </ul>.
A sua <div> apresentacao eu colocaria depois do </header>. Porque eu acho legal manter no topo do site do lado esquerdo o logo do ciente.
O restante acho que está bem bacana. O caminho é esse! Utilizar as cores predominantes da empresa, pensar em estruturar as categorias, posicionar bem o conteúdo e se possível tentar adotar o Bootstrap no desenvolvimento para facilitar na hora de abrir esse conteúdo em telas menores, como tablets e celulares.
Eu gosto muito de usar este site: https://www.w3schools.com/css/css_image_gallery.asp
Porque ele permite que a gente possa rodar o conteúdo desejado (HTML,CSS, JavaScript, etc) e dá para aprender muitas coisas.
Espero ter colaborado!
Cida Luna.
Responder
Clique aqui para fazer login e interagir na Comunidade :)