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
estilos.css
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
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
0