slider y menu php css
Publicado por Brayan (5 intervenciones) el 17/06/2020 08:56:13
Hola como están quisiera que me ayudaran con algo que tengo más de 3 días sin darle solución, tengo mi index.php
en donde hice un include del menú y del slider mis problemas son:
1 el menú no llega al 100% de la pantalla
2 el slider solo me muestra 4 de las 6 imagenes que le tengo programadas
3 el slider y el menu tienen un espacio de separacion que quiero quitar
Gracias de antemano por ayudarme adjunto los archivos:
index.php
menu.php
galeria de cabecera.php
y los css
menu.css
estilos_slider.css
en donde hice un include del menú y del slider mis problemas son:
1 el menú no llega al 100% de la pantalla
2 el slider solo me muestra 4 de las 6 imagenes que le tengo programadas
3 el slider y el menu tienen un espacio de separacion que quiero quitar
Gracias de antemano por ayudarme adjunto los archivos:
index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<title>
IndustriasGBSC
</title>
<head> <!--Cabecera de la página-->
<?php include("metatags.php");?>
<link rel="StyleSheet" href="menu_principal.css" type="text/css">
<?php include("menu.php");?>
</head>
<body>
<?php include("galeria_de_cabecera.php");?>
</body>
</html>
menu.php
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
<link rel="StyleSheet" href="estilos_css/menu_principal.css" type="text/css">
<ul id="menu">
<li>
<a href="index.php">
Homepage
</a>
</li>
<li>
<a href="acerca_de_nosotros.php">
About us
</a>
</li>
<li>
<a href="mi_tienda.php">
Virtual shop
</a>
</li>
<li>
<a href="preguntas_frecuentes.php">
Faq
</a>
</li>
<li>
<a href="Soporte.php">
support
</a>
</li>
<li>
<a href="registro.php">
register
</a>
</li>
<li>
<a href="login.php">
login
</a>
</li>
</ul>
galeria de cabecera.php
1
2
3
4
5
6
7
8
9
10
<link rel="StyleSheet" href="estilos_css/estilos_slider.css">
<div class="slider">
<ul>
<li><img src="imagenes/Bolsa.png"height="400"></li>
<li><img src="imagenes/Divisas.png"height="400"></li>
<li><img src="imagenes/Bonos.png"height="400"></li>
<li><img src="imagenes/Metales.png"height="400"></li>
<li><img src="imagenes/Criptomonedas.png"height="400"></li>
<li><img src="imagenes/Bienes.png"height="400"></li>
</ul>
y los css
menu.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#menu { margin:0; padding:0;list-style-type:none;
}#menu a { width:100px;text-decoration:none;
text-align:center;
color:#ff0000;
background-color:#f7f8e8;
padding:10px 40px;border-right:1px solid blue;
display:block;}#menu li { float:left;}#menu a:hover {background-color:#336699;
}estilos_slider.css
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
.slider ul{
display: flex; /*me permite colocar una imagen al lado de la otra*/
padding: 0;/*le quita el relleno del padding (sangria)*/
width:600%;/*sirve para darle espacio a las imagenes para que se vean completas*/
animation-duration: 40s;/*me indica la duracion de la animacion*/
animation-name: slider;/*me da el nombre a la animacion*/
animation-direction: alternate;/*me permite hacer retroceder las imagenes del slider*/
animation-iteration-count:infinite;/*me indica el numero de veces que se repite la animacion*/
}.slider li{
width: 100%;
list-style: none;/*le quita el punto de li*/
}.slider img{
width:100%;
}@keyframes slider{ /*me indica los tiempos entre cada imagen del slider*/
0% {margin-left:0;}
10% {margin-left:0;}
15% {margin-left:-100%;}
25% {margin-left:-100%;}
30% {margin-left:-200%;}
40% {margin-left:-200%;}
45% {margin-left:-300%;}
55% {margin-left:-300%;}
60% {margin-left:-400%;}
70% {margin-left:-400%;}
75% {margin-left:-500%;}
100%{margin-left:-500%;}
}Valora esta pregunta
0