Problema sencillo - HTML básico

Usuario habitual

#1•03/Ago/2013, 15:57

Hola:

Soy nuevo en el foro, me presento a todos. Tengo un problema estoy con un proyecto y tengo una duda. Es la siguiente:

En una parte de mi web tengo una fotografía a la izquierda y otra a la derecha. En una he conseguido poner texto y maquetarlo mas o menos bien con css debajo de la fotografía, pero en la fotografía de la derecha no consigo colocar el texto debajo de la imagen, he probado con un div pa pero tampoco me sale en lugar que yo quiero el texto siempre se me coloca justo debajo de la fotografía de la izquierda (con css o con div pa)

Espero que alguien pueda ayudarme. La página la tengo subida a un servidor gratuito y a veces no funciona, pero dejo la dirección por si acaso. visitaweb.hol.es

De antemano gracias.
Un saludo.

Josepepe033

Moderador del foro

#2•03/Ago/2013, 17:30

@JuanBalbuena,

Sólo tienes que crear dos capas (<div>) flotantes, una a la izquierda y otra a la derecha, y dentro poner la imagen con el texto. Por ejemplo:

<!DOCTYPE html>
<html>
    <head>
        <title>Capas flotantes</title>
        <style type="text/css">
            #izquierda {
                float: left;
                width: 200px;
            }
            #derecha {
                float: right;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <div id="izquierda"><img src="/ruta_img_izquierda.png" alt="Imagen Izquierda"><br />Texto Izquierda</div>
        <div id="derecha"><img src="/ruta_img_derecha.png" alt="Imagen Derecha"><br />Texto Derecha</div>
    </body>
</html>

Si quieres que el texto quede centrado respecto a las imágenes, lo envuelves en otra capa y alineas su contenido.

JuanBalbuena Usuario habitual
#3•03/Ago/2013, 19:47 Muchisimas gracias. He colocado dos div como pusiste pero me aparece uno uno en un nivel inferior al otro. Como inserto un div flotante? Uso dreamweaver. Gracias. Perdona mi ignorancia.

Josepepe033

Moderador del foro

#4•03/Ago/2013, 19:57

@JuanBalbuena,

Con la propiedad de CSS float.

Si no te aclaras, busca artículos sobre maquetación web mediante capas (tableless). Básicamente consiste en crear la estructura de la página mediante elementos de bloque (div, header, footer, nav, etcétera) y las propidades de CSS float y clear.

Por otra parte tienes la opción totalmente contraria, maquetarla utilizando tablas, lo cual es más engorroso. En cualquier caso, en google encontrarás cientos de artículos sobre maquetación con capas y con tablas.

JuanBalbuena Usuario habitual
#5•03/Ago/2013, 21:16 Ya está no le había aplicado el estilo float. Gracias por tu ayuda.

Anterior Siguiente Arriba

Responder

ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES,
te recomendamos abrir un nuevo tema en lugar de responder al actual

Inicio

Ayuda para webmasters

HTML básico

Opciones:

Ir al subforo:

Permisos:

TU NO PUEDES Escribir nuevos temas
TU NO PUEDES Responder a los temas
TU NO PUEDES Editar tus propios mensajes
TU NO PUEDES Borrar tus propios mensajes

Temas similares

No se han encontrado temas similares