problemas com alinhamento menu

Amoroso · Abril 20, 2008

Pessoal eu tenho um menu dinâmico com acesso ao BD e cada perfil que loga tem acesso a tal conteúdo, o problema neste menu que complica todo o meu trabalho é que ele não se alinha no centro de forma automática, ou seja se eu tenho 3 botões e coloco ele numa posição e se esses 3 botões virarem dois o alinhamento deles fica igual antes, quando acontecer isso ele deve se alinhar ao centro automáticamente.

Segue o link do menu:

http://www.dynamicdrive.com/style/csslibra...enu-horizontal/

A página principal é uma tabela que adiciona esse menu via include

o alinhamento que uso é esse que não resolve o problema por que o menu é dinamico

.posiciona_menu_baixo{

position: relative;

left: 13%;

text-align: left;

}

eu fiz alguns testes mexendo direto na página do menu e ele não fica alinhado ao centro dinâmicamente creio que deve ser possível resolver isso, o browser é o internet explorer 6.0

Nícolas · Abril 20, 2008

E aee Amoroso, tudo bom ^^

Cara, sua duvida eu entendi, mas posta aee o seu código ou joga na net porque facilita até pra descobrir o erro, porque ir na base somente do código que ta nesse site não sei se adianta muito.

O legal é ver como você esta utilizando

;)

Amoroso · Abril 22, 2008

E aee Amoroso, tudo bom ^^

Cara, sua duvida eu entendi, mas posta aee o seu código ou joga na net porque facilita até pra descobrir o erro, porque ir na base somente do código que ta nesse site não sei se adianta muito.

O legal é ver como você esta utilizando

;)

Css index:

<style type="text/css">

/*ESTE BODY DEIXA O TEXTO MAIS NO TOPO DA PÁGINA*/
body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;

text-align:center;
}


.posiciona_menu_baixo{
	position: relative;
	left: 13%;
	text-align: left;
} /*eu uso esse posiciona_menu_baixo para posicionar o menu no centro mas como é um menu dinâmico ele tem que ficar sempre no centro automaticamente e ai inicia-se o problema*/ 

</style>

index:

<?
	include "../login/valida_sessao.php";
	include "../../connect116.php";
?>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <META HTTP-EQUIV="Expires" CONTENT="0">
  <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
  <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
  <link href="../estilo_adm.css" rel="stylesheet" type="text/css">
<title></title>
  <? include "css_index.css";?>
</head>

<!--STYLE QUE ALINHA O BOTÃO SAIR MAIS ABAIXO-->
<style type="text/css">
.sair{
  position: relative;
  top: 20;
  font-family: Tahoma, Arial, Verdana;
  font-size: 11px;
  color: #0A5569;
  font-weight: bold;
}
</style>


<body>


<table border="0" cellspacing="0" cellpadding="0" align=center>
	<tr>
	  <td class=fonte11_verde colspan="2">
		<img src="../img/topo_administrativo.jpg">
	  </td>
	</tr>
	<tr>
	  <td class=fonte11_verde align=left>
	   <? print 'Bem vindo(a)'.' '. $nome .' '.'!'; ?>
	  </td>
	</tr>
	<tr>
	  <td align=right colspan="2" class="sair">
		<a href="../login/logout.php">Sair</a>
	  </td>
	</tr>
	<tr>
	  <td colspan="2" align=center>
		 <div class=posiciona_menu_baixo>
		 <? include "menu_baixo.php"; ?>
		 </div>
	  </td>
	</tr>
</table>

	<!--IFRAME EXIBE OS LINKS DA PÁGINA-->
	<iframe name=conteudo frameborder="0" width="100%" height="620" scrolling=auto></iframe>

</body>
</html>

o menu baixo tem esse css:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #F3F3F3; /*overall menu background color*/
font-family: Tahoma, Arial; /* adicionando aqui o tipo da fonte fica valendo para todo o menu*/
font-size: 11px;
}

/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 110px; /*Width of top level menu link items*/
padding: 1px 8px;
border: 1px solid #778;
border-left-width: 0;
text-decoration: none;
color: navy;

}

/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: 0;
}

/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 110px; /*width of sub menu levels*/
color: black;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}

.suckertreemenu ul li a:hover{
background-color: black;
color: white;
}

/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
/*background: #F3F3F3 url(arrow-down.gif) no-repeat center right;*/
}

/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
/*background: #F3F3F3 url(arrow-right.gif) no-repeat center right; */
}

* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}

/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%;}
* html .suckertreemenu ul li a { height: 1%;}
* html .suckertreemenu ul li ul li { float: left;}
/* End */

</style>

<script type="text/javascript">

//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: [url="http://www.dynamicdrive.com/style/"]http://www.dynamicdrive.com/style/[/url]

var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
	for (var t=0; t<ultags.length; t++){
		if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
			ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
			ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
		}
		else{ //else if this is a sub level menu (ul)
		  ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
		ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
		}
	ultags[t].parentNode.onmouseover=function(){
	this.getElementsByTagName("ul")[0].style.visibility="visible"
	}
	ultags[t].parentNode.onmouseout=function(){
	this.getElementsByTagName("ul")[0].style.visibility="hidden"
	}
	}
  }
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)

</script>

O css é o mesmo do site acho que não mudei nada, tentei mexer em algumas coisas para que ele se alinhe no centro dinâmicamente coisa que não funcionou.

a página menu_baixo.php tem basicamente uma função em arvore que gera esse menu dinâmicamente com o css dele que escrevi mais acima.

Ex: de 1 determinado perfil pode ver ao entra na página:

<div class="suckertreemenu" id=suckertreemenu>
	<ul id="treemenu1">
	  <li><a href="#" style="border-left: 1px solid #778">Operador</a>
		<ul>
		  <li><a href="#">Relatórios</a>
		   <ul>
			 <li><a href="" target="conteudo">Indicadores</a></li>
			 <li><a href="" target="conteudo">Indicadores</a></li>
		   </ul>
		  <li><a href="#">TESTE</a>
		   <ul>
			 <li><a href="" target="conteudo">Indicadores</a></li>
			 <li><a href="" target="conteudo">Indicadores</a></li>
		   </ul>
		</ul>
	  </li>
	  <li><a href="#">Supervisor</a>
		<ul>
		  <li><a href="#">Relatórios</a>
			<ul>
			  <li><a href="" target="conteudo">Operador</a></li>
			  <li><a href="" target="conteudo">Equipe</a></li>
			  <li><a href="" target="conteudo">Supervisor</a></li>
			  <li><a href="" target="conteudo">Supervisor</a></li>
			</ul>
		</ul>
	  </li>
	  <li><a href="#">Administrador</a></li>

	</ul>
	<br style="clear: left;" />
</div>

se você juntar o css com esse código acima e salvar num html, vai sair o menu, eu abri aqui no firefox o menu fica no canto esquerdo ou seja não está alinhado ao centro, e meu problema deve ser resolvido no iexplore 6 pra variar.

Aguardo reposta desde já obrigado.

Nícolas · Abril 22, 2008

Bom cara, acabei de formatar minha maquina e no momento to sem muitos recursos aqui pra te ajudar, mas primeiro.

Seu código ta meio zoneado... deixa o CSS todo em um único arquivo, JS em outro e só puxa o link.

Porque isso além de deixar o seu código mais limpo vai facilitar a sua vida.

E segundo, a forma que esse menu foi montada cheia de hacks só tende a complicar para fazer qualquer coisas, sem falar que aumenta muito a incompatibilidade com outros brownser.

Eu tentei fazer algumas coisas aqui mas sem sucesso.

Assim que der eu tento novamente, mas vou deixar uma dica.

Teu menu além de ter um estilo cheio de hacks ele não é acessivel.

Se você der TAB ele não acessa os itens internos do menu, porque não tenta fazer como o desse site??

http://acessodigital.net/art_aces_via_teclado.html

Menu funcionando: http://brunotorres.net/unsorted/accdd.html

Se você der tab você acessa os itens internos =)

E o CSS dele é muito mais limpo, e o javascript mais simples.

Quando der tento dar uma outra olhada aeee, ou derrepente alguém pode achar a solução antes de mim mas fica aee minha dica http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Flw aee

Amoroso · Abril 22, 2008

Bom cara, acabei de formatar minha maquina e no momento to sem muitos recursos aqui pra te ajudar, mas primeiro.

Seu código ta meio zoneado... deixa o CSS todo em um único arquivo, JS em outro e só puxa o link.

Porque isso além de deixar o seu código mais limpo vai facilitar a sua vida.

E segundo, a forma que esse menu foi montada cheia de hacks só tende a complicar para fazer qualquer coisas, sem falar que aumenta muito a incompatibilidade com outros brownser.

Eu tentei fazer algumas coisas aqui mas sem sucesso.

Assim que der eu tento novamente, mas vou deixar uma dica.

Teu menu além de ter um estilo cheio de hacks ele não é acessivel.

Se você der TAB ele não acessa os itens internos do menu, porque não tenta fazer como o desse site??

http://acessodigital.net/art_aces_via_teclado.html

Menu funcionando: http://brunotorres.net/unsorted/accdd.html

Se você der tab você acessa os itens internos =)

E o CSS dele é muito mais limpo, e o javascript mais simples.

Quando der tento dar uma outra olhada aeee, ou derrepente alguém pode achar a solução antes de mim mas fica aee minha dica http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Flw aee

Entendi obrigado por postar outra alternativa, interessante o menu, mas consegui resolver o meu problema, inclusive consegui alinhar a página inteira ao centro dinâmicamente maximizo e vo redimensionando e continua no centro. A solução foi criar um div centro e nesse div eu declarei que tudo que fosse paragrafo, form e etc deveria ficar ao centro. Resolveu.

Referente ao css organizei dessa forma, como o sistema deveria ser startado amanhã, priorizei somente o menu.

Agora com mais calma vo organizar todo o css em 1 include só.

Obrigado.

Entrar

Arquivado

problemas com alinhamento menu

Recommended Posts

Amoroso 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nícolas 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Amoroso 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nícolas 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Amoroso 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

PHP - Mostrar resultado tabela por Intervalo de meses

Github geração de autenticação

PHP - Ajuda com NFePhp - mistério em achar caminho

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante