Deixar site HTML+CSS responsivo

21/04/2019

0

Meus caros, boa noite e feliz páscoa!
Gostaria de lhes pedir ajuda, cá estou eu (em pleno feriado) realizando um trabalho da faculdade, onde o professor nos pediu que criássemos um site apenas em HTML e CSS, sem imagens ou outras linguagens.
Mas venho enfrentando um problema, gostaria de deixar o bendito background responsivo e não vaaaaaai!
A ajuda seria com dois problemas:
1º Deixar o background responsivo;
2º Colocar o bendito menu com 3 botões para a direita, porque ele fica ali desalinhado. Não fica nem no meio, nem da direita, fica boiando ali no meio.

Agradeço se puderem me ajudar.
Aqui vai o link do código: jdoodle.com/h/fP
Marcos Rosário

Marcos Rosário

Responder

Post mais votado

21/04/2019

Meus caros, boa noite e feliz páscoa!
Gostaria de lhes pedir ajuda, cá estou eu (em pleno feriado) realizando um trabalho da faculdade, onde o professor nos pediu que criássemos um site apenas em HTML e CSS, sem imagens ou outras linguagens.
Mas venho enfrentando um problema, gostaria de deixar o bendito background responsivo e não vaaaaaai!
A ajuda seria com dois problemas:
1º Deixar o background responsivo;
2º Colocar o bendito menu com 3 botões para a direita, porque ele fica ali desalinhado. Não fica nem no meio, nem da direita, fica boiando ali no meio.

Agradeço se puderem me ajudar.
Aqui vai o link do código: jdoodle.com/h/fP



Olá, fiz algumas alterações, segue o código.
Note que os botões quando estão em uma resolução maior alinham-se para a direita e em resoluções menores alinham-se à esquerda
Segue o código

[code=html]

<!DOCTYPE html><html> <head><meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- Download de fontes,titulo da pagina e referencia ao CSS -->
<title> TECGREEN </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Inconsolata|Thasadith|Unica+One" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="indexcss.css"><script type="text/javascript" async="true"></script><style type="text/css">body{
font-family: 'Thasadith', sans-serif;
background-image: linear-gradient(to right, #192e2e, #2C6C73 50%, #2C7345, #2C7357 130%, #65828a);
text-decoration: none;
}

#corpodomenu{
width: auto;
height: 75px;
background: #E5E5E5;
padding-top:10px;
padding-left:20px;
box-sizing: border-box;
border-radius: 2px;
}

header h1{
color: #282828;
letter-spacing: 6px;
font-family: 'Unica One', cursive;
font-size: 30px;
float: left;
}

#menu{
left: 0px;
position: absolute; /*Definindo nav com posição fixa*/
width: 100%;
}

#logo{
width:100px;
height:50px;
float: left;
margin-top: -10px;
}

/* conteudo central */
#content{
text-align: center;
padding-top: 100px;
width: auto;
}

#content h2{
font-size: 30px;
line-height: 2;
color: white;
}

#content p{
font-size: 22px;
color: white;
}

#content div{
text-decoration: none;
color: white;
text-shadow: 3px 2px black;

}

/* Botões inicio, sobre e desenvolvedores. */
.menususpenso {

background-color: #9E9E9E;
color: #282828;
padding: 16px;
font-size: 14px;
border: none;
font-family: 'Comfortaa', cursive;
border-radius: 2px;
}

/* Necessario para posicao do conteudo do menu suspenso */
.menutopo {
position:relative;
margin-top:41px; /*Adicionado Ajuste dos botões em relação ao topo*/
display: inline-block;
float: top;
}

/* Estilo do menu dentro do botão. */
.conteudo-menu {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 170px;
box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
z-index: 1;
font-size: 12px;
font-family: 'Comfortaa', cursive;
border-radius: 2px;
}

/* links do menu dentro do botão. */
.conteudo-menu div {
color: black;
padding: 12px 16px;
text-decoration: none;
}

/* Cor do menu dentro do botão quando o mouse passa por cima. */
.conteudo-menu div:hover {background-color: #ddd; cursor: pointer;
}

/* Tirar linha dos links menu */
.conteudo-menu a{
text-decoration: none;
color: #282828;
}

/* mostrar o menu que está nos botões. */
.menutopo:hover .conteudo-menu {display: block;}

/* Cor dos botões inicio, sobre e desenvolvedores enquanto o mouse ta por cima. */
.menutopo:hover .menususpenso {background-color: #4d4d4d; cursor: pointer; color: #e5e5e5;
}


/* Botões do meio da pagina*/
.botaodoinicio{
padding: 12px 16px;
text-decoration: none;
margin-right: auto;
margin-left:auto;
margin-top: 110px;
display: inline-block;
border-radius: 4px;
background-color: #9E9E9E;
color: #282828;
font-size: 14px;
border: none;
font-family: 'Comfortaa', cursive;
transition: all 0.2s;
}

/* fazer os botões do meio começarem la de cima e descerem */
.botaodoinicio:hover {
background-color: #ddd; cursor: pointer;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
.botaodoinicio span {
transition: 0.2s;
display: inline-block;
position: relative;
}
.botaodoinicio span:after {
content: '\\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.2s;
}
.botaodoinicio:hover span {
padding-right: 25px;
}
.botaodoinicio:hover span:after {
opacity: 1;
right: 0;
}

/* rodape com marca d'agua */
.footer {
position: fixed;
width: 100%;
color: white;
text-align: center;
bottom: 0;
background-image: linear-gradient(to right, #192e2e, #2C6C73 50%, #2C7345, #2C7357 130%, #65828a);

}

.footer p {
font-family: 'Inconsolata', monospace;
font-size: 12px;
text-decoration: none;
text-shadow: none;
}

@media screen and (min-width:1001px) {

#botoesnav{
float: right;
position: relative;
margin-right: 40px;


}
}

@media screen and (max-width: 1000px) {

#botoesnav{
float: left;
position: relative;
margin-left: 12px;

}
}



#containernav{
width:100%;

}
</style></head><body> <div id="corpodomenu">
<header>
<div id="containernav">
<!-- Logo -->
<div id="logo">
<h1> TECGREEN </h1>
</div>
<!-- Menu -->
<nav id="menu">
<div id="botoesnav">
<div class="menutopo">
<a href="index.html"><button class="menususpenso"><span> Inicio </span></button></a>
</div>
<div class="menutopo">
<button class="menususpenso"> Sobre </button></a>
<div class="conteudo-menu">
<div><a href="contato.html">Contato</a></div>
<div><a href="sobre.html">Sobre a TecGreen</a></div>
</div>
</div>
<div class="menutopo">
<button class="menususpenso"> Desenvolvedores </button>
<div class="conteudo-menu">
<div>N455DE0 - Guilherme</div>

Renan Pereira

Renan Pereira
Responder

Mais Posts

21/04/2019

Renan Pereira

Meus caros, boa noite e feliz páscoa!
Gostaria de lhes pedir ajuda, cá estou eu (em pleno feriado) realizando um trabalho da faculdade, onde o professor nos pediu que criássemos um site apenas em HTML e CSS, sem imagens ou outras linguagens.
Mas venho enfrentando um problema, gostaria de deixar o bendito background responsivo e não vaaaaaai!
A ajuda seria com dois problemas:
1º Deixar o background responsivo;
2º Colocar o bendito menu com 3 botões para a direita, porque ele fica ali desalinhado. Não fica nem no meio, nem da direita, fica boiando ali no meio.

Agradeço se puderem me ajudar.
Aqui vai o link do código: jdoodle.com/h/fP


Mandei o código diretamente por aqui mas não ficou muito bem formatado

Segue o código alterado: https://liveweave.com/C6bL1U

Espero ter ajudado!
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar