HTML Menu e listagem HTML

jorgehuber93 · 9 de novembro de 2020

Boa tarde escrevi o distanciamento dos menus margin-left: -3px, e quando rodo o arquivo HTML os menus Moçambique e cabo Verde ficam juntos e não tem um pequeno espaçamento como os outros menus. Como faço para deixar o espaçamento pequeno igual entre os menus. Seguem as linhas de código abaixo e a foto da pagina em anexo.

<!doctype html>

<html lang="pt-br">
    <head>
        <meta charset="ISO-8859-2">
        <title> HTML5 - Menu Vertical</title>
        
        <style>
			body {
				font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
				font-size:13px;
			}
			
			ul {
				margin:0;padding:0;
				
			}
			
			li {
				list-style:none;
                display: inline-block;
			}
			
			li a {
				
				text-decoration:none;
				color:#FFF;
				background-color:#09C;
				margin-bottom:1px;
				padding:5px 15px;
                margin-left: -3px;
			}
			
			li a:hover {
				background-color:#6CF
			}
        </style>
        
        </head>

        <body>        
            <ul>
                <li><a href="brasil.html">Brasil</a></li>
                <li><a href="portugal.html">Portugal</a></li>
                <li><a href="angola.html">Angola</a></li>
                <li><a href="mocambique.html">Moçambique</a></li>
                <li><a href="caboverde.html">Cabo Verde</a></li>
            </ul>
        </body>
</html>

açamento pequeno igual entre os menus. Seguem as linhas de código abaixo.

joseph_dev · 9 de novembro de 2020

Eu copiei seu código e rodei aqui. Funcionou normalmente no Chrome. Será que foi cache no momento do seu teste?

*Desconsidere os caracteres. Não mudei o charset.

jorgehuber93 · 9 de novembro de 2020

@joseph_dev pode ser o cache, estou usando usando o programa brackets para escrever linhas de programação e o mesmo mostra como fica o site, ou seja faz um live preview. Como faço com que a página reconheça o ç do menu de forma com que a palavra Moçambique não apareça errada?

washalbano · 9 de novembro de 2020

7 minutos atrás, jorgehuber93 disse:

Como faço com que a página reconheça o ç do menu de forma com que a palavra Moçambique não apareça errada?

Mude o charset para utf-8
e a codificação do arquivo tb para utf-8 sem BOM

joseph_dev · 9 de novembro de 2020

Mude o charset para uft-8. A tag ficará assim: <meta charset="utf-8">

jorgehuber93 · 9 de novembro de 2020

@joseph_dev entendi, agora a minha dúvida é como deixar o espaçamento entre os menus Moçambique e Cabo Verde igual aos demais segue o código abaixo e a foto em anexo.

<!doctype html>

<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title> HTML5 - Menu Vertical</title>
        
        <style>
			body {
				font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
				font-size:13px;
			}
			
			ul {
				margin:0;padding:0;
				
			}
			
			li {
				list-style:none;
                display: inline-block;
			}
			
			li a {
				
				text-decoration:none;
				color:#FFF;
				background-color:#09C;
				margin-bottom:1px;
				padding:5px 15px;
                margin-left: -3px;
			}
			
			li a:hover {
				background-color:#6CF
			}
        </style>
        
        </head>

        <body>        
            <ul>
                <li><a href="brasil.html">Brasil</a></li>
                <li><a href="portugal.html">Portugal</a></li>
                <li><a href="angola.html">Angola</a></li>
                <li><a href="mocambique.html">Moçambique</a></li>
                <li><a href="caboverde.html">Cabo Verde</a></li>
            </ul>
        </body>
</html>

@washalbano

entendi, agora a minha dúvida é como deixar o espaçamento entre os menus Moçambique e Cabo Verde igual aos demais segue o código abaixo e a foto em anexo.

<!doctype html>

<html lang="pt-br">
    <head>
        <meta charset="utf-8">
        <title> HTML5 - Menu Vertical</title>
        
        <style>
			body {
				font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
				font-size:13px;
			}
			
			ul {
				margin:0;padding:0;
				
			}
			
			li {
				list-style:none;
                display: inline-block;
			}
			
			li a {
				
				text-decoration:none;
				color:#FFF;
				background-color:#09C;
				margin-bottom:1px;
				padding:5px 15px;
                margin-left: -3px;
			}
			
			li a:hover {
				background-color:#6CF
			}
        </style>
        
        </head>

        <body>        
            <ul>
                <li><a href="brasil.html">Brasil</a></li>
                <li><a href="portugal.html">Portugal</a></li>
                <li><a href="angola.html">Angola</a></li>
                <li><a href="mocambique.html">Moçambique</a></li>
                <li><a href="caboverde.html">Cabo Verde</a></li>
            </ul>
        </body>
</html>

joseph_dev · 9 de novembro de 2020

Atualize esse estilo e veja se atende:

li a {
  text-decoration:none;
  color:#FFF;
  background-color:#09C;
  margin-bottom:1px;
  padding:5px;
}

jorgehuber93 · 9 de novembro de 2020

@joseph_dev deu certo. Obrigado por ter tirado a minha dúvida.

1 minuto atrás, jorgehuber93 disse:

@joseph_dev deu certo. Obrigado por ter tirado a minha dúvida.

@washalbano Obrigado por ter tirado a minha dúvida.

Entrar

HTML Menu e listagem HTML

Posts recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais