Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Bruna Garcia

Problemas ao deixar o menu 100% na tela

Recommended Posts

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;
}

 

 

Sem título.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Mais ou menos isso?

Obs.: Não tratei de responsivo...

 

Spoiler

<!DOCTYPE html>
<html>
    <head>
        <title>Perimos Barbershop</title>
        <meta charset ="UTF-8" />
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
                -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%
            }
            body {
                background: #999999;
                margin: 0px;
                padding: 0px
            }
            nav.menu {
                width: 100%;
                margin: 0 auto;
                text-align: center
            }
            nav.menu ul {
                list-style: none
            }
            nav.menu ul li {
                display: inline-block;
                position: relative;
                background-color: #ffffff;
                width: calc(14% + 5px);
                margin-left: -5px;
                padding: 30px
            }
            nav.menu ul li a {
                cursor: pointer;
                color: #000000;
                text-decoration: none;
                display: block

            }
            nav.menu ul li a.logo {
                width: 200px;
                /* height: */
            }
        </style>
    </head>
    <body>
        <nav 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>

                <li><a class="logo" href="logo.html"><img src="imagens\logo.png"/></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>
        </nav>
    </body>
</html>

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

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 ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites
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.

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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; 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
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!

Compartilhar este post


Link para o post
Compartilhar em outros sites
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! 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites
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....

;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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>

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
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 ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites
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 :)

Compartilhar este post


Link para o post
Compartilhar em outros sites
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 :)

Compartilhar este post


Link para o post
Compartilhar em outros sites
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...

Compartilhar este post


Link para o post
Compartilhar em outros sites

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. : )

Compartilhar este post


Link para o post
Compartilhar em outros sites
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 ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.