css: cómo consigo que el texto quede debajo de la imagen

Inicio Foros WordPress Themes y Diseño css: cómo consigo que el texto quede debajo de la imagen

Etiquetado: , , , ,

Este debate contiene 8 respuestas, tiene 2 mensajes y lo actualizó  losojosdemicara hace 9 años, 3 meses.

  • Autor
    Publicaciones
  • #14163

    losojosdemicara
    Participante

    <p>Hola,<br />
    Acabo de estrenar un fotolog de wordpress.<br />
    Tengo este problema: </p>
    <p>Cuando publico una entrada con imagen y añado un pequeño texto debajo, el texto se coloca a la izquierda de la imagen, no debajo como a mí me gustaría. </p>
    <p>El problema está en el html de la entrada o en el css del theme?<br />
    Álguien sabe qué puedo hacer?</p>
    <p>Aquí podéis ver el problema: http://www.pedroantonioperez.com/wordpress</p&gt;
    <p>Muchas gracias y un saludo.
    </p>

  • #31587

    daviz1982
    Participante

    Hola,

    lo más sencillo que se me ocurre es que en el style.css le digas a la etiqueta ‘img’ que se muestre como ‘block’, aunque si tienes más imágenes te puede descuadrar el Theme.

    Puedes probar a insertar un salto de línea (br) después de la imagen (en cada entrada)

    Espero que te sirvan las sugerencias

  • #31589

    losojosdemicara
    Participante

    Gracias por la respuesta daviz1982.

    Lo del espacio </br> no funciona. Respecto a la etiqueta ‘img’ no está en mi hoja de estilos. El tema de mi blog es bastante soviético (shape), muy austero, y el css es muy muy corto. Imagino que esa etiqueta se puede meter en algún sitio pero como no tengo una referencia y no tengo apenas idea de código, no se donde ponerla…

  • #31591

    losojosdemicara
    Participante

    A continuación, el css en cuestión:

    /*
    Theme Name: Shape
    Theme URI: http://themeshapes.com/shape/
    Description: A search engine optimized website framework for WordPress.
    Author: Ian Stewart
    Author URI: http://themeshapes.com/
    Version: 0.1.2
    Tags: threaded-comments, microformats
    .
    The Shape Theme for WordPress is copyright ThemeShapes http://themeshapes.com/
    Like WordPress, this work is released under GNU General Public License, version 2 (GPL).
    http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
    .
    */

    /* Import a basic layout */
    @import url(‘styles/2c-r.css’);

    /* Reset default browser styles */
    @import url(‘styles/reset.css’);

    /* Rebuild default browser styles */
    @import url(‘styles/rebuild.css’);

    /* Basic WordPress Styles */
    @import url(‘styles/wp.css’);

    body {
    margin: 1.5em 15%;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal;
    color: #000000;

    }

    a:link {

    color: #000000;
    font-weight: bold;
    text-decoration: none;
    }
    a:visited {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
    }
    a:hover {
    color: #ff6600;
    font-weight: bold;
    text-decoration: none;
    }
    a:active {
    color: #ff9900;
    font-weight: bold;
    text-decoration: none;
    }

    /* =Header
    ————————————————————– */

    #branding {
    margin: 0 0 1.5em 0;
    }

    /* =Menu
    ————————————————————– */

    #access {
    margin: 0 0 1.5em 0;
    overflow: auto;
    }
    .skip-link {
    display: none;
    }
    .menu ul {
    list-style: none;
    margin: 0;
    }
    .menu ul ul {
    display: none;
    }
    .menu li {
    display: inline;
    }
    .menu a {
    display: block;
    float: left;
    }

    /* =Content
    ————————————————————– */

    .post {
    margin: 0 0 3em 0;
    }
    .entry-content, .entry-summary {
    margin: 1.5em 0 0 0;
    }

    /* =Navigation
    ————————————————————– */

    .navigation {
    margin: 0 0 1.5em 0;
    overflow: auto;
    }

    /* =Widget Areas
    ————————————————————– */

    .widget-area ul {
    list-style: none;
    margin-left: 0;
    }
    .widget-area ul ul {
    list-style: disc;
    margin-left: 1.1em;
    }
    .widget-area ul ul ul {
    margin-left: 2.5em;
    }
    .widget-container {
    margin: 0 0 1.5em 0;
    }

    /* =Temporary styles until the
    directory can read @import

    .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

    .alignleft {
    float: left;
    }

    .alignright {
    float: right;
    }

    ————————————————————– */

  • #31595

    daviz1982
    Participante

    Es raro que no funcione el [code]< br / >[/code].

    Si quieres probar lo otro, abre en un editor de texto el archivo “style.css” y escribes:

    [code]img{ display:block; }[/code]

    Prueba a ver si te funciona 😀

  • #31597

    losojosdemicara
    Participante

    No chuta. 😥
    Lo he puesto en todas partes pero no pasa nada…
    Gracias de todos modos.

  • #31602

    losojosdemicara
    Participante

    Hola,
    Sigo sin resolver esto.
    Tengo este problema:

    Cuando publico una entrada con imagen y añado un pequeño texto debajo, el texto se coloca a la derecha de la imagen, no debajo como a mí me gustaría.

    El problema está en el html de la entrada o en el css del theme?
    Álguien sabe qué puedo hacer?

    Aquí podéis ver el problema: http://www.pedroantonioperez.com/wordpress

    Muchas gracias y un saludo.

  • #31624

    daviz1982
    Participante

    A ver. Lo que tú quieres es esto: [url]http://img196.imageshack.us/img196/5901/sshot2ad.png[/url]

    Y lo que ahora tienes es esto: [url]http://img4.imageshack.us/img4/4458/sshot1wf.png[/url]

    Lo único que he hecho ha sido poner ‘<‘br ‘/>’ (sin comillas)

    Y esa etiqueta la tienes que escribir en el editor cuando esté activado el modo HTML (pestaña arriba a la derecha)

  • #31632

    losojosdemicara
    Participante

    Probaré como dices. De momento lo he solucionado creando en el código una tabla de 2 filas y una columna. En la primera fila meto la imagen y en la segunda el texto. Pero lo que tu dices parece más fácil.

    Muchas gracias por la ayuda y por las molestias que te has tomado!!
    Un saludo. 😉

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

Pin It on Pinterest

Ir al contenido