Imagen y texto

tomasescribano69 · #1 (**permalink**) 13/12/2015, 15:40

Hola chicos, como vereis poco a poco, soy nuevo en la programacion en html, y como no, en este foro. mi pregunta es sencilla: ¿¿Puedo insetar en una tabla, una img y un texto encima de la img

??,Y si se puede, ¿Como se hace?

luisdevelop · #2 (**permalink**) 13/12/2015, 22:18

seguro se ha de poder pero... cual es tu intencion con eso? o.o

CircuitoX · #3 (**permalink**) 15/12/2015, 17:20

Es posible de varias formas, con css.
Trata de usar div y mira el tema de z-index y position en css

tomasescribano69 · #4 (**permalink**) 19/12/2015, 05:10

Gracias chicos/as, creo que lo que voy a hacer es colocar un texto en una foto con psd, y colocarla en una tabla.
Estoy intentando hacer una web, de submarinismo en España,(otra de mis aficiones).

alantoledo007 · #5 (**permalink**) 19/12/2015, 07:34

no te recomiendo que hagas una web con tablas. te comviene HTML5.
algo asi:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
    <title>mi pagina web</title>
</head>
<body>
<style type="text/css">
*{
    padding: 0;
    margin: 0;
}
header{
    background-image: url('imagenes/portada.pnj');
    background-size: 100%;/* aca estoy diciendo que el fondo ocupe todo el tamaño del div*/ 
    height: 150px;
}
ul{
    overflow: hidden;
}
ul li{
    float: left;/*las listas flotan a la izquierda*/
    list-style: none;/*las listas se imprimen sin ningun items*/
    box-sizing:border-box;
    background-color: rgba(0,0,0, .5);
    transition: all .4s;
}
ul li:hover {
    background-color: rgba(0,0,0, 1)
}
ul li a{
    display: block;/*le digo a la etiqueta "a" que se comporte como un div o h */
    padding: 10px;
    color: #fff;
    text-decoration: none;
}   
</style>
<header>
    <nav>
        <ul>
            <li><a href="#">Menu</a></li>
            <li><a href="#">Nosotros</a></li>
        </ul>
    </nav>
</header>
<section>
    <h1>Bienvenido a mi pagina web</h1>
</section>
</body>
</html>

Rafael · #6 (**permalink**) 19/12/2015, 12:30

Creo que la mejor opción es un div (o párrafo, o heading, lo que sea) con fondo CSS.

Código HTML:

Ver original<div class="ConFondo">Mi texto</div>

Código CSS:

Ver originaldiv.ConFondo {
 background-image: url(MiFoto.jpg);
 width: 300px;
 height: 200px;}

Y ya jugarás con display: inline-block, margins y eso. Pero lo básico es lo de arriba.