Foros del Web » Creando para Internet » CSS »

Supongo que no sera tan dificil

Estas en el tema de Supongo que no sera tan dificil en el foro de CSS en Foros del Web. Hola, tengo la siguiente web: http://www.chiefbeerofficer.com/ Y me gustaria que la seccion de Headline Dinners, Industry Roundtables... quedara un poco por encima de la linea ...
  #1 (permalink)  
Antiguo 20/07/2012, 06:24
 
Fecha de Ingreso: noviembre-2008
Mensajes: 16
Antigüedad: 13 años, 7 meses
Puntos: 0
Supongo que no sera tan dificil

Hola, tengo la siguiente web:

http://www.chiefbeerofficer.com/

Y me gustaria que la seccion de Headline Dinners, Industry Roundtables...
quedara un poco por encima de la linea amarilla, pero por mas que toco el z-index no logro hacerlo. El slider termina siempre tapando dichos titulos en lugar de ser los titulos los que queden por encima del slider.

Gracias.
  #2 (permalink)  
Antiguo 20/07/2012, 09:33
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 13 años
Puntos: 269
Respuesta: Supongo que no sera tan dificil

Hola, en verdad es muy sencillo, pero hacia falta ponerlo en el titulo? jaja no problem.
- quita todos los z-index
- tip: z-index necesita que las cajas que intervengan en la pila estén posicionadas con algun valor distinto de static (valor por defecto)
- chequea este código y trasladalo a tu problema:
Código HTML:
Ver original
  1. <div id="wrap">
  2.     <div id="slider">slider</div>
  3.     <div id="bottom">bottom</div>
  4. </div>
Código CSS:
Ver original
  1. #wrap{
  2.     position:relative; /*contenedor relativo, para controlar las cotas de las cajas absolutas anidadas*/
  3. }
  4. #slider, #bottom{
  5.     width: 200px;
  6.     height: 200px;
  7.     padding: 16px;
  8. }
  9. #slider{
  10.     background: skyblue;
  11.     position: relative; /*como no necesitamos desplazarlo dejamos relativo*/
  12.     top: 0;
  13.     left: 0;
  14.     z-index: 0;
  15. }
  16. #bottom{
  17.     background: orange;
  18.     position: absolute; /*usamos posicion absoluta solo para ilustrar el caso, puede que te venga bien o que necesites otra cosa o no*/
  19.     top: 100px;
  20.     left: 100px;
  21.     z-index: 1;
  22. }

puede que necesites encararlo de otra forma, cualquier cosita mostranos el código del problema (no toda la web por favor porque sinceramente no tendría tiempo de verla)

Saludos.
  #3 (permalink)  
Antiguo 20/07/2012, 09:59
 
Fecha de Ingreso: noviembre-2008
Mensajes: 16
Antigüedad: 13 años, 7 meses
Puntos: 0
Respuesta: Supongo que no sera tan dificil

El codigo del slider es este:

/* Full-Width Home Page Slider */
#slider-full-width { width: 1920px; height: 650px; position: relative; left: -510px; display: none; }
#slider-full-width ul { list-style-type: none; }
#slider-full-width * { margin: 0; padding: 0; }
#slider-full-width li { width: 1920px; height: 650px; text-align: center; }
#slider-full-width .text-bg { position: absolute; bottom: 0; left: 0; width: 1920px; height: 58px; }
#slider-full-width .text { position: absolute; bottom: 18px; left: 510px; width: 700px; text-align: left; }
#slider-full-width h2 { display: inline; font-size: 18px; line-height: 24px; }
#slider-full-width h2 a:hover { text-decoration: none; }
#slider-full-width p { display: inline; font-size: 20px; margin-left: 7px; }

#slider_nav { position: absolute; right: 960px; bottom: 16px; width: 200px; height: 20px; z-index: 20; list-style: none; }
#slider_nav li { overflow: hidden; display: block; float: right; height: 24px; margin: 0 0 0 7px; padding: 0; width: 24px; }
#slider_nav li:hover { cursor: pointer; z-index: 5000; }
#slider_nav_left { width: 18px; cursor: pointer; height: 33px; position: absolute; left: 0; top: 159px; }
#slider_nav_right { width: 18px; cursor: pointer; height: 33px; position: absolute; right: 0; top: 159px; }


Y el de la caja div que quiero poner por encima es este:


#page-full-width { width: 1280px; margin: 20px auto 0 auto; margin-left:-200px; }
  #4 (permalink)  
Antiguo 20/07/2012, 10:27
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 13 años
Puntos: 269
Respuesta: Supongo que no sera tan dificil

Del código anterior y viendo el tuyo:
Haz que #slider sea #slider-full-width (no veo el html pero este parece ser el contenedor)
y que #bottom sea #page-full-width

Etiquetas: dificil, sera
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 11:20.