HTML - problema con javascript y html

   
Vista:

problema con javascript y html

Publicado por maria (3 intervenciones) el 18/03/2015 19:11:01
Hola estoy teniendo un problema cuando instertoun slider y el mapa de google en mi codigo.
Mi header se mantiene fijo en la parte superior de la paginna, pero cuando tengo el slider o el mapa estoy quedan por arriba del header y lo tapan.

mi codigo es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<header>
 		<div id="logo">
    <img src="imagenes/logo-01.png" width="161" height="53">
    </div>
          <div class="menu_bar">
          	<a href="#" class="bt-menu"><img src="imagenes/1426627515_ic_menu_48px-128.png" style="width:30px; margin-right:0px;"/></a>
          </div>
        <nav id="menu">
                <ul>
                     <li id="inicio"><a  href="index.html">INICIO</a></li>
                    <li><a href="quienessomos.html">QUIÉNES SOMOS</a></li>
                    <li></li>
                    <li><a href="catering.html">CATERING</a></li>
                    <li><a href="eventos.html">EVENTOS</a></li>
                    <li><a href="confiteria.html">CONFITERIA</a></li>
                    <li><a href="contacto.html">CONTACTO</a></li>
                    <li><a href="LINK A FACEBOOK"><img src="../laespanola/imagenes/fabooklogo-01.png"/></a></li>
                </ul>
            </nav>
 
</header>



style:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/*header*/
.menu_bar{display:none;}
 
header{
	width:100%;
	height:82px;
	margin:auto;
	border-bottom: 1px solid #000;
	display:block;
	background-color:#FFF;
	position: fixed;
	top:0;
}
 
header div{
	width:1230px;
	margin:auto;
	}
 
#logo{
	width:160px;
	height: 60px;
	margin-left:25px;
	margin-top:15px;
	background-image: url(imagenes/logo2-01.png);
	background-repeat:no-repeat;
	background-size:160px;
	margin-right:100px;
	float:left;
 
}
#menu{
	width: 800px;
	float:right;
	margin-top:20px;
 
}
#menu ul li{
	list-style-type:none;
	display:inline-block;
 
 
}
 
#menu ul li a{
	text-decoration: none;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 10px;
	text-align: center;
	float: left;
	display: block;
	width: 100px;
	list-style-type: none;
	color: #000;
}
 
 
#inicio{
	text-align:left;
	}
 
#quienesomos{
	width:118px;
}
 
/*fin header*/

Screen-Shot-2015-03-18-at-15.06.35
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

problema con javascript y html

Publicado por xve (1178 intervenciones) el 18/03/2015 20:51:48
has probado a ponerle en el header:
1
header {z-index:100;}

En principio, de esta manera tendría que quedarse encima...

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

problema con javascript y html

Publicado por maria (3 intervenciones) el 18/03/2015 20:54:01
funciona! gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Angel

problema con javascript y html

Publicado por Angel (101 intervenciones) el 18/03/2015 20:56:05
agregandole el z-index debe funcionar, pero si no funciona aun asi agregale un Z-index negativo al slider y google maps
1
2
3
header {
z-index:100;
}

para el Google Maps y Slider es este code:
1
2
3
div .class {
z-index:-100;
}
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar