Foros del Web » Creando para Internet » CSS »

Poner texto debajo de una imagen , responsive

Estas en el tema de Poner texto debajo de una imagen , responsive en el foro de CSS en Foros del Web. Hola a todos, he copiado de un vídeo de youtube una web que se adapta a los teléfonos y pantallas de las compu, mi idea ...
  #1 (permalink)  
Antiguo 18/05/2018, 14:24
Avatar de fedefrankk  
Fecha de Ingreso: agosto-2007
Mensajes: 871
Antigüedad: 16 años, 7 meses
Puntos: 7
Pregunta Poner texto debajo de una imagen , responsive

Hola a todos, he copiado de un vídeo de youtube una web que se adapta a los teléfonos y pantallas de las compu, mi idea es hacer una galería de imágenes con una descripción de cada imagen, pero cuando pongo un texto me sale del lado derecho de la imagen y no se como arreglarlo...

Espero que me den una mano ya que estoy atorado en ese punto....

para ver el ejemplo de como sale es aqui:

http://www.atk20.com/2/


codigo HTML


Código HTML:
Ver original
  1. <!doctype html>
  2. <meta charset="utf-8">
  3. <title>Documento sin título</title>
  4. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  5. <link type="text/css" href="estilos/adaptativeflex.css" rel="stylesheet" />
  6. <script src="prefix.js" ></script>
  7. </head>
  8.  
  9.  
  10.  
  11. <div class="contenedor">
  12.         <header>
  13.             <div class="logo">
  14.                 <img src="images/logo.jpg" width="150" alt="">
  15.                 <a href="#">FEDE</a>
  16.             </div>
  17.  
  18.             <nav>
  19.                 <a href="#">Inicio</a>
  20.                 <a href="#">Blog</a>
  21.                 <a href="#">Proyectos</a>
  22.                 <a href="#">Contacto</a>
  23.             </nav>
  24.         </header>
  25.  
  26.         <section class="main">
  27.             <article>
  28.                
  29. <img src="imgpublicidad/6767.jpeg" width="300" height="255">  
  30. ESTE TEXTO QUIERO QUE SALGA ABAJO DE LA FOTO. COMO DESCRIPCION Y NO ALADO...
  31. <img src="imgpublicidad/6767.jpeg" width="300" height="255">
  32. <img src="imgpublicidad/6767.jpeg" width="300" height="255">  
  33. <img src="imgpublicidad/6767.jpeg" width="300" height="255">  
  34. <img src="imgpublicidad/6767.jpeg" width="300" height="255">
  35. <img src="imgpublicidad/321.jpeg" width="300" height="255">  
  36.  
  37.             </article>
  38.         </section>
  39. <!-- <aside>
  40.             <div class="widget">
  41.                 <div class="imagen"></div>
  42.             </div>
  43.  
  44.             <div class="widget">
  45.                 <div class="imagen"></div>
  46.             </div>
  47.         </aside>-->
  48.        
  49.  
  50.         <footer>
  51.             <section class="links">
  52.                 <a href="#">Inicio</a>
  53.                 <a href="#">Blog</a>
  54.                 <a href="#">Proyectos</a>
  55.                 <a href="#">Contacto</a>
  56.             </section>
  57.  
  58.             <div class="social">
  59.                 <a href="#">FB</a>
  60.                 <a href="#">TW</a>
  61.             </div>
  62.         </footer>
  63.     </div>
  64. </body>
  65. </html>

y el codigo CSS

Código CSS:
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. * {
  5.     margin: 0;
  6.     padding: 0;
  7.     box-sizing: border-box;
  8. }
  9.  
  10. .contenedor {
  11.     background:#ccc;
  12.     width:90%;
  13.     max-width:1024px;
  14.     margin:auto;
  15.  
  16.     /* Flexbox */
  17.     display:flex;
  18.     flex-flow:row wrap;
  19. }
  20.  
  21. body {
  22.     background:#e9e9e9;
  23. }
  24.  
  25. header {
  26.     background:#2c3e50;
  27.     width:100%;
  28.     padding:20px;
  29.  
  30.     /* Flexbox */
  31.     display: flex;
  32.     justify-content:space-between;
  33.     align-items:center;
  34.  
  35.     flex-direction:row;
  36.     flex-wrap:wrap;
  37. }
  38.  
  39. header .logo {
  40.     color:#fff;
  41.     font-size:30px;
  42. }
  43.  
  44. header .logo img {
  45.     width:50px;
  46.     vertical-align: top;
  47. }
  48.  
  49. header .logo a {
  50.     color:#fff;
  51.     text-decoration: none;
  52.     line-height:50px;
  53. }
  54.  
  55. header nav {
  56.     width:50%;
  57.     /* Flexbox */
  58.  
  59.     display:flex;
  60.     flex-wrap:wrap;
  61.     align-items:center;
  62. }
  63.  
  64. header nav a {
  65.     background:#c0392b;
  66.     color:#fff;
  67.     text-align: center;
  68.     text-decoration: none;
  69.     padding:10px;
  70.  
  71.     /* Flexbox */
  72.     flex-grow:1;
  73. }
  74.  
  75. header nav a:hover {
  76.     background:#e74c3c;
  77. }
  78.  
  79. .main {
  80.     background:#fff;
  81.     padding:20px;
  82.  
  83.     flex:1 1 70%;
  84.     /*flex:1;*/
  85. }
  86.  
  87. .main article {
  88.     margin-bottom: 20px;
  89.     padding-bottom:20px;
  90.     border-bottom:1px solid #000;
  91. }
  92.  
  93. .main article:nth-last-child(1){
  94.     margin-bottom: 0;
  95.     padding-bottom: 0;
  96.     border-bottom:none;
  97. }
  98.  
  99. aside {
  100.     background:#e67e22;
  101.     padding:20px;
  102.     /*FLEX*/
  103.     flex:1 1 30%;
  104.     /*flex:0 0 300px;*/
  105.  
  106.     display: flex;
  107.     flex-wrap:wrap;
  108.     flex-direction:column;
  109.     justify-content:flex-start;
  110. }
  111.  
  112. aside .widget {
  113.     background: #d35400;
  114.     height:150px;
  115.     margin:10px;
  116. }
  117.  
  118. footer {
  119.     background:#2c3e50;
  120.     width: 100%;
  121.     padding:20px;
  122.  
  123.     /* Flexbox */
  124.     display: flex;
  125.     flex-wrap:wrap;
  126.     justify-content:space-between;
  127. }
  128.  
  129. footer .links {
  130.     background:#c0392b;
  131.     display:flex;
  132.     flex-wrap:wrap;
  133. }
  134.  
  135. footer .links a {
  136.     flex-grow:1;
  137.  
  138.     color:#fff;
  139.     padding:10px;
  140.     text-align: center;
  141.     text-decoration:none;
  142. }
  143.  
  144. footer .links a:hover {
  145.     background:#E74C3C;
  146. }
  147.  
  148. footer .social {
  149.     background:#e67e22;
  150. }
  151.  
  152. footer .social a {
  153.     color:#fff;
  154.     text-decoration: none;
  155.     padding:10px;
  156.     display: inline-block;
  157. }
  158.  
  159. @media screen and (max-width: 800px) {
  160.     .contenedor {
  161.         flex-direction:column;
  162.     }
  163.  
  164.     header {
  165.         flex-direction:column;
  166.         padding:0;
  167.     }
  168.  
  169.     header .logo {
  170.         margin:20px 0;
  171.     }
  172.  
  173.     header nav {
  174.         width: 100%;
  175.     }
  176.  
  177.     aside {
  178.         flex-direction:row;
  179.         flex:0;
  180.     }
  181.  
  182.     aside .widget {
  183.         flex-grow:1;
  184.     }
  185. }
  186.  
  187. @media screen and (max-width: 600px) {
  188.     aside {
  189.         flex-direction:column;
  190.     }
  191.  
  192.     footer {
  193.         justify-content:space-around;
  194.     }
  195. }

Le agradezco de antemano su tiempo.!!
saludos a todos
fede
  #2 (permalink)  
Antiguo 20/05/2018, 23:38
Avatar de anfergon  
Fecha de Ingreso: junio-2009
Mensajes: 44
Antigüedad: 14 años, 9 meses
Puntos: 0
Respuesta: Poner texto debajo de una imagen , responsive

Cada imagen y cada párrafo los tienes que poner dentro de un div con ancho igual al de la imagen. El div tiene que tener la propiedad float en left o right para que queden una junto a la otra.
  #3 (permalink)  
Antiguo 23/05/2018, 09:29
 
Fecha de Ingreso: noviembre-2015
Mensajes: 231
Antigüedad: 8 años, 4 meses
Puntos: 86
Respuesta: Poner texto debajo de una imagen , responsive

Usa el tag figure de html5 https://developer.mozilla.org/en-US/...Element/figure

Etiquetas: debajo, estilo, html, responsive, tiempo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:47.