Problema maquetación web

Nucklear #1 Dic '11 BugHunter

Hola, estoy haciéndome un theme para wordpress y tengo un pequeño problema. Quiero añadir los enlaces a etiquetas y comentarios junto a su correspondiente icono debajo de la imagen de cada post de la siguiente manera:

Para hacerlo creo un div que engloba todo y con la etiqueta span agrupo el icono con el texto de cada uno, el html de esa parte es este:

<div class="tag_comments">
   <span class="tags">
      <span id="tag_icon"></span><a id="tag_text" href="#">Etiqueta 1</a>
   </span>
   <span class="comments">
      <span id="comments_icon"></span><a id="comments_text" href="#">7 comentarios</a>
   </span>
</div>

Luego con css sustituyo el span tags y comments por sus iconos correspondientes, pero el texto me pisa los iconos o no aparecen las imágenes.

Este es el CSS para esa parte, igual es muy temprano y no veo alguna chorrada:

#central_wrapper #content .post #post_left .tag_comments{
padding-top:10px;
font-family:"Arial", sans-serif;
font-size:10px;
}
.tags span{
background:url(images/icon_tag.png) no-repeat;
float:left;
height: 16px;
width: 16px;
}

.comments span{
background:url(images/icon_comment.png) no-repeat;
height: 16px;
width: 30px;
}

.tags a,.comments a {
text-decoration:none;
font-weight:bold;
color:#899752;
} 

.tags a:hover, .comments a:hover, .tags a:active, .comments a:active{
text-decoration:none;
font-weight:bold;
color:#740000;
}

También me serviría saber cual es la mejor forma de hacer esa línea.

eXtreM3 #2 Dic '11

Puedes añadir una imagen de cuando se te ve mal? Si lo veo me hago una idea más rápido y será más facil ayudarte.

1 respuesta

Nucklear #3 Dic '11 BugHunter

#2 Ahora lo he arreglado pero de una manera muy cutre le he dado float:left y float:right para separarlos pero no es lo que quería hacer.

Lo que pasa es que el texto "7 comentarios" se pone justo encima del icono de los comentarios (bocadillo) y me parecer que darle un padding para moverlo es una chapuza.

SicKneSs #4 Dic '11

#1 es más sencillo meter los iconos como background del div (background: url('...')) y dentro del div metes un span con el texto, colocando el texto con 'padding'.

el CSS de forma rápida sería algo asi:

div.iconos {
   background: url('ruta_imagen');
}

div.iconos span {
   padding-left: 10px;
}

y el código HTML así:

<div class="iconos">
   <span>Etiquetas</span>
</div>

1 respuesta

Khanser #5 Dic '11 :psyduck:

Edit: Burrada was here

Nucklear #6 Dic '11 BugHunter

#4 Si, voy a hacerlo así que lo tengo un poco liado. Ahora tengo otro problema por escribir jeroglíficos en vez de código limpio, a ver si alguno me ayuda xD

Tengo un div central que agrupa el sidebar y el bloque de los posts, quiero que se adapte automáticamente al contenido así que le pongo width:auto el problema es que cuando lo pongo así el footer sube como si no hubiese nada. Me pasa lo mismo con el fondo blanco del post, si lo pongo en auto queda la imagen, y los textos sin fondo.

Aqui está el código del contenedor central, el de los posts y el post:

/*Contenedor de posts y sidebar*/
#central_wrapper{
width:982px;
margin-top:10px;
height:auto; 
}

/* Posts */
#central_wrapper #content{
width:642px;
float:left;
height:250px;

}
/* Post*/
#central_wrapper #content .post{
background:#ffffff;
display:block;
width:642px;
border-radius:5px;
box-shadow: 5px 5px 7px #949494;
height:100%; 
}

y este es el código del footer:

#footer{
height:43px;
width:982px;
padding-top:10px;

}
/*Solamente se sube esta imagen, los textos se mantienen en su sitio*/
#footer #bar_foot{
background:url(images/bar_foot.png);
height:43px;
width:100%;
}

Nucklear #7 Dic '11 BugHunter

¿Nadie?

SicKneSs #8 Dic '11

¿dónde tienes metido el div #footer?

¿dentro de #central_wrapper no?

enseña el fragmento de código de HTML para que te ayudemos mejor.

1 respuesta

Nucklear #9 Dic '11 BugHunter

#8 Está asi:

<body>
<!--Contenedor para centrar el contenido en la página-->
<div id="center">
	<!--Cabecera-->
	<div id="header">
					
</div>
<!--Contenedor para el cuerpo del blog-->
<div id="central_wrapper">
	<!--Bloque de los posts-->
	<div class="post">
	</div>
	<!--Barra lateral-->
	<div id="sidebar">
	</div>
</div>
<!--Pie de página-->
<div id="footer">
</div>
</div>
</body>

El footer está fuera, lo cual me mosquea mas xD

1 respuesta

Sonos #10 Dic '11 MV Wizard

Aupa #9

El footer te está flotando, prueba a poner en el css #footer

clear:left;

1 1 respuesta

Nucklear #11 Dic '11 BugHunter

#10 ¡Ahí le has dado! Gracias tio, son de esas cosas que cuando te las dicen dices ¡Obvio! xD

Problema maquetación web

Usuarios habituales

Tags