Ir para conteúdo
Fórum CódigoFonte.net
Cleydson

Menu horizontal móvel

Recommended Posts

Boa tarde.

Estou desenvolvendo um menu horizontal em CSS, ficou muito bom, mas qdo se tem vários itens ele não permanece na mesma linha.

O CSS é este:

#menucontainer

{

	margin:0 auto;

	width: 100%;

	height: 31px;

    background-image: url('Images/back_menu_vermelho.jpg');

	background-repeat: repeat-x;

    _height: 1px; /* only IE6 applies CSS properties starting with an underscore */

}

/* MENU */

#menu {	

	width:900px;

	margin: 0 auto;

	padding-top:5px;

	text-align: center;

}


#menu ul li {

	display: inline;

}

#menu ul li a {

	color: #FFFFFF;

	padding: 5px 15px;

	text-decoration: none;

	background-image: url('Images/separador.png');

	background-repeat: no-repeat;	

	background-position: right;	

}

#menu ul li a:hover {

	color: #000000;

	font-weight: bold;	

}

E o HTML é este:

<div id="menucontainer">
<div id="menu">
<ul id="Ul1">

<%//Cliente
if (Session["tipoUsuarioSac"].Equals('C') || Session["tipoUsuarioSac"].Equals('S')){ %>
<li><%= Html.ActionLink("Abrir Chamado", "Index", "ClienteAtendimentos")%></li>

<% }
//Gerente
if (Session["tipoUsuarioSac"].Equals('G') || Session["tipoUsuarioSac"].Equals('S')){%>
<li><%= Html.ActionLink("Chamados sem Analista", "Index", "AcompanhamentoAtendimentos")%></li>
<li><%= Html.ActionLink("Fila líderes", "filaDosLideres", "AcompanhamentoAtendimentos")%></li>
<% }
//Líder
if (Session["tipoUsuarioSac"].Equals('L') || Session["tipoUsuarioSac"].Equals('S')){%>
<li><%= Html.ActionLink("Fila Atendentes", "FilaDosAtendentes", "LiderAtendimentos")%></li>
<li><%= Html.ActionLink("Atender Chamados", "Index", "Atendentes")%></li>
<% }
//Líder / Gerente
if (Session["tipoUsuarioSac"].Equals('L') || Session["tipoUsuarioSac"].Equals('S') || Session["tipoUsuarioSac"].Equals('G')){%>
<li><%= Html.ActionLink("Encaminhar Chamados", "Index", "LiderAtendimentos")%></li>
<%}

//Atendente
if (Session["tipoUsuarioSac"].Equals('A')){%>
<li><%= Html.ActionLink("Atender Chamados", "Index", "Atendentes")%></li>
<% }
if (Session["tipoUsuarioSac"].Equals('C')){%>
<li><%= Html.ActionLink("Consultar Chamados", "Index", "PesquisarAtendimentos")%></li>
<% }
else{%>
<li><%= Html.ActionLink("Consultar Chamados", "IndexEmpresa", "PesquisarAtendimentos")%></li>
<%}%>

</ul>
</div>
</div>[/html]

Se alguém tiver uma ideia, de como faço isso, será de grande ajuda. Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

já tentou usar "float: left" ao invés de display: inline eu seus ul li?

Boa tarde.

Estou desenvolvendo um menu horizontal em CSS, ficou muito bom, mas qdo se tem vários itens ele não permanece na mesma linha.

O CSS é este:

#menucontainer

{

	margin:0 auto;

	width: 100%;

	height: 31px;

    background-image: url('Images/back_menu_vermelho.jpg');

	background-repeat: repeat-x;

    _height: 1px; /* only IE6 applies CSS properties starting with an underscore */

}

/* MENU */

#menu {	

	width:900px;

	margin: 0 auto;

	padding-top:5px;

	text-align: center;

}


#menu ul li {

	display: inline;

}

#menu ul li a {

	color: #FFFFFF;

	padding: 5px 15px;

	text-decoration: none;

	background-image: url('Images/separador.png');

	background-repeat: no-repeat;	

	background-position: right;	

}

#menu ul li a:hover {

	color: #000000;

	font-weight: bold;	

}

E o HTML é este:

<div id="menucontainer">
<div id="menu">
<ul id="Ul1">

<%//Cliente
if (Session["tipoUsuarioSac"].Equals('C') || Session["tipoUsuarioSac"].Equals('S')){ %>
<li><%= Html.ActionLink("Abrir Chamado", "Index", "ClienteAtendimentos")%></li>

<% }
//Gerente
if (Session["tipoUsuarioSac"].Equals('G') || Session["tipoUsuarioSac"].Equals('S')){%>
<li><%= Html.ActionLink("Chamados sem Analista", "Index", "AcompanhamentoAtendimentos")%></li>
<li><%= Html.ActionLink("Fila líderes", "filaDosLideres", "AcompanhamentoAtendimentos")%></li>
<% }
//Líder
if (Session["tipoUsuarioSac"].Equals('L') || Session["tipoUsuarioSac"].Equals('S')){%>
<li><%= Html.ActionLink("Fila Atendentes", "FilaDosAtendentes", "LiderAtendimentos")%></li>
<li><%= Html.ActionLink("Atender Chamados", "Index", "Atendentes")%></li>
<% }
//Líder / Gerente
if (Session["tipoUsuarioSac"].Equals('L') || Session["tipoUsuarioSac"].Equals('S') || Session["tipoUsuarioSac"].Equals('G')){%>
<li><%= Html.ActionLink("Encaminhar Chamados", "Index", "LiderAtendimentos")%></li>
<%}

//Atendente
if (Session["tipoUsuarioSac"].Equals('A')){%>
<li><%= Html.ActionLink("Atender Chamados", "Index", "Atendentes")%></li>
<% }
if (Session["tipoUsuarioSac"].Equals('C')){%>
<li><%= Html.ActionLink("Consultar Chamados", "Index", "PesquisarAtendimentos")%></li>
<% }
else{%>
<li><%= Html.ActionLink("Consultar Chamados", "IndexEmpresa", "PesquisarAtendimentos")%></li>
<%}%>

</ul>
</div>
</div>[/html]

Se alguém tiver uma ideia, de como faço isso, será de grande ajuda. Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado pelas força, mas infelizmente "float:left" não funciona.

Mesmo se eu colocar "#menu {width:auto"; ele fica bugado qdo se tem muitos ícones.

Se alguém tiver alguma sugestão, agradeço.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Obrigado pelas força, mas infelizmente "float:left" não funciona.

Mesmo se eu colocar "#menu {width:auto"; ele fica bugado qdo se tem muitos ícones.

Se alguém tiver alguma sugestão, agradeço.

Eu utilizei todos os comandos xD que vocês falaram e funfo legal xD

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×
×
  • Criar Novo...