CSS - Como puedo ordenar estos videos con los párrafos

 
Vista:
sin imagen de perfil
Val: 16
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Como puedo ordenar estos videos con los párrafos

Publicado por Jan (7 intervenciones) el 11/05/2018 03:53:59
Buenas comunidad:
Para comenzar, quiero que se vean los videos de esta forma:

Screenshoot: http://prntscr.com/jgditx

Mi código HTML5:
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="es-EN">
    <head>
        <!-- No repetir el title y la description en otras paginas. Siempre cambiar -->
        <meta charset="UTF-8">
        <title>Alquiler drones Barcelona | Topcamdrone</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="keywords" content="drones barcelona, alquiler drones, filiming, experiencia">
        <!-- Un máximo de 4 keywords, Google no da mucha importancia, BING si -->
        <meta name="description" content="Empresa dedicada al alquiler de drones en Barcelona: servicios de filming, TV, grabación de anuncios publicitarios">
        <!-- Repetiremos un MÁXIMO de 2 keywords en el description -->
        <meta name="author" content="https://aincraft.be">
        <meta name="owner" content="Paco Sánchez Perez">
        <meta name="robots" content="noindex, nofollow">
        <!-- Es importante poner follow a todas las paguinas -->
        <!-- 
        Al especificar esto, le decimos a Google que nuestra indexacion es urgente 
        Valores disponibles:
            - INDEX/NOINDEX -> SIndica si se desea o no, permitir la indexación de la página por los   motores de búsqueda
            - FOLLOW/NOFOLLOW -> Se indica si se debe o no permitir a los SE recorrer o seguir         recorriendo la web a través de los enlaces que encuentre en el cuerpo del documento 
            - ARCHIVE/NOARCHIVE -> Si queremos o no que el SE guarde nuestra información en una       cache interna
            - SNIPPET/NOSNIPPET -> Mostrar o no descripción de la página. Si se activa, tambien se     activa automaticamente la opción de NOARCHIVE
            - ODP/ NOODP -> Sirve para decirle al buscador que debe, o no, mostrar título o descripcion iguales a los que se encuentra en el Open Directory Project.

        -->
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/Helvetica.css">
        <script src="js/modernizr-custom.js"></script>
 
        <!-- Los títulos escritos -->
    </head>
    <body>
        <header>
            <h1>
                <a href="index.htm">
                    <figure><img src="fotos/logo-topcamdrone.png" alt="Topcamdrone"></figure>
                    <p class="eslogan">The value of experience</p>
                </a>
 
            </h1>
 
            <!-- Navigation menu -->
            <nav id="ioMenu">
                <figure id="showMenu" class="ioMenuMovil" onClick="displayMenu()"><img src="ico/menu.svg"></figure>
                <!-- Menu that will show li items -->
                <div id="card_menu">
                    <figure id="hideMenu" class="ioMenuMovil"><img src="ico/exit.svg" onClick="displayMenu()"></figure>
                    <figure id="logo_menu"><img src="ico/camera.svg" alt=""></figure>
                    <ul>
                        <li><a href="index.htm">Inicio</a></li>
                        <li><a href="servicios.htm">Servicios</a></li>
                        <li><a href="trabajos.htm">Trabajos</a></li>
                        <li><a href="nosotros.htm">Nosotros</a></li>
                        <li><a href="contacto.htm">Contacto</a></li>
                        <li><a href="clientes.htm">Clientes</a></li>
                    </ul>
                </div>
            </nav>
            <!-- Navigation buttons -->
            <div id="prev_section"><img src="ico/arrow.svg"></div>
            <div id="next_section"><img src="ico/arrow.svg"></div>
        </header>
        <div id="video_box">
            <iframe width="664" height="359" src="https://www.youtube.com/embed/YaPV_j8SKso" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Ferrari</p>
            <iframe width="657" height="359" src="https://www.youtube.com/embed/-RGWtHqdcyo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Ford Kuga</p>
            <iframe width="661" height="354" src="https://www.youtube.com/embed/kL0QaSfnLTI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p id="vid_info">San Miguel</p>
            <iframe width="657" height="345" src="https://www.youtube.com/embed/blRou_7PMCE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Toyota Prius</p>
            <iframe width="657" height="345" src="https://www.youtube.com/embed/4BFY0G8sJ-Y" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Samsung Gear S3</p>
            <iframe width="657" height="359" src="https://www.youtube.com/embed/rryHUAhLHzg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Mercedes Coupé</p>
            <iframe width="656" height="360" src="https://www.youtube.com/embed/cq96162AB40" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Porsche</p>
            <iframe width="657" height="359" src="https://www.youtube.com/embed/YGGH3MrkuTs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Contratiempo</p>
            <iframe width="655" height="360" src="https://www.youtube.com/embed/iLHIJ00Fh20" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Lexus IS 2017</p>
            <iframe width="655" height="360" src="https://www.youtube.com/embed/9amG0XelQD0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Seat Toledo</p>
            <iframe width="655" height="359" src="https://www.youtube.com/embed/Mfah1RcaIsY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Vimal</p>
            <iframe width="647" height="359" src="https://www.youtube.com/embed/d2fVh8cH4Kc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Mercedes AMG E 63S</p>
            <iframe width="655" height="360" src="https://www.youtube.com/embed/LfDSBDaQ85U" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Mercedes AMG E 43</p>
            <iframe width="655" height="360" src="https://www.youtube.com/embed/ip3KuKkPLj8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Renault Captur</p>
            <iframe width="655" height="360" src="https://www.youtube.com/embed/XiXLPJQZ4y8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Mazda</p>
            <iframe width="655" height="359" src="https://www.youtube.com/embed/CBMNa55rmTk" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Caixa de Catalunya</p>
            <iframe width="655" height="360" src="https://www.youtube.com/embed/qkG9DmwYM6s" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>BNP</p>
            <iframe width="655" height="360" src="https://www.youtube.com/embed/YgHyqJjvr44" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Fiat</p>
            <iframe width="655" height="360" src="https://www.youtube.com/embed/KHExxf6PBnc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Mercedes</p>
            <iframe width="655" height="359" src="https://www.youtube.com/embed/f0B5N6l91ek" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Banco de Sabadell</p>
            <iframe width="655" height="360" src="https://www.youtube.com/embed/XFB6Fa2F5ow" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Port Aventura 2016</p>
            <iframe width="645" height="360" src="https://www.youtube.com/embed/6O5gN4XqKFI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Mercedes V8 expertise</p>
        </div>
        <script>
            function displayMenu() {
                var display;
                var card_menu = document.getElementById("card_menu");
                display = card_menu.style.display;
                if (display == "none") {
                    card_menu.style.display = "block"
                } else {
                    card_menu.style.display = "none";
                }
 
            }
        </script>
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-117952001-1"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'UA-117952001-1');
        </script>
    </body>
</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
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
CSS3:
/* 
Author: Jan Sánchez van den Berg
*/
 
 
/* From here, mobile first */
body {
    font-size: 16px;
    font-family: "Helvetica", sans-serif;
    position: relative;
}
header {
    width: 100%;
    height: 57px;
    background: white;
    position: fixed;
}
header h1 {
    display: none;
}
header nav .ioMenuMovil {
    height: 50px;
    width: 50px;
    cursor: pointer;
    line-height: 40px;
    margin: 0px 0px 0px 10px;
    padding-top: 5px;
}
header nav .ioMenuMovil img {
    height: 100%;
}
header nav #card_menu {
    position: relative;
    width: 230px;
    background: white;
    border-right: 0.5px solid black;
    bottom: 55px;
    left: 0px;
    z-index: 999;
    padding-bottom: 20px;
}
header nav #card_menu #logo_menu {
    overflow: hidden;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 50px;
    width: 180px;
}
header nav #card_menu .ioMenuMovil {
    width: 50px;
}
header nav #card_menu #logo_menu img {
    width: 100%;
}
header nav #card_menu ul {
    margin-top: -20px;
    font-size: 1.5em;
}
header nav #card_menu ul li {
    list-style: none;
    /* Space between li elements */
    line-height: 37px;
}
header nav #card_menu ul li a {
    text-decoration: none;
    color: black;
}
header #prev_section,
header #next_section {
    width: 35px;
    height: 35px;
 
    cursor: pointer;
    /* Duda sobre overflow */
    overflow: hidden;
    margin: 5px;
    position: absolute;
    /* Ponemos el "position: absolute;" para que las flechitas no influyan con el menu (width: 100%; height: 35px;) */
    top: 8px;
}
 
header #prev_section {
    right: 50px;
}
header #next_section  {
    right: 5px;
}
header #prev_section img,
header #next_section img {
    width: 100%;
}
header #prev_section img {
    transform: rotate(180deg);
}
 
div iframe {
    width: 100%;
    height: 515px;
}
div#video_box iframe {
    margin: 0px 0px 0px 0px;
}
div#video_box p {
    font-weight: 700;
    font-size: 26px;
    color: #0f0f0f;
    display: block;
    text-align: center;
}
div#main-text {
    display: inline-block;
    margin: 40px 20% 0px 20%;
}
div#services-main {
    display: inline-block;
    margin: 70px 5% 0px 5%;
    background: yellow;
}
div#main-text h4 {
    font-weight: 700;
    font-size: 31px;
}
div#main-text h4#center, div#main-text h6 {
    text-align: center;
}
div#main-text h6 {
    font-weight: 400;
    font-size: 22px;
}
div#fig-boss {
    margin: 1px 15% 0px 5%;
}
div figure.fig img {
    background: red;
    width: 137%;
}
 
 
 
/* We start here tablet, desktop and other screen development (mobile not included) */
@media screen and (min-width: 480px) {
    body {
        background: grey;
    }
    div#services-main {
    background: yellow;
    }
}
@media screen and (min-width: 600px) {
    body {
        background: orange;
    }
 
}
@media screen and (min-width: 767px) {
    body {
        background: red;
    }
}
@media screen and (min-width: 950px) {
    body {
        background: green;
    }
    header {
        height: 70px;
    }
     header #prev_section,
     header #next_section {
        position: absolute;
        width: 50px;
        height: 55px;
        background: #29abe2;
        /* Dudas aqui! */
        right: 40px;
        z-index: 999;
        border-radius: 50%;
    }
    header #prev_section img,
    header #next_section img {
        width: 100%;
    }
    header #prev_section {
        top: 115px;
    }
    header #next_section {
        top: 190px;
    }
    header h1 {
        display: inline-block;
        margin: 0px 0px 0px 0px;
        height: 60px;
        width: 25%;
        min-width: 200px;
    }
    header h1 > * {
        display: inline-block;
        vertical-align: middle;
        color: #605e5e;
        font-size: 25px;
        font-weight: 400;
        /* El elemento padre es body */
        position: relative;
        margin: 0px 3px;
    }
    header h1 figure {
        height: 40px;
        width: 325px;
        position: relative;
        bottom: 25px;
    }
    header h1 figure img {
        width: 100%;
    }
    header nav {
        display: inline-block;
        vertical-align: middle;
        width: 62%;
        position: relative;
        /*background: red;*/
    }
    header nav #showMenu,
    header nav #hideMenu {
        display: none;
    }
    header nav #card_menu {
        display: inline-block;
        border: none;
        background: none;
        position: relative;
        top: 0px;
        width: 100%;
        /* Este elemento se ajusta al padre, es decir, el "header nav"  */
        text-align: right;
        padding: 0px;
    }
    header nav #card_menu figure {
        display: none;
    }
    header nav #card_menu ul {
        padding: 0;
        margin: 0;
        margin-bottom: 15px;
        position: relative;
        bottom: 20px;
    }
    header nav #card_menu ul li {
        display: inline-block;
        width: 120px;
        background: purpl;
        margin: 0px -2px;
        text-align: center;
    }
    p.eslogan {
        display: inline-block;
        margin: 0;
        position: relative;
        bottom: 45px;
        left: 65px;
    }
    div iframe {
        position: relative;
        top: 35px;
        width: 100%;
        height: 900px;
    }
    div#video_box p {
        display: inline-block;
        float: right;
 
    }
    div#video_box iframe {
        width: 500px;
        height: 515px;
        display: block;
        position: relative;
        float: right;
        margin-right: 29px !important;
 
 
    }
    div#video_box {
        position: relative;
        top: 50px;
        margin: 0px 10% 0px 10%;
    }
 
}

El resultado, que no me gusta para nada es:
http://prntscr.com/jgdjd0

Agradeceria que me arreglaran un poco el código porque he estado buscando y probando, y no lo consigo.
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 santi
Val: 71
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como puedo ordenar estos videos con los párrafos

Publicado por santi (27 intervenciones) el 14/05/2018 19:21:25
Hola,

*Mejor crear una lista y envuelve cada sección con un <li>:

1
2
3
4
5
6
7
8
9
10
11
<div id="video_box">
	<ul>
		<li>
			<iframe width="664" height="359" src="https://www.youtube.com/embed/YaPV_j8SKso" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            <p>Ferrari</p>
		</li>
		<li>
			<iframe width="657" height="359" src="https://www.youtube.com/embed/-RGWtHqdcyo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
           <p>Ford Kuga</p>
		</li>
...

Css:

1
2
3
4
5
6
7
8
9
10
11
#video_box ul {
	overflow: auto;
}
#video_box ul li {
	float: left;
	width: 50%;/* o las medidas necesarias */
	list-style-type: none;
}
#video_box ul li p {
	text-align: center;
}

Prueba a ver ;)
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