Foros del Web » Creando para Internet » CSS »

problemas con z-index

Estas en el tema de problemas con z-index en el foro de CSS en Foros del Web. hola que tal compañeros, ando haciendo una web con css y me encontre con un problema con el z-index,,, lo que pasa esque quendo dos ...
  #1 (permalink)  
Antiguo 09/10/2009, 18:15
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 14 años, 7 meses
Puntos: 5
Pregunta problemas con z-index

hola que tal compañeros, ando haciendo una web con css y me encontre con un problema con el z-index,,, lo que pasa esque quendo dos divs en este orden el el html: main-content y content, el main-content tiene una imagen de fondo para que el content se vea con las esquinas redondeadas, pero asi como estan en el html se muestra el content arriba del main-content y lo que se me ocurrio fue agregarla la propiedad z-index, a main-content le puse z-index: 2 y a content z-index:1 para que se mostrara abajo pero no sirvio y me puse a investigar de la dicha propiedad y leei que le tenian que tener la propiedad de position: o float: para que funcionaran y eso hice le puse position:relative a los dos divs que les queria aplicar el z-index pero tampoco funciono y les cambiar a otra position y tampoco sirvio y la verdad no se que este haciendo mal aqui les dejo mi codigo css y la url de mi web haber si me pueden echar la mano

Código:
* {
	margin:0;
	padding:0;
}

body {
	background:#DADADA url(images/home-bg.png) no-repeat fixed bottom;
	font-family:Arial, Helvetica, sans-serif;
	margin:0;
}

#main {
	background:url(images/main-bg.png) repeat-y;
	height:auto;
	margin:auto;
	overflow:hidden;
	width:1020px;
}

#wrapper {
	height:auto;
	margin:0 10px;
	overflow:hidden;
	width:1000px;
}

#header {
	background:url(images/header-bg.png) no-repeat;
	height:auto;
	padding:17px;
	width:auto;
}

#navbar li, #navbar a {
	display:block;
	height:30px;
}

#navbar li {
	float:left;
	list-style-type:none;
	margin:0;
	padding:0;
	position:relative;
	top:0;
	width:200px;
}

#navbar-noticias {
	background:url(images/navbar-bg.jpg);
	height:30px;
	left:0;
	padding:0;
	width:200px;
}

#navbar-noticias a:hover {
	background:url(images/navbar-bg.jpg) 0 -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-noticias .selected {
	background:url(images/navbar-bg.jpg) 0 -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-comunidad {
	background:url(images/navbar-bg.jpg) -200px 0;
	height:30px;
	left:0;
	width:200px;
}

#navbar-comunidad a:hover {
	background:url(images/navbar-bg.jpg) -200px -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-comunidad .selected {
	background:url(images/navbar-bg.jpg) -200px -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-chat {
	background:url(images/navbar-bg.jpg) -400px 0;
	height:30px;
	left:0;
	width:200px;
}

#navbar-chat a:hover {
	background:url(images/navbar-bg.jpg) -400px -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-chat .selected {
	background:url(images/navbar-bg.jpg) -400px -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-buscador {
	background:url(images/navbar-bg.jpg) -600px 0;
	height:30px;
	left:0;
	width:200px;
}

#navbar-buscador a:hover {
	background:url(images/navbar-bg.jpg) -600px -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-buscador .selected {
	background:url(images/navbar-bg.jpg) -600px -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-contacto {
	background:url(images/navbar-bg.jpg) -800px 0;
	height:30px;
	left:0;
	width:200px;
}

#navbar-contacto a:hover {
	background:url(images/navbar-bg.jpg) -800px -30px;
	height:30px;
	left:0;
	width:200px;
}

#navbar-contacto .selected {
	background:url(images/navbar-bg.jpg) -800px -30px;
	height:30px;
	left:0;
	width:200px;
}

#main-container {
	background:#363739 url(images/main-container-bg.png) no-repeat;
	clear:both;
	height:800px;
	margin:auto;
	padding-top:15px;
	position:relative;
	width:1000px;
	z-index:1;
}

#container {
	background-color:#FFF;
	height:auto;
	margin:0 5px;
	padding-top:15px;
	position:relative;
	width:990px;
	z-index:0;
}

#featured {
	background-color:#FFFFFF;
	border:5px solid #CCCCCC;
	height:250px;
	margin:0 auto 15px;
	padding-right:250px;
	position:relative;
	width:400px;
}

#featured ul.ui-tabs-nav {
	left:400px;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:1px;
	padding:0;
	position:absolute;
	top:0;
	width:auto;
}

#featured ul.ui-tabs-nav li {
	color:#666666;
	font-size:12px;
	padding:1px 1px 1px 13px;
}

#featured ul.ui-tabs-nav li img {
	background-color:#FFFFFF;
	border:1px solid #EEEEEE;
	float:left;
	margin:2px 5px;
	padding:2px;
}

#featured ul.ui-tabs-nav li span {
	font-family:Verdana;
	font-size:11px;
	line-height:18px;
}

#featured li.ui-tabs-nav-item a {
	background-color:#FFFFFF;
	color:#333333;
	display:block;
	height:60px;
	line-height:20px;
}

#featured li.ui-tabs-nav-item a:hover {
	background-color:#F2F2F2;
}

#featured li.ui-tabs-selected {
	background:transparent url(images/featured/selected-item.gif) no-repeat left top;
}

#featured ul.ui-tabs-nav li.ui-tabs-selected a {
	background:#CCCCCC none repeat scroll 0 0;
}

#featured .ui-tabs-panel {
	background:#999999 none repeat scroll 0 0;
	height:250px;
	position:relative;
	width:400px;
}

#featured .ui-tabs-panel .info {
	background:transparent url(images/featured/transparent-bg.png) repeat;
	height:70px;
	left:0;
	position:absolute;
	top:180px;
}

#featured .info h2 {
	color:#FFFFFF;
	font-family:Georgia,serif;
	font-size:18px;
	margin:0;
	overflow:hidden;
	padding:5px;
}

#featured .info p {
	color:#F0F0F0;
	font-family:Verdana;
	font-size:11px;
	line-height:15px;
	margin:0 5px;
}

#featured .info a {
	color:#FFFFFF;
	text-decoration:none;
}

#featured .info a:hover {
	text-decoration:underline;
}

#featured .ui-tabs-hide {
	display:none;
}
marque con rojo para su mejor ubicacion en los lugares donde tengo problemas
pk-network.co.cc/

un saludo y muchas gracias de antemano
  #2 (permalink)  
Antiguo 10/10/2009, 05:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: problemas con z-index

¿Alguna razón que te obligue a poner un fondo debajo en el flujo del html y después querer subirlo con css?
Si no lo hay, un poco de sentido común, que ya lo decía Santos Rondiche: "primero el burro y después la albarda"

Prueba
Cita:
#main-container {
background:#363739;
clear:both;
height:800px;
margin:auto;
position:relative;
width:1000px;
}
#container {
background:#FFFFFF url(images/main-container-bg.png) no-repeat;
height:auto;
padding-top:15px;
position:relative;
width:1000px;
}


Posiblemente conlleve alguna otra modificación en elementos posteriores. No he mirado a fondo todos los efectos.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 10/10/2009, 13:01
 
Fecha de Ingreso: agosto-2009
Mensajes: 292
Antigüedad: 14 años, 7 meses
Puntos: 5
Respuesta: problemas con z-index

muchas gracias kseso? y alexk ya resolvi el problema

soludos!!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:54.