2

estoy intentando poner como un pie de foto, para poner el nombre del producto, he intentado div , p y demás pero nada. He buscado por internet si a alguien mas le pasaba, pero su código difiere con el mio y las soluciones no se ajustaban a mi código. Si sabeis ayudarme a partir de lo que tengo hecho, gracias. No he puesto todo el código porque no me deja pero lo importante esta ahí.

<style>
    h1 {
        color: green;
        font-size: 55px;
        font-style: italic;
        font-weight: bold;  
    }

    p {
        color: green;
        font-family: fantasy;
        font-style: italic;
        font-size: 40px;
        font-weight: bold;
    }

    p1 {
        color: white;
        font-family: fantasy;
        font-size: 20px;
        font-weight: bold;
    }

    </style>

    <body onload="cargar()">

        <h1>LegaGrow Shop</h1>
        <p>Las mejores Cachimbas de Leganés</p>

    <!--    Listas para agrupar las fotso que actuaran de botones para acceder a ese producto con sus correspodientes caracteristicas  -->

        <ol>
        <li>

        <div>
        <img style="margin: 20px;" align="left" alt="Cachimba Pequeña Azul" src="https://images-eu.ssl-images-amazon.com/images/I/41E9y4HekJL._AC_US218_.jpg" height="310" width="300">
        <p1 align="bottom">Cachimba Pequeña Azul</p1>

        <img style="margin: 20px;" align="middle" alt="Camchimba Pequeña Morada" src="http://www.cachimberos.site/wp-content/uploads/2018/09/6192yZieRkL._SL1500_-min.jpg" height="310" width="300"> 

        <img style="margin: 20px;" align="right" alt="Cachimba Pequeña Negra" src="https://images-na.ssl-images-amazon.com/images/I/61pdaourRmL._SY355_.jpg" height="310" width="300"> 
        </div>

        </li>
8
  • Las imágenes son elementos inline, lo que quiere decir que no ocupan el ancho completo del contenedor, por eso se te coloca el elemento p a su derecha. Si metes la imagen en un div automáticamente el elemento aparece p aparecerá bajo la imagen. Teniendo en cuenta que tienes tres imagenes, puede ser complicado que los elementos se pongan como quieres. Puedes usar bootstrap o montar una rejilla con divs. 9 divs, uno por cada elemento, 3 img y 3 p, poniendo los 3 divs con imagenes uno detras de otro y después los de los p. Ya me dirás donde está la tienda, que soy de Lega. :D el 10 abr. 2019 a las 14:00
  • Gracias por la ayuda, en el ejemplo solo he puesto tres imágenes para simplificar, pero en realidad son tres imágenes, debajo de cada una el texto (nombre del producto con su precio), y debajo otras tres imágenes con sus textos correspondientes, y así en bucle. Ya habia intentado lo de los div y p pero no se como ponerlos exactamente, porque cuando los introduje no se me soluciono nada(evidentemente porque los puse mal). Si pudieras darme alguna orientación te lo agradeceria mucho.
    – Alex
    el 11 abr. 2019 a las 6:44
  • Buenos días. Si, ya te puse una respuesta usando float. Te servirá la estructura para todas las imágenes y textos que quieras poner bajo la primera fila. Solo copia la estructura y cambia las imágenes y textos por los que quieras. Juega con los márgenes y cabrá lo que quieras. el 11 abr. 2019 a las 6:46
  • Justo lo vi tras terminar el comentario, mil gracias, me ha ayudado a comprender la estructura que debe de tener el código. Mil gracias.
    – Alex
    el 11 abr. 2019 a las 7:25
  • De nada :D Usar floats es complicado, pero da mucho juego. Flex también es bueno, pero algunos navegadores no lo terminan de entender bien. Si te ha servido la respuesta, agradecería que la marcases como respuesta aceptada, dando en el v bajo las flechas de puntuación. Si no te ha servido, o has usado otro método, no la des por válida jejejejej. Un saludo! el 11 abr. 2019 a las 7:27

2 respuestas 2

3

Puedes lograrlo jugando con las filas, me he tomado la libertad de importar bootstrap una libreria perfecta para lo que buscas lograr de una manera bastante mas sencilla que con solo css, puedes tener varios divs dentro de uno, no es necesario tener solo uno, HTML es un lenguaje de etiquetas, cuantas mas tengas mayor será el formato.

Espero que este código te sirva de ayuda y de aprendizaje

h1 {
    color: green;
    font-size: 55px;
    font-style: italic;
    font-weight: bold;	
  }

  p {
    color: green;
    font-family: fantasy;
    font-style: italic;
    font-size: 40px;
    font-weight: bold;
  }

  p1 {
      color: white;
    font-family: fantasy;
    font-size: 20px;
    font-weight: bold;
  }
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>

    <h1>LegaGrow Shop</h1>
    <p>Las mejores Cachimbas de Leganés</p>

    <!-- 	Listas para agrupar las fotso que actuaran de botones para acceder a ese producto con sus correspodientes caracteristicas  -->

    
        <div class="container">
          <div class="row">
            <div class="col-4">
              <img style="margin: 20px;" align="left" alt="Cachimba Pequeña Azul" src="https://images-eu.ssl-images-amazon.com/images/I/41E9y4HekJL._AC_US218_.jpg" height="310" width="300">         
            </div>
            <div class="col-4">
              <img style="margin: 20px;" align="middle" alt="Camchimba Pequeña Morada" src="http://www.cachimberos.site/wp-content/uploads/2018/09/6192yZieRkL._SL1500_-min.jpg" height="310" width="300"> 
            </div>
            <div class="col-4">
              <img style="margin: 20px;" align="right" alt="Cachimba Pequeña Negra" src="https://images-na.ssl-images-amazon.com/images/I/61pdaourRmL._SY355_.jpg" height="310" width="300"> 
            </div>
          </div>
          <div class="row">
            <div class="col-4">
              <p>Cachimba Pequeña Azul</p>
            </div>
            <div class="col-4">
              <p>Cachimba Pequeña Rosa</p>
            </div>
            <div class="col-4">
              <p>Cachimba Pequeña Negra</p>
            </div>
          </div>
       </div>
  </body>
</html>

1
  • Efectivamente me ha ayudado mucho, se me había olvidado completamente hacer uso de bootstrap. Ya lo había usado antes pero se me olvido implementarlo en este código. Muchas gracias.
    – Alex
    el 11 abr. 2019 a las 7:27
2

Yo te lo pongo sin librerias externas.

 <html>
    <head>
      <style type="text/css">
        .imagen{
          float: left;
          width: 25%;
          margin: 2%; 
        }
        .texto{
          float: left;
          width: 25%;
          margin: 2%;
        }
    .clear{clear:both;}
      </style>
    </head>
      <body>
    
        <h1>LegaGrow Shop</h1>
        <p>Las mejores Cachimbas de Leganés</p>
    
        <!-- 	Listas para agrupar las fotso que actuaran de botones para acceder a ese producto con sus correspodientes caracteristicas  -->
    
            <div class="midiv">
              <div class="imagen">
                <img alt="Cachimba Pequeña Azul" src="https://images-eu.ssl-images-amazon.com/images/I/41E9y4HekJL._AC_US218_.jpg" height="310" width="300" >
              </div>
              <div class="imagen">
                <img alt="Camchimba Pequeña Morada" src="http://www.cachimberos.site/wp-content/uploads/2018/09/6192yZieRkL._SL1500_-min.jpg" height="310" width="300">
              </div>
              <div class="imagen">
                <img alt="Cachimba Pequeña Negra" src="https://images-na.ssl-images-amazon.com/images/I/61pdaourRmL._SY355_.jpg" height="310" width="300">
              </div>
              <div class="texto">
                <p1 align="bottom">Cachimba Pequeña Azul</p1>
              </div>        
              <div class="texto">
                <p1 align="bottom">Cachimba Pequeña Morada</p1>
              </div>
              <div class="texto">
                <p1 align="bottom">Cachimba Pequeña Negra</p1>
              </div>
            </div>
         <div class="clear"></div>
      </body>
    </html>

Con la propiedad float hago que todos se muevan a la izquierda. Si te fijas, he cambiado la estructura del DOM para que se adapten. También he quitado la lista, pues ya no la necesitas para colocar esto así, solo mete las siguientes 3 fotos y sus textos en un div como el que puse de clase midiv. No aplica estilos, solo es para que lo identifiques. Si no te quedan bien juega con los margenes. La pantalla mide el 100%, si le pones 100% a todo la última imagen tiende a irse hacia abajo. Por lo tanto a los div de clase imagen y texto le puedes añadir un box-sizing:border-box pero no es imprescindible. Prueba y me dices que tal :D

EDITO

Agrego el div con clase clear. Este lo único que hace es limpiar el float, de tal forma que los elementos que vengan debajo no heredan el estilo float, así no te descuadra el diseño ni te vuelves loco pensando porque hacen cosas raras.

También dejo enlace de un generador de flexbox, que es como float, pero con cajas, un diseño muy chulo te puede quedar, pero algunos navegadores antiguos pueden darte problemas.

Flexbox Generator

4
  • Muchisimas gracias Emérita por la orientación, ya me he hecho una idea de cómo orientar el código, me has abierto las puertas. De nuevo gracias.
    – Alex
    el 11 abr. 2019 a las 7:28
  • 1
    De nada @Alex Te dejo aquí el enlace a un generador de cajas por flexbox. No lo suelo usar porque flex lo veo mas complicado que float, pero hay personas que ven mas complicado float que flex jejejeje. Igualmente, voy a actualizar la pregunta con un div que me falta. Ahora lo verás en la pregunta cuando edite, lo que puse, porqué y el enlace a flexbox. el 11 abr. 2019 a las 7:31
  • Hola @Emerita he editado tu código para que pueda ser visible desde el sitio el 11 abr. 2019 a las 7:48
  • 1
    @NicolasOñate lo acabo de ver. Gracias. Con el copia pega se jorobó la estructura y las tabulaciones no se veían bien. Gracias :D el 11 abr. 2019 a las 7:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.