Entrar Regístrate
 
Problema sencillo
#1 ·

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.


JuanBalbuena
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 14
Desde: 03/Ago/2013
·
#2 ·

@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:

Código:
<!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.



Josepepe033
Moderador del foro
Moderador del foro
Haz clic para ver el perfil del usuario
Mensajes: 2.734
Desde: 10/Ene/2009
· ·
#3 ·

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.


JuanBalbuena
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 14
Desde: 03/Ago/2013
·
#4 ·

@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.



Josepepe033
Moderador del foro
Moderador del foro
Haz clic para ver el perfil del usuario
Mensajes: 2.734
Desde: 10/Ene/2009
· ·
#5 ·

Ya está no le había aplicado el estilo float.

Gracias por tu ayuda.


JuanBalbuena
Usuario habitual
Usuario habitual
Haz clic para ver el perfil del usuario
Mensajes: 14
Desde: 03/Ago/2013
·
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
Foro de soporte · Ayuda para webmasters · HTML básico
Opciones:
Versión imprimible del tema
Subscríbete a este tema
Date de baja de este tema
Ir al subforo:  
TU NO PUEDES Escribir nuevos temas en este foro
TU NO PUEDES Responder a los temas en este foro
TU NO PUEDES Editar tus propios mensajes en este foro
TU NO PUEDES Borrar tus propios mensajes en este foro
Ahora son las 11:49 UTC+02:00 DST
Temas similares
No se han encontrado temas similares