Comunidad de diseño web y desarrollo en internet online

Poner texto debajo de una imagen

Citar            
MensajeEscrito el 19 May 2018 04:20 am
Hola a todos, he copiado de google 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...


Gracias por la ayuda .



para ver el ejemplo de como sale es aqui:

[url=http://www.atk20.com/2/][/url]

Código HTML :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link type="text/css" href="estilos/adaptativeflex.css" rel="stylesheet" />
<script src="prefix.js" ></script>
</head>
 
 
<body>
 
<div class="contenedor">
        <header>
            <div class="logo">
                <img src="images/logo.jpg" width="150" alt="">
                <a href="#">FEDE</a>
            </div>
 
            <nav>
                <a href="#">Inicio</a>
                <a href="#">Blog</a>
                <a href="#">Proyectos</a>
                <a href="#">Contacto</a>
            </nav>
        </header>
 
        <section class="main">
            <article>
                
<img src="imgpublicidad/6767.jpeg" width="300" height="255">  
ESTE TEXTO QUIERO QUE SALGA ABAJO DE LA FOTO. COMO DESCRIPCION Y NO ALADO...
<img src="imgpublicidad/6767.jpeg" width="300" height="255"> 
<img src="imgpublicidad/6767.jpeg" width="300" height="255">  
<img src="imgpublicidad/6767.jpeg" width="300" height="255">   
<img src="imgpublicidad/6767.jpeg" width="300" height="255"> 
<img src="imgpublicidad/321.jpeg" width="300" height="255">  
 
            </article>
        </section>
<!-- <aside>
            <div class="widget">
                <div class="imagen"></div>
            </div>
 
            <div class="widget">
                <div class="imagen"></div>
            </div>
        </aside>-->
        
 
        <footer>
            <section class="links">
                <a href="#">Inicio</a>
                <a href="#">Blog</a>
                <a href="#">Proyectos</a>
                <a href="#">Contacto</a>
            </section>
 
            <div class="social">
                <a href="#">FB</a>
                <a href="#">TW</a>
            </div>
        </footer>
    </div>
</body>
</html>



y el codigo CSS

Código CSS :

@charset "utf-8";
/* CSS Document */
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
.contenedor {
    background:#ccc;
    width:90%;
    max-width:1024px;
    margin:auto;
 
    /* Flexbox */
    display:flex;
    flex-flow:row wrap;
}
 
body {
    background:#e9e9e9;
}
 
header {
    background:#2c3e50;
    width:100%;
    padding:20px;
 
    /* Flexbox */
    display: flex;
    justify-content:space-between;
    align-items:center;
 
    flex-direction:row;
    flex-wrap:wrap;
}
 
header .logo {
    color:#fff;
    font-size:30px;
}
 
header .logo img {
    width:50px;
    vertical-align: top;
}
 
header .logo a {
    color:#fff;
    text-decoration: none;
    line-height:50px;
}
 
header nav {
    width:50%;
    /* Flexbox */
 
    display:flex;
    flex-wrap:wrap;
    align-items:center;
}
 
header nav a {
    background:#c0392b;
    color:#fff;
    text-align: center;
    text-decoration: none;
    padding:10px;
 
    /* Flexbox */
    flex-grow:1;
}
 
header nav a:hover {
    background:#e74c3c;
}
 
.main {
    background:#fff;
    padding:20px;
 
    flex:1 1 70%;
    /*flex:1;*/
}
 
.main article {
    margin-bottom: 20px;
    padding-bottom:20px;
    border-bottom:1px solid #000;
}
 
.main article:nth-last-child(1){
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom:none;
}
 
/*aside {
    background:#e67e22;
    padding:20px;
    /*FLEX*/
    flex:1 1 30%;
    /*flex:0 0 300px;*/
 
    display: flex;
    flex-wrap:wrap;
    flex-direction:column;
    justify-content:flex-start;
}
 
aside .widget {
    background: #d35400;
    height:150px;
    margin:10px;
}
 */
footer {
    background:#2c3e50;
    width: 100%;
    padding:20px;
 
    /* Flexbox */
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
 
footer .links {
    background:#c0392b;
    display:flex;
    flex-wrap:wrap;
}
 
footer .links a {
    flex-grow:1;
 
    color:#fff;
    padding:10px;
    text-align: center;
    text-decoration:none;
}
 
footer .links a:hover {
    background:#E74C3C;
}
 
footer .social {
    background:#e67e22;
}
 
footer .social a {
    color:#fff;
    text-decoration: none;
    padding:10px;
    display: inline-block;
}
 
@media screen and (max-width: 800px) {
    .contenedor {
        flex-direction:column;
    }
 
    header {
        flex-direction:column;
        padding:0;
    }
 
    header .logo {
        margin:20px 0;
    }
 
    header nav {
        width: 100%;
    }
 
    aside {
        flex-direction:row;
        flex:0;
    }
 
    aside .widget {
        flex-grow:1;
    }
}
 
@media screen and (max-width: 600px) {
    aside {
        flex-direction:column;
    }
 
    footer {
        justify-content:space-around;
    }
}


Le agradezco de antemano su tiempo y muchas gracias.!!!
saludos a todos .!!

Por quodigital

5 de clabLevel



 

chrome
Citar            
MensajeEscrito el 24 May 2018 05:36 pm
Hola, primero que nada el link que pusiste está mal pero no importa, lo pude hacer igual. En el archivo HTML tienes que poner la imagen y el texto en un mismo DIV.

EL ARCHIVO HTML ES:

Código HTML :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link type="text/css" href="estilos/adaptativeflex.css" rel="stylesheet" />
<script src="prefix.js" ></script>
</head>
 
 
<body>
 
<div class="contenedor">
        <header>
            <div class="logo">
                <img src="images/logo.jpg" width="150" alt="">
                <a href="#">FEDE</a>
            </div>
 
            <nav>
                <a href="#">Inicio</a>
                <a href="#">Blog</a>
                <a href="#">Proyectos</a>
                <a href="#">Contacto</a>
            </nav>
        </header>
 
        <section class="main">
            <article>
                     
            <div>                
               <img src="imgpublicidad/6767.jpg">  
               <p>TEXTO O DESCRIPCION<br>KJdsfdsf</p>
            </div>
            
            <div> 
               <img src="imgpublicidad/6767.jpg">
               <p>TEXTO O DESCRIPCION</p>
            </div>
            
            <div> 
               <img src="imgpublicidad/6767.jpg">
               <p>TEXTO O DESCRIPCION</p>
            </div>
            
            <div> 
               <img src="imgpublicidad/6767.jpg">
               <p>TEXTO O DESCRIPCION</p>
            </div>
            
            <div> 
               <img src="imgpublicidad/6767.jpg">
               <p>TEXTO O DESCRIPCION</p>
            </div>
            
            <div> 
               <img src="imgpublicidad/321.jpg"> 
               <p>TEXTO O DESCRIPCION</p>
            </div>
            
            </article>
        </section>
<!-- <aside>
            <div class="widget">
                <div class="imagen"></div>
            </div>
 
            <div class="widget">
                <div class="imagen"></div>
            </div>
        </aside>-->
        
 
        <footer>
            <section class="links">
                <a href="#">Inicio</a>
                <a href="#">Blog</a>
                <a href="#">Proyectos</a>
                <a href="#">Contacto</a>
            </section>
 
            <div class="social">
                <a href="#">FB</a>
                <a href="#">TW</a>
            </div>
        </footer>
    </div>
</body>
</html>


EL ARCHIVO CSS ES:

Código CSS :

@charset "utf-8";
/* CSS Document */
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
.contenedor {
    background:#ccc;
    width:90%;
    max-width:1024px;
    margin:auto;
 
    /* Flexbox */
    display:flex;
    flex-flow:row wrap;
}
 
body {
    background:#e9e9e9;
}
 
header {
    background:#2c3e50;
    width:100%;
    padding:20px;
 
    /* Flexbox */
    display: flex;
    justify-content:space-between;
    align-items:center;
 
    flex-direction:row;
    flex-wrap:wrap;
}
 
header .logo {
    color:#fff;
    font-size:30px;
}
 
header .logo img {
    width:50px;
    vertical-align: top;
}
 
header .logo a {
    color:#fff;
    text-decoration: none;
    line-height:50px;
}
 
header nav {
    width:50%;
    /* Flexbox */
 
    display:flex;
    flex-wrap:wrap;
    align-items:center;
}
 
header nav a {
    background:#c0392b;
    color:#fff;
    text-align: center;
    text-decoration: none;
    padding:10px;
 
    /* Flexbox */
    flex-grow:1;
}
 
header nav a:hover {
    background:#e74c3c;
}
 
.main {
    background:#fff;
    padding:20px;
 
    flex:1 1 70%;
    /*flex:1;*/
}
 
.main article {
    margin-bottom: 20px;
    padding-bottom:20px;
    border-bottom:1px solid #000;
}
 
.main article:nth-last-child(1){
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom:none;
}
 
/*aside {
    background:#e67e22;
    padding:20px;
    /*FLEX
    flex:1 1 30%;
    /*flex:0 0 300px;
 
    display: flex;
    flex-wrap:wrap;
    flex-direction:column;
    justify-content:flex-start;
}
 
aside .widget {
    background: #d35400;
    height:150px;
    margin:10px;
}
 */
footer {
    background:#2c3e50;
    width: 100%;
    padding:20px;
 
    /* Flexbox */
    display: flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
 
footer .links {
    background:#c0392b;
    display:flex;
    flex-wrap:wrap;
}
 
footer .links a {
    flex-grow:1;
 
    color:#fff;
    padding:10px;
    text-align: center;
    text-decoration:none;
}
 
footer .links a:hover {
    background:#E74C3C;
}
 
footer .social {
    background:#e67e22;
}
 
footer .social a {
    color:#fff;
    text-decoration: none;
    padding:10px;
    display: inline-block;
}
 
@media screen and (max-width: 800px) {
    .contenedor {
        flex-direction:column;
    }
 
    header {
        flex-direction:column;
        padding:0;
    }
 
    header .logo {
        margin:20px 0;
    }
 
    header nav {
        width: 100%;
    }
 
    aside {
        flex-direction:row;
        flex:0;
    }
 
    aside .widget {
        flex-grow:1;
    }
}
 
@media screen and (max-width: 600px) {
    aside {
        flex-direction:column;
    }
 
    footer {
        justify-content:space-around;
    }
}


/* AJUSTE DE LAS IMAGENES Y EL TEXTO: */
article > div {
   position: relative;
   height: 20em;
   background-color: rgba(0, 0, 0, 0.12156862745098039);
   border: solid 1px;
   float: left;
   width: 33.3%;
   padding: 5px;
   
}

/* AJUSTE DE LAS IMAGENES */
article > div > img {
   position:reltive;
   display: block;
   max-width: 100%;
   height: 17em;
   
   margin: auto;
}

/* AJUSTES DE LOS TEXTOS */
article > div > p {
   display: block;
   position: absolute;
   top: 17.5em;
   width: 100%;
   text-transform: uppercase; /* PONE TODAS LAS LETRAS EN MAYUSCULA SIN IMPORTAR COMO LO ESCRIBAS, BORRA DONDE DICE "UPPERCASE" SI NO QUERES QUE ESTO SUCEDA */
   text-align: center;
}


Te explico lo que cambié.
En el archivo HTML coloque una imagen y su texto dentro de una div:

Código HTML :

<div>                
    <img src="imgpublicidad/6767.jpg">  
    <p>TEXTO O DESCRIPCION</p>
</div>


Y con CSS hice que esta div ocupe un tercio (33.3%) del articulo para que se acomoden cada 3 imagenes:

Código CSS :

/* AJUSTE DE LAS IMAGENES Y EL TEXTO: */
article > div {
   position: relative;
   height: 20em;
   background-color: rgba(0, 0, 0, 0.12156862745098039);
   border: solid 1px;
   float: left;
   width: 33.3%;
   padding: 5px;
   
}


Las imagenes se ajustan sin modificar la div:

Código CSS :

/* AJUSTE DE LAS IMAGENES */
article > div > img {
   position:reltive;
   display: block;
   max-width: 100%;
   height: 17em;
   margin: auto;
}


Los textos se centran y se ponen en MAYUSCULAS sin importar como lo escribas:

Código CSS :

/* AJUSTES DE LOS TEXTOS */
article > div > p {
   display: block;
   position: absolute;
   top: 17.5em;
   width: 100%;
   text-transform: uppercase; /* PONE TODAS LAS LETRAS EN MAYUSCULA SIN IMPORTAR COMO LO ESCRIBAS, BORRA DONDE DICE "UPPERCASE" SI NO QUERES QUE ESTO SUCEDA */
   text-align: center;
}


Espero que te sirva y avísame cualquier cosa.

Por GioSJ

1 de clabLevel



Genero:Masculino  

DiseñoWeb Ingenieria Programacion

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.