Ir para conteúdo

POWERED BY:

Arquivado

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

Guilherme.B

[Resolvido] Alinhamento de menu horizontal no layout.

Por , em Desenvolvimento frontend

Recommended Posts

Guilherme.B    0

Guilherme.B
Postado

Salve salve galera do iMasters, estou com uma duvida que esta me frustando me perdoem se a mesma pode ser simples de si resolver mais ja tentei te varias formas e nada, so resaltando que sou iniciante pleno em CSS/TABELESS, O meu problema persiste quanto ao posicionamento interno de um menu horizontal dentro de uma div principal no caso o corpo do layout.

 

Vejam um exemplo:

 

link da imagem: http://img265.imageshack.us/i/exm.gif/

 

Index da layout:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="corpo">
<div id="menu">
  <ul>
    <li>Home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
    <li>home</li>
  </ul>
  </div>
</div>
</body>
</html>

CSS da layout:

 

body {background:#CCC}
#corpo {
	display: block;
	width: 850px;
	height: 800px;
	margin: 0 auto;
	background-color: #666;
}
#corpo #menu li {
	font-family: "Blue Highway";
	color: #333;
	text-decoration: none;
	background-image: url(../img/bgmenu.jpg);
	display: block;
	width: 81px;
	float: left;
	list-style-type: none;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	font-size: 16px;
	margin-top: 2px;
	margin-right: 2px;
	margin-bottom: 2px;
	margin-left: 2px;
}

 

Obrigado at+

 

Estou aguardando a resposta e muito obrigado des de ja !!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

douglash    0

douglash
Postado

Olá, tente assim:

 

*{
margin:0;
padding:0;
}
body {background:#CCC}
#corpo {
        display: block;
        width: 850px;
        height: 800px;
        margin: 0 auto;
        background-color: #666;
}
#corpo #menu li {
        font-family: "Blue Highway";
        color: #333;
        text-decoration: none;
        background-image: url(../img/bgmenu.jpg);
        display: block;
        width: 70px;
        float: left;
        list-style-type: none;
        padding:10px;
        text-align: center;
        font-size: 16px;
        margin:2px 0 2px 2px;
</style>

Eu apenas apliquei um reset e alterei a largura para ficar extendido sem a quebra de linha, coloquei uma borda para ter noção do limite da lista, pois não tenho a imagem do menu.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito