Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Ayuda en estilos de una galeria para iframes

CSS - Ayuda en estilos de una galeria para iframes

Volver
Nuevo Tema
<<>>
 
Vista:
Mensajes realizados anteriormente (No estaban la última vez que entraste)Ayuda en estilos de una galeria para iframes
informatic (28/04/2017 07:51:28)571 visitas
0 respuesta
sin imagen de perfil

Ayuda en estilos de una galeria para iframes

Publicado por informatic (1 intervención) el 28/04/2017 07:51:28
Hola muy buenas, necesito ayuda, he intentado modificar mucho unos estilos de una galeria de imagenes, que ahora quiero que esta se puedan reproducir unos iframes desde youtube. Lo que pasa es q no logro poder ver el parrafo de texto el footer y un enlace que seria el boton regresar, ya que al colocar el iframe es como si los borrara.

html
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="css/estilos.css">
 
	<title>Galeria</title>
</head>
<body>
	<header>
		<div class="contenedor">
			<h1 class="titulo">Foto: <?php if (!empty($fotos['titulo'])){
				echo $fotos['titulo'];
			}else{
				echo 'Sin descripción';
			} ?></h1>
		</div>
	</header>
		<div class="contenedor">
			<div class="foto">
				<iframe src="<?php echo $fotos['imagen']; ?>">
				<p><?php echo $fotos['texto']; ?></p>
				<a href="index.php" ><i class="fa fa-long-arrow-left"></i> Regresar</a>
			</div>
		</div>
	<footer>
		<p class="copyright">Galeria creada por Blogger </p>
	</footer>
</body>
</html>

estilos.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
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
 
body {
	font-size: 16px;
	font-family: 'Slabo 27px', serif;
	background: #232931;

	color:#fff;

}
 
h1, h2, h3, h4, h5, h6 {
	font-family: 'Slabo 27px', serif;
	font-weight: normal;
}
 
 
a {
	text-decoration: none;
	visibility: visible;
	background-image: url(../img/images.png);
}
 
a:hover {
	text-decoration: underline;
	visibility: hidden;
}
 
.contenedor {
	max-width: 1000px;
	width: 90%;
	margin: auto;
}
header {
	margin: 40px 0;
	font-size: 20px;
	text-align: center;
}
.foto {
	width: 100%;
	margin: auto;
	max-width: 700px;
	max-height: 500px;
	text-align: center;
}
 
.foto iframe {
	width: 100%;
	max-width: 700px;
	max-height: 500px;
	vertical-align: top;
	-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,.8);
	box-shadow: 2px 2px 3px rgba(0,0,0,.8);
	margin-bottom: 30px;
}
 
.foto .texto {
	max-width: 500px;
	margin-bottom: 30px;
}
 
.regresar {
	padding: 5px 10px;
	margin-bottom: 30px;
	display: inline-block;
	border-radius: 50px;
	font-size: 16px;
	border:1px solid rgba(255,255,255,.2);
	-webkit-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
 
.regresar:hover {
	border:1px solid #fff;

	text-decoration: none;
}
 
.regresar .fa {
	margin-right: 15px;
}

Por si alguien me puede echar una manito, ya que no logro que el parrafo <p> y los enlaces <a> mas el footer se vean al insertar el iframe antes de ellos en el div foto. Desde ya muchas gracias
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