html - z-index doesn't let me to interact with the behind content -
i need help css issue. have index page navbar , iframe wrapped div. had set -1 z-index value iframe's wrapper, nabvar can displayed correctly. but, doesn't allow me interact iframe (for example, can't utilize slider). how can prepare this? in advance! :d
screenshot (u need because don't have files need see page):
http://i.imgur.com/ckqsgec.png
html:
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <!-- versión html--> <html> <head> <title>divercine...</title> <!-- título de la página--> <link href="favicon.png" rel="shortcut icon" /> <!-- icono de la página--> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- permite los caracteres especiales, como Ñ o las tildes--> <link href="index.css" rel="stylesheet" type="text/css"> <!-- ancla la hoja de estilos del index--> </head> <body> <div id="top"> <!-- envuelve la cabecera--> <div id="logo"><img src="logo.png" title="divercine..." alt="divercine..." border="0" /></div> <!-- acá va la imagen del logo, envuelta en una capa--> <div id="login"> <form action="" method="post"> <!-- se declara united nations formulario, para organizarlo mejor se split en 3 capas--> <div id="formleft"> <!-- capa de formulario superior izquierda, contiene las etiquetas--> e-mail:<br> contraseña: </div> <div id="formright"> <!-- capa de formulario superior derecha, contiene las cajas de texto--> <input type="text" name="email" size="20"><br> <!-- textfield tipo texto--> <input type="password" name="password" size="20"> <!-- textfield tipo contraseña--> </div> <div id="formfoot"> <!-- capa de formulario inferior, contiene united nations checkbox, united nations botón y links--> <input type="checkbox" name="recordarc"> recordar contraseña <input type="submit" value="iniciar"><br> <a href="#" title="¿olvidaste tu contraseña?">¿olvidaste tu contraseña?</a> | <a href="#" title="registrarse">registrarse</a> </div> </form> </div> </div> <a href="#"><img id="fb" src="fbicon10.png" alt="síguenos en facebook!" title="síguenos en facebook!" /></a> <!-- botón de facebook--> <div id="otro_contenedor_xd"> <!-- capa envolvente del menu y su borde superior--> <div id="barra_por_las_puras"></div> <!-- capa que de color blanco que sirve de border superior al menu--> <div id="menu_groso"> <!-- capa envolvente del menu--> <ul> <!-- lista, que con css es transformada en una navbar--> <li><a href="#" id="bleft">inicio</a></li> <li><a href="#">cartelera</a></li> <li><a href="#">nuestros cines</a></li> <li><a href="#">próximos estrenos</a></li> <li><a href="#">promociones</a></li> <li><a href="#" id="bright">compra online</a></li> </ul> </div> </div> <div id="middle"> <!-- capa que envuele al iframe, donde cargarán todas las demás páginas--> <iframe src="slider/slider.html" name="middle_target" id="middle_iframe"></iframe> <!-- este iframe llama inicialmente al slider de otra página html--> </div> <div id="footer"> <!-- copyright--> <div id="copyright">copyright © cristian lavado briceño, ruben pacheco guevara, agustin rodas linares</div> </div> </body> </html> css:
html { height:100%; } body { /* le da united nations fondo degradado rojo al body, define la fuente de la página */ height:100%; margin:0; border:0; background:-webkit-linear-gradient(left, #a60000, #ff2727, #a60000); background:-o-linear-gradient(right, #a60000, #ff2727, #a60000); background:-moz-linear-gradient(right, #a60000, #ff2727, #a60000); background:linear-gradient(to right, #a60000, #ff2727, #a60000); font-family:"trebuchet ms", helvetica, sans-serif; font-size:100%; overflow-x:hidden; } #top { position:absolute; width:100%; height:30%; top:0; left:0; right:0; background-color:#000000; } #logo { position:absolute; top:0; left:0; width:70%; height:100%; } #logo img { position:absolute; left:0; right:0; top:0; bottom:0; height:80%; width:auto; display:inline; margin:auto; } #login { position:absolute; top:0; left:70%; width:30%; height:100%; color:#ffffff; -webkit-transition:background-color 0.5s; -moz-transition:background-color 0.5s; -o-transition:background-color 0.5s; transition:background-color 0.5s; } #login:hover { background-color:#121212; } form { position:absolute; width:100%; height:100%; } #formleft { position:absolute; top:20%; left:0; width:42.5%; height:30%; text-align:right; padding-right:4px; line-height:150%; } #formright { position:absolute; top:20%; left:42.5%; width:57.5%; height:30%; text-align:left; padding-left:4px; } input:nth-child(1) { margin-bottom:5px; } #formfoot { position:absolute; top:50%; left:0; width:100%; height:30%; text-align:center; } #formfoot { color:#ff0000; } #formfoot a:hover { color:#ffffff; } #fb { position:absolute; width:25px; height:25px; left:0; bottom:70%; border-top:#ffffff 10px solid; border-right:#ffffff 10px solid; -webkit-border-radius:0px 20px 0px 0px; -moz-border-radius:0px 20px 0px 0px; border-radius:0px 20px 0px 0px; } #otro_contenedor_xd { position:absolute; top:30%; left:0; width:100%; } #barra_por_las_puras { position:absolute; top:0; left:0; width:100%; height:10px; background-color:#ffffff; } #menu_groso { width:100%; position:absolute; top:10px; text-align:center; } ul { list-style-type:none; display:inline-block; margin:0; padding:0; overflow:hidden; } li { float:left; } li a:link, li a:visited { display:block; width:auto; font-weight:bold; color:#ffffff; background-color:#ff0000; text-align:center; padding:4px 8px; text-decoration:none; text-transform:uppercase; font-size:1.2em; } li { border-bottom:#ffffff 10px solid; -webkit-transition: border-top 0.25s, background-color 0.25s; transition: border-top 0.25s, background-color 0.25s; transition-timing-function:linear; -webkit-transition-timing-function:linear; } #bleft { border-left:#ffffff 10px solid; -webkit-border-radius:0px 0px 0px 20px; -moz-border-radius:0px 0px 0px 20px; border-radius:0px 0px 0px 20px; } #bright { border-right:#ffffff 10px solid; -webkit-border-radius:0px 0px 20px; -moz-border-radius:0px 0px 20px; border-radius:0px 0px 20px; } li a:hover { border-top:#000000 7.5px solid; background-color:#ff4646; } #middle { position:absolute; top:30%; left:0; right:0; height:65%; z-index:-1; } #middle_iframe { width:100%; height:100%; } #footer { position:absolute; width:100%; height:5%; bottom:0; left:0; background-color:#000000; color:#ffffff; border-top:#ffffff 10px solid; display:table; } #copyright { position:relative; text-align:center; display:table-cell; vertical-align:middle; }
you cant interact it, you've set behind everything. seek adding positive z-index navbar instead.
html css iframe z-index
No comments:
Post a Comment