Jump to content


Neffertine

Member Since 03/04/2008
Offline Last Active 13/04/2009, 14:43
-----

Topics I've Started

Div Assumindo Tamanho Do Treeview

25/08/2008, 16:24

Olá pessoal!!

estou com um projeto .Net trabalhando com Master Pages.

Tenho uma página onde duas divs estão dnetro de uma div "pai". Uma dessas divs comporta um objeto tree view, e eu preciso que esta div assuma sempre a altura deste treeview.

Tentei usar height:100% e height:auto; mas nos dois casos, a div do treeview praticamente desaparece e o treeview fica invisivel.

Abaixo segue a estrutura das 3 divs e o css das mesmas:

[codebox]
<div id="dv_geral">
<div id="dv_menuLateral">AQUI FICA MEU TREEVIEW</div>
<div id="dv_Conteudo"></div>
</div>
[/codebox]

CSS:
[codebox]#dv_geral
{
top: 40px;
left: 10px;
width:980px;
min-height: 710px;
height: auto;
background-color: #f8f8f8;
border-width: 1px;
border-color: #C9C9C9;
border-style: solid;
position: absolute;
}
#dv_menuLateral
{
top: 35px;
overflow-y:auto;
overflow-x: hidden;
left: 12px;
min-height:250px;
height:auto;
width: 350px;
background-color: #f8f8f8;
border-width: 1px;
border-color: #C9C9C9;
border-style: solid;
position: absolute;
}
#dv_Conteudo
{
top: 35px;
left: 381px;
height: 660px;
width: 580px;
background-color: #f8f8f8;
border-width: 1px;
border-color: #C9C9C9;
border-style: solid;
position: absolute;
}[/codebox]

Como posso faezr para a div MenuLateral 'herde' o tamanho do treeview?

O Temível Ie6 E Sua Aversão A Z-index

23/05/2008, 10:14

Olá a todos!

Creio que esta dúvida já apareceu muitas vezes no fórum, mas como não achei nenhuma das soluções cabíveis ao meu problema resolvi postar.

Tenho um Menu drop down em CSS no meu site. Logo abaixo dele na ordem natural da pagina vem um combo select. O problema é que no IE 6 o Select sobrepoem o menu, uma vez que IE6 não reconhece z-index.

Preciso que o drop down do menu fique por cima deste select. Como eu faço? Estou desesperada rss

Segue códigos::

HTML
[codebox]<div id="dv_menu">
<div id="menu_container">
<ul id="pmenu">
<li><a href="Frm_inicio.aspx">Início</a></li>
<li class="drop"><a href="#nogo">Remessa<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="Frm_RemessaTerceirizada.aspx" class="enclose">Terceirizada</a></li>
<li><a href="Frm_RemessaCredor.aspx">Credor</a></li>
<li><a href="Frm_HistoricoTerceirizada.aspx">Histórico Terceirizada</a></li>
<li><a href="Frm_HistoricoCredor.aspx">Histórico Credor</a></li>
</ul>
</li><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</ul>
</div>
</div>[/codebox]


CSS
[codebox]/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
#menu_container {margin:0px 0 100px 15px; top:0px; position:absolute; width:735px; height:17px; z-index:100;}

/* Get rid of the margin, padding and bullets in the unordered lists */
#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none; left: 120px !important; top:16px !important;z-index:100;}

/* Set up the link size, color and borders */
#pmenu a, #pmenu a:visited {display:block;width:150px; font-size:11px; color:#000000; height:20px; line-height:24px; text-decoration:none; text-indent:5px; border:1px solid #eaeaea; border-width:1px 0 1px 1px;z-index:100;}

/* Set up the sub level borders */
#pmenu li ul li a, #pmenu li ul li a:visited {border-width:0 1px 1px 1px;}
#pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;}

/* Set up the list items */
#pmenu li {float:left; background:#eaeaea;z-index:100;}

/* For Non-IE browsers and IE7 */
#pmenu li:hover {position:relative;}
/* Make the hovered list color persist */
#pmenu li:hover > a {background:#57b0c3; color:#000000;}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#pmenu li ul {display:none;}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#pmenu li:hover > ul {display:block; position:absolute; top:-21px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif); width:150px;}
/* Position the first sub level beneath the top level liinks */
#pmenu > li:hover > ul {left:-30px; top:22px;}

/* get rid of the table */
#pmenu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #pmenu li a:hover {position:relative; background:#57b0c3; color:#000000;}

/* For accessibility of the top level menu when tabbing */
#pmenu li a:active, #pmenu li a:focus {background:#57b0c3; color:#000000;}

/* Set up the pointers for the sub level indication */
#pmenu li.fly {background:#eaeaea}
#pmenu li.drop {background:#eaeaea}


/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */

/* change the drop down levels from display:none; to visibility:hidden; */
* html #pmenu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);}

/* keep the third level+ hidden when you hover on first level link */
#pmenu li a:hover ul ul{
visibility:hidden;
}
/* keep the fourth level+ hidden when you hover on second level link */
#pmenu li a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#pmenu li a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
visibility:hidden;
}

/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;
}

/* make the third level visible when you hover over second level link and position it and all further levels */
#pmenu li a:hover ul a:hover ul{
visibility:visible; top:-11px; left:80px;
}
/* make the fourth level visible when you hover over third level link */
#pmenu li a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* make the sixth level visible when you hover over fifth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul {
visibility:visible;
}
/* If you can see the pattern in the above IE5.5 and IE6 style then you can add as many sub levels as you like */[/codebox]

Modalpopup X Position: Fixed

15/05/2008, 15:45

Olá pessoal!


Minha página é feita de um cabeçalho, cuja CSS Position é fixed e do conteúdo. Estou usando o Ajax toolkit para .net.
Acontece que ao criar uma janela modal, ela não 'expande' a area opaca até a div que está fixed.
Ou seja, era para toda a pagina ficar toda em preto, mas o cabeçalho que é fixo não recebe a cor do modal.

Alguém já viveu esse problema, ou sabe como corrigí-lo?

Peço encarecidamente a ajuda de vocês ;)

Greybox Abrindo Automaticamente

07/05/2008, 17:46

Olá pessoal!!

Tenho uma area restrita no meu site onde o cliente digita login e senha. Abre-se então uma pop-up com a área restrita desse cliente.
Queria usar Greybox para abrir essa janela, pois além de mais bonito, é mais usual. Atualmente, o seguinte script abre a página:

[codebox]
<script LANGUAGE="JAVASCRIPT">
window.open("area_restrita.asp?login=<%=login%>&area=<%=objrs("nome")%>&acesso_gerais=<%=objrs("acesso_gerais")%>","_blank",'height=500,width=600,menubar=no,toolbar=yes,status=yes,resizable=yes,scrollbars=yes')
</SCRIPT>[/codebox]

Como faço para que essa página "area_restrita.asp" abra automaticamente em um greybox?


Desde já agradeço!!

Menu Css Dropdown - Link Ativo Com Cor Diferente

02/05/2008, 12:01

Olá pessoal!

Tenho o seguinte menu drop down em minha página:

HTML:
[codebox] <ul class="style2" id="navigation-1">
<li><a href="#" title="Movimentação de cheque">Movimentação de Cheque</a></li>
<li><a href="#" title="Products">Inconsistências</a> </li>
<li><a href="#" title="Relatórios">Relatórios</a>
<ul class="navigation-2">
<li><a href="#" title="Log In">Log In</a></li>
<li><a href="#" title="Register">Register</a></li>
</ul>
</li>
</ul>[/codebox]

CSS
[codebox]
div#container
{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #E4E4E4; height:400px; }

h1
{ width:738px; margin:1px; color:#009999; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }
p { margin:0; padding:1.2em; }
p a:link,
p a:visited,
p a:hover,
p a:active
{ font-weight:bold; color:#14A3A2; }

ul#navigation-1
{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #E4E4E4; border-bottom:1px solid #E4E4E4; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
{ margin:0; padding:0; display:block; float:left; position:relative; width:164px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#E4E4E4; color:#000000; width:164px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#14A3A2; color:#ffffff; font-weight:bold; width:164px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }
ul#navigation-1 li a:active
{ background:#14A3A2}
ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#E4E4E4; width:164px; position:absolute; top:21px; left:-1px; border:1px solid #14A3A2; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:146px; clear:left; width:146px; }

ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#14A3A2; padding:4px 0; width:164px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#FF6633; padding:4px 0; width:164px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #14A3A2; border-left:1px solid #14A3A2; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#14A3A2; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#ec454e; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }
current
{ background-color:#E4E4E4 }[/codebox]


Preciso que o link ativo, ou seja o link correspondente à página em que o usuário está, assuma a cor #14A3A2 de background.
O problema é que no caso de links de submenus, a página ativa vai ser a do submenu, e eu preciso que o link marcado como ativo seja o do menu.
Exemplo: Em relatórios, se a página ativa for a do link "prorrogados - martins", o menu de "relatórios" deverá ficar ativo e desta forma assumir a cor #14A3A2 .
Alguém sabe como fazer isso?

me ajudeeeeeeeeeeem

IPB Skin By Virteq