[Resolvido] Colocar Div acima de outra div

[Web Design Valdeci 0]

Bom Dia Pessoal,

 

Estou desenvolvendo este site

 

Reparem que o menu está abaixo da div que tem as imagens.

 

Será que alguém poderia me ajudar a colocar o menu acima da div da imagem. É coisa simples mas estou aprendendo ainda tableless.

 

Abaixo o css:

 

do menu:

#navcontainer { width: 190px; }

#navcontainer a
{
display: block;
padding: 2px;
width: 190px;
background-color: #FFFFFF;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCC;
}

#navcontainer a:link, #navlist a:visited
{
color: #354057;
text-decoration: none;
}

#navcontainer a:hover
{
background-color:#EBEBEB;
color: #354057;
}
#navcontainer ul
{
margin-left: 0;
margin-top: 0;
padding-left: 0;
list-style-type: none;
font-family:  Arial, Helvetica, sans-serif;
}

 

 

da imagem:

 

/*HOME*/


.box_abas_1 {
background:#e8e8e8;
float:left;
height:193px;
position:relative;
width:441px;
color:#00406b;
}
.box_abas_1 h2 {
float:left;
font-size:13px;
font-weight:bold;
margin:0 0 0 0;
width:331px;
}
.ui-tabs-hide {
display:none;
}
.ui-tabs-nav {
display:none;
}
.box_abas_1 div.ui-tabs-panel {
height:193px;
position:absolute;
top:0;
left:0;
width:441px;
z-index:1;
}
.box_abas_1 div.ui-tabs-panel span {
display:block;
overflow:hidden;
position:relative;
width:auto;
float:left;
}
.box_abas_1 div.ui-tabs-panel span.btn_mais{
float:none;
display:inline;
height:auto;
color:#00406b;
overflow:auto;
font-weight:bold;
}
.box_abas_1 div.ui-tabs-panel span img {
position:relative;
margin-right:20px;
}
.box_abas_1 div.ui-tabs-panel a {
color:#00406b;
}
.box_abas_1 div.ui-tabs-panel a:hover {
text-decoration:underline;
}
.box_abas_1 div.ui-tabs-panel h3 {
margin:20px 0 0 0;
}
.box_abas_1 div.ui-tabs-panel h3 a img {
margin:0 4px 0 0;
}
.ui-tabs-nav {
display:block;
float:right;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
width:104px;
position:absolute;
bottom:2px;
right:2px;
margin:0;
z-index:20;
}
.ui-tabs-nav:after {
clear:both;
content:" ";
display:block;
}
.ui-tabs-nav li {
float:left;
height:22px;
line-height:22px;
width:29px;
margin-left:3px;
}
.ui-tabs-nav a, .ui-tabs-nav a span {
display:block;
}
.ui-tabs-nav a {
cursor:pointer;
display:block;
font-size:18px;
font-weight:bold;
height:22px;
text-align:center;
width:29px;
background: url(../imgs/bg_aba.gif) no-repeat left top;
}
.ui-tabs-nav a:hover {
text-decoration:underline;
color:#FFFFFF;
}
.ui-tabs-nav .ui-tabs-selected a {
background:#1F4268;
color:#F5F089;
position:relative;
z-index:2;
}

.ui-tabs-nav .ui-tabs-selected a span {
color:#F5F089;
}

.ui-tabs-nav a span {
height:22px;
width:29px;
color:#1F4268;
}
.ui-tabs-loading em {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://www.uniquesolutions.com.br/css/loading.gif) no-repeat scroll 0 50%;
padding:0 0 0 20px;
}

[No Rain 0]

Você precisa trabalhar com z-index (posição y). A propriedade z-index só funciona quando declarada a propriedade position. tenta isso:

 

#navcontainer { width: 190px; position:relative; z-index: 100;}
.box_abas_1 {
background:#e8e8e8;
float:left;
height:193px;
position:relative;
z-index: 50;
width:441px;
color:#00406b;
}

[Eduiagami 1]

Olá,

tudo bom?

 

Amigo isso é problema nas camadas (z-index)

o z-index do "Menu" deve ser maior que o do "Slide de informativos";

 

tente aumentar o z-index do submenu (ul li ul) para que fique maior que o do slide, se o slide não tiver nenhum z-index coloque-o!

 

abraços

o/

[Web Design Valdeci 0]

Olá,

tudo bom?

 

Amigo isso é problema nas camadas (z-index)

o z-index do "Menu" deve ser maior que o do "Slide de informativos";

 

tente aumentar o z-index do submenu (ul li ul) para que fique maior que o do slide, se o slide não tiver nenhum z-index coloque-o!

 

abraços

o/

 

obrigado pelas respostas pessoal,

 

Olha o que eu fiz

 

.box_abas_1 div.ui-tabs-panel {
height:193px;
position:absolute;
top:0;
left:0;
width:441px;
z-index:1;

 

 

e no menu

 

#navcontainer ul
{
margin-left: 0;
margin-top: 0;
padding-left: 0;
z-index: 50;
list-style-type: none;
font-family:  Arial, Helvetica, sans-serif;

 

e não funfou... será que fiz algo errado?

[William Bruno 1501]

é oq o @No Rain já disse.

 

você precisa declarar um position pro z-index funcionar.

coloca

#navcontainer ul
{
   position: relative;
   z-index: 50;
}

[Web Design Valdeci 0]

Obrigado pela ajuda pessoal, funcionou certinho. [resolvido]

[alexxjuniorr 0]

Tbm me ajudaram, muito obrigado!

[Juliano Vieira 0]

Em 02/02/2011 at 23:16, William Bruno disse:

é oq o @No Rain já disse.

 

você precisa declarar um position pro z-index funcionar.

coloca

#navcontainer ul
{
   position: relative;
   z-index: 50;
}

 

 

 

Muito bom me salvou aqui ! hahaha a ignorância perde para a persistência !