Ayuda con diseño de Suscripcion y bloque de articulo

Emis · 29 Mar 2011

Tengo un problema hace tiempo y no le encuentro la vuelta para una solucion aver.

En el sitio, que tengo el problema veran en el lado derecho del sider dice "Suscripcion", y se daran cuenta que eso esta todo desordenado.
Tiene que quedar de esta forma ese bloque ver imagen.

El codigo en HTML del bloque que tengo puesto es este. Y me faltaria el codigo en .CSS para poder arreglar el problema de tipografia del bloque no?

<h2 class="rss">Suscripcion:</h2>
<div><div
class="suscribe"><a
href="http://feedburner.google.com/fb/a/mailverify?uri=Jugoweb&loc=es_ES" rel="nofollow"><img
src="http://d234ri4iotalz2.cloudfront.net/favs/e.png" alt="Mail" width="48" height="48" /></a><p><strong>e-mail</strong><br/>Recibe un correo electrónico diariamente</p></div><div
class="suscribe"><a
href="http://feeds.feedburner.com/Jugoweb" rel="nofollow"><img
src="http://d234ri4iotalz2.cloudfront.net/favs/r.png" alt="Feed" width="48" height="48" /></a><strong>RSS</strong><br/><p>Léenos regularmente mediante tu lector de Feeds</p></div><div
class="suscribe"><a
href="http://twitter.com/jugoweb" rel="nofollow"><img
src="http://d234ri4iotalz2.cloudfront.net/favs/t.png" alt="Twitter" width="48" height="48" /></a><strong>Twitter</strong><br/><p>Sigue nuestras actualizaciones en Twitter</p></div></div>
<div class="both"></div>
</div>

Ahora otro error que tengo y no le encuentro solucion es al bloque que va debajo del titulo de cada articulo, me refiero a esto, click para ver la imagen.. Si ustedes veran en el sitio, esta de una forma desordenada con saltos en linea. Y tendría que quedarme como la imagen que les mostré.

El codigo en PHP del bloque que esta puesto en el sitio desordenado es este.

<div class="postInfo">
<div class="Gravatar">
<?php echo get_avatar( get_the_author_email(), '38' ); ?>
</div>
<div class="Meta">
<p>Escrito por <?php the_author_posts_link(); ?> el <?php the_time('d') ?> de <?php the_time('F') ?> de <?php the_time('Y') ?> </p>
<p>Guardado en: <?php the_category(', ') ?></p>
<p><?php comments_popup_link('0 Comentarios', '1 Comentario', '% Comentarios'); ?></p>
</div>
</div>

Y el .CSS del mismo es este

.postInfo {border-bottom-color:#E5E5E5;border-bottom-style:solid;border-bottom-width:1px;color:#555555;padding-bottom:10px;}
.Gravatar {float: left; margin-right: 5px;}
.Meta {font: italic 11px verdana,arial,helvetica,sans-serif;}

¿Que error hay para que tenga saltos en linea?.

Saludos, y espero que me ayuden.

Victor Hernandez · 29 Mar 2011

align="left"

Para lo primero se me ocurre:

HTML:

<h2 class="rss">Suscripción:</h2>
<a href="http://www.websapp.net/" rel="nofollow"><img src="http://d234ri4iotalz2.cloudfront.net/favs/e.png"  align="left" alt="Mail"  width="48" height="48"  /></a><strong>e-mail</strong><br/><p>Recibe  un correo electr&oacute;nico  diariamente</p>
<a href="http://www.websapp.net/" rel="nofollow"><img src="http://d234ri4iotalz2.cloudfront.net/favs/r.png" align="left" alt="Feed"  width="48" height="48"  /></a><strong>RSS</strong><br/><p>L&eacute;enos  regularmente mediante tu lector de Feeds</p>
<a href="http://www.websapp.net/" rel="nofollow"><img src="http://d234ri4iotalz2.cloudfront.net/favs/t.png"  align="left" alt="Twitter"  width="48" height="48"  /></a><strong>Twitter</strong><br/><p>Sigue  nuestras actualizaciones en Twitter</p>

¿Se me ocurre agregarle alineación a las imágenes? (align="left")
Y asi ya no haces llamada al CSS, claro que si quieres estilo en la font, tendrías que agregar los etiquetas <div> que le borre a este fragmento y agregar su respectiva etiqueta en tu hoja de estilo =)

Emis · 29 Mar 2011

Victor Hernandez dijo:
align="left"

Para lo primero se me ocurre:

HTML:

<h2 class="rss">Suscripción:</h2> <a href="http://www.websapp.net/" rel="nofollow"><img src="http://d234ri4iotalz2.cloudfront.net/favs/e.png" align="left" alt="Mail" width="48" height="48" /></a><strong>e-mail</strong><br/><p>Recibe un correo electrónico diariamente</p> <a href="http://www.websapp.net/" rel="nofollow"><img src="http://d234ri4iotalz2.cloudfront.net/favs/r.png" align="left" alt="Feed" width="48" height="48" /></a><strong>RSS</strong><br/><p>Léenos regularmente mediante tu lector de Feeds</p> <a href="http://www.websapp.net/" rel="nofollow"><img src="http://d234ri4iotalz2.cloudfront.net/favs/t.png" align="left" alt="Twitter" width="48" height="48" /></a><strong>Twitter</strong><br/><p>Sigue nuestras actualizaciones en Twitter</p>

¿Se me ocurre agregarle alineación a las imágenes? (align="left")
Y asi ya no haces llamada al CSS, claro que si quieres estilo en la font, tendrías que agregar los etiquetas <div> que le borre a este fragmento y agregar su respectiva etiqueta en tu hoja de estilo =)

Fijate como queda, y nose porque se muestra con letra en blanco.

Victor Hernandez · 29 Mar 2011

A ver como te va con este:

HTML:

<div class="suscripcion"><h2 class="rss">Suscripción:</h2>
<a href="http://www.websapp.net/" rel="nofollow"><img src="http://d234ri4iotalz2.cloudfront.net/favs/e.png"  align="left" alt="Mail"  width="48" height="48"  /></a><strong>e-mail</strong><br/><p>Recibe  un correo electr&oacute;nico  diariamente</p>
<a href="http://www.websapp.net/" rel="nofollow"><img src="http://d234ri4iotalz2.cloudfront.net/favs/r.png" align="left" alt="Feed"  width="48" height="48"  /></a><strong>RSS</strong><br/><p>L&eacute;enos  regularmente mediante tu lector de Feeds</p>
<a href="http://www.websapp.net/" rel="nofollow"><img src="http://d234ri4iotalz2.cloudfront.net/favs/t.png"  align="left" alt="Twitter"  width="48" height="48"  /></a><strong>Twitter</strong><br/><p>Sigue  nuestras actualizaciones en Twitter</p></div>

En tu hoja de estilo:

HTML:

.suscripcion {
    font-family: Verdana, Geneva, sans-serif;
    color: #7d97a4;
}

si quieres un color diferente para la descripción de la suscripción tienes que crear una clase nueva xD

Por cierto a ver si Carlos no se enoja por que le "pedimos prestado" su código fuente xD

Ahh y te quedaba en blanco por que ese es el color de fuente que esta predeterminado en la plantilla =p

Emis · 29 Mar 2011

Ahi quedo bien gracias, el tema que no le puedo cambiar el color blanco a la fuente 🙁

Ahora me falta el otro error con el bloque.. Aver quien me ayuda en esto?

Victor Hernandez · 29 Mar 2011

Si agregaste a tu hoja de estilo (.css) ¿el segundo código? Es por eso lo del color, lo del segundo bloque no se ve la imagen de como quieres que quede 🙂

Emis · 29 Mar 2011

Victor Hernandez dijo:
Si agregaste a tu hoja de estilo (.css) ¿el segundo código? Es por eso lo del color, lo del segundo bloque no se ve la imagen de como quieres que quede 🙂

Si agregue el codigo .css

La imagen del segundo problema es esta, http://i55.tinypic.com/294qkhg.jpg

anggar85 · 29 Mar 2011

Trata de ponerlo asi...

HTML:

.postInfo {
border-bottom: 1px #E5E5E5 solid;
color:#555555;
padding-bottom:10px;
}

Emis · 29 Mar 2011

anggar85 dijo:
Trata de ponerlo asi...

HTML:

.postInfo { border-bottom: 1px #E5E5E5 solid; color:#555555; padding-bottom:10px; }

No cambio nada sigue igual.

Ayuda con diseño de Suscripcion y bloque de articulo

Emis

Victor Hernandez

Emis

Victor Hernandez

Emis

Victor Hernandez

Emis

anggar85

Emis

Temas similares

Privacidad y transparencia

Privacidad y transparencia