Ir para conteúdo

POWERED BY:

Arquivado

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

Fagner Sutel

[Resolvido] Posicionar menu dropdown ao centro no IE6

Por , em Desenvolvimento frontend

Recommended Posts

Fagner Sutel    0

Fagner Sutel
Postado

Pessoal,

 

Estou com site rodando normalmente no IE 8 e 9 e no Firefox, no entando os problemas se apresentam no IE 6 quero fazer um hack para IE 6, mas não consigo arranajar meu css de forma a manter o menu dropdawn centralizado no IE6.

 

Seguem os códigos, se alguem puder me ajudar a centralizar o menu no Ie ficarei muito agradecido!

 

ele esta rodando nesse link: http://www.sutel.com.br/ppgcm2.html

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Programa de Pós-Graduação em Medicina: Ciências Médicas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/ppgcm.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/url.js"></script> <!-- JS para abrir forms na div cont por meio do comandos [ javascript:ajax_url('areasDeConcentracao-f.php', 'conteudo' ); ] -->

<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

<!-- / END -->
</head>
<body>
<!-- <SPAN style="position: absolute; top: 100 px; left: 25px; width: 100px; height: 150px"> 
<IMG SRC="css/images/ufrgslogo.gif" > 
</SPAN>  -->
<div id="total">
<div id="topo">
<h1><img id="img" src="css/images/ufrgslogo.gif" width="100" height="75" alt="PPGCM" /> <img src="css/images/ppgcm.jpeg" width="500" height="75" alt="PPGCM" /> <img src="css/images/famed.gif" width="100" height="75" alt="FAMED" />

</h1>
</div>
<!-- Beginning of compulsory code below -->
<div id="menu">
<ul id="nav" class="dropdown dropdown-horizontal">
<li id="n-music"><a href="ppgcm2.html">  Home  </a></li>
<li id="n-music"><a href="./" class="dir">Equipe </a>
	<ul>
		<li class="first"><a href="./" class="dir">Coordenação</a>
			<ul>
				<li><a href="javascript:ajax_url('wc.html', 'cont' );">Wolnei Caumo</a></li>
				<li><a href="./">Vice-Coordenador</a></li>
				<li><a href="./">Suplente 1</a></li>
				<li><a href="./">Suplente 2</a></li>
				<li><a href="javascript:ajax_url('credenciamentos2.html', 'cont' );" title="Categorias" alt="credenciamentos">Credenciamentos</a></li>					
			</ul>
		</li>
		<li class="first"><a href="./" class="dir">Secretaria</a>
			<ul>
				<li class="first"><a href="./">Vera</a></li>
				<li><a href="./">Estagiário 1</a></li>
				<li><a href="./">Estagiário 2</a></li>
				<li><a href="./">Estagiário 3</a></li>
			</ul>
		</li>



	</ul>
</li>
<li id="n-music"><a href="./" class="dir">Cursos </a>
	<ul>
		<li class="first"><a href="./"><strong>Mestrado</strong></a></li>
		<li><a href="./">Doutorado</a></li>
	</ul>
</li>
<li id="n-music"><a href="./" class="dir">Documentos</a>
	<ul>
		<li class="first"><a href="./">Geral</a></li>
		<li><span class="dir">Editais</span>
			<ul>
				<li class="first"><a href="./">Doutorado Fluxo Contínuo</a></li>
				<li><a href="./">Doutorado, ingresso direto</a></li>
				<li><a href="./">Edital CNPq Nº 10/2010 - Bolsas de Apoio Técnico</a></li>
				<li><a href="./">Edital MCT/CNPq N º 12/2010- Bolsas de Iniciação Cientifica</a></li>
				<li><a href="./">Programa CAPES/NUFFIC </a></li>
			</ul>
		</li>
		<li><span class="dir">Formulários</span>
			<ul>
				<li class="first"><a href="./">Solicitação de Banca de Mestrado</a></li>
				<li><a href="./">Solicitação de Banca de Doutorado</a></li>
				<li><a href="./">Solicitação de Exame de Qualificação de Doutorado</a></li>
				<li><a href="./">Formulário Solicitação de Bolsa e Termo de Compromisso</a></li>
				<li><a href="./">Ficha para Estagio Docente</a></li>
			</ul>
		</li>
		<li><span class="dir">Legislação UFRGS</span>
			<ul>
				<li class="first"><a href="./">Regimento do PPGCM</a></li>
				<li><a href="./">Normas para apresentação de dissertações e teses</a></li>
				<li><a href="./">Normas para apresentação de projetos de pesquisas (mestrado, doutorado e exame geral de qualificação)</a></li>
				<li><a href="./">Normas Pós-Doutorado - UFRGS</a></li>
			</ul>
		</li>
	</ul>
</li>
<li id="n-music"><span class="dir">Ensino </span>  <!-- PRIMEIRO NIVEL -->
	<ul>
		<li class="first"><a href="./" class="dir">Professores</a>
			<ul>
				<li class="first"><a href="./">xxx</a></li>
				<li><a href="./">xxx</a></li>
				<li><a href="./">xxx</a></li>
				<li><a href="./">xxx</a></li>
				<li><a href="./">xxx</a></li>
				<li><a href="./">xxx</a></li>
				<li><a href="./">xxx</a></li>
			</ul>
		</li>
		<li><a href="./" class="dir">Disciplinas</a>
			<ul>
				<li class="first"><span class="dir">Mestrado</span>
					<ul>
						<li class="first"><a href="./">MED 074</a></li>
						<li><a href="./">MED 062</a></li>
						<li><a href="./">MED 110</a></li>
						<li><a href="./">MED 099</a></li>
						<li><a href="./">MED 085</a></li>
						<li><a href="./">MED 120</a></li>
					</ul>
				</li>
				<li><a href="./" class="dir">Doutorado</a>
					<ul>
						<li class="first"><a href="./">MED 077</a></li>
						<li><a href="./">MED 000</a></li>
						<li><a href="./">MED 111</a></li>
					</ul>
				</li>
				<li><a href="./">xxxx</a></li>
			</ul>
		</li>
		<li><a href="./" class="dir">YYY</a>
			<ul>
				<li class="first"><a href="./">YYY</a></li>
				<li><a href="./">YYY</a></li>
				<li><a href="./">YYY</a></li>
				<li><a href="./">YYY</a></li>
			</ul>
		</li>
		<li><a href="./">ZZZ</a></li>
		<li><a href="./" class="dir">TTT</a>   <!-- SEGUNDO NIVEL -->
			<ul>
				<li class="first"><span class="dir">LLL</span>  <!-- TERCEIRO NIVEL -->
					<ul>
						<li class="first"><a href="./">AAA</a></li> <!-- QUERTO NIVEL -->
						<li><a href="./">AAA</a></li>
						<li><a href="./">AAA</a></li>
						<li><a href="./">AAA</a></li>
						<li><a href="./">AAA</a></li>
						<li><a href="./">AAA</a></li>
						<li><a href="./">AAA</a></li>
						<li><a href="./">AAA</a></li>
						<li><a href="./">AAAL</a></li>
						<li><a href="./">AAA</a></li>
					</ul>
				</li>
				<li><a href="./">FFF</a></li>
				<li><a href="./">DDD</a></li>
				<li><a href="./">KKK</a></li>
				<li><a href="./">III</a></li>
				<li><a href="./">MMM</a></li>
			</ul>
		</li>
		<li><a href="./">QQQ</a></li>
	</ul>
</li>
<li id="n-music"><span class="dir">Contato </span>  <!-- PRIMEIRO NIVEL -->
</ul>
</div>

<div id="cont">
CONTEUDO
</div>

<div id="base">
				<center>
					<div id="base2"><font size="1"><b> PPG em Ciências Médicas - Rua Ramiro Barcelos, 2400 - 2º andar • Tel.:             51 3308-5605       • Porto Alegre - RS - Brasil • ppgcm@ufrgs.br</b></font></div>

				</center>
			</div>

</div>
<!-- / END -->
</body>
</html>

 

default.css

 

@charset "UTF-8";

/*------------------------------------------------------------------------------------------------------/
@section	Style Framework  */


/* First-level expected directory tag - li */

ul.dropdown li {
 padding: 5px;
}

ul.dropdown *.dir {
 padding-right: 30px;
 background-image: none;
 background-position: 100% 50%;
 background-repeat: no-repeat;
}

	/* Non-first level */
	ul.dropdown ul *.dir {
	 padding-right: 15px;
	 background-image: url(images/nav-arrow-right.png);
	 background-position: 100% 50%;
	 background-repeat: no-repeat;
	}

	ul.dropdown ul ul *.dir {
	 background-image: url(images/nav-arrow-right2.png);
	}


/* Components override */

ul.dropdown-vertical *.dir {
 background-image: url(images/nav-arrow-right.png);
}

ul.dropdown-vertical-rtl *.dir {
 padding-right: 15px;
 background-image: url(images/nav-arrow-left.png);
 background-position: 0 50%;
}



/*------------------------------------------------------------------------------------------------------/
@section	Base Drop-Down Styling  */



/* ALL LEVELS (incl. first) */

ul.dropdown {
 font: bold 17px/normal Arial, Helvetica, sans-serif;
}

	ul.dropdown li {
	 background-color: #333;
	 color: #fff;
	}

	ul.dropdown li.hover,
	ul.dropdown li:hover {
	}

	/* Links */

	ul.dropdown a:link,
	ul.dropdown a:visited { color: #fff; text-decoration: none;}
	ul.dropdown a:hover {
	 border-top-color: #5db1e0 !important;
	 border-left-color: #5db1e0;
	 background-color: #4498c7;
	 color: #fff;
	}

	ul.dropdown ul a.dir:hover { /* proposal */
	 background-color: #4698ca;
	 background-image: url(images/comnav-arrowon.png);
	 color: #fff;
	}

	ul.dropdown a:active {
	 background: #058acf url(images/nav-sub-press.png) 0 0 repeat-x !important;
	 color: #fff;
	}


	/* NON-FIRST LEVEL */

	ul.dropdown ul {
	 left: auto;
	 right: 0;
	 width: 150px;
	 margin-top: -1px;
	 border-top: 1px solid #1a1a1a;
	 border-left: solid 1px #4c4c4c;
	 font: bold 11px/1em Tahoma, Geneva, Verdana, sans-serif;
	}

		ul.dropdown ul li {
		 background-color: #3a3a3a;
		}

	ul.dropdown ul ul {
	 top: 0;
	 right: auto;
	 left: 100%;
	 margin-top: 0;
	 border-top: none;
	 border-left: none;
	 font-weight: normal;
	}

		ul.dropdown ul ul li {
		 background-color: #4c4c4c;
		}

	ul.dropdown ul ul ul li {
	 background-color: #595959;
	}



/* Mixed */

ul.dropdown li a,
ul.dropdown *.dir {
border-style: solid;
border-width: 1px;
border-color: #404040 #1a1a1a #1a1a1a #505050;
}

ul.dropdown ul li a,
ul.dropdown ul *.dir { border-color: #4a4a4a #242424 #242424; border-left: none; }

ul.dropdown ul ul li a,
ul.dropdown ul ul *.dir { border-color: #595959 #333 #333; }

ul.dropdown ul ul ul li a,
ul.dropdown ul ul ul *.dir { border-color: #767676 #404040 #404040; }



/* Custom elements */

#n-movies { width: 250px; text-align: center; }
#n-movies ul { right: auto; left: 0; width: 249px; text-align: left; }
#n-movies ul ul { left: 249px; width: 150px; }
#n-movies ul a { width: 232px; }
#n-movies ul a.dir { width: 210px; }
#n-movies ul ul a { width: 133px; }
#n-movies ul ul a.dir { width: 111px; }
#n-movies ul ul ul { left: 100%; }

 

 

default.ultimate.css

 

@import "default.css";


/*------------------------------------------------------------------------------------------------------/
* @section		Base Style Extension
*/

ul.dropdown a,
ul.dropdown span {
display: block;
padding: 5px 30px;
}



/*------------------------------------------------------------------------------------------------------/
*	@section	Base Style Override
*/


ul.dropdown li {
padding: 0;
}

ul.dropdown ul a,
ul.dropdown ul span { /* POI, proposal: override abstract a, span */
padding: 8px;
}



/*------------------------------------------------------------------------------------------------------/
* @section		Base Style Reinitiate: post-override activities
*/


ul.dropdown *.dir { /* POI */
padding: 5px 30px;
}

ul.dropdown ul *.dir {
padding: 8px 30px 8px 8px;
}



/*------------------------------------------------------------------------------------------------------/
*	@section	Custom Styles
*/


ul.dropdown ul a {
width: 133px;
}

ul.dropdown ul a.dir {
width: 111px;
}



/*------------------------------------------------------------------------------------------------------/
* @section		Support Class `open` Usage
* @source		js, artificial
*
*/


ul.dropdown *.open {
background-color: #3d3d3d;
}
ul.dropdown ul *.open {
background-color: #4c4c4c;
background-image: url(images/comnav-arrowover.png);
color: #fff;
}
ul.dropdown ul ul *.open {
background-color: #595959;
background-image: url(images/comnav-arrowover2.png);
color: #fff;
}
/* Override UPPER TWO definitions */
ul.dropdown a.open:hover {
background-color: #4698ca;
color: #fff;
}
ul.dropdown ul a.open:hover {
background-image: url(images/comnav-arrowon.png);
color: #fff;
}


/* Clone in CSS 2 */

ul.dropdown li:hover > *.dir {
background-color: #3d3d3d;
}
ul.dropdown ul li:hover > *.dir {
background-color: #4c4c4c;
background-image: url(images/comnav-arrowover.png);
}
ul.dropdown ul ul li:hover > *.dir {
background-color: #595959;
background-image: url(images/comnav-arrowover2.png);
color: #fff;
}

/* Override UPPER TWO definitions */
ul.dropdown li:hover > a.dir:hover {
background-color: #4698ca;
color: #fff;
}
ul.dropdown ul li:hover > a.dir:hover {
background-image: url(images/comnav-arrowon.png);
color: #fff;
}

 

dropdown.css

 

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 5;
}

ul.dropdown {
position: absolute;
z-index: 597;

}

ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}

ul.dropdown ul li {
float: none;
}

ul.dropdown ul ul {
top: 1px;
left: 99%;
}

ul.dropdown li:hover > ul {
visibility: visible;
}

 

ppgcm.css

 


* { margin: 0;
  padding: 0; }

body { 
margin:0 auto;
position:relative;
padding: 10px 15px;
text-align: center;
background: #FFFFFF  0 0 repeat-x;
color: black; 
font: 14px/normal Tahoma, Arial, Helvetica, sans-serif;
width: 784px;
}

#total{
width: 250; 
padding: 0;
background: #2696B8;
text-align: center;
display: block;
color: black;
font-size: 13px;
margin-top: 10px;
line-height: 32px;
}

#topo{
margin-top: 10PX;
width: 784px; 
background: white;
line-height:15px;
text-align: center;
letter-spacing: 1px;
display: block;
color: black;
font-size: 13px;
margin-top: 0px;
line-height:30px;
}

#topo#ufrgs {
vertical-align: left;
text-align: left;
}

#img{
position:relative;
left:-4%;
top:50%;
padding-top: 5px;
}

span.diferente {
vertical-align: 21px;
margin-left: 1px;
}

span.diferente2 {
vertical-align: 1px;
font-weight: 101;
}

#cont{	
	background: white;
	margin-top: 40PX;
	width: 750;
	float:right;
	position:relative;
	text-align:center;
	font-size: 18px;
	border:4px;
	border-color:#000000;
	line-height:30px;
}				

#form{
background: url(images/cinza2.jpg);
min-height: 900px;
position:relative;
text-align:center;
font-size: 18px;
border:4px;
border-color:#000000;
line-height:30px;
}

#base{	
background: white;
width:780;
height:80px;
top:500px;
text-align:center;
margin:0px;
line-height:37px;
clear:both;
}

#base2{	
background: #2696B8;

h1 { 
margin-bottom: .5em;
border-bottom: solid 1px #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 180%; 
text-indent: 5px;
letter-spacing: -1px; }


cite { float: right; }
ul.classic { list-style: disc;
margin-bottom: 1em;
padding-left: 2em; }
div.section { clear: both;
padding-top: 50px; }

.table1 { float: right; margin-bottom: 2em; border: solid 1px #eee; }
.table1 caption { color: #fff; text-align: center; padding-bottom: 5px; }
.table1 th, .table1 td { padding: 7px; }
.table1 th, .table1 thead td { background-color: lightyellow; color: #000; }
.table1 tbody td { background-color: #fff; color: #000; }
.table1 tbody th { text-align: right; }

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Fagner,

 

o seu código está um pouco atrapalhado.

 

Você criou um div#menu, mas por que não aplica CSS nela, o que seria o melhor no seu caso, para posicionamento.

 

As vezes nem é necessário usar essa div, já que ul é um elemento de bloco do mesmo que a div é.

 

:seta: http://ogordo.com/menu-com-submenus/

:seta: http://forum.imasters.com.br/topic/340960-menu-drop-down-fluido-3-niveis-imagens/

 

:thumbsup: @thiagoretondar

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