Ayuda con diseño de Suscripcion y bloque de articulo

  • Autor Autor Emis
  • Fecha de inicio Fecha de inicio
Emis

Emis

Dseda
Redactor
Verificación en dos pasos activada
Verificado por Whatsapp
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&amp;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&oacute;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&eacute;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>
Hacer clic para expandir...


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>
Hacer clic para expandir...

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;}
Hacer clic para expandir...

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

Saludos, y espero que me ayuden.
 
Última edición:
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 =)
 
Última edición:
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&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 =)
Hacer clic para expandir...

Fijate como queda, y nose porque se muestra con letra en blanco.
 
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
 
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?
 
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 🙂
 
Trata de ponerlo asi...

HTML: 
.postInfo {
border-bottom: 1px #E5E5E5 solid;
color:#555555;
padding-bottom:10px;
}
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

R
Ayuda con diseño web para divs y tamaños dinámicos
Respuestas
11
Visitas
1K
yockerzard
Y
H
Ayuda con diseño de menú CSS
Respuestas
5
Visitas
1K
hamedm
H
Atrás
Arriba