PHP - slider y menu php css

 
Vista:
sin imagen de perfil
Val: 10
Ha aumentado su posición en 6 puestos en PHP (en relación al último mes)
Gráfica de PHP

slider y menu php css

Publicado por Brayan (4 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
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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder