Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Quero deixar o menu 100% na tela, mas parece que tem algo travando do lado direito...
Meu código:
<!DOCTYPE html>
<html>
<head>
<title>Perimos Barbershop</title>
<meta charset ="UTF-8" />
<link rel="stylesheet" href="..\css\estilo.css" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="estrutura.html">Estrutura</a></li>
</ul>
</div>
<div id="incone">
<li><a href="logo.html"><img src="imagens\logo.png"/></a></li>
</div>
<div id="menu">
<ul>
<li><a href="faleconosco.html">Fale Conosco</a></li>
<li><a href="promocoes.html">Promoções</a></li>
<li><a href="servicos.html">Serviços</a></li>
</ul>
</div>
</body>
</html>
@charset UTF=8;
body{
background: gray;
margin: 0px;
padding: 0px;
}
#menu{
width: 100%;
}
#menu ul{
margin: 0px;
padding: 0px;
}
#menu li{
display: inline;
list-style: none;
}
#menu a{
float: left;
font: 1.0em Verdana;
background: white;
color: black;
text-align: center;
text-decoration: none;
padding: 30px;
}
#menu a:hover{
padding: 30px;
background: black;
color: white;
text-decoration: underline;
}
#incone img{
max-width: 202px;
max-height: 202px;
width: auto;
height: auto;
}
#incone li{
display: inline;
list-style: none;
}
#incone a{
float: left;
}
Olá, obrigada pela resposta!
Então, mas eu preciso que seja responsivo... colocando valores fixos nos width não vai ser responsivo certo?
>
11 horas atrás, Bruna Garcia disse:
Olá, obrigada pela resposta!
Então, mas eu preciso que seja responsivo... colocando valores fixos nos width não vai ser responsivo certo?
Olá Bruna como vai?
A resposta à sua pergunta é sim e não!
O que você acha de usar o sistema do Boostrap? Ajuda bastante nessa parte...(e em todo o resto) hehehe
Tipo...o width vai ficar 100% na tela, mas para você faça funcionar direitinho em telas menores, você teria que usar um cód adicional.
Tipo isso:
@media (min-width: 168px) and (max-width: 240px) {
}
Já ouviu falar dessa propriedade?
Particularmente eu nunca tive paciência de montar menu por causa dessas coisinhas...
Dá uma olhada nesse exemplo aqui:
https://v4-alpha.getbootstrap.com/examples/starter-template/
É uma roda na mão....digo...mão na roda ;)
>
Em 13/07/2017 at 14:20, Bruna Garcia disse:
Olá, obrigada pela resposta!
Então, mas eu preciso que seja responsivo... colocando valores fixos nos width não vai ser responsivo certo?
<!DOCTYPE html>
<html>
<head>
<title>Perimos Barbershop</title>
<meta charset ="UTF-8" />
<link rel="stylesheet" href="..\css\estilo.css" />
<style>
@charset UTF=8;
body{background: gray; margin: 0px; padding: 0px;}
#menu{width: 50%; }
#menu ul{margin: 0px; padding: 0px;}
#menu li{display: inline; list-style: none;}
#menu a{ float: left; font: 1.0em Verdana; background: white; color: black; <!-- cor fixa do menu -->
text-align: center; text-decoration: none; padding: 5px; }
#menu a:hover{ padding: 5px; background: silver; color: darkred; text-decoration: none; <!-- underline --> } <!-- variação de cor do menu passando o mouse -->
#incone img{ max-width: 200px; max-height: 200px; width: auto; height: auto; }
#incone li{display: inline; list-style: none; }
#incone a{ float: left; }
</style>
</head>
<body>
<div id="incone">
<li><a href="logo.html"><img src="imagens\logo.png"/></a></li>
</div>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="estrutura.html">Estrutura</a></li>
<li><a href="faleconosco.html">Fale Conosco</a></li>
<li><a href="promocoes.html">Promoções</a></li>
<li><a href="servicos.html">Serviços</a></li>
</ul>
</div>
</body>
</html>
Gostei muito do código desse MENU com CSS. Mas analisando o código, achei muito grande cada item do menu e reduzi.consegui colocar uma borda em volta de cada item do menu, achei que ele ficou melhor assim.
#menu a{ float: left; font: 1.0em Verdana; background: white; color: black; <!-- cor fixa do menu -->
text-align: center; text-decoration: none; padding: 5px; border-style: ridge; }
#menu a:hover{ padding: 5px; border-style: ridge; background: silver; color: darkred; text-decoration: none;
>
Em 14/07/2017 at 01:48, Danilo CS disse:
Olá Bruna como vai?
A resposta à sua pergunta é sim e não!
O que você acha de usar o sistema do Boostrap? Ajuda bastante nessa parte...(e em todo o resto) hehehe
Tipo...o width vai ficar 100% na tela, mas para você faça funcionar direitinho em telas menores, você teria que usar um cód adicional.
Tipo isso:
@media (min-width: 168px) and (max-width: 240px) {
}
Já ouviu falar dessa propriedade?
Particularmente eu nunca tive paciência de montar menu por causa dessas coisinhas...
Dá uma olhada nesse exemplo aqui:
https://v4-alpha.getbootstrap.com/examples/starter-template/
É uma roda na mão....digo...mão na roda ;)
Olá Danilo, vou bem e você? Já ouvi falar sim, na verdade andei lendo muito sobre isso, mas confesso que estou um pouco confusa ainda quanto a aplicação desse conceito... Realmente tem que ter bastante paciência rsrs
Obrigada pelo exemplo, vou dar uma olhada!
>
Em 15/07/2017 at 23:55, Ana Gauna disse:
<!DOCTYPE html>
<html>
<head>
<title>Perimos Barbershop</title>
<meta charset ="UTF-8" />
<link rel="stylesheet" href="..\css\estilo.css" />
<style>
@charset UTF=8;
body{background: gray; margin: 0px; padding: 0px;}
#menu{width: 50%; }
#menu ul{margin: 0px; padding: 0px;}
#menu li{display: inline; list-style: none;}
#menu a{ float: left; font: 1.0em Verdana; background: white; color: black; <!-- cor fixa do menu -->
text-align: center; text-decoration: none; padding: 5px; }
#menu a:hover{ padding: 5px; background: silver; color: darkred; text-decoration: none; <!-- underline --> } <!-- variação de cor do menu passando o mouse -->
#incone img{ max-width: 200px; max-height: 200px; width: auto; height: auto; }
#incone li{display: inline; list-style: none; }
#incone a{ float: left; }
</style>
</head>
<body>
<div id="incone">
<li><a href="logo.html"><img src="imagens\logo.png"/></a></li>
</div>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="estrutura.html">Estrutura</a></li>
<li><a href="faleconosco.html">Fale Conosco</a></li>
<li><a href="promocoes.html">Promoções</a></li>
<li><a href="servicos.html">Serviços</a></li>
</ul>
</div>
</body>
</html>
Gostei muito do código desse MENU com CSS. Mas analisando o código, achei muito grande cada item do menu e reduzi.
Olá, tudo bem? Então, na verdade meu único problema é que não estou conseguindo usar width 100%, eu quero o menu grande mesmo e sem borda, mas mesmo assim, obrigada pelo seu ponto de vista!Oi bruna não sei ao exato o que deseja então veja esse exemplo:
https://radmimstore.github.io/homepage/
É um menu multi level responsivo com width 100% e open source o código: https://github.com/radmimstore/homepage
Sobre o bootstrap. É um framework para desenvolvimento de websites onde tudo já está mastigado só basta engolir.
O problema de focar em um framework é que você se torna dependente dele, e se precisa de algo que não há possibilidades de uso com a plataforma você fica de mãos atadas porque o framework te prende a ele e só ele você pode usar. Por isso só serve em pequenos projetos específicos, ou seja projetos nada complexo e muito simples.
Mas posso te garantir que não existe outro melhor o bootstrap é de longe o melhor de todos, não havendo arrependimento em usar exceto pelo caso que já mencionei.
Em caso de uma pessoa que está começando a aprender querer usar um framework, não está desenvolvendo e sim plagiando sem aprender nada.
>
8 horas atrás, Bruna Garcia disse:
Olá Danilo, vou bem e você? Já ouvi falar sim, na verdade andei lendo muito sobre isso, mas confesso que estou um pouco confusa ainda quanto a aplicação desse conceito... Realmente tem que ter bastante paciência rsrs
Obrigada pelo exemplo, vou dar uma olhada!
>
7 horas atrás, OmarF disse:
Oi bruna não sei ao exato o que deseja então veja esse exemplo:
https://radmimstore.github.io/homepage/
É um menu multi level responsivo com width 100% e open source o código: https://github.com/radmimstore/homepage
Sobre o bootstrap. É um framework para desenvolvimento de websites onde tudo já está mastigado só basta engolir.
O problema de focar em um framework é que você se torna dependente dele, e se precisa de algo que não há possibilidades de uso com a plataforma você fica de mãos atadas porque o framework te prende a ele e só ele você pode usar. Por isso só serve em pequenos projetos específicos, ou seja projetos nada complexo e muito simples.
Mas posso te garantir que não existe outro melhor o bootstrap é de longe o melhor de todos, não havendo arrependimento em usar exceto pelo caso que já mencionei.
Em caso de uma pessoa que está começando a aprender querer usar um framework, não está desenvolvendo e sim plagiando sem aprender nada.
Exatamente!
Basta você ter um pouquinho de paciência.
Eu sugiro fortemente você tentar usar....
;)
@Bruna Garcia
Em Bootstrap o menu ficaria assim:
<!DOCTYPE html>
<html>
<head>
<title>Perimos Barbershop</title>
<meta Charset="UTF-8" content="text/html"; />
<link rel="stylesheet" href="..\css\estilo.css" />
<!-- BOOTSTRAP (javascript/css) -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- uso com Bootstrap para Mobile -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- FIM BOOTSTRAP -->
</head>
<body>
<!-- inicio do MENU / Bootstrap -->
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="logo.html"><img src="imagens\logo.png"/></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <!-- 1 -->
<span class="icon-bar"></span> <!-- 2 -->
<span class="icon-bar"></span> <!-- 3 -->
<span class="icon-bar"></span> <!-- 4 -->
<span class="icon-bar"></span> <!-- 5 -->
<span class="icon-bar"></span> <!-- 6 -->
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active"> <a href="index.html">Home</a> </li>
<li> <a href="sobre.html">Sobre</a> </li>
<li> <a href="estrutura.html">Estrutura</a> </li>
<li><a href="faleconosco.html">Fale Conosco</a></li>
<li><a href="promocoes.html">Promoções</a></li>
<li><a href="servicos.html">Serviços</a></li>
</ul>
</div>
</div>
</nav>
<!-- fim do MENU -->
</body>
</html>>
Em 17/07/2017 at 16:02, OmarF disse:
Oi bruna não sei ao exato o que deseja então veja esse exemplo:
https://radmimstore.github.io/homepage/
É um menu multi level responsivo com width 100% e open source o código: https://github.com/radmimstore/homepage
Sobre o bootstrap. É um framework para desenvolvimento de websites onde tudo já está mastigado só basta engolir.
O problema de focar em um framework é que você se torna dependente dele, e se precisa de algo que não há possibilidades de uso com a plataforma você fica de mãos atadas porque o framework te prende a ele e só ele você pode usar. Por isso só serve em pequenos projetos específicos, ou seja projetos nada complexo e muito simples.
Mas posso te garantir que não existe outro melhor o bootstrap é de longe o melhor de todos, não havendo arrependimento em usar exceto pelo caso que já mencionei.
Em caso de uma pessoa que está começando a aprender querer usar um framework, não está desenvolvendo e sim plagiando sem aprender nada.
Olá, legal... obrigada pelas dicas ;)
>
Em 17/07/2017 at 23:32, Danilo CS disse:
Exatamente!
Basta você ter um pouquinho de paciência.
Eu sugiro fortemente você tentar usar....
;)
Vou tentar sim obrigada ;)
Deu certo?
>
Em 18/07/2017 at 13:38, Ana Gauna disse:
@Bruna Garcia
Em Bootstrap o menu ficaria assim:
<!DOCTYPE html>
<html>
<head>
<title>Perimos Barbershop</title>
<meta Charset="UTF-8" content="text/html"; />
<link rel="stylesheet" href="..\css\estilo.css" />
<!-- BOOTSTRAP (javascript/css) -->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- uso com Bootstrap para Mobile -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- FIM BOOTSTRAP -->
</head>
<body>
<!-- inicio do MENU / Bootstrap -->
<nav role="navigation" class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="logo.html"><img src="imagens\logo.png"/></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-ex-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span> <!-- 1 -->
<span class="icon-bar"></span> <!-- 2 -->
<span class="icon-bar"></span> <!-- 3 -->
<span class="icon-bar"></span> <!-- 4 -->
<span class="icon-bar"></span> <!-- 5 -->
<span class="icon-bar"></span> <!-- 6 -->
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active"> <a href="index.html">Home</a> </li>
<li> <a href="sobre.html">Sobre</a> </li>
<li> <a href="estrutura.html">Estrutura</a> </li>
<li><a href="faleconosco.html">Fale Conosco</a></li>
<li><a href="promocoes.html">Promoções</a></li>
<li><a href="servicos.html">Serviços</a></li>
</ul>
</div>
</div>
</nav>
<!-- fim do MENU -->
</body>
</html>
Obrigada :)>
Em 28/07/2017 at 14:13, Danilo CS disse:
Deu certo?
Eu mudei meu site pra scroll, ai o menu adaptou, mas descobri quais tags que eu precisava usar, eram: deixar o menu display block e usar flex-grow.
Mas por eu estar fazendo o site scroll, estou com outros problemas, um deles é deixar o texto adaptável ao tamanho do site, se você puder me ajudar, eu postei uma tópico com esse problema.
Obrigada pela ajuda atenção :)
>
Em 2017-8-15 at 13:19, Bruna Garcia disse:
Eu mudei meu site pra scroll, ai o menu adaptou, mas descobri quais tags que eu precisava usar, eram: deixar o menu display block e usar flex-grow.
Mas por eu estar fazendo o site scroll, estou com outros problemas, um deles é deixar o texto adaptável ao tamanho do site, se você puder me ajudar, eu postei uma tópico com esse problema.
Obrigada pela ajuda atenção :)
Mas é claro....eu vou tentar! :)
Desculpa só agora que vi sua mensagem....eu vou ver la...
Boa tarde Bruna,
segue esse código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Perimos Barbershop</title>
<meta charset ="UTF-8" />
<link rel="stylesheet" href="..\css\estilo.css" />
</head>
<body>
<div id="largura">
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="estrutura.html">Estrutura</a></li>
</ul>
</div>
<div id="incone">
<li><a href="logo.html"><img src="imagens\logo.png"/></a></li>
</div>
<div class="menu">
<ul>
<li><a href="faleconosco.html">Fale Conosco</a></li>
<li><a href="promocoes.html">Promoções</a></li>
<li><a href="servicos.html">Serviços</a></li>
</ul>
</div>
</div>
</body>
</html>
@charset"utf-8";
body{
background: gray;
margin: 0px;
padding: 0px;
}
.menu{
width: 100%;
}
.menu ul{
margin: 0px;
padding: 0px;
}
.menu li{
display: inline;
list-style: none;
}
.menu a{
float: left;
font: 1.0em Verdana;
background: white;
color: black;
text-align: center;
text-decoration: none;
padding: 30px;
}
.menu a:hover{
padding: 30px;
background: black;
color: white;
text-decoration: underline;
}
#largura{
width: 100%;
background-color: white;
position: absolute;
}
#incone img{
max-width: 202px;
max-height: 202px;
width: auto;
height: auto;
}
#incone li{
display: inline;
list-style: none;
}
#incone a{
float: left;
}
OBS: Não coloque dois ids iguais em uma mesma pagina, só deve haver um id com mesmo nome em uma página. Eu modifiquei os ids com nome "menu" por classes com nome "menu", as classes podem ter o mesmo nome. Eu coloquei as divs "menu" dentro de uma div com id largura e coloquei 100% o que fez o menu ficar com 100% de largura, coloquei fundo banco e posição absoluta. : )e eu não achei o post que você falou :)
>
Em 21/08/2017 at 13:39, luiz14 disse:
Boa tarde Bruna,
segue esse código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Perimos Barbershop</title>
<meta charset ="UTF-8" />
<link rel="stylesheet" href="..\css\estilo.css" />
</head>
<body>
<div id="largura">
<div class="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="estrutura.html">Estrutura</a></li>
</ul>
</div>
<div id="incone">
<li><a href="logo.html"><img src="imagens\logo.png"/></a></li>
</div>
<div class="menu">
<ul>
<li><a href="faleconosco.html">Fale Conosco</a></li>
<li><a href="promocoes.html">Promoções</a></li>
<li><a href="servicos.html">Serviços</a></li>
</ul>
</div>
</div>
</body>
</html>
@charset"utf-8";
body{
background: gray;
margin: 0px;
padding: 0px;
}
.menu{
width: 100%;
}
.menu ul{
margin: 0px;
padding: 0px;
}
.menu li{
display: inline;
list-style: none;
}
.menu a{
float: left;
font: 1.0em Verdana;
background: white;
color: black;
text-align: center;
text-decoration: none;
padding: 30px;
}
.menu a:hover{
padding: 30px;
background: black;
color: white;
text-decoration: underline;
}
#largura{
width: 100%;
background-color: white;
position: absolute;
}
#incone img{
max-width: 202px;
max-height: 202px;
width: auto;
height: auto;
}
#incone li{
display: inline;
list-style: none;
}
#incone a{
float: left;
}
OBS: Não coloque dois ids iguais em uma mesma pagina, só deve haver um id com mesmo nome em uma página. Eu modifiquei os ids com nome "menu" por classes com nome "menu", as classes podem ter o mesmo nome. Eu coloquei as divs "menu" dentro de uma div com id largura e coloquei 100% o que fez o menu ficar com 100% de largura, coloquei fundo banco e posição absoluta. : )
Olá obrigada, já resolvi esse problema, eu não usei dois menus, eu usei um só e coloquei a div da imagem no meio das li's, coloquei o menu com display block e usei flex-grow: 1; ai o menu expandiu.
Obrigada pela dica ;)>
Em 21/08/2017 at 14:28, Danilo CS disse:
e eu não achei o post que você falou :)
Eu também não achei meu post, mas acabei achando outra solução novamente kkk
Obrigada pela atenção!
>
Em 24/08/2017 at 14:43, Bruna Garcia disse:
Eu também não achei meu post, mas acabei achando outra solução novamente kkk
Obrigada pela atenção!
Ai que blz.....muito bom!
Opa....eu não entro muito no imasters, mas sempre que precisar...é só chamar :)
Mais ou menos isso?
Obs.: Não tratei de responsivo...
Spoiler
<!DOCTYPE html>