Div con CSS

Inicio Foros WordPress Themes y Diseño Div con CSS

Etiquetado: ,

Este debate contiene 13 respuestas, tiene 2 mensajes y lo actualizó  almendron hace 7 años, 1 mes.

  • Autor
    Publicaciones
  • #22784

    almendron
    Participante

    <p>Objetivo: crear una "div" para incluirla dentro de un post o una página. La voy a utilizar para insertar una imagen (miniatura) con texto.<br />
    Podéis ver un ejemplo aquí:<br />
    http://www.almendron.com/artehistoria/historia-de-espana/edad-moderna/la-flota-de-indias/la-creacion-del-sistema/<br />
    (La imagen del final de la página)</p>
    <p>Problema: quiero que la anchura de la "div" sea del 80%, y que quede colocada de igual forma que cuando insertas una imagen y le indicas "centro" en la alineación.</p>
    <p>Con la anchura no hay pegas. El escollo es que tengo que poner la propiedad "float" para que la miniatura quede dentro del marco con independencia de la longitud del texto. Como es obvio, no es posible centrarla incluyendo dicha propiedad.</p>
    <p>Dicho de otro modo: ¿cómo creo una "div" sin usar la propiedad "float" de forma que se ajuste a la altura de una miniatura y no solo al texto que se incluya?</p>
    <p>Nota: las miniaturas tienes 150 x 150 pero no puedo indicar una altura determinada porque ésta podría ser superior a 150 en algunos casos debido a la longitud del texto.
    </p>

  • #56155

    LGrusin
    Miembro

    Oh, almendron tanto tiempo…

    A ver, cualquier div con aligncenter queda centrado. No lleva float.

    Ejemplo:
    <div class=”aligncenter” style=”width:80%;”>
    ….lo que sea …..
    </div>

    Crea una caja div con los mismos estilos que fpt pero con aligncenter.

    Dependerá de los estilos del theme o de la nueva caja que podrás retocar después según tus gustos.

    Por cierto, muy interesante tu blog.

    Un saludo

  • #56157

    almendron
    Participante

    Gracias por lo de interesante, LGrusin. Y gracias también por contestar.

    Esa solución ya la he probado pero presenta un problema. Si te fijas, la imagen aparece por completo dentro de la división.

    1.- Si pongo lo que me indicas pero no quito lo de float en el estilo “ftp”, el resultado es que no se centra ya que predomina la instrucción “float”

    2.- Si pongo lo que me indicas y quito lo de “float” en el estilo “ftp”, entonces queda centrada pero la imagen ya no aparece por completo dentro de la “div”. Es decir, la altura del “div” no se ajusta a la altura de la miniatura.

    No se si me he explicado bien.

    Un saludo.

  • #56165

    LGrusin
    Miembro

    Pues no te he entendido bien.

    …la altura del “div” no se ajusta a la altura de la miniatura…

    La imagen queda alineada a la izquierda y la altura del div se ajusta al texto. Es decir, si las líneas de texto superan la altura de la imagen el div se ajusta para que quepa el texto. Ese es el problema de reducir el ancho del espacio disponible. No sé si es eso a lo que te refieres.

    Un saludo

  • #56168

    almendron
    Participante

    Ya probé con ese código y nada.

    El div se ajusta al texto y eso hace que parte de la imagen quede fuera. Lo más curioso del caso es que eso no sucede cuando empleas la propiedad float.

    Solo he encontrado una solución:

    1) Utilizar la propiedad float

    2) Indicar margen derecho al 10% y margen izquierdo al 10 %

    De esa forma, la imagen queda siempre dentro del div con independencia del número de líneas de texto y ocupa el 80%.

    Después pondré el código.

  • #56172

    almendron
    Participante

    Para todos aquellos que quieran incluir en sus entradas o páginas un cuadro con las siguientes características:

    1) Admite tanto imágenes como texto.

    2) La altura del cuadro se adapta a la altura del texto o a la de la imagen.

    3) Centrado

    Editar la hoja de estilos y añadir la siguiente class

    .cuadrocentrado {
    float:left;
    margin: 10px 10% 10px 10%;
    color: #8d8b8b;
    padding:10px;
    }

    Donde “cuadrocentrado” se puede cambiar por el nombre que queráis.

    Donde 10% es el margen tanto derecho como izquierdo. En esta caso, el cuadro ocupa el 80%.

    Podéis añadir más características como borde, alineación de texto, etc.

    En la entrada o página donde queráis que aparezca, poner en el editor HTML

    <div class="cuadrocentrado">Contenido</div>

    Un ejemplo aquí

    [url=http://www.almendron.com/artehistoria/historia-de-espana/edad-moderna/la-flota-de-indias/la-creacion-del-sistema/]http://www.almendron.com/artehistoria/historia-de-espana/edad-moderna/la-flota-de-indias/la-creacion-del-sistema/[/url]

  • #56188

    LGrusin
    Miembro

    ¿Probaste el código tal como lo puse?

    Esos estilos que has puesto son efectivos en tu theme, puede que en otros no. Si el código que he puesto no funciona es porque pueden existir declarados otros estilos antes que afectan o interfieren con la imagen y los posicionamientos.

    Si no te afecta en un futuro puedes escapar con eso. Pero ya verás que necesitarás centrar con otras medidas y no te servirá.

    Debes reconocer que no es normal centrar una caja div con float:left y rellenar con márgenes. Hay que hacer las cosas bien… 😉

    Un saludo

  • #56192

    almendron
    Participante

    Sí, lo probé. El resultado fue que el cuadro quedaba centrado pero NO AJUSTABA a la altura de la imagen; solo a la altura de las líneas de texto.

    Si la altura de las líneas de texto es inferior a la de la imagen, entonces la parte inferior de ésta queda fuera del cuadro.

    De ahí que no me haya quedado más remedio que utilizar la propiedad float y poner iguales el margen derecho e izquierdo.

    Y el estilo que he puesto es válido para cualquier tema si lo que quieres es disponer de una cuadro centrado y que ajuste a su contenido con independencia de que éste sea una imagen, texto o ambos. Recuerda que se incluye en un post o página cuando estás editandolo. Vamos, que no hay que tocar ningún archivo php.

  • #56204

    LGrusin
    Miembro

    La verdad es que me dejas intrigado. Intento provocar el fallo pero no lo consigo, cosas raras que ocurren de vez en cuando.

    Un saludo

  • #56209

    LGrusin
    Miembro

    Perdona mi torpeza pero me costó ver el efecto.

    Puedes usar los estilos que te he dicho, van bien. Pero lo que tienes que hacer para deshacer el float:left de la imagen es poner al final del texto <div class=”clear”></div> dentro del div cuadrocentrado

    Siendo los estilos de clear

    .clear { clear:both; }

    Posiblemente ya lo tengas en los estilos de tu theme.

    Esto es importante porque después de esa caja, si escribes texto o cualquier otro elemento que pongas es posible que no salga en su sitio.

    Saludos

  • #56216

    almendron
    Participante

    Muchas gracias por preocuparte y por tu respuesta. Si te he entendido bien, sería

    <div class="cuadrocentrado">Imagen + Texto <div class="clear"></div> </div>

    Lo del estilo lo tengo claro en cuanto a quitar lo de float y añadir display y margin auto.

    Un saludo.

  • #56218

    almendron
    Participante

    Pues lo he probado y no funciona. Resulta que añado lo de <div class=”clear”></div> y el propio WordPress lo elimina automáticamente (tengo activado lo de “WordPress corregirá de forma automática el XHTML incorrectamente anidado”).

    De todas formas, creo que estamos hablando de cosas distintas. La propiedad float a la que refiero no es la de la imagen sino la del cuadro. En cualquier caso, prueba con el Firebug (o el que uses) a quitar del estilo “cuadrocentrado” los márgenes y la propiedad float, y a añadir lo de display: block; margin-left: auto; margin-right: auto;

    Podrás comprobar que la parte inferior de la imagen queda fuera del cuadro.

    Nota: hablamos del cuadro en el que hay una imagen y el texto comienza por “Plano de Cartagena…”.

    Lo he vuelto a dejar como estaba. Puedes comprobar que el texto que va a continuación y fuera del cuadro queda bien.

  • #56242

    LGrusin
    Miembro

    Exacto, sería:

    La verdad es que no sé por qué no te funciona, yo también tengo activado el “WordPress corregirá de forma automática el XHTML incorrectamente anidado”

    La explicación del float:left es un misterio, supongo que trata a la caja como un conjunto y eso hace que se muestre correctamente.

    Un saludo

  • #56268

    almendron
    Participante

    Dejalo. No te preocupes. Lo cierto es que ultimamente el wordpress me está desilusionando bastante, especialmente en lo que se refiere a usarlo como CMS.

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest

Ir al contenido